User Experience: Menu & button placement – How to make your users hate you

I’m kind of opinionated when it comes to User Experience and the way users are directed to use certain functionality. Maybe it is because as a Business Consultant I’m usually the one talking most to users about their frustrations with software. Or maybe because I really believe that to fully understand you have to use it yourself. Whatever it is I spend a lot of time going through UI designs, looking at how stuff works. And one of my biggest irritations is with how badly thought through the navigation and placement of functionality options (buttons/menus/actions) is done in some applications & sites. 

Generally you can group action buttons & menus in 4 categories:

Layer 1: Most used options
These need to be glaringly obvious. Things like a “Create” or “New” button need to be there where ever I am. They need to be big and at a logical place. Not placed at the bottom where I can’t see it unless I scroll down.

Layer 2: Regularly used functions
These are things I might use maybe a couple of times each day, so I don’t need them to be there all the time but I should still be able to hit them really easily and within 2 clicks. Generally these are the first level options in my menus. Not buried in the third level of some 40+ option menu or hidden on the 3rd tab of a seemingly unrelated 3 page application wizard. 

Layer 3: Rarely used functions
Ok, these are the things users hardly touch. They can be buried a lot deeper. That doesn’t mean they should be in an illogical place though… So don’t put the ‘Share’ option of a request on the bottom of the versions tracker tab. Also make sure similar functions have similar logic to where they are placed throughout the application. Knowing a function can be found in the left upper corner on one form will mean users automatically look for that function in that same place on another form.

Layer 4: Preferably never used functions
The interesting stuff. Things the application developers rather not have users use but that need to be build in for that rare instance where it is needed. The things they secretly hope nobody will actually need…. Well users will find them and they will find rational uses for it. So don’t try to hide it or make it unnecessary difficult to use. Instead make sure it’s clear what it’s for and how to use it responsible. There is nothing as irritating to a user then an unnecessarily difficult to find action keeping them from doing something they deem important. For me these options are actually of the same importance as level 3 options and shouldn’t be any more difficult to find.

Ok nice, but how? My two cents worth on how to improve…..

  • Determine the base set of functionalities for each page/element based on the use cases  before starting development. Map your menus and buttons for each page.
  • Determine importance. Avoid having an overkill of options on the screen. In general not having more then 3-5 buttons or options in the most prominent layer. All other options should go into drop down menus or at other places.
  • Group functionalities: “Save” and “Save&Close” should be next or close to each other, not on either side of the screen
  • Keep to generally accepted menu build ups. Things like having the “[Print]” option in the first menu to the left which is generally called “[File]”. Users expect it there, so why confuse them by placing it in another menu?
  • Create a uniform functionality naming scheme: Don’t call the button to create a new form “New” on one page and “Create” on another 
  • Create a mockup for each of the main pages/elements placing the function menus/buttons and review it with the users. Do the same with the menu map. 
  • Keep it consistent and logical: A “Next” button typically resorts on the right side of the page/element, the “Previous” button on the left (and yes, I’ve seen this done wrong)
  • Keep it simple: Don’t create more options than necessary. Having 3 options “export to Excel”, “Export to CSV” and “Export to Text” in a menu can also be solved by creating one menu option called “Export” that opens a dialog in which to chose the type of export to use.
  • Think in pairs when it comes to functionality: If you allow someone to “Create” something then they usually expect to be able to “Delete” that something too.
  • During development: Look at the page / element with a typical display size the users would use. Don’t give developers a high resolution wide screen display if you’re not prepared to give something similar to all your users…. 

So what prompted me to write this? Well because I had one of those moments this week where I could have literally growled at a web development team. The simple task I tried to complete was to unsubscribe myself from several groups I was no longer interested in on LinkedIn. Really? Yes Really. I didn’t see the necessity to be a part of them anymore and so they had to go.

I would categorize this as one of those Layer 4 options as in general LinkedIn seems to think people will never leave the groups they add themselves to. So I was expecting having to click a few times to get there. I was NOT expecting to become so frustrated at not being able to locate a ‘leave group’ option I would have to resort to Google. Browsing search results to find out If, and if so How to do this. The fact that I hit a full page of results with people asking the same question just shows how badly this option was build in.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

* Copy This Password *

* Type Or Paste Password Here *