Slashdot Mirror
Homepage Usability
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.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: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.
Link FormattingAll 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-specificNext 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.
"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 :)
hehe... Yes, this is a blatant ad, but I used to work for them, and I still feel a little company loyalty.
For a good service that provides what isn't, strictly speaking, usability data, try http://www.webcriteria.com. They do computerized testing of your web site that checks for "clutter" and fluff. It tells you how long an average user takes to read your page, how long it takes an average user to surf through your site to find a specific piece of information, or for commerce sites, it will even tell you how hard it is to place an order.
Yes, it's a blatant ad, and I don't even work there anymore, I just think it's a great service. (Plus, they have the coolest programmers on the planet, programming AI that does everything.)
Another non-functioning site was "uncertainty.microsoft.com."
The purpose of that site was not known.
is not the cheapest place you can buy this book. Check out AddAll for a price comparison.
But it is for some marketing folks.
Where I work we had, for over a year, a web site that belonged on WebPagesThatSuck. It required javascript be enabled just to tell the viewer he needed the Flash plugin to get past the front page. No alternative. Why? A marketing VP thought it looked professional (I guess in marketing professional is a synomyn for "k3wl").
The folks who had to use it (support in the field) hated it. The people on the phones told to say how great it was hated it. Without javascript it came up as a blank page. Nothing else. Nada. Nil. Zip. With javascript, you had to go get a plug in. We were saying "Our site is too cool for you. Go elsewhere." But "elsewhere" wasn't an option for some, and for others it was where didn't want folsk to go: our competitors.
A while ago someone quietly re-made the whole site and the VP "had it thrust upon him." While he did get to do some minor tweaks (like get javascript menus back - but js isn't required - and a #&$% marquee line) it is now useable. Not ideal. It still sucks a bit, but at least now it sucks in a useable manner.
That VP is who this book is for. I will grant the second point - I doubt the book would have helped him. It wasn't until the site was changed and various reasons why pointed out that he grudgingly came around. One reason: Search engine spiders don't run javascript of Flash...
"Discount usability" is a term Jakob uses for a specific method of usability testing.
I'm not a big fan, but I wouldn't discount his whole approach just because he puts that term in his site keywords.
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.
----
"I used to listen to Null Device before they sold out."
Jakob Nielsen has always perplexed me. I remember reading Flash: 99% Bad and being totally confused. If Flash is so "bad", why does everyone use it? Slashdot just linked to the flash-enabled iSee project by Applied Autonomy today, and no one complained.
One of Nielsen's famous complaints is that every web site should be compatible with the "Back" button - this is absurd, not even Slashdot is compatible with the Back button. Try posting a comment, hitting Preview, and then hitting back - Slashdot erases the contents of your comment window.
Admittedly, some of his ideas are very good. We DO need a way to deliver rich web content to dialup users, and right now a 100K web page is the wrong way to do that. Some of his other ideas - banning Flash for example - make less sense.
And why the obsession with this "any browser" business. Let's face the facts: some versions of Netscape 4 don't render Style Sheets at ALL. Their miserable failure of an attempt to implement CSS was noble but it just didn't work out. If I publish a browser with the ability to read nothing but the letter "Q", do you need to rewrite slashdot to be compatible with me? Of course, this is an absurd argument, but it cuts directly to the point: it's OK for web sites to prefer browsers that are more standards compliant. Slashdot, for instance, gets over 85% of its' hits from Internet Explorer - for good reason.
Anyway, Nielsen is certainly a vast improvement over "HTML for Dummies" and let's hope he gets past his own reactionism and continues to provide a valuable resource to the Web Design community.
If guns kill people, then CmdrTaco's keyboard misspells words.
While its good to see Jakob Nielsen not just recommending Mosaic-era web pages this doesn't really seem different from anything he's written about online or published in the last few years. As an information architect I've read a lot of Nielsen and just see him as way to strict. Not all web pages have the sole purpose of efficiently distributing content. For a lot websites (like www.pepsi.com) reinforcing the companies brand is the primary goal and just about every website has it as a strong second or third.
Usability experts and designers like Donald Norman, Alan Cooper, and Bruce Tognazzini seem to me to be a lot more realistic in their mixing of user goals and business goals. If the business goals don't get met there is no company to meet the users goals. I wish Jakob would stop issuing these outdated proclamations ("If links are blue, users know what to do. End of story.") and start taking a more realistic view of what it takes to get a site to achieve both the users and the businesses goals.
Someone else mentioned it but said they weren't sure, so I'll explain it more exactly:
Sites that specify font sizes as something concrete (ie, points or pixels) cause most browsers (read: Internet Explorer) to fail to resize the text. My webpage lays everything out via CSS (as in, no tables, but a menu on the left and content on the right). (No comments on usability please, I use it for myself and I can use the thing - actually, I think the base layout works fairly well, but my color scheme probably will piss off people who aren't me :). Also, a word of warning: if your browser does not support CSS and HTML4.0, the page will look funky. It'll render quasi-alright in Lynx (the menu currently comes first - maybe I should fix that) and it'll layout (almost) properly in Netscape 4, but the fonts will be all screwed up. Ignoring an off-by-one bug in Moz, it renders fine in both Mozilla and IE.) I use points to specify the layout since I would hope that specifying it in points would allow a browser to scale the font and don't want to play the "match layout with percent font size" game that I'd have to play otherwise.
Specifying font sizes as percents allow IE to properly scale the font. Specifying the size as points or pixels causes IE to keep the text size static when "zoomed." (Mozilla scales the font reguardless of point/percent, but I haven't tried pixel - my guess is that it would scale it as well.)
Personally, my view is that when text is "zoomed" the point to pixel conversion should be scaled up - IE doesn't scale the points and Mozilla only scales the font sizes. (Again, if you look at my webpage, I think that when I scale the font size up, the layout should scale along with the new font size since the font size and the layout are both specified in points. It doesn't scale at all in IE and Mozilla just makes the glyphs larger/smaller.)
Arguably, the fact that IE doesn't scale the font sizes larger is a bug in IE and not an issue with the web developers. But YMMV, I suppose it would make sense to redo the webpage to work around bugs in the most popular browser, especially one that makes pages illegible in it.
You are in a maze of twisty little relative jumps, all alike.
- "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:Jakob Nielsen was interviewed by Slashdot over a year ago. On the subject of /.'s usability, he said:
Obviously, Slashdot has great usability for its targeted user base of nerds. The proof is in the pudding, in that they use it so much and keep coming back. There is nothing here but pure user interface: nothing you buy or get, so if people use it, it must be because it is good. This said, many elements of the interface would present too much complexity for more average users. For example, the many different ways of viewing and sorting threaded discussions is quite difficult to understand. How do you really know what you will see if you click on one of the links from the home page? There are three elements of Slashdot that I particularly like:
* Simplicity in the layout itself: focus on content rather than flash.
* The liberal use of linking - in fact, the site lives off the ability to link to the rest of the Web. Too many other sites forget that hypertext is the foundation of the Web and provide nothing but a closed world.
* The reputation manager effect coming from the moderation system.
Yet another book by New Riders. Makers of some of the worst tech books out there.