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!

Help anyone?!?

Ok after yesterdays Google ‘Feedback’ button I had another great chuckle today. Tried clicking the ‘Help’ button in the Quickr Migrator tool for DDM and got the following memorable response…

๐Ÿ™‚

Feedback? You bet!

With Google heading in a new and possible exiting direction with its Google+ project and their new Me on the Web tool I was checking out some of the new features and stumbled upon the Google Profile. Not something I had ever seen before (even though it supposedly has been around for a while) but nevertheless another Social Profile so why not try it out.

While doing so I ran into some simple things that I just didn’t get from a usability point of view. One of them was that when I wanted to add links to the ‘Links’ section and choose the ‘Manage Connected Accounts’  option I’m rerouted to another page. Nothing wrong there but when finished I don’t see any option to return to the profile. Ok, yes of course I eventually tried simply closing it and that worked fine but it didn’t feel logical to close it like that and gave me the uneasy feeling I might lose the data I had just provided. A simple “Finish” or “Return to Profile” button would have been nice.

I believe in the power of giving Feedback to help further the development of products and will not hesitate to give it when asked. So when I noticed the ‘Feedback’ button in the bottom lower corner of the Profile form I decided to report it back to Google as something they might be able to take into consideration.

And then….

So, first rule of involving your users: If you want their feedback and ask for it be ready to receive it!

Error handling

Love this! Something goes wrong while writing a DM on twitter and in stead of deflecting blame (“Something went wrong”) or assigning blame (“Oops, it seems you did something wrong”) it simply takes full blame for the problem. Wish more sites / software would be so insightful!

So Twitter, now you’ve got the error message right….. please solve the problem too!

Business Partner Locator

Was entering IBM Partnerworld today when I noticed the link to the Business Partner Locator. As I had heard someone complain about the fact that finding BP’s through the IBM site was rather laborious and outdated and that they couldn’t even find all BP’s in there, I decided to check it out and clicked the link.

“Business Partner Connections has been replaced by the new and enhanced Business Partner Locator. You will be redirected in a moment, please update your bookmarks”

Mmm, ok, apparently this site recently changed. Not that I’m interested in knowing that, I’m clicking a direct link so just forward me to the new site. It would be different if I was using a bookmark, but I’m not! I’m directly clicking a link on the IBM Partnerworld homepage so how difficult is it to change that link itself?

The site opens and the first thing I see there is:

“Finding the right Business Partner just got simpler!”

Good! Apparently someone figured it needed some updating as well and decided to spruce it up.

The site itself seems relatively easy. A dropdown box on the left  to select a country, some text helping Customers & BP’s  and a demo link on the right.

Now, I’m a visually oriented person. So when I see something like this and I’m trying to orient myself, my eyes automatically draw to the Demo link. It’s big, it’s in an important spot and looks as if it’s a video. I love vids, so I click it….. and regret it

It turns out to be a full length demo in 13 stages. Illustrated by the impressive Table of Contents on the left…..  My god how difficult is this tool?
So I start and let the video go through the first four screens. Now I’m not a native English speaker but in my ears this guy is articulating as if I’m a three year old and still I find my mind wandering of. Keep it short, please!

I end up at screen 5. “Demo 1: ……”. Again the guy starts talking, welcoming me at the demo part of the video and explaining we will start with a demo about Search criteria.

And then it stops

Yes it actually stops without any explanation. I wonder why. Is it broken? Is my browser crashing??? Is this a demo that would normally be done live and where the guy giving the demo would now switch to his live environment to show something?
No it turns out it’s suppose to do that. I have to scroll down (apparently my 1280*800 screen resolution is not big enough to fit the whole video on one screen) and in the bottom of the screen, below the copyright footer I find a button that I need to click to start the demo part of the demonstration.

??? Am I the only one not finding this very logical? I mean this is why I was actually watching this video in the first place, so why stop it and make me manually restart it to see the most interesting part?!?

So I start the demo and it all got a bit corny by then. I mean listen to the guy and watch the screen and count the amount of times the word ‘Business Partner’ is used either in the text balloons or in the text he’s reading. I’m not listening to what he’s saying at all anymore at this point. Just wondering where this will end up.

Well, at another stop it turns out. Because as soon as this part of the demo ends and the video goes over to screen 6 “Demo 2:……” the same happens again.

Needless to say I didn’t actually watch the whole thing after that. No clue how long it is but I’d say about 20-25 min at least. And all this to explain how to select a country, define some criteria using dropdown boxes and watch the details of a business partner.

So I ditch the video and even though I’m ready to simply chuck it all away and return to the Yellow pages by now, I decide to actually open the tool itself. I must admit: It works and looks pretty nice.

Nice….nice!?! Is that all you have to say after all that?!?

Yes, that’s all. So IBM please drop that video, correct the link, take out that irritating redirect (according to the video it’s been up for weeks anyway) and trust your users. We’re not that stupid.

ps. If you want a real good laugh than please click the “Thank you” entry in the video’s Table of Content after having tried to watch some if not most of the very elaborate video….. Apparently they do know how to be short. ๐Ÿ™‚

Captcha

Did you now what a Captcha was? I didn’t until I started writing this blog. Searched for it and found out it’s actually a term, not a product or company.
Oh well.ย  This wasn’t my reason for writing this blog, I just found the below Captcha quite funny. I mean they are a pain in the … without having to use specific diacritic symbols so this one really makes the difference.

And no, it did not work without the Umlaut on the ‘o’.

Has Google gone beserk?

Yikes! Have you’ve seen those new background images Google put in yesterday?!? My God, here I was opening my trusted Google page to do a search and instead of the simple white page with search bar and funny but discrete picture I got this:

What the …..?! Do the want to make me color blind???

Now, I don’t mind a bit of color but this is insane. It lacks all sense of proportion and balance and you can hardly read the text below the search box anymore because of the white lettering on a multi colored background. It looks as if some starter designer has gone wild and nobody discovered it (He, it’s only the most used page on the web…..dรดh).

Luckily for my sake this morning they turned of the imagery and returned to the trusted old white page. An option in the bottom (which I only noticed today as it completely falls away against the colored background) still allows you to change it to the image background but the default is back to plain old white again. I really hope they keep that novice designer in check from now on. Change is good but with all the resources and money Google has they should be able to do better than this!

ps. I’m clearly not alone in this…….!  link