Usability has become a big buzz word, also in combination with websites, and I have read multiple books on the topic in the past years in addition to dealing with the issues every day. What I find most astonishing is how even the most basic rules of usability are ignored on many websites – that is why I decided to make a short list of the worst usability problems I encountered recently.
The first rule of web usability I learned was how important it is for all links on a website to have the same color – no exceptions! This seems like a simple rule, yet not many websites adhere to it – often multiple colors are used for links, depending on the context. Designers may want to “adjust†links depending on context, yet think about it: if all links have the same color, the user always knows one certain color is clickable – that’s easy. If there are multiple colors, the user has to scan for every possible link color on a page, and the chance that a non-link has a similar color to one of the link colors increases greatly.
If you want to follow only one usability rule on your website, then use the same color for all links – and choose a color which is easy to spot, like blue.
Whereas general link colors are a big issue in usability literature, I have rarely read about visited link colors. When editing this wordpress theme I noticed that unvisited links had a blue-ish color, whereas visited links had a green-yellow-ish color – totally different! Although I thought to myself “it has to be a link, probably the color for visited linksâ€, I was confused that suddenly a bright unfamiliar color appeared instead of the blue color before. The other extreme are websites which set the exact same link colors for visited and unvisited links – which is a waste of great usability opportunity.
Use similar yet distinguishable colors for unvisited and visited links (for example dark blue and light blue), and make the visited links less bright, and less obvious, yet still easy to spot.
For more on how to style links, check out the Guidelines for Visualizing Links by Jakob Nielsen.
Only in the past months I noticed several pages where custom controls were employed – for example, select boxes which were not “normal†select boxes but instead something that looked like them, and behaved mostly like them. I also read a few blog entries which stated how, for example, custom checkboxes give you the opportunity to style them exactly the same for all browsers, hinting a positive usability experience.
The first thing I noticed: These controls do NOT behave like the original, quite often they even behave differently in different browsers, because they rely heavily on Javascript, and they aren’t properly tested. In some browsers they do not work at all, or are buggy. Additionally, a user expects a form control to look like the thousands he saw in the past, and also expects the same behaviour – better “looks†does not even come close as a compensation for unexpected and possibly unknown behaviour. I left several sites with frustration because of such “custom†controls.
Reinventing the wheel is one of the worst usability mistakes in my eyes. Usability relies heavily on a user’s expectations and prior experience, so he can “identify†his options quickly. Do not reinvent basic website elements! It will be a worse experience for the user.
This one may surprise you, and it may seem almost to technical, yet it covers an important part of usability: speed. When you click through a website, you do not want to wait – especially if you clicked on something which interests you. You want to know more, right away!
Yet, many websites have started to use elaborate background pictures which need some time in the browser to render, or load, even on subsequent pages – and the default background color is often dark, whereas the background picture is bright. So, until the background image is loaded AND rendered, you cannot read the text, although it is right in front of you, because it’s black text on a dark background. Every time that happened to me I thought: “Really? You cannot add an additional CSS property like background-color to a _content_ element, so I can read right away? Or choose a different default background color altogether?â€
This is just one example for speed, but it shows that complete loading speed is not the only, or maybe not even the major thing which counts – much more important is the time needed until I can _do_ something on the page, preferrably the thing I want to do the most. Be sure to give your content a readable background-color, not only a background picture, so users can start to read while images are still being loaded. Put your content and navigation at the start of your HTML document, so the most useful elements of a page are loaded first. And start to navigate your own site just to see how long it takes until you can do something specific.
This is something new and is most prominently seen with advertising recently – a study showed last year that adverts were clicked on more frequently if they looked like they were a regular part of the website, and could not be readily identified as advertisements. Consequently, many sites started to “mix in†advertising to look exactly like the rest of the content, to provoke more clicks.
This behaviour is bad for everybody – you are basically trying to trick a user to click on something he has no direct interest in, which is a bad experience for the user. He either feels used and angry, or he thinks he maybe made a mistake and feels stupid, because either way he did not achieve his goal. It is bad for advertising clients, because they pay more just to get “accidental†clicks by users who are not interested in their product. It should also be bad for webmasters or developers, because they break the trust a user has invested in their website (or any website) not to be mislead deliberately – just for a few more bucks.
I hope and believe users will learn from their experiences and leave websites which abuse them, yet trying to force something down a user’s throat is also bad for all websites – it creates a general distrust which needs to be overcome on every new website a user visits. And it gives certain techniques a bad name – just think of how “out of fashion†popups are nowadays, only because of popup advertising.
If you want advertising to have a better response, you need to enhance the benefit a user gets from it – that adds usability instead of destroying it. A benefit can be an interesting product, a great offer, a funny ad or something else which encourages a response, but does not force one. As a webmaster or developer you can influence the user benefit by providing advertising in context, where it is helpful, so a bridge between content and advertising can be established. Depending on your website you may come up with other ideas on how a user can benefit from your adverts – and that way, everybody wins.
To sum it up, the five problems I listed can be molded into the following (approximate) recommendations:
1. Be consistent, especially with basic elements on your site
2. Make good use of usability opportunities like visited link colors
3. Use time-tested solutions instead of reinventing the wheel
4. Show the user what he wants to see – in the fastest possible way
5. Do not force a user to do something, emphasize the benefits instead