Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm in the second year of fine-tuning a homebrew CMS, and I've been going with this theory (which I imagined) that it's best to have interactive elements like submit buttons, back buttons, and links mostly along the right side of the screen - especially for those instances where I'm displaying a large list or table of items (pages, users, etc.).

My best guess was based on the fact that the vertical scroll bar, another important interactive element, is (always?) on the right side of the screen, so if I put most of my "buttons" closer to it, it would be easier for the user to navigate between them. Personally, I use the mouse wheel or arrow keys, but I imagine many people do use the cursor and scroll bar.

Here's an example; the action buttons are all on the right, while all navigation is all aligned left.

enter image description here

Ror some reason the left side of the screen feels a lot more natural to me (especially back buttons and navigation, including the pagination), but it seems annoying to have to move the cursor from the pagination to one of the buttons, like if you needed to delete an item on page 3.

Does it make more sense to align the navigation to the right, or align the buttons to the left? How about reversing the alignment? Is there any common advice regarding any of this?

share|improve this question
    
Ironically, I just found this moments after posting: Scrollbar on the left –  Wesley Murch May 28 '11 at 23:01
2  
Most dialogs have buttons on the right or on the bottom. That's because the content is more important (initially) than the actions you can take on them. Plus it has been a convention since time immemorial. Put this as a comment, because I know there are some references, but I can't find them at the moment. Also, with the advent of the new task dialogs in windows, the convention is changing somewhat, though data-entry dialogs still follow this "buttons on the right and/or bottom" mantra. –  Marjan Venema May 29 '11 at 7:09
    
@MarjanVenema: Does this convention extend beyond dialogs? How about in the case where we have more options than just a couple of buttons, and we don't necessarily know where the user wants to go? This post's answers all seem to say the convention for navigation is to be on the left, why wouldn't we want other links or action buttons to be closer to the navigation? –  Wesley Murch May 29 '11 at 16:23
    
I think it does. Actions and navigation are similar but not the same. Navigation takes you from one page/form to another page or form, actions may open pages (web)/forms (desktop), but they may also just do something on the current page/form. And when an action opens another page/form, it usually is a page/form with (more) detailed information on whatever is selected on the current page/form. –  Marjan Venema May 29 '11 at 17:44
    
And as on desktop forms the navigation on webpages tends to be on the left while the buttons/links for actions on the current page are right on that page. If its a list usually at top and bottom, with single item actions possibly as links in the rows, and multiple item actions supported by checkboxes on the rows and buttons on the top and bottom of the list. –  Marjan Venema May 29 '11 at 17:45

1 Answer 1

up vote 3 down vote accepted

Most dialogs have buttons on the right or on the bottom. That's because the content is more important (especially initially) than the actions you can take on them. Plus it has been a convention since time immemorial.

With the advent of the new task dialogs in windows, the convention is changing somewhat, though data-entry dialogs still follow this "buttons on the right and/or bottom" mantra.

I think the idea extends beyond dialogs. For non-dialog forms, the consensus is that navigation should be on the left. Desktop and web apps are very similar in where the place navigation and "other action" buttons. Navigation is on the left. You can see this for desktop apps in for example MS Outlook and other general purpose apps where the main menu is essentially replicated on the left to allow access to the main areas of the application. This is very analogous to site navigation or the navigation to specific areas of a web app.

But that doesn't mean all buttons or actionable (clickable) items should be on the left. Actions and navigation are similar but not the same. Navigation takes you from one page/form to another page or form. Actions may open other pages (web)/forms (desktop), but they may also just do something on the current page/form. And even when an action opens another page/form, that usually is a page/form with (more) detailed information on whatever is selected on the current page/form.

Interestingly, desktop and web apps are again very similar in where they place buttons/links for non-navigation actions: in the immediate vicinity of the content. For example a list will usually have action buttons at top and bottom (see GMail's inbox for an example). Single item actions in web apps usually are links, whereas in desktop's they are in context menu's and the default action can be activated by double-clicking. And the buttons or links for actions on a multi-items selection can again be found at top and bottom (or on the right for some desktop apps). The only difference being that multi-selection is desktop's is "standard" while you need a separate checkbox column for this in web apps.

All in all, I think the general idea boils down to:

  • Navigation actions are actions that take a user to a different content area.
  • Content actions are actions that may take a user to a different page / form but do not take him/her out of the content area.
  • Navigation actions are on the left, where everybody now expects them to be.
  • Content actions are as close to the content as possible.

Note: On web sites you will often find secondary navigation items on the right. Blogs often have their category lists, tag clouds, etc. over there. Secondary navigation is much less common in desktop apps, as they usually put this stuff in sub(sub(sub))menu's of the main menu.

Note: Content actions are as close to the content as possible not only because it makes sense, but also to shorten the mouse-travel distance. It is pretty frustrating having to travel to the other end of the screen just to click a button when your focus is on the content on this side of the screen...

Note: web sites often duplicate content action buttons at the top and bottom of lists while desktop apps don't. This is probably because desktop apps usually have a fixed size window and use scrollbars to move through lengthy content and web apps usually have all the content in a single page and need to cater for the user scrolling down using the browser's scrollbar. Not nice if you then have to travel all the way back up (or down for that matter) because your button scrolled out of view. Another option would of course be to limit the length of the list and allow pagination.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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