Placing Buttons on Your Pages

We've had an on-going discussion at my company about where to place main functional buttons. At one point we were following an application paradigm where all main functional buttons were placed in a menu bar at the top of the page. Prior to that and now we follow a web paradigm where all the buttons are placed at the bottom. We always placed them to the right until one designer started refusing to do this especially with search forms. His reasoning, and rightly so, was that the button was being placed too far to the right and away from the form so that the user was being forced to search for the Search button.

When I finally understood my job as an enterprise UX designer, two things changed how I lay buttons out on the page. First, red routes. What is the single main task the user will do on the page? What does that part of their process look? What is the main data and/or inputs they need to do the task? When do they have the data to enter or review so that I arrange that information in the right order?

Secondly, I identify the user's flow through the page to complete the task. How how will the user move there eyes through those inputs on the page as they complete their task? What are the main data points or inputs that your user must fill or read? How can I consolidate that route through the page, so the user can do everything they re required to do and do it quickly.

Where on the page does the user finish their task? Screens have gotten much wider. Making the user move their eyes over long portions of the screen to find a button to click wastes time. So you want to place it as close to the end of task as possible. No more "all buttons must go on the left" or "all the buttons must go on the right". The button finishing the main task on the button should be close to the end of the user's work on the page.

It is not uncommon to have secondary function buttons occur naturally at the end of the page. Tables are prime example of this. Primary buttons and functional buttons belonging to another element on the page can unintentionally appear grouped together and as if they all work on the same thing. Too keep this from happening the design must split apart the buttons in some manner.

One note about placing buttons all on the top versus all on the bottom. Most of the time you want to force the user to at least read or review some of the data on the screen before moving on. The only way you can force the user to do this is by placing buttons at the bottom of the page. While you cannot completely ensure a task has been finished, placing a button at the bottom of the page means the user's eyes will have to cross the entire page.

Placing buttons at the top of the page does not guarantee that the user had done anything but clicked your button. Usually the reasoning for top-of-the page buttons is to always keep them available. If you need this, in most cases you can affix buttons like this to the bottom of screen while still allowing the page to scroll.