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.
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.
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.
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.
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.
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.
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.
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: