How many times did you complete a form only to push the “Clear” button instead of “Submit”? What about “OK” vs. “Cancel” on a popup window? (Raises both hands — one for each.)
Why does this happen? Do we expect one button on the left and the other on the right? Are they too close together?
Jakob Nielsen reports that Windows applications put OK first, Cancel second while Apple places OK last. In this case, he advises developers to design OK/Cancel based on the platform they design for. The above screen shot comes from Thunderbird in Windows. The below image comes from Microsoft Word.
For Web forms, I suggest using one button. Of course, circumstances may prevent that. For example, you’re completing an order and you’re on the last page. Ecommerce sites certainly don’t want to give you another button to cancel the order, but users need assurance that they’ve canceled the order by pressing “Cancel Order” rather than just closing the window.
From my experience, I tend to read popup windows and zip through Web-based forms. I always assume software developers don’t create their popup windows the same way. But online forms — that’s another story. Silly, isn’t it? We shouldn’t expect Web designers to create forms the same way either.
Here, Nielsen gives two guidelines that make sense:
- Name a button based on what it does. Instead of “OK,” consider “Yes” when the dialog box asks if you want to do something.
- Highlight the most often used button except in cases where the action is drastic (of course, I can’t think of an example at the moment).
I think one more guideline would help especially where Web-based forms come in:
- Avoid putting the buttons close together: This forces us to pay attention and lowers the incident of “mouse slippage” that causes us to accidentally select the wrong button.
Many of us hit “Enter” when we finish a form or to begin searching (after entering keywords). Take care to prevent the application from executing something big when someone presses “Enter.”
You have to give Microsoft credit for its Windows XP shut down dialog box as shown below. Three options appear (Stand By, Turn Off, Restart) and each in a different color (yellow, red, green respectively) plus a Cancel button in gray and away from the others.
As users, we should look closely these windows and form buttons. In our fast-paced and overloaded world, we forget. Hence, keeping buttons at a reasonable distance from each other can give us the visual cue to look at the buttons.
What works for you? What doesn’t work?
Copyright secured by Digiprove © 2011 Meryl Evans
Another thing that bugs me is the “delete” and “rename” which are next to each other in Microsoft software. I’ve hit the wrong one before. Thank goodness for the prompt or I would have lost some nice pictures.
Karen Putz / DeafMom’s last blog post… Summer is Flying By
Hi Meryl,
The “drastic” example is just above — the “Save Document” button. The “Yes” is highlighted because hitting “No” would (perhaps accidentally) erase everything you have worked on.
The thing that drives me batty is when the button is highlighted that the software maker wants you to push, not necessarily the user.
For example, I’ll be typing away and the “Update [Name of Software Here} Now?” pop-up box will appear. Of course, when I’m typing 120 words per minute (heh, heh, I wish…) I don’t have time to react to the window, and suddenly I have to stop everything to deal with this silly download I didn’t want in the first place.
I try to shut down all those “Automatic Updates” but one or two always seem to make it through…
Bottom line: not only make the buttons easy for your website visitors (etc.) to use, make them with their best interests in mind and not your own, or you’ll get a lot of negative feelings when you “trap” someone into making a choice they didn’t want to make.
IMHO,
~Graham
Absolutely right, Graham. Sometimes the company will gear the selection toward the one it wants not what we want. They probably count on us working fast and not making the choices we mean to make.
Have to be careful when installing games from certain sites who ask if you want to add a bar (like Google bar).
Also — especially on check out pages — we need a back button. If you use the back button on the browser, it sometimes loses data. Sometimes it can be avoided and other times it can’t.