I am available for freelance work - HIRE ME

5 Basic Usability Breakdowns You Want to Avoid

posted by Matt Ward on May 20, 2010.

In this article, I just want to focus on five really basic usability “breakdowns”, based on my own recent browsing and professional experience. It simply lists some simple and basic fundamentals that I think that every designer and developer should follow – yet which it seems that so many don’t.

Usability is definitely a big topic in the world of web design and development. There are entire sites, like UX Booth, dedicated to the topic (and the related concept of user experience). Still, despite the plethora of information out there, I am always amazed by how many sites out there really annoy me through basic usability faux-pas, or at least by failing to provide me with certain elements that I have come to expect and look for.

5 Basic Usability Breakdowns You Want to Avoid

5 Basic Usability Breakdowns You Want to Avoid

So, in this article, I just want to focus on five really basic usability “breakdowns”, based on my own recent browsing and professional experience. There’s nothing deep, dark or mysterious about any of this either. There is no extensive usability theory or generalized insights into the minds of your users. This article is also neither exhaustive nor entirely authoritative. It simply lists some simple and basic fundamentals that I think that every designer and developer should follow – yet which it seems that so many don’t.

Make Me Guess Menus

I think that, sometimes, designers just try to get to clever with their navigation, and in this attempt lose all connection with that fact that people actually be able to use the site. From this perspective, if there is one thing that drives me up the wall when I come to a new site, it’s having to actually guess at using the menu.

Make Me Guess Navigation

Make Me Guess Navigation

I’m sure you know what I’m talking about – those sites where there is no clear indication as to where each menu item will direct you. And that, of course is assuming that you can even find the menu. These are the sorts of sites where you actually have to hover over some object or element in order to make the menu item appear.

If we take the time to really think about it, I don’t think it takes all that much insight to realize that this does nothing but hurt the usability. Here I am, either as a new user of a particular site. I arrive – either to the homepage or through some other entry point – and decide that I want to navigate somewhere else. Yet, before I can figure out where I can go (let alone how to actually get there), I have to play this navigation guessing game, rolling over items just to figure out what they are.

As a user, it’s an incredibly frustrating experience, which does nothing to enamour me to a particular site, or the company that stands behind it.

The solution, of course, is simple. Always make your navigation extremely clear and explicit, using simple text, or at the very least readily identifiable icons that won’t keep users guessing.

Glitchy Drop Downs

While the navigation guessing game can be frustrating, some drop down menus that I’ve come across are just plain unusable, usually due to some sort of coding issue that creates a glitch in the interface. The most common example that I come across is a menu in which the drop down items become totally inaccessible due to the way that they are styled.

Basically, the problem goes like this: I hover over a menu item. As expected, several other options appear in a dropdown sub menu. Deciding that I would like to view one of the items in that submenu, I quickly move my cursor towards it. However, before I can actually click on the item that I want, the entire submenu vanishes in a puff of CSS/box model buggy-ness.

Glitchy Drop Downs

Glitchy Drop Downs

Of course, being the determined user, I try it a few more times (knowing full well that it won’t work), before sighing in frustration. Now, if I really want to access the information, I might try bringing up the page in a different browser, but how many users to you really thing are going to be that dedicated? Probably not very many.

From what I can see from most of these sites, the problem has to do with a breakdown within the display of the menu, usually surrounding hovers and margins. For whatever reason, the submenu’s top margin is effected somehow, causing a space between it an the main navigational element. When this happens, the submenu becomes completely inaccessible. This is because, in order to move from the main menu to the submenu, the user’s cursor has to bridge the gap. The moment this happens, the hover state is to longer true, and the submenu vanishes.

More often than not, this issue is probably the result of less-than-extensive testing for cross-browser compatibility, and could be remedied by more extensive testing.

Note: I have recently become aware of some issues that have developed with my own site in some browsers. I am currently working towards ironing these out in my upcoming redesign.

Buried Contact Page

This is something that I see all the time: a contact page that is buried somewhere on the site. Let’s be straightforward and to the point about this one – if you want your users (or customers) to contract you through your website, then make your contact page visible and accessible from every single page on your website.

I’ve frequently seen sites where the contact page is buried in a submenu – possibly under an “about” section or some other less logical area. This forces the user to work harder to find it.

Buried Contact Pag

Buried Contact Pag

This is not a good thing! Please don’t fall into the engagement trap, attempting to justify this usability faux pas under the premise that this will help “engage” your users. Yes, users want to engage with your website, but they want to do it through your content. They don’t want to have to spend extra time just trying to figure out how to find or access that content – in this case the contact page.

The more a user has to work at something, the less likely they are to follow through with a particular action.

So, unless you don’t want your users contacting you (which is another issue altogether), make your contract page visible and accessible throughout your website. I recommend including it in your main navigation. Some sites relegate this to a secondary menu at the bottom of the page. While this is better than nothing, I still advise against it, since it reduces the overall visibility of the page.

Remember: more work for the user translates into less followthrough.

No Favicon or Title

For those (few) who don’t know, a favicon is that little icon that appears on each tab in your browser. It’s a customizable feature that has been available for quite some time now, and though it may not seem like a really big deal, failing to include a favicon on a site is one minor usability issues that can really drive me up the wall.

No Favicon or Title

No Favicon or Title

Allow me to explain.

A number of year ago now, I started using Firefox. I actually discovered the browser while in university, where a few friends introduced it to me. There were a number of things that I really liked about it, not the least of which was the ability to maintain multiple pages in the same window using tabs. That was pretty cutting edge at the time and blew my mind. I quickly grew accustomed to this kind of browsing and these days (in which all major browsers support tabbed browsing), it is not unusual for me to have upwards of ten or twelve pages open in the same window at the same time.

The favicon for each page actually appears on the individual tabs, too, offering a quick and visual way of recognize which page is which and being able to click from tab to tab. That is, of course, as long as the pages are using favicons. Sites that aren’t become more difficult to pick out quickly, making the browsing experience less enjoyable – especially if you happen to have multiple favicon-less pages open at the same time.

A related, and even more dire (though less frequent), phenomenon is that of pages not including anything in the <title> tag, or which neglect to change the contents from “Untitled Page”. This has much the same effect as a lack of a favicon, in that it simply fails to properly identify the page.

It’s also a complete SEO blunder. Now, I’m no SEO “guru” (if such a thing even exists), but I have found that a good title is probably one of the most effective ways of building recognition on search engines, and any page that lacks this information is doing nothing but hurting its visibility on the search engine front.

That being said, then, in today’s world of search engine optimization and multi tabbed browsing, you always want to provide both a meaningful title and a recognizable favicon to help users and search engines find and recognize your site.

Breadcrumb Only Navigation

The last usability issue that I want to touch on is something that I myself once implemented on a site, and which really didn’t work out – the use of breadcrumbs as the only real form of navigation.

At the time, it seemed like a good idea. It would allow the user to know exactly where in the site they were at any given moment, and would help clean up the page by minimizing the number of menu items that a visitor would have to deal with at any given moment. I thought it was brilliant.

It turned out to be a disaster.

A technique that was mean to help users find and maintain their bearings as they navigated the site actually left them feeling lost and confused. They might be able to see where they were, but they still had significant challenges trying to figure out how to get anywhere else. The breadcrumb trail did actually have some drop down navigation functionality, but it was foreign and unfamiliar to users and they simply did not embrace it.

A subsequent redesign saw the navigation return to a more complete and more traditional navigation system.

Breadcrumb Only Navigation

Breadcrumb Only Navigation

In retrospect, that experience taught me something very important about breadcrumbs – they are seen and understood as being primarily linear. Like a chain, one element links to directly to another, and the navigation allows the user to move back up that chain. However, though it may be one of the most obvious statements of the century, a website is more like a web (see? Obvious). Everything is interconnected, and a good navigation system should reflect this, allowing users to move from one section to another with relative ease.

Am I saying that breadcrumbs are bad? Not at all. They can be an incredibly useful navigational enhancement. What I am saying is that breadcrumbs should not make up the only (or even the primary) form of navigation.

Conclusion

So there you have it – five different usability breakdowns that you will want to avoid. As I’ve already mentioned, this list is neither exhaustive nor authoratative. There are many, many more usability issues that we could talk about, and which have probably been discussed on other websites. These are simply five key ones that came to my mind when thinking about my own recent browsing and professional experience.

What do you guys think? Do you agree with me about these importance of avoiding these usability issues? Do you have any experience with them? Are there any other issues that you want to bring up? Have your say!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

May 20, 2010

Murlu says:

Buried contact pages are actually quite the pet peeve of mine. For a while I really didn’t care about browsing through and find the contact page but as I kept reading a lot of blog, it was annoying to hunt for the contact.

I wanted to get in touch with people, not spend my time guessing how.

Good post, a lot of overlooked things.

Design should always include usability, in my opinion.

May 21, 2010

Stone Deft says:

You should include ajax applications with no “loading” visuals in it. I always get frustrated when I visit some site, clicking on links and nothing seems to be happening only to ralize it was an ajax application…

May 21, 2010

Slavi says:

Hi,

you’ve made good points.
What you think of white text on black background ;) ?

Also the comment form doesn’t work (I can’t find the comment box) well visually under Firefox 3.6.3 I had to click on website field and then hit TAB in order to be able to comment.
Also it’s limited to about 20px in height … try it out yourself if you want.

May 21, 2010

Matt Ward says:

Yes, yes. Why text (actually a very light grey) on a black background is something that I get a lot of complaints about. ;) It’s one of those issues that I promised to fix in the redesign. And that’s weird about the comment box. It wigs out sometimes. Need to do a complete form overhaul on the site. I’ll see if I can get it done over the weekend.

May 21, 2010

Codephase says:

a nice list for things to avoid. I have to admit, as a junior developer I sometimes forget the favicon feature. the “make-me-guess” navigation is also called “mystery meat navigation” (as suggested by Vincent Flanders)

May 21, 2010

Scott Corgan says:

Oh, the ‘make me guess menus’ are my favorite. Put a few different colored dots at the top of the page and make me hover over them to figure out where the EXIT button is, to get outa there!

HA!

You make some great points!

May 22, 2010

Edgar Leijs says:

I hate playing Hide & Seek with contact info! It always should be on top of the Home page or at least in the footer of every page…

May 22, 2010

Matt Ward says:

Thanks for the comments so far guys! I’m glad people are agreeing with me about these usability breakdowns! Keep the comments coming!

May 22, 2010

breadwild says:

Yes, reverse type is a nightmare, both in print and on the Web, but I think it’s worse on the Web (RGB vs CMYK?). Why? Letter forms blend together or vibrate because of the halo or glow. Anyway, it’s forbidden in our shop.

May 23, 2010

Rachel says:

It’s refreshing to read an article where the author admits his own mistakes! Something to add about the contact thing – it really irritates me when I click ‘Contact us’ and am told to read a list of FAQs before having the temerity to send an email. If I could find what I was looking for on the website, and it flipping well worked properly, I wouldn’t NEED to email them! It’s not just the inconvenience, it’s the assumption that they have already answered my question when they don’t know what it is. Gah…

May 25, 2010

Aleister says:

Is that photo a Kryptonite New York chain?

May 25, 2010

Kevinjohn Gallagher says:

I think you’re quite wrong about Breadcrumbs.

Its a difference between how Technical people (or people who use computers and the internet alot) work and how everyone else works. There are countless hours and university papers on teh HCI of this.

Your Average Joe user, especially those over a certain age/threshold, only think of websites in a linear sense; and moreover really only want to use one form of navigation.

If you’re ever bored or interested, add a querystring identifier to your buttons on the Top, Bottom and breadcrumb navigation. You’d be amazed how few links you get from the bottom menu, or any secondary menu. Oh and do it on a non-techie website :)

=======================

As for white on black text (even if it is light grey text) this works very well as long as teh text is big enough. Your brain processes it in the same way as it does black text on white.

Jun 5, 2010

Milos Sutanovac says:

I’m sure that many ppl will hate me for saying this, but the first point (‘Make me guess menus’) TOTALLY reminded me of the new drawar.com. It may be an amazing site, and yes I love browsing it, but the new navigation is definitely disadvantageous.

Just sayin’.

Good article though!

Jun 10, 2010

Russell Bishop says:

Some excellent tips here, most importantly because they are mostly about navigation, which is of course so crucial to the success of a website.

I’m a little puzzled about the ‘bread crumb only navigation’ exmplae though; if the breadcrumb is showing only your current page (Home) – how do you reach another page?

Useful write-up here, thanks Matt!

Jun 10, 2010

Swiz says:

You can add:

Inconsistent links – labels the same colour as links, some text links underlined and some not.

Lack of contrast between links and backgrounds.

Jun 10, 2010

Jeremy Carlson says:

Nice article. I have never seen a site that just had a breadcrumb navigation. I can’t even imagine the confusion with that. Personally I can’t stand them. I don’t need to be told where I was, I need to know where I’m going.

Jun 10, 2010

Lionhart says:

I hate to be a ball-breaker here, but proofread your copy! Usability depends on it. We’ve become accustomed to acronyms and butchered shortcuts for phrases in the age of the Internet, but our professional posts and sites shouldn’t reflect that. Grammar doesn’t have to be perfect, but spelling is a minimum requirement. On all major points in your post, I do agree. Nothing is more frustrating for a user than not being able to find what they came for in the first place.

Jun 11, 2010

LiveUX says:

The Contact info and Breadcrumb navigation are definitely 2 of my pet peeves as well.

I have actually turned away from certain sites when I was unable to find this information. If they aren’t willing to let me know how to contact them, I get no sense of customer value from them, so they must not need me as a customer.

And the breadcrumb navigation thing…I too am familiar with a particular product (won’t divulge what that is :)) that built all kinds of navigation in their breadcrumb bar (and it is the only place some functionality is available). Most users had no idea of the concept and valuable capabilities were being missed. Needless to say a plan had to be put in place to pull them out and put them in more appropriate navigation.

Oct 28, 2010

Aaron says:

Your point about Favicons made me giggle — mostly because I recently posted about them being (and I quote) ‘The Coving of the Internet). Half way through writing, I was suddenly struck with their HUGE usefulness when using tabbed browsing!

http://www.62design.co.uk/2010/09/favicons-the-coving-of-the-internet/

None the less, nice list, and good points raised!

Leave a Comment

Copyright © Echo Enduring Media 2009-2014