Form over Function

Oh great -- a Brazil-esque bureaucratic nightmare.

Forms can be usability disasters:

Forms force you to use the mouse.

Many forms use radio buttons or dropdown menus under the theory that users are more comfortable "picking from lists" rather than just entering data off the top of their heads. Most of the time though, especially when users are confident in their answers, it's just easier to let them type the answers directly rather than requiring users to shift hand positions several times while entering a small amount of data.

Dropdown menus are particularly useless. They are useful when users have to pick from a list of values, but it's almost always easier to pick values from an autocompleting list than scan (and possibly scroll) down a dropdown:


Dropdowns are easier to navigate when there are fewer options, but in this case radio buttons are often even better. If you must have a dropdown, at least give users the ability enter values with the keyboard in addition to choosing from a list.

Forms often request unnecessary information

Why do I have to enter my city, state, and zipcode whenever I want something delivered? City and state are derivable from zipcode! Mint.com is one of the only websites that gets this right:


Also notice that Mint validates your entry automatically without your having to press submit. Once a form is submitted, the only way it can notify users about problems is to reload the page. But when the page gets reloaded like this, users don't know what state their data is in. Can they just correct the one error? Or do they have to re-enter other information that was previously entered correctly. Many websites clear password fields in this case, many do not.

Forms are often unnecessary

The reason to force users to fill out a form is to gather explicitly structured data -- you want to know that this part is the city, this other part is the zipcode, etc. However, it's not always necessary to force users to explicitly structure the data they enter; often it's possible to parse their plain text entry and guess at the structure. (This is particularly effective when it's easy for users to correct errors).

For example, imagine if Google Maps used a conventional form to ask you for an address:


Google Maps doesn't ask you to structure your input because it's possible to guess what you mean by looking at an unstructured string of text. There's no reason that online vendors couldn't use this same strategy.

Here is my ideal address entry "form":


You enter any string in the address box that unambiguously identifies your location. The map and postal address below update automatically so you can see if what you've entered is incorrect.

Show Don't Tell

Here's a nice little interface from the Mac's Keyboard & Mouse preferences. The window on the right shows a video of someone performing the action that you're deciding whether to enable on the left. This allows for fewer words on the left since they don't have to write out something like "Allow tapping with two fingers simultaneously to count as a secondary click".

Of course the worst possible option is to keep a sparse description, but add no graphic content to fill in the gaps. Take this interface from FireFox, for example:What the fuck is "smooth scrolling"? The name explains nothing (unlike the excellent "Check my spelling as I type"), and we're given no context from it's location in options (Options » Advanced » General » Browsing). Finally, the name gives no indication of what would make me want to turn it on or off -- what's the alternative to "smooth" scrolling -- "jerky" scrolling? That sounds terrible!

There is no analogous option in the Safari browser since Safari just makes the decision for you. This offers less flexibility, but functionally FireFox is doing the same thing since no one will ever experience "smooth scrolling", decide that he doesn't like it, and know to look for this option.

Of course Safari has demons of its own (Ariel just heard me say that aloud to myself as he emerged from the shower). Take for example this dialog that it pops when you try to close multiple tabs:In an ideal world of course, this dialog wouldn't be necessary. If you tried to close Safari in this situation, it would just close, and if this were an accident you could easily restore your old tabs. We're getting there, but this dialog is probably still necessary.

However, compare this dialog to the exact same dialog in FireFox:Safari's version:

1. Has an unnecessary amount of header text ("Are you sure you want to close this window?" versus "Confirm Close.")
2. Makes the most important piece of information (the number of open tabs) too small (I would prefer it were bigger in the FireFox version as well)
3. Doesn't allow the user to preempt future annoyances by unchecking "Warn me..." (this isn't a great UI pattern since the user might be afraid to un-check this box since there's no obvious way to re-check it, but it's probably better to have the box than to not).

I'd improve on both versions by emphasizing the relevant information (the number of tabs), and cutting down on filler text, particularly jargon (e.g., "window"). What about this: