Homepage Usability – 50 Websites Deconstructed
I just read through Homepage Usability by Jakob Nielsen and Marie Tahir. They analyzed 50 rather popular websites' homepages. Ouch. What a sorry state the web is in.
Nielsen and Tahir list more than 100 guidelines for homepage usability. It's definitely worth a review to see how your homepage stacks up. You might keep a copy around for when somebody comes up with a terrible idea for your website, and you need a handy reference to show why it's a bad idea.
The book is worthy. Nielsen and Tahir then pick these 50 homepages apart, but good. Reading through the critiques should help people learn to be very detail-oriented about their website, and should give them a lot of experience with the kinds of things they should look for.
Some thoughts....
It's a little unfair to judge websites from the outside, in that a company may have narrower goals for a particular website. Some websites can assume highspeed connections, for example.
It's also a little unfair to judge websites from screenshots printed in a large, glossy book. Text in screenshots will look awful alongside the text of the book.
It's rather painful to read through the book, just because the homepages are (almost) all so densely packed with links and graphics. Flipping through twenty or so in rapid succession starts to give me a headache. Just think how bad it would be if the animated ads were flashing on the pages, too.
As I've said before, typography is largely usability for print, and Nielsen continues to miss one of the key elements of typography – line length.
Nielsen recommends "liquid" page layouts, that will stretch or scrunch lines of text according to the width of the browser window. If you take that approach, some people will see lines that are unreadably short, and some will see lines that are unreadably long. It's really just another way of targeting people with the same monitor settings that you use.
A better approach is to use a fixed width that is appropriate for almost all users. People with narrower browsers just have to scroll horizontally to see the far right column. (Don't put the most important stuff over there.) Web browsers should have an easy setting to prevent any column of text from being wider than the browser window.
Nielsen would be even more helpful if he would review the literature on typography. For example, what we would call "whitespace", he calls "unused". The (small) problem here is that whitespace can be very valuable, but in the book they always count it as wasted pixels. That could lead inexperienced designers astray.
Nielsen recommends that text links should be underlined. We know that reduces readability when the text is more than two or three words. Nielsen could also suggest using stylesheets to improve readability by adding a little more space between lines of text. Browsers have supported that feature since IE4 and NS4.
Nielsen and Tahir collect statistics about many features: the percentage of the browser window that is "unused", and percentage of the 50 websites for which the logo is in the upper left, for example.
A more typographically oriented crew might have counted the number of fonts – color, size, weight, family – per page. They could also have measured the use of color – percentage of the page in each color, the number of colors. Too many fonts and colors are why websites look so cheesy, and why they give you a headache if you look at too many of them too quickly. The cheesiness interferes with usability, even if the website is (otherwise) organized and written well.
One last point: they say download time should really be one second, though their guideline is ten seconds. I wish they had gone into a little more detail. What you really want is the perception of responsiveness. You want the page to be useful within a very short period of time, but it's actually ok if some images are still downloading, especially if they're not even visible on the screen yet.
The first time a user loads homepage, most of the website's graphics have to be loaded. Other pages appear much faster because the graphics are already cached by the web browser. The first http request to a website may have the additional overhead of a dns lookup.
There are interesting hacks you could do, like delaying the download of inessential graphics until after the text the page has been loaded. In certain circumstances, that could make a significant improvement in speed of displaying text of the page.
Homepage Usability website [useit.com].
Copyright © 1998-2011 J. R. Boynton