I come from a web background to designing user interfaces. This means I’m no expert in other areas, but since I’m trying to delve into interaction design and HCI, I’ll take a stab at my Samsung LE40C635K1W TV dialog.
0. User has scheduled a program to be watched on TV guide.
0. User opens the scheduled program.
User goal: Cancel the scheduled program
Dialog opens showing the following options
So what’s wrong with the dialog?
- It has two options basically stating the same
- Button placement is misleading
- Similar verbs in the question and alternatives
- The pre-selected “cancel” also misleads user to think it’s the appropriate action
A more thorough explanation
I explained the scenario to 20 people and asked “which button would you use to cancel Matlock?” roughly 50% chose right! Doesn’t get much poorer than that, since it’s a 50:50 decision. You would get the same result with no labels on buttons!
So, OK cancels the scheduled program and Cancel closes the dialog. It’ would be an alright dialog, if the button placement were reversed: We’re used in having a cancel function on the left and a more functional button on the right.
EDIT: Article about placement of OK/CANCEL. http://www.nngroup.com/articles/okndashcancel-or-cancelndashok/
Listing OK last improves the flow, because the dialog box “ends” with its conclusion . Also, as withPrevious/Next , you could argue that OK is the choice that moves the user forward, whereas Cancel moves the user back. Thus, OK should be in the same location as Next : on the right.
Since there is no keyboard available on TV sets, one could conclude that placing the return/close function on left would be more suitable.
The verbs used are also misleading: Instead cancel, “back”, “return”, “close”…each one of them would be better. Even a simple “yes/no” would do the trick. All the previous examples describe more precisely a no-action action (a phrase I just invented).
Here’s a mockup of my solution and an explanation of my choices.
What have I done?
- Changed the question to use a different verb, “remove”. It’s better than cancel, since cancel has been commonly used in dialogs for many decades.
- *Return label to describe the no-action action.
- *Remove label to describe the scheduled program removal.
- Reversed button organization now means that the left button closes the dialog.
- **The pre-selected button is return (same as before). This is the decision I made since the user doesn’t know what happens before he opens the dialog.
*It’s often better to name a button to explain what it does than to use a generic label (like “OK”). An explicit label serves as “just-in-time help,” giving users more confidence in selecting the correct action.
**Make the most commonly selected button the default and highlight it (except if its action is particularly dangerous; in those cases, you want users to explicitly select the button rather than accidentally activating it by hitting Enter).
Scratching the surface
The Samsung LE40C635K1W dialog problem isn’t the only UX problem. The TV guide has too little space for content, the remote is hideous and it took me two years to find out my TV goes on without a remote too. What a mess.
And Samsung executives, feel free to hire me!