Tagged: Usability

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.

UX Labs

I spent a good hour yesterday in the User Experience lab. Talking to UX specialists about Social Software and how I think it could improve. Now why is that important? Well it’s not and it is… My opinion on it’s own isn’t important at all but by being one of those thousands that is actually sharing it I might be able to make a tiny difference in how the products I work with, and my customers work with are build. And isn’t that what ‘being social’ is all about? Making a difference together…?
Now apart from it being good it’s also a lot of fun. People who know me know that I can be a very opinionated person who will not shy away from speaking her mind. And if there’s one thing that is really…. correction: REALLY close to my heart it is usability and UI logic. So being able to sit there and just tell about all the pet peeves, ideas and possible improvements I’ve got swimming around in my head with someone who is not just politely nodding but actually taking notes is just fantastic. Ofcourse there is no guarantee that any of it will be used but at least you get a chance to talk to the people who do have the ability to make a difference.
So if you haven’t done so yet get your butt down there and start talking! They will ask you questions if you don’t have any direct ideas and you’ll be surprised how much you actually have to add!

Structure for an unstructured mind

I just created a new tab on my Lotus Notes Workspace. ‘Workspace?‘ you ask. Yes, workspace. Ok, I know, it has been more or less buried by Lotus since Lotus Notes V5 came out. But every time I install the Lotus Notes Client the first thing I do is to reinstate the Workspace back to being the Homepage. I just find it so much easier to work with.

It’s a visual thing. I hate having to scroll through extensive lists and if you’d see my current workspace you would know I have a lot of databases listed.

On my workspace I can easily find certain databases blindfolded (CRM database: 1st tab, 1st line, 1st tile from the gap). But if you asked me what the application name was though….
This is because I use visual indicators for finding an application. Things like location on my tabs, icon image and relative position towards other applications. I rarely look at the name.

Having a workspace allows me to structure things visually and in a way that is logical to me, like placing templates below the databases and grouping things the way I want them to, not just into alphabetically sorted lists by name.

Why don’t I like the alphabetical lists?

Well… people who know me will recognize this but I’m simply horrible at remembering names! Be it people, brands, databases, etc. I will make a mess of it. I’ll easily call a Volvo a Volkswagen, mix acronyms up and still sometimes search for the names of my own cousins. So to put an alphabetical list of 100+ database names in front of me is like saying :”Good luck!“. Give me a workspace and tabs though and I have no problems what so ever.

I think this is also why I’m so fond of my iPad. Things are more visually-orientated then list-orientated and that makes it easier to work with for me. I think Lotus could learn a thing or two from Apple there. The visual way of working that Apple has developed would really benefit a lot of people like me that just don’t work in structured lists. Take for instance the “Application-Open”  control. Wouldn’t it be a lot easier to find databases if it was portrayed in an AppStore like fashion? With a search box and tiled overview, suggestions lists and maybe even preference recognitions? Ok, yes, I know the list-lovers now cringe but I’m sure a lot of ordinary users would absolutely love to have a more intuitive way of locating apps.

How often have you had users you literally had to walk through opening an application on the server?

“Ok, press CTRL and ‘O’ keys simultaneously. You should see a window called ‘Open Application’. Now enter ‘x’ in the server name field. Do you see a list of names below it? No? Ok, press the [Open] button. Do you see the list now? Yes? Ok. Scroll down until you see the yellow folders and locate the ‘x’ folder. Double click it. Yes. You see another list now. Find the “xx” name and double click it”…..

So until Lotus decides to permanently take out the workspace (or comes up with a better replacement) I’m really happy with my Workspace and the 14 tabs and 100+ tiles I have on it. Let me work in my own quirky way of visual structuring. I’m sure I’m not alone!

User friendly

Sometimes images just speak for themselves……

If your site shows input examples to show users what is expected of them, than make sure your example entries match the fields validation rules! Putting in an example with an underscore (“j_smith”) while an underscore is not allowed is really stupid and very annoying!