Skip to main content

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

When Is It Time to Leave Your Current (UX) Job?

Resign photo created by pressfoto - www.freepik.com I’ve been doing the job of lead for almost 3 years now. Like most companies, mine doesn’t really teach you anything about how to manage. So, I found and just finished this great book, The Successful Manager by James Potter and Mike Kavanagh.   While the book was really valuable from a management standpoint, to me the most impactful part of the book was Chapter 13: Determining If It Is Time to Leave . I wished I’d had access to this advice long ago when I first started working. My work journey would have been much different. So here’s the authors’ advice, ask yourself 5 questions about your current job: Do I enjoy the work itself? Do I like the people? Am I fairly/generously paid? Is it meeting my professional development needs? Do I have work-life balance? If you answer yes to 4 - 5 of these questions, then you’re in great shape.  If you only answer yes to 3 of these, then it’s time to start putting feelers out, i.e., y...
Post a Comment
Read more

37 Questions to Ask When You're Interviewing for a UX Design Position

Interviews are supposed to be conversations. As the interviewee, you’re supposed to be able to decide whether you want the job equally as much as the company decides whether to hire you. The problem is, in my experience on the interviewer side of the table, people don’t really ask good questions about what they’re coming into. You should know enough about your own discipline to ask good questions about the work you would be doing and the environment in which you would be working. This way you can decide on your end, if you would be happy at a new company. The following questions are grouped based on areas of issues within the enterprise environment. Many of them could be used for interviewing in a customer UX situation, too. The State of UX at the Company Knowing where the company is at in their journey towards user-centered design will tell you how well you will be supported in your job role and whether or how much you will have to fight to do the entire spectrum your job, i...
Post a Comment
Read more

Stop Using Sketch for UI Design & Learn Basic HTML, CSS and JQuery

Lately I've been loaned out to another group at my company, but not just to another group. I'm having to work with a third-party consultancy helping with a consumer facing application. They had already been working on the project for over a year when I came on board. Because the consultancy's design group was lead by visual designers and they didn't ask our EUX group about our process and tools, I've been forced into using Sketch and all of its accouterments. Sketch is THE most miserable software I have ever used for enterprise UI design, followed by Abstract the version control I was forced into. I happen to be heavy-fingered on the mouse. Because of it, layers unknowingly move around on me constantly. Even when I'm aware, it can happen and I'm trying hard not let it happen. I screwed things up in a master library file royally. But I wasn't alone. 3 of the other 4 designers have done the same. Sketch is probably quite fine for small consumer produc...
Post a Comment
Read more