Button Placement on Forms and Popup Windows

by Meryl Evans | Category: Meryl's Notes Blog, Tech, Writing 3 comments

Save / Cancel window

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.

Microsoft Word message

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

Tags: , , , ,

Subscribe to this here blog: RSS or E-mail


  • Posted by Karen Putz / DeafMom
    Fatal error: Call to undefined function wp_twitip_id_show() in /home/meryland/public_html/wp-content/themes/shiny/comments.php on line 30