Homepage Usability

Danny Yee writes: "Last year I reviewed Jakob Nielsen's Designing Web Usability . Read on for my review of his latest book, Homepage Usability." This might make you want to go and revise your own home page. Homepage Usability author Jakob Nielsen, Marie Tahir pages 315 publisher New Riders rating 9 reviewer Danny Yee ISBN 0-7357-1102-X summary high-profile homepages deconstructed in colorful detail.

You might want to read Homepage Usability just for the entertainment of watching web usability guru Jakob Nielsen deconstruct the homepages of fifty major sites. Or you could read it for some invaluable advice on web design -- I learned a lot from it, as I think even seasoned web designers will.

Homepage Usability begins with 113 tips on homepage design, some of them obvious and some not so obvious, and most of them applicable more broadly than homepages. Here are two of the shorter ones:

Use graphics to show real content, not just to decorate your homepage. For example, use photos of identifiable people who have a connection to the content as opposed to models or generic stock photos. People are naturally drawn to photos, so gratuitous graphics can distract users from critical content.

Don't use clever phrases and marketing lingo that make people work too hard to figure out what you're saying. For example, the "Dream, Plan, & Go" category on Travelcity might sound catchy to a marketing person, but it's not as straightforward as "Vacation Planning." Every time you make users ponder the meaning behind vague and cutesy phrases, your risk alienating or losing them altogether. Users quickly lose patience when they must click on a link just to figure out what it means. That isn't to say that homepage text should be bland, but it must be informative and should be unambiguous.

Nielsen and Tahir then look at some statistics on the fifty sites considered. These statistics are used to make recommendations, following Jakob's Law of the Internet User Experience, that "most users spend more of their time on other sites." Here's a sample:

Link Formatting

Next to the use of colored text, the underline is the second-most important cue to users that text is clickable, and 80% of the homepages underlined the links. We continue to recommend that links be underlined, except possibly in navigation bars that use a design that makes it more than commonly obvious where users can click.

Of the homepages in our sample, 60% used the traditional standard for link colors: blue. This is a fairly small majority, but still large enough that we continue to recommend blue as the color for unvisited links. If links are blue, users know what to do. End of story.

All this packs a remarkable amount of useful information into the first 50 pages, but the vast bulk of Homepage Usability, some 250 pages more, consists of analyses of the fifty chosen homepages. These follow a standard format. A full-page screen-shot faces a brief commentary, discussion of the page TITLE and tagline (if any), and a pictorial (overlay plus pie chart) breakdown of screen "real estate" into operating system and browser controls, welcome and site identity, navigation, content of interest, advertising and sponsorship, self promotion, and unused/filler. Then follow either two or four pages with detailed commentary: the screen-shots are repeated on the left-hand pages with elements numbered, and the right-hand pages have comments on them. Many of these are trivial and site-specific

"This Go button's color isn't noticeable enough - there should be much more contrast with the background color."

some of them amusingly so

"In general, oil companies would best avoid photos that show large dark shadows in the water next to their rigs."

Others are more general

"Don't have a special Shop link when there is a product section. The natural thing for users is to find the product first and then decide to buy it."

The sites covered are mostly those of corporates or media organisations - Ebay, ExxonMobil, ESPN, IBM, Victoria's Secret, and CNNfn, to name a few -- but some government departments are included and there's a good sprinkling of English-language sites outside the United States, such as those of the BBC and Australian supermarket chain Coles. The vast bulk of the analysis is, however, just as relevant for other kinds of organisations -- certainly for the university at which I work and the charity for which I do volunteer work, but also for my personal sites.

Finally, a comment on the physical book. A large square volume, 25cm a side, with colour everywhere, Homepage Usability is really nicely laid out. I'm not generally a fan of books with a lot of graphics and screen-shots, but here they are used to good effect, demonstrating how some things can still be done much more effectively in print than online.

You can order this book from Fatbrain. Check out Danny's other Internet and publishing reviews. Want to see your review in this space? Check out our book review guidelines first :)

Comments

No, you don't

[jpatokal]

Proper usability is way less obvious than most people think -- the fundamental problem is that the web site designer is not the user, and many ideas that seem fine or obvious to the designer will be incomprehensible or very unnatural to the user. I'm both a programmer and usability engineer, with years of experience in both fields, and my jaw still drops every now and then at how a designer's "common sense" user interface fails miserably when tested with real users. But with practice, you can learn to avoid many of these pitfalls and think outside your own narrow box.

As for the author's credits, Nielsen is widely acknowledged to be a guru in the field. Check out his website, UseIt, for lots of more usability-related stuff.

Re:Take Jakob with a grain of salt

[mcelrath]

Jakob seems to be stuck on information delivery in its distilled form, which simply isn't paying the bills for many sites out there.

And just what do you think the web is? Some kind of place where people pay good money to see your blinking flashy popup crap? No. People use the web to find information. Anything else is secondary. If people can easily find what they want, they will buy it, and that's where the money comes from. They won't buy it because your ad blinks more than the next guy's.

I'm sorry non-information-delivery doesn't pay bills for you, but really, good riddance.

Kudos to Jakob for emphasizing function over form. The web is a functional medium. Now if you're running an on-line art-gallery...that's a different story.

--Bob

Not really focused for techies

[NulDevice]

Yeah, Neilsen tends to be a blowhard. He goes overboard in his practice of simplicity - but I think his extremism has a point - he's using his ranting to gain a reputation - to drag sites away from the all-flash everything-lights-up approach. Nobody is going to implement his methodology 100% except him. But if someone implements just 5% of it on a site that was bogglingly unusable, then it's a victory for users overall.

As for this book...it's pretty, but it's not aimed for developers and professionals. It is, as many have pointed out, very common-sense. This however makes it perfect for Marketing people who make a big deal out of lots of pretty pictures and gratuitous animation. Internet common sense is often lacking in those who grew up designing for paper and print. For better guides for techies, try Neilen's other books: Designing Web Usability and Usability Engineering (a very technical guide to designing interfaces). Both of those show that while he's an extremist, he knows what he's talking about. Additonally, the book Don't Make Me Think! is an excellent reference for designing usable web sites and applications (and it's a damn amusing read).

On the other end of the spectrum is the book Fresh Styles for Web Designers which is basically some guy collecting a bunch of pretty websites and telling you that they're cool and don't sacrifice usability (he's lying - 90% of them are almost totally unnavigable). Pretty pictures, though.

Reality is somewhere in the middle.

It's a tough field right now. On one hand you've got Joe Corporate-User who believes that if he's got MS Word's "Save as HTML" feature, he's as good a web developer as you are. You've got software engineers who would, given the chance, make every web interface beveled and battleship grey. You've got web designers who are still stuck in the 1996 mode of "if the website looks cool that will be enough to bring in users." The real challenge in web development is juggling these people and producing something that satisfies users and manages not to be mind-bogglingly dull.

Re:Same as it ever was...

[GreyyGuy]

The whole point he has is how usable the site is. It doens't matter how "innovative" you are if no one can use the site. If they don't understand the navigation or if it takes them a few minutes to figure out "oh, that color means it is a link" then all your innovation is worthless.

Unless you are just designing a site to be cool and impress your friends. Then do what ever you want.

Sure there may only be the lowest 2.3% of people that will be left out if you use newer stuff, but if you are designing a commerical site, do you really want to piss away more then 1 out of 50 visitors? And for the color thing, being very color blind, I get irritated when someone gets cute and uses unusual colors so I can't read the text on the screen, so there isn't any problem with the basic 256 for me.

Besides, look at the sites here people use. Google, Yahoo, Slashdot... all of them use innovation, but it is all on the backend. The pages themselves are still pretty simple HTML.

What, specifically, is the problem?

[extrasolar]

Actually, one of the reasons slashdot is so popular is that it is so usable. I know Jakob made that point in his last book _Designing_Usability_ that the most popular websites are often the most usable.

Okay...lets try to use some of Jacob's principles on Slashdot. Look at the homepage. First of all, you got the Slashdot logo and text in the upperleft-hand corner. Its obvious where you are. This is a news site so the news should be the most obvious part of the page. It is. In fact the news takes what looks like 75% of the width of the page, probably more.

Next, Slashdot makes great use of what Jakob calls scanning. Jakob has noted that visitors don't often read all the text on the page but that they rather they scan for the information they want. So the important information should be underlined, italicized, bolded, or put in a different color. This happens on the Slashdot homepage. The headings are the most obvious in that they are white with a green background which contrasts with the text which is black on white. Then at the bottom of the news entries you have "Read More" (which is an active verb, BTW). And its highlighted.

Another principle that Jakob explains is that visiters like to have an idea of where they are going before they get there. At this, Slashdot seems to excel at. For instance, before the main body of the homepage loads, you already get an idea of what topics today's news covers by the icons in the upper right hand corner. Today I get an icon for The Internet, Linux, Microsoft, News, and Privacy. While it would be a little better for these icons to have titles the tooltips serve well for if you don't know what the icon is for. Also, these icons correspond directly to the icons next to the news items. In addition, each link in the news stories have relevant text underlined so you have an idea on where that link will take you.

Slashdot is also fast and for me takes under a second to load. It has little use of graphics and these graphics are cached to improve load time for other visits.

People who feel comfortable coming to this website have good reason, from Jakob's principles. To an online friend of mine I showed a post I made. Next thing I know, he replied to it. He told me he never used this website before.

So if there's a usability problem with this website, I would be interested in knowing what it is. Because I'm not finding anything.

(before posting this I notice a bold heading below the comment window that says "Important Stuff:" that says what comments should be like. These kinds of things make slashdot such a usable site)

Slashdot specifics

[mblase]

If I may cite a few specifics:

• Move the "Search" field from the bottom of the (very long) home page to somewhere near the top. Search, either as a form field or a hyperlink, should be immediately visible upon every page load.

• There's too many navigation links on the top-left: "faq code awards privacy journals" etc. etc. Trim it down to 6-8 links that users can scan quickly, or else subgroup them into similar chunks. I still have to search for the "submit story" link in the middle of that morass every time I want to send something in. I'm sure that "submit story", "topics", "preferences" and "faq" are far and away the most-used links in the entire navigation; they should be highlighted or set apart specially.

• "Sections" and "Topics" are confusing. I have yet to find a good reason why both subgroupings need to exist. Also, the fact that some Sections and Topics have different page colors than the homepage while others don't is annoying and confusing. Color should be used consistently the same or consistently different.

And let you think I have nothing positive to say:

• The division of content on the home page is bold, bright, and obvious. The use of icons with mouseover-able ALT text to indicate what topic each story belongs to is obvious by now, but very helpful and not as widely used as perhaps it should be. External content is clustered tightly but clearly on the right; navigation is clustered on the left.

• The use of five icons at the top of the homepage to indicate the five most recently updated topics is a good move, driving curious clickers to the "hot topics" of the moment.

• Comments are easy to sort, easy to scan, and easy to rearrange from the top of every story page. I almost never change my preferences for comments, but I never had trouble doing so when I wanted to.

• Ad banners are Evil in general, but Slashdot's remain small, relevant and non-popuppy. We Love It(tm); may this never change.

I Love Usability!

[epepke]

I've always been a fan of usability. I kept a copy of Psychology of Everyday Things on my bedside table. However, I've noticed some unpleasant patterns over the past couple of decades:

• The Macintosh was way more usable than DOS. People got DOS and called the Macintosh a toy. The Macintosh is still at least marginally more usable than Windows. People get Windows. Apple is on the ropes instead of dead because of design decisions a few years back that had everything to do with flash and style and nothing to do with usability.
• The Amiga, especially with Video Toaster, was a fantastically usable machine. You can't get one any more.
• The Palm is wonderfully usable, focused and appropriately designed. CE devices are clunkier but kewler. Palm is on the ropes.
• Three years ago, someone tried to sell a VCR recording device with a clock dial. Nobody bought it, including Alan Cooper, who at the same time wrote a book griping about how he couldn't buy one.
• If you have a telephone at work, you know that just about every button works in a different, idiosyncratic way. Somebody bought that phone and didn't buy a phone with a better design.
• Go look at the new washers and driers, the expensive ones that people buy as status symbols. Show me one that is as easy to use as the old ones with dials that you turn and pull.
• Count the number of doors that need to have a user manual on them, even if it just says "Pull." Watch how many people struggle for a couple of seconds or even run into them because the design is not obvious. Somebody bought those doors and didn't buy others.
• Submit two software designs. One has a whole bunch of buttons, easily translatable into bullet charts. The other has a unifying concept that makes the complexity unneccessary. See which one impresses the purchaser more.

Alas, all the evidence is that, even if usability is on the list of criteria for purchasing (which it seldom is at all), it is way low on the list. It may even be a de facto negative.

Vincent Flanders asserts that web pages are different: that if people don't like it, they're gone. Well, maybe, but is there any evidence that usable commercial web pages sell better than less usable ones? Has anyone done a study? I thought the value of usability in commercial products was self-evident, too, until the evidence built up that I was flat-out wrong.

Web "development"

[Arandir]

The dot.coms are gone, but they left us one legacy. That's the idea that those who write websites are developers. If that's true, then they should start treating their websites as software engineering projects.

Software engineering in a nutshell:

1) Analysis. What are your project requirements? Who is your market? What are their needs? If it's not addressed here it shouldn't be in the final website. If your site is going to adhere to web standards, req them here. If it's going to support specific browsers instead, req it here and say why.

2) Design. Before you write one byte of HTML or PHP you need to get the design down on paper. Document all pages, modules, classes, databases, interfaces, etc., before you move on to the next step.

3) Coding. This is more than just knowing your language. Code review. Unit testing. Etc.

4) Verification and Validation. No go an test your website. Does it meet all requirements? Does it work for the Konqueror, Mozilla and Opera? Does it work on a monochrome monitor, or for Lynx? If not you had better have that in the requirements. Without looking at any of the design or code, a tester should be able to formally validate the website.

5) Maintenance. You may actually get bug reports! Fix them when you do and don't just tell the reporter to get a bigger monitor, switch to a different OS, or to use a different browser.

6) Repeat. Websites are dynamic beasties. Much more so than applications. Go all the way back to step one.