4

When you have a desktop application in which a user is editing records (and performing other operations on records), where is the ideal location to place the buttons for those operations?

I have in mind things like:

  • Save
  • Delete
  • anything else that might be domain-specific, but focused on the current open record

I've seen two common general patterns:

  • upper left, toolbar-like set of buttons
  • lower right

I lean toward the upper left pattern (except perhaps for a Close button, which feels more natural in the lower right).

Is there any data or research supporting any pattern? Is there another approach you recommend? I'm not as interested in official guidelines, as much as research-backed principles and the corresponding sources.

3 Answers 3

4

I don’t know about any research directly supporting the distinction, but the two patterns you describe are intended to each be advantageous for different circumstances.

Dialogue Box Placement

Putting buttons on the bottom is a “dialogue box” design. It is best when you expect users to use one of the buttons and it’s the last thing the user does after making a single pass through the window from top to bottom. Often these buttons simultaneously execute a committing action and close the dialog, so they are necessarily the last controls used.

The bottom placement puts these buttons in easy sight and reach (e.g., when tabbing) when the user gets to the bottom of the form. They also cue the user that these are the last thing to do. Use this design for simple atomic sequential tasks where you expect users to go into the window, provide a couple values going from top to bottom, then select one button to complete the task.

Primary Window Placement

Putting buttons or other command controls along the top or left is a “primary window” design. It is best when you expect users to select multiple commands and they intersperse these commands with other input to your window (e.g., type a value, copy it, paste it elsewhere, edit it, save work so far, delete a couple items from a list, select a new item for the list).

Top/left placement makes these buttons among the first things users see when they open the window, giving them a quick way to identify the window’s purpose and the functions it supports. Use this design for complex multi-transaction tasks with multiple inputs and commands in various possible orders.

I’ve seen some apps put buttons along the bottom even when the window is clearly intended for complex tasks. I think this may be a hold-over from older style guides that stated buttons should always go on the bottom. These style guides did not anticipate complex tasks would be done in windows with buttons. Instead, they assumed complex tasks required a window with a menu bar, naturally located at the top.

One or the Other

I’ve seen other apps attempt to do both, either having buttons at the top and bottom, or a menu bar at the top plus buttons at the bottom. It sounds like a good compromise, but I would avoid it. Users may not able to guess whether a command should be at the top or bottom, leading them to sometimes search the wrong place. The Close button might be an exception since it’s clearly the last command a user can give in a window, but you may be able to achieve the same effect without the potential for confusion by having the button be the last control among those placed top/left.

2

For desktop applications it's better to go with common convention than your own alternative, because people are used to using applications in a certain way. Operations such as 'Save' and 'Delete' are task menu options so as standard would appear in a toolbar at the top of the page.

However, please make sure you keep opposing functions seperated. Don't have 'SAVE' and 'DELETE' next to each other. (The same goes for OK and CANCEL). For a desktop application I would position the Affermative actions (Save, New etc) in the left hand side of the top menu as that's where the user will first look, and would place the Negative actions (Cancel, Delete) to the right hand side to keep them away from accidental selection.

1

Personally I think it all depends on the design and layout of the form. I strongly believe in having a user work from start to finish in a smooth and intelligent way by visually showing them where the next click is. Here are a couple related posts that may help with good answers on this topic. LukeW has a great post along with user tests on part of this topic called "Primary & Secondary Actions in Web Forms" http://www.lukew.com/ff/entry.asp?571

Another: Form design and placement of action buttons

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.