I'm Aza Raskin @azaaza. I make shiny things. I simplify.

I'm the Creative Lead for Firefox.

 

Good interfaces create good habits

Sponsored by

When you’re first learning how to use even the best of interfaces, preserving your train of thought can be hard because so much of your mind is focused on how to use it, rather than on what you’re trying to do. As you become more proficient at using a good interface, it eventually becomes second nature — it becomes a habit, like walking or talking. You don’t need to think about what sequence of motions you need to perform an action because it’s like your hands have memorized them as a single continuous gesture, saving you the trouble of having to think about them.

Have you ever felt trepidation sitting down to drive someone else’s car, and spent the first couple of minutes “getting a feel” for the controls? That’s the acclimation period where you are concentrated on the “how” instead of the “what” of what you are trying to do. After the controls — the interface — becomes internalized, you don’t need to think about the “how” any more. They’ve become invisible.

Bad interfaces, on the other hand, prevent bad habits from forming — or, worse, they can cause you to form actively bad habits. Have you ever closed a window and hit “Do Not Save”, only to realize a split second too late that it was exactly what you didn’t want to do? That’s a bad habit developed trained into you by a bad interface.

Good interfaces make forming good habits really easy, and they make forming bad habits nearly impossible.

Question: What are some of your favorite examples of interfaces they train you wrong and set you up for failure?

RT @azaaza Good interfaces create good habits | Follow @azaaza on Twitter | All blog posts

View all 33 comments



RichB

1) Hitting the Enter key in OSX Finder performs a rename. WTF?
2) A handle/pull bar on a door which is push-only.

The same principles of interface design also apply to API design. Rico Mariani termed this the “Pit of Success”:
http://blogs.msdn.com/brada/archive/2003/10/02/50420.aspx


I hate switching betwen Adobe Indesign (and other Adobe-Product) and MS Visio: All the important shortcuts are different: strg+w = alt+0; strg+scrollweel instead of strg+minus… and so on. Its even wore switching to the mac where even the zoom by scrollweel works different (doent it?).
Luckily switching cars is similar but not nearly as hard — or i would have been in some accidents with no strg+z at hand :).

btw: strg = control :)


The commenters are already answering the question wrong. Switching from one interface to another causes disorientation, but not necessarily because either interface is bad.

This is an important distinction, and Aza was careful to avoid implying that this phenomenon was a bad thing. It’s perfectly normal, as his car example shows.

Many Windows users who switch to Mac get frustrated by many of the changes, but after a while they get used to it. And vice-versa, I would add.

Let’s see if anyone can answer Aza’s question: Where has a bad interface made a transition or learning curve needlessly more complicated? Not just a change, but a change from a bad UI to a good UI (or, I would add, from a good UI to a bad one)?

Aza, the obstacle you are getting at here, I think, is the tendency for people to blame the new app/paradigm when it may well be the old app/paradigm’s fault. Totally true.


Video game save dialogs. There are some dumb autoselections (esp. the “choose the first one in the list”), and the secondary dialog just trains you to hit up, enter without reading it. It’s not until it’s actually saving that you realize you overwrote the wrong one…



Simon

Some elevators have terrible user interfaces. While most will arrange the floor-buttons in a vertical way, I’ve seen some that arrange them horizontally or in two columns, which is just totally unintuitive.


My favourite example for bad interfaces is that use ‘Yes/No’ buttons in the messages. Users always tend to hit the wrong button. Rather, clear action words (like, Overwrite, Delete, Save) as the command button text always helps. And, users need not carefully read the messages. They can just read the text on the buttons. To strike it rich, some applications put icons on the buttons (showing red bulb, etc) for actions that cause data loss or do other damage.

Another is renaming files in Windows. When you press F2, it selects the file extension (if chosen to be shown) also. And, in most cases users do not want to change the file extension.


Toggle buttons that have the action they will perform when pressed as their label. For example: when they’re disabled they say “Enable” and when they’re enabled they say “Disable”.


Certain web browsers frequently pop-up modal warning boxes: “This page contains both secure blah blah blah don’t understand Yes/No?”

User encounters this a lot, and quickly learns that hitting the enter key will make it go away.

Later, another modal dialog pops up, warning that the information they’ve typed into a form is going to be transmitted without encryption. User just sees a generic warning box and hits enter instantly. User has just sent credit card details in cleartext.



Chris

Seems like every stove I’ve had has the burners laid out in a square, but the controls are in a line. Even after years of using it I’m always finding that I turned on the wrong burner.



Peter Kasting

“Window contains multiple tabs, do you really want to close?”

99% of the time, when you close a window, you want to close a window. This interface trains users that “hit X and then click yes” is all part of one contiguous action. That means that in that 1% case when you realize you didn’t want to close, you’ll realize it _after_ you’ve completed the close action — which includes saying “yes” to the prompt that supposedly would have saved you.

IMO this is a classic case of a dialog in browsers that does very little good and yet slows down the common case.


Setting the timer on my microwave. To use the microwave to warm up food, I enter the time and then press “Start”. But when I use the timer, I have to press “Timer”, enter the time and then press “Timer” instead of “Start”. The first dozen times I messed up and press “Start” on the first attempt.


The example I use for this is from the three elevators at my old condo building. See here:

http://flickr.com/photos/menros/3304130070/

If you look at the first (left-most) pair of button panels, you’ll notice that they differ in layout, which means you can never just habituate to one location. In the picture, the button for floor 11 is sometimes in one place, sometimes in another.

What makes this so nefarious, though, is that with the first two panels, at least, the overall visual shape of the button panel differs (two buttons on top or not), which means that, over time, you could learn that when the panel looks one way, the button is here, and and when it looks that way, the button is over there. But – then look at the third panel: the overall shape is that of the middle panel, but the button is back where it is in the first case.

It was impossible to just learn where the button would be.


@aza: Reading your post again I am wondering what you mean by “Bad interfaces, on the other hand, prevent habits from forming” and “…and they make forming bad habits nearly impossible.” — Isnt one of ‘the humane interface’s’ messages, that user always form habits? Because the process of automisation doesnt care it its good or bad (or if the result is good or bad).

@Christopher: I dont agree. Its the apps fault not to look at common shortcut-standards (or maybe the plattforms fault not to define such standards) not mine to think that they should work here the same as there.
And its the plattforms decision to help users from other plattforms to overcome those problems… or not to do so — thats what donald norman talks about in ‘the invisible computer’ with his gramophone-examples (the leader doesnt have to be compatible, the not-leader should…)



Jesper Kristensen

My favorite example is actually Firefox.

When you close a window with multiple tabs, you can get one of two dialogs, which looks exactly the same. One icon (same in both boxes), one line of text and some buttons in the bottom of the box.

When no other Firefox windows are open, the first button is the “Save” button, but if the addons manager, the download manager or something similar is open in the background, the first button is the “Don’t save” button.

Oh, I have lost many tabs clicking the first button in reflex.


Those stupid PIN pads at retail stores where you use your debit card. The interaction usually goes like this:
1) Swipe your card
2) Enter your PIN
3) Press Yes
4) “Would you like cash back?” -> Press No
5) “Is this amount ok?” -> Press Yes

So you basically type 4 digits, then Yes/No/Yes in quick succession. Then some stores throw you a curveball by inserting a “Would you like to donate $1 to charity?” in there somewhere, so your muscle memory destroys you and you wind up pressing No to the amount ok question and starting over.

I once stood in line behind an older man and watched as he failed for about 10 minutes to correctly execute these steps. I think he had poor coordination, so he would accidentally double-press “No” at step 4, and it would kick him back to the beginning. It was painful for all involved. (Him, the cashier, and myself.)


@Seamus: Yes, microwave-UIs are the worst :)



JustinOpinion

1. An oft-cited example are the “smart” menus in the Windows XP start menu and in Microsoft Office. These menus hide infrequently used items, in hopes of having the important items be more visible. But the end result is menus that change so constantly that you can’t train your motor memory. You have to search the menu every single time.

2. Using TAB to switch between fields is appreciated by many users. Programs which have bad ‘focus layout’ (for lack of a better term) end up with the focused element/button jumping all over the place as the user presses TAB, making it impossible to develop a useful habit.

3. Some programs use different names for a given control or tool in different places. For instance the menu item and the tool-tip for the toolbar button will have slightly different names, making it difficult for the user to associate them and develop a better habit. (Inconsistent naming between the program and the help documents is also bad…)

4. Tool-switching is modal and often part of a poor interface. For instance Photoshop has a nice tool that allows you to move/resize/rotate all together, whereas GIMP uses a separate tool for each of these. This means the user always has to stop and think about which tool they have selected, and switch back and forth over and over (whereas in their mind moving, resizing, and rotating are all the same task: “I just want to reposition this thing!”)

5. Any program which doesn’t remember settings and requires the user to change them every time means the user develops a useless habit: every time they open the program they have to fiddle with it. Many file managers are bad at this (they don’t remember folder views or remember them inconsistently).

6. Not using the provided controls. Some website provide their own “forward” and “backward” navigation buttons, which breaks the user’s habit of using the browser’s navigation buttons. Similarly, if you open the Search program in Windows XP, you’re given options (“Pictures”, “files”, etc.) but if you select one and change your mind, the Explorer’s “Back” button is greyed-out: you’re supposed to use the (other!) “Back” button beside the “Search” button. Why have two back buttons?

7. Again on Windows XP Search, the user is given options for what to search: “Pictures”, “Documents”, “all files”… but from what I’ve seen users are typically impatient by the time they resort to search, and will just click on one of those without thinking. They will then not find what they want, have to go back a step, or just be confused. The interface conditions a bad habit of clicking and typing wildly until you find what you want. A better interface (where you could modify/refine your search without going backwards/forwards) would not create such a counter-productive habit.



karl

In Adobe photoshop, opening an original file, then making modifications, Save for Web the modified image. Close the image asks me if I want to save it with preselected Save, instead of no. I undersand the rationale for the preselected Save, but in *my* case I want it *no* 90% of time. Answer: the behaviour of UI should make possible specific user patterns. In this case, I should have the option of settings which button is proposed by default.

Space in the macintosh. I have 6 spaces running on two screens. Two issues. When switching from 2 to 1 screen, and then back to 2 screens. Space doesn’t remember that I usually puts some apps into the second screen. I have to manually to put them back there. Morality: Remember the working context of a user or make it possible for the user to specify these working contexts.
Second issue with Space. When I’m in one space with an application let’s say a browser and click on an email link, It jumps to the space with the email app, Mail.app. Please no, I need the email right under my eyes with the browser. The mail should be brought to the browser app, because it is my current context of work.

Firefox: If I set refuse all cookies in firefox. Then some sites are not working. Normal. So I want to reactivate the cookies for this site. Unfortunately I have to go through all preferences and the right tab, then search for the site, etc to do that. When a simple ctrl+click could help me to set the preferences for this site when I’m on it. (Opera does that).



pete

I like this one:

“Do you want to ignore the changes?”

Yes/No/Cancel…



Jimmy

At Thortons gas station pumps around by house it says.
Do you want a receipt (yes or no)
but the buttons are (no) (yes). I have to think every single time.


Anytime i find myself pausing in my speech while performing what should be a routine action of an interface (physical or not) i feel like something is wrong.


I love this post.


ZBrush has the worst implementation of Undo I have ever seen. You can undo the creation of an entire object, but you can’t undo changes you make to it while editing. Yes, maybe it’s different, maybe it makes sense for the paradigm, maybe I just have to get used to it, but isn’t Undo the kind of thing that should be fairly standardized? It certainly defies the claim of an almost non-existent learning curve, and definitely doesn’t make me want to pay after my trial runs out. Or use the trial again.



Simon

I can think of one from Firefox for you. I normally run with a single window open, with a bunch of tabs – when I want to quit, I close the window, safe in the knowledge that when I start up again, it will remember what I had open.

Unless, for some reason, I had another window open. At which point the first window is closed without saving it’s state, something I only discover once I realise there’s a second window. I don’t make that mistake often, but it’s real nuisance when I do.



Nathan

On Mac OS, I find the distinction between Alt+Tab and Alt+` jarring (the first switches between apps, the second between windows of the current app). Thanks to Firefox and other tabbed apps, when I use multiple windows in an app, I usually do so because the content is sufficiently distinct–thus my mental focus is on switching between types of content, not necessarily applications. That I am forced to think about which shortcut to use in switching represents, in my opinion, a failure of the window metaphor.



Nathan

Oops, I meant Command+Tab and Command+` (Windows verbiage crept in there; fortunately for this functionality, Command on Mac keyboards is in the same place as Alt is on Windows keyboards).


IIRC Vista “fixed” the renaming “bug” – renaming now doesn’t select the extension.


It usually confuse me when I see this dialog:

” Are you sure you want to navigate away from this page?
Your message has not been sent.
Press OK to continue, or Cancel to stay on the current page. ”

OK / Cancel

On Gmail, if you are composing something and go to inbox.

” Discard your message? ”

OK / Cancel

I think that Yes / No question would be better.

This dialog also confuse me a lot, I don’t know if I should look at the icon or read the button label:

http://i268.photobucket.com/albums/jj30/dttvb/DEL.png

It reminds me of the “Stroop Effect”, where you have to read the color not the word.

I am also confused by Vista’s replace file dialog:

” Choose which one to keep “


In EA’s “Skate” for Xbox 360, the default chosen option when you open up the game is “Create a new skater” (the second option is “Continue”).

(Almost) every other game lets you hit the accept button a few times and you can continue, this one sets you up for failure,



Juan Perez

Personally I get very irritated using shortcuts on Spanish versions of some products that I’m very habituated to.

Say, MS-Word ( but applies to a LOT LOT others )

Ctrl-C and Ctrl-V are universally implemented, thank god. They the example of good shortcuts ( what’s V stands for in english anyway? Vaste? :P )

When commands like Bold, Italics, Underline, Search etc gets “translated” a nightmare begins.

For instance. If you’re writing something and want to bold a word, you select it and press Ctrl-B and your selection appears in bold, what happens in my localized version is the Search Box pops up ( B after “Buscar” ) and you suddenly lost your train of though.

Then after 0.8 secs, you realize N will do ( ok then you type Ctrl-N: sigh!)

Minutes after you press Ctrl-I and nothing happens after loosing again the tot you realized Ctrl-K is the equivalent arrgg!!!!. And then again, your inspiration is gone.

And this repeats over and over for several shortcuts that took you some months ( or years ) in learning.

What I usually do is either get the english version or at install configure to use english. But sadly most of the times I have to “re-learn” the new ones.

Same thing happened to me at first ( some 8 yrs ago ) with computers keyboards.

At first, it was very hard to get a Latin layout, but nobody care, we all get use to the US layout. When new machines arrived all the essentials sings change its positions ( / \ ¡?=)_ all of them.

It was a pain to learn them again.

Funny anectode. Yesterday I was document editing in the web ( I don’t remember if it was @blogspot or Google docs ) and whenever I attempted to “bold” a word, my newly created habit typed Ctrl-N a new browser window appeared!!!!

The good thing, is our brain is capable to learn new things always.



ian

all volume controls except the ones with knobs.

Sound is inherently analogue, but people insist in digitizing sound controls. Creating levels from 1-10 that make it very difficult to find the right level.



Claudio Vandi

Love this topic, I am actually beginning a Phd on emergence, transfert and integration of habits in Interfaces. A first -now very old- series of good/bad habits between Mac/Win is here: http://www.uiah.fi/sefun/designsemioticsinuse.html (middle of the page: Claudio Vandi). I find here many examples I had been noting in a file named “bad habits” :) (like Win “smart” menus).
I am actually developing a bad habit about Ubiquity: I love the “add to calendar” command, but since I don’t have a visual feedback (like some sort of preview) I always feel the need to go and check on my actual gCalendar. So the add-to and the url-typing are becoming the same action, even if nothing force me to do so.


I hate switching betwen Adobe Indesign (and other Adobe-Product) and MS Visio: All the important shortcuts are different: strg+w = alt+0; strg+scrollweel instead of strg+minus… and so on. Its even wore switching to the mac where even the zoom by scrollweel works different (doent it?).


Leave a Comment