Pleasing Jakob Nielsen, Part 1
Yesterday Jakob Nielsen posted the Top Ten Web Design Mistakes of 2005 on his website, useit.com. If you have a website or build websites for a living, you know his advice is extremely valuable. Well, most of the times, anyway. This blog post will tell you how to make Jakob happy by going through all the 10 issues he points out, and giving some notes on how to use them to perfect your blog or website.
This article will be split into 3 blog posts each covering its own set of tips, so make sure you follow up with all three in order to get the whole process done.
1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.
Font-sizes are an ongoing issue with many designers. Most of the times small type looks better than large type, which unfortunately means you see a whole lot of pages using 9px Arial or 10px Tahoma. Now while they may look okay, it is normal that you, as a designer, look at things as “blocks” and not as readable information. And this is a big issue. Let’s look at some CSS that gives you proper balance:
.textblock {font-size: 1.2em;line-height: 1.5em;letter-spacing: 0;text-align: left;word-spacing: normal;}
The big point here is, as I pointed before, the balance between font-size and line-height. Experimenting is the best way to figure it out but here’s a few good rules of thumb: Keep lines the closest to 12 words per line as possible, as that’s been proven to be the best ratio in terms of readability. Also, keep in mind not everyone’s eyes tolerate 10px fonts, so aim a little higher if you can. Or use proportional font sizes so everything scales if the users need it to.
One tool that may come in handy if you’re doing the type thing is Typetester, which allows you to dynamically test several combinations of font-families, sizes and leading values.
One other detail Nielsen points out is the lack of contrast between foreground and background. This is a no-brainer (or so I hope). When designing, keep in mind that not every monitor has the same contrast definitions, so play around for a while and actually use colors that suit the most settings with the best threshold. Remember the point is for it to be readable, not look pretty (that should be a – positive – consequence).
2. Non-Standard Links
This doesn’t require much thought. You should make it as easy as it can be for users to see what’s a link and what’s not (ironically enough, at the time of writing this I realize I didn’t follow this myself so I decided to do some changes in the stylesheet).
a, a:visited {color: #637277;text-decoration: none;border-bottom: 1px dotted #aaa;}
Note that I don’t use “text-decoration: underlined” but use border-bottom to generate the underlining effect on links. The reason why I do this is because I feel border-bottom (using dotted borders) is less obtrusive than plain old underlining, while still getting the job done. It works for me, but you take your pick on what suits your blog the best.
One thing that Nielsen recommends that I don’t follow all the time is the need to diferentiate visited links from non-visited links. The reason why you don’t see that here is because blogs don’t follow a timeline. Blogposts may be updated, there may be new comments you want people to look at, so anything that may make anyone not click because it may be nothing new is undesirable. Still, I distinct read posts from unread posts (see the red mark on the post title? There, that’s it).
3. Flash
This one I entirely agree with Jakob Nielsen on, and there’s no tips besides the ones he has on his article. I think everybody has been in sites that either use Flash exclusively, or that use it for navigation, ultimately resulting in poor navigation just to have some fancy roll-over effects. One of the unfortunate examples of this is Pitchfork Media, one of my favourite websites on music, that has this really annoying Flash navigation that I could certainly live without.
The only tip I can give on using flash is the same I give whenever someone asks me if they should use Ajax in their web-apps: use it where it really has a purpose or don’t use it at all. Ultimately, it degrades the experience for some people, and if your business is getting your content to the biggest audience, this is something you should stay away from.
Wrapping up for now
This is it for the first article on pleasing Jakob Nielsen by increasing the usability of your site. The second and final articles will follow shortly in the next few days, so keep an eye out. Now get to work and make your site better – for everyone.
If you need more information about improving your website or just want some information on Usability, Web Standards and Information Architecture, drop me an email. I have been consulting and helping companies create better experiences on the web for a long time now, and will be glad to do the same for you.
I think that if a site has a clear demoographic of technical users, the relative importance of Jakob Nielsen’s suggestions differ slightly.
With small font sizes, you are more likely to annoy, but less likely to render something unreadable. This is because, although the users are capable of fixing the problem by bumping up the font size, they are both more likely to change the defaults* and more likely to be using a high resolution where larger fonts are more important.
* e.g. my default font size is 1px smaller than the default, so somebody specifying 80% font size might well be readable at the default size, but not for me.
With link colours, you can rely on them being able to recognise underlined text as links more than the average user, so you don’t need to -rely- on a different colour, but again, they are more likely to use the visited/non-visited differences than average users.
Good advice on the Flash/AJAX point, that’s what I always say. Use it when it’s appropriate, don’t use it for the sake of it.
As far as the length of lines is concerned, there’s recent evidence that reading online doesn’t match up with the line width rules for physical media. I believe you can get a link to the survey from Joe Clark’s weblog if memory serves me.
As always, excellent advice with real examples.
Thank you ;)
[...] This is the second part of the “Pleasing Jacob Nielsen” series about how to use Jacob Nielsen’s Top Ten Design Mistakes for 2005 guidelines to get yourself a better website or blog. In the first article in the series we talked about font legibility, standard and non-standard links and flash usage. This one will go on into content, search, browser dependencies and getting data from your users. [...]
[...] So here we are, the final article on how to please Jakob Nielsen by not falling on any of the design mistakes of 2005 (part 1 and part 2 are also available). In this final article, I’ll talk about contact information, liquid layouts and photo enlargement. Again, if you haven’t read Jakob’s post, read it first and come back here to see how to implement the tips. [...]
[...] -> Pleasing Jakob Nielsen, Part 1 -> Pleasing Jakob Nielsen, Part 2 -> Pleasing Jakob Nielsen, Part 3 [...]
[...] Pleasing Jakob Nielsen [Part 1] [Part 2] [Part 3] [...]
Pleasing Jakob Nielsen, Part 3
So here we are, the final article on how to please Jakob Nielsen by not falling on any of the design mistakes of 2005 (part 1 and part 2 are also available). In this final article, I’ll talk about contact information, liquid layouts and photo enlargem…
[...] Jakob Nielsen zeigt fast jährlich die 10 schlimmsten Webdesign-Fehler hinsichtlich Usability auf. Im letzten Jahr nahm sich Webreakstuff dieser Warnungen an und zeigte, wie man diese Probleme löst bzw. sie gar nicht erst entstehen lässt. [...]
[...] Webreakstuff commented on Jakob Nielsen’s Top Ten Web Design Mistakes of 2005 a couple years ago. The number 1 usability mistake of 2005, according to Nielsen, was illegible font sizes. Two-thirds of users studied complained about font sizes being too small or frozen from being resized. [...]