About → User Interface

Why does Dev-C++ even bother with an “Auto-Indent” feature? Here, I type the same two code samples. I type only the code and let Auto-Indent handle the rest.

My coding style:

Alternate coding style:

Writing some code then turning it off:

Not a big deal in that last case, but what happens when you are working inside a huge multi-tiered nested structure? Do you really want to manually indent all of that? Especially while your dual-core supercomputer, the one that can execute billions of instructions per second, just sits there idle?

So the end result seems broken, let’s examine what the process of trying to fix it is like. I call these correction processes crap rituals. Programmers are probably all to familiar with these.

Ok let’s hit enter and type the brace…

What I expected but not what I want, lets backspace the brace…

Ok gone, just gotta backspace to the right spot…

Almost there, just gotta press Shift and–

–what the fuck?

Even worse, this is what we get in the Options screen:

“Caret will position to first non-whitespace of preceding line“. No, caret gave up and went to column 0. And why is the checkbox for Auto Indent grey? Regardless if the box is ticked or not, the background is grey. Usually that means it’s an option for a subset of features, some being on some being off. That doesn’t really seem to mean anything here.

Lastly, when you type a close curly brace, the behavior of future deletion changes depending on where the cursor is. If the cursor is directly to the left of the brace and you press Backspace, it backspaces more than one positions, as if you just removed a tab. But there wasn’t a tab - you can click (or arrow-key) to any individual space between the left margin and the curly brace. So sometimes it removes a little and sometimes it removes a lot? And why does Backspace behave this way but Delete does not? Why did they even bother implementing this?

This is a common issue in many IDEs out there. Auto-Indent features are supposed to save us time, not give us more work trying to figure out when to expect a space or a tab or ok if I press backspace now it’ll go to column 0 so I better click over here and press delete twice then hit enter so it indents the new line properly ok now I can move back up and close my brace. If your Auto-Indent forces people to create, test and tweak crap rituals, then your feature has failed.

I have to say my (limited) experience with Microsoft’s Visual Studio IDE’s have been pretty good in this regard. It does what you expect and allows you focus on your code.

Facebook has a platform for developing applications, and they provide lots of help and assistance to developers seeking to leverage their offerings. However, their Facebook Platform Help has one of the most hilariously bad UIs for showing content under subheadings.

Here’s the initial view:

Here’s what happens when I click the four “links”:

There’s basically two ways to do this correctly:

1. Just show the damn content, it’s not like there’s that much of it anyways
2. If you really have a ton of helpful information in each item, the links should be, well, links to the other pages with the information

Instead you have some sort of hybrid approach that sucks.

Lessons:

1. Things that look like links should act like links
2. Don’t hide data when it’s unnecessary

In today’s world of flashy GUIs and complicated IDEs, default font selection seems to be nothing but a short afterthought. I experienced a prime example of this earlier today while working with Processing. I should first point out that I am a huge fan of Processing and this should in no way discourage anyone from trying it. It’s ridiculously easy to use (assuming you are familiar with basic Java) and people have done some pretty interesting visualization stuff with it.

So earlier I was busy working on a program (”sketch” in Processing lingo) and needed to reference a variable I had created earlier. It’s name was 2 characters, lowercase ‘e’ followed by…hmmm, is that a numeric one or a lowercase ‘L’? Can’t remember what I typed, so I tried both, no good. It turns out the problem was something else entirely, but it made me take a step back and really examine the default Processing font. I moved to a blank line and typed a numeric one followed by a lowercase “L”. Here’s what showed up:

Hmm well that looks pretty hard to tell apart, let’s blow that up:

Wait, what order did I type those in again?

Well that’s interesting, the lowercase ‘L’ has a vertical column that’s one pixel thicker than the numeric one, what the hell?

Why would a font designer in their right mind make 2 characters look virtually identical? I say “virtually” because you can sort of tell when they are blown up ~13.5x and are directly next to each other, but even then there is still no way of knowing which one is which unless you recall the order you typed them. The entire point of character sets are to uniquely identify individual language constructs. Here you can’t even tell if it’s a numeric digit or a letter. That seems like a pretty big failure.

Even worse, why would a team creating a programming language + IDE on top of Java (that’s built around the concept of graphics and visualization) choose a font like this? That doesn’t make any sense to me.

There are a ton more shitty-font examples out there (similar characters, hard to read punctuation, etc) that I won’t get into. So what’s the solution here? Use a font built for programming! A simple Google search for “programming font” will get you this useful site. I’m partial to Profont / Sheldon. They are pretty small and can look cluttered when there is a lot of dense code on the screen, but they are always easily readable. Perhaps one day all IDEs will be developed with the understanding that there is more to a programming font than monospacing.

Microsoft Live Labs has released a product called Listas for managing lists. I have no idea why lists are so important they require their own web 2.0 app, but who am I to question MS?

I noticed their tour makes a common mistake: the hitboxes for the next and back arrows are just too damn small, at 11×19. They’re the size of the images instead of being huge (hitboxes highlighted in red and blue):

Here’s the right way to do it, making the boxes as huge as possible:

If I happen to click right next to an arrow, what did I probably want that click to do? Certainly not “get my mouse click thrown away”. Since a web app usually won’t intercept all clicks and guess where they should go, you have to plan ahead, and that means surrounding these controls in a CSS box that allows for the same linking the arrow images do.

Other fixes:

Why not use text saying NEXT or NEXT PAGE or TELL ME MORE instead of small arrows that blend into the background?

How about adding a mouseover animation so the user knows they’re able to click and get an action instead of just making them guess that the arrows do something?

Generally speaking, throwing away user input is always a bad idea.  It’s up to us to guess what the user intended and act on it as best we can.

I just watched the CNBC documentary, The eBay Effect. Here are my impressions:

Every executive interviewed was fantastic at dodging questions, and rarely answered anything that was asked of them, and usually turned the interview into an opportunity to promote the same aspect of eBay that was being criticized. I really need to learn how to talk like this. Example:

David Faber, CNBC: Some people say you under report fraud, you don’t make it as available on the site, in terms of your education tools, as you might because you don’t want people thinking that way.
Meg Whitman, eBay CEO: Well, I suppose at the highest level that that may be true, there’s a balance there David. I suppose you don’t want that to be sort of the market message of the company but at the same time you want the bad guys and the community to know that we’re watching, we’re gonna catch you, and we’re gonna put you in jail if we can find you and work with the police.

David only really made a weak statement here instead of asking a direct question. Meg begins her reply with the confusing phrase “at the highest level”. Does that mean at the CEO and board level of eBay? The top level of the site’s usage and navigation? The user aggregate? When David asked the question, he certainly wasn’t interested in the “highest level”, whatever that is. He wants to know what they’re doing about fraud for each individual user. Then she goes on to agree that the company has a lot of motivation to conceal and downplay any talk about fraud on eBay. She then make the non-committal conditional statement that “if we can find you” and the police help, eBay might make an effort, otherwise they’re not as interested. If you deconstruct her response, it’s not really as comforting of an answer as an eBay user would like to hear.

There was a section on customer support. I have found that customer support largely varies with marketshare. The smaller the marketshare of the company, the more fanatical their support is, to the point where you will literally be talking to the owner or CEO of a small company. This passion leaves as the company dilutes itself with additional employees in the support area, with less training, less knowledge, and less stake in the company’s success. Companies also become aware that they can simply make a sacrifice and accept some percentage of angry customers in exchange for lowered support costs.

At some point in the past, eBay raised a lot of fees associated with running a small business with eBay as a storefront. The store owners were complaining about this, and eBay had the interesting response that they were in fact trying to squeeze out the small sellers that didn’t move a lot of goods, and push them onto the general marketplace area of the site. They did this with the best motivator: money. I would have suggested this response myself, even. But it had the unintended effect of generating a lot of customer backlash and ill will. eBay users definitely feel a sense of entitlement since they feel they bring all the value to the site (which is largely true). I think eBay does not fully appreciate the way customers feel about their site.

The report also primarily used a fisheye lens focused on a monitor to highlight areas of interest on the site. I thought it was a really great camera technique for showing a web page. It didn’t make the page feel pixellated, or give the vague worthless impression that zoomed out scrolling does. It made the site feel a lot like the way it actually feels when you’re using it: you notice the whole page but only really see a small area of it at a time.