It’s 2009, and although website usability practices have gotten overwhelmingly better over the past decade, there are a few slip-ups that I still see far more often than I should, even on sites designed by professional agencies. I’m certainly not proclaiming to be a usability guru like Jakob Nielsen, but these usability issues are easily avoided (and won’t sacrifice your design) using a little forethought, usually in the design-phase of development.
Like so many other usability issues, I suspect that many of these issues may be a result of graphic designers without extensive web experience, as the problems I’m still seeing are problems that are specific to the online medium. I’m certain they are not intentional decisions, but they simply must stop.
When I started in web development, there weren’t many resources (books, classes, etc) for people who wanted to learn, so we sort of had to guess, and make it up as we went along. That is no longer the case, with millions of web development usability articles and websites available online, and there just isn’t any excuse for these same problems to continue emerging.
These are just the ones I’ve run into today, and there’s a good chance I’ll be adding to the list, as I tend to be easily pissed off (as anyone who follows me on Twitter can attest to).
Link colors MUST be a different color than ANY other text
The fastest way to confuse a user is to obfuscate what text on the page is clickable and what isn’t.
I get it – you want to keep the same color scheme on a website. Excellent advice. But when you’re designing the layout in Photoshop, you should reserve at least two colors that no other text on the site gets to use – one for unvisited link colors, and one for visited link colors. They can (and should) be colors that work well with the color scheme, but they must be unique to links, period. NO exceptions. They cannot be the same color as your headlines, they cannot be the same color as your emphasis text. They must be unique so that the user can quickly and easily recognize what text is linked.
If Link Colors Are Similar to Body Text, Leave Underlines ON
While monitors have gotten better, and graphics cards are incredible these days, people’s eyesight and monitor configuration are two factors you simply cannot control. On a low-contrast monitor, your users may not be able to visually pick out what text is #000000 (black) and what text is #4e1802 (the dark brown link color on snipe.net).
If the colors used in your body text and the colors used in your link text are even remotely similar, leave the underlining effect on your links. If a user isn’t sure whether the text in question is actually a link, that underline makes a difference. If you don’t want underlines on your links, pick a different link color. Period.
STOP underlining text that isn’t a LINK
I don’t see this one as often anymore, thankfully, but I still come across it at least once a week, which is once a week too damned often. Again, this is likely a throwback from print designers, where underlining is an accepted and effective way to draw emphasis to text. Users have been conditioned to understand that underlined text = hyperlink. Online, the only reason text should ever be underlined is if it’s a link. Period.
Don’t use initial icons as the only way to indicate section content
I still see this one a lot – on a website, there is a toolbar with icon-only navigation: a picture of an envelope to indicate “contact” or “email”, a picture of a newspaper to indicate “news”, and an information-booth-style letter “i” to indicate “information.” At first glance, this makes perfect sense – except for the fact that not everyone visiting your website will be English-speaking, and the word for “information” doesn’t start with an “i” in every language.
If you’re going to use an “i”, at least pair it with the word “information.” Unless you provide versions of your site in other languages, it can be assumed that your site visitor understands at least a little English (and I’m targeting this at English websites, but the same rules apply for sites written in other languages), so the word “information” will make sense to them. People who speak multiple languages can handle seeing the word, but their brain is going to default to their own language when looking at initials.
Keep outside navigation elements far away from form elements
At my previous job in the web development department of a major newspaper, we had a back-end interface that allowed writers to publish their articles to the website. I wish I had taken a screenshot before I left. In the left-column of the page, there was an interface that allowed you to select a section title so that you could administer the articles within that section. The section names were all in a dropdown menu (which makes sense), with a “go” button to the right. Directly below that dropdown menu was a link that brought the user back to the admin home.
I cannot tell you how many times I accidentally clicked on that link while working with the admin. Absolutely aggravating, and completely avoidable if the developer had put just an iota of thought into it.
If your site has a login for members or customers, don’t hide the link
In most cases, members or customers are a website’s bread and butter. They are content contributors or paying customers who return to your site regularly – and they pay your bills, whether it’s through ad revenue or a paid service. Two websites I use often, Constant Contact and Paytrust, used to have large login/register boxes on their homepage that was easy for returning visitors to find.
For some reason that is completely beyond me, they have since moved things around, so that the only way to login is to locate the tiny link in the top-right of the screen. For a returning user, this was maddening. I had to actually search around on the page just to find the option to login for services I am paying for! As a returning visitor, the only reason I have to be at that site is to use the services that I can only access after logging in. Their non-login content is useless to me – its not like a news site that offers some content to unregistered users and premium content to registered users or customers. I’d like to find the designers responsible for that move and kick them in the ass.
Don’t make people hunt down the one part of your website that pays your bills.
I still really hate dynamic dropdown menus. A lot.
I know they’ve become more universally accepted over the years, but I really, really hate them. They are almost always poorly implemented, and very often interfere with forms or flash elements on the page if the developer did not use the proper z-index. They are hard to control, and require me to really pay attention to where I’m putting the mouse, especially if they (god forbid) have subcategory options.
I find them clumsy, and a cop-out, and refuse to believe that a better design with a little more thought could not have solved the navigation problem. (My philosophy was a major point of contention between myself and the powers that be at the aforementioned major newspaper, who uses dynamic dropdowns.)
Stop changing the size of my freaking browser window
If your website relies on a specific browser window size, you are made of fail. If you resize my browser window without my permission, I will leave your site before your 900 meg flash movie has even finished loading. I will wish bad things for you and your family, and you will certainly never, ever, ever have me as a customer.
Enough with the no-right-click javascript
Again, I state – it’s 2009. If I want to steal your content, I will, and you will not be able to stop me. I will use a website ripping application and download it directly to my hard drive, I will disable javascript in Firefox (rendering your pathetic script useless), I will use cmd+c to bypass the right-click, I will screenshot your images, or one of any other additional ways to get around it. One thing you can be guaranteed – I will leave your website angry and never come back.
The funny thing is, I wasn’t even trying to steal your content. I was trying to right+click to open another page of your site in a new tab, so I could come back to it after I was finished with the page I was on.
Stop linking to the same place using different navigation
This is yet another one that comes from my former place of business. In their dynamic dropdown menu (kill me now, seriously), in the Contact section, they had a link to “about us”, a link to “contact us”, and a link to “submit an editorial” – all going to the exact same place. This issue doesn’t stick in my craw as much as many of the other ones on this list, but it does still piss me off.
Navigation elements should always be very clear as to where they go. A returning visitor who clicks on one of the links within the Contact Us section already knows they cannot ultimately trust what the labels say, and they know they are going to have to search further on the page they get to in order to find exactly what they want. Lame.
Stop playing audio when I load your website
Is it 1998 again? For the love of all that is holy, do not auto-play video with audio when I load the page, and stay the hell away from those abhorrent “talking avatars” and “talking video ads” that pop up in the lower part of many news websites. Maybe I’m browsing your website at work, or in the library, or maybe I have my speakers waaay up because I was listening to a four-hour marathon of 80’s hair metal. Whatever my situation, you’ve now pissed me off and I’m closing the browser tab and your site with it. *click* Now I will never even know what you were trying to sell me.
Do we really need “reset” form buttons anymore?
On short forms, I guess I can understand – but on long, involved forms? What user suddenly realizes that they accidentally filled in every single form field incorrectly and they need to start over? What will happen for more often is that because you out the “reset” button too close to the “submit” button, a user intending to submit your form has just wiped all of their data. Congrats.
I KNOW that’s not all of them, but those are the ones that pissed me off today. What pisses you off? Leave your peeves in the comments.
If you’re a developer or designer, you may want to check out webpagesthatsuck.com – these guys have been around forever, and while many of their top picks are painfully obvious (to the point of probably not needing to be mentioned), they do show great examples of a few of the more nuanced usability issues. Also check out Usability Post for common mistakes, and practical solutions. These guys really tackle the nuance stuff, and give clear examples of how it could have been done better.
On the other end of this spectrum, it can be easy to get caught up in obsessing about usability, and lamenting the fact that your company cannot afford formal usability testing for every (or any) websites you produce. The thing is, you can.
One trick I’ve used in the past is to park myself and a laptop at a local Starbucks. I would approach customers, asking them if they would take 5 minutes to look at the site and tell me what they thought, in return for a 5-dollar Starbucks giftcard. You should, of course, clear this with Starbucks before trying it, but since you’re buying giftcards, they usually won’t say no. I’ve found that watching the user’s reactions can often be as valuable as what comes out of their mouth.
If you’ve got a little more dough, but not enough for formal usability testing, check out Morae, which lets you use cheap webcams to set up a complete usability lab in your office without fancy equipment or one-way glass. For about $3,000, you can purchase their entire suite (base software runs $1,500) and you can use it again and again.
