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 :)
This not meant to be flamebait, but this site is over 4 years old, and the interface and usability has not gotten any better (it wasn't that good to begin with).
It can work, if one has a site worth using.
Example you say?
Google.
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.
I think this book, or something similar, should be standard issue when you reg a domain name. Whether or not you follow the advice given, it is good for ppl to know when they are straying off the path of what an average webuser (note: not a slashdotter) would grasp. They may still choose to do this, but at least they will then know that they could be alienating general users.
One example is that Slashdot does not follow much of these guidelines. Thats okay, cause they know their target audience is tech, but most sites aren't.
I really think a lot of sites put too much time into making something neat, and not enough into making it easy to use. This book could really help. I plan on buying it.
http://monkeyserver.com --- weeeeee
Of course they are common sense. Unforunately, few people in ANY field have common sense, they are too busy worrying about having the latest greatest product.
/.. They have the common sense to know that the layout works for the site and not to change it JUST to make the site look newer or cooler.
I read above someone complaining about the layout here on
Most markettoids don't have that common sense...at least with this book you have tangible prrof that these guys don't know about UI and shouldn't be dictating it...and that goes along with graphic designers that now think that writting a web page is as easy to do as using Quark or Illustrator, ya shouldleave it to the experts.
So yeah, it should be common sense, but it ain't.
clif
I think of claris homepage, which makes me think of the good old days of tags and animated rainbow horizontal rules.
Which brings up a reasonable point: most people aren't going to do a damned thing about usability unless their silly authoring tools support it. If you take away the intimacy with your site's workings that hand coding brings, people think a lot less about what it is they're building, and how it should work. When you grab the table tool and create a jazzy layout in a few clicks, you distance yourself from the logical process of building a page. H1 just means bigger font, right?
Dreamweaver and such should enforce good practices, but they don't.
there's more than one way to do me.
Is it just me, or does the majority of the comments made by the author point out rudimentary common sense ideas?
/. wouldn't fall into this description, but I would imagine that many (or even most) Web developers do not fall into the /.-reader category.
First off, if you haven't read the book (neither have I), you can't comment on the depth of the information in it, since the review is very brief. On the other hand, go out and surf the Web a bit. The sad fact is that most people don't know these fundamentals.
The problem is that most Web designers, who, it seems, have little or no knowledge of HCI issues are taking the same approach to Web pages that TV producers take to TV. Flashy, little content, lots of bright shiny things to look at. The problem is that TV is totally passive, all a TV program needs to do is make you look at it, and stay there slack-jawed and glassy-eyed while a puddle of drool collects in your lap.
Web sites are delivering information, and more and more, allowing people to do things. It is an interactive format that is far more sophisticated than TV, particularly when you start doing things like commerce.
If you want flashy, dumb pictures to mesmerize and bedazzle your audience toss out the Web site and replace it with a single Flash animation. If you want to provide real information and allow your users to accomplish something useful and productive, study Human-Computer Interface design and actually learn something, because you are ultimately providing a computer application.
Even sites from people who should know better, like Netscape and Microsoft have lots of real usability problems.
The crowd here on
You are in a maze of twisty little passages, all alike.
If you have a large list of links on one page, PLEASE use different colors for visited and unvisited links. This is helpful for forgetful people like me who accidentally click on the same link twice.
Also, make it so you, the user can resize the font. NOt sure how it works, but I've seen my share of pages where moving the font size up and down doesn't work at all. People with poor eyesight will be thankful.
Also, do not have links open up in a new browser window unless absolutely necessary. If I want to click on a link to open in a new window, I'll do shift-click. You don't have to do it for me. I guess people assume they want their website to be on everyone's browser at all times, so links away from the website open up yet ANOTHER window(or in any case of a site on cjb.net, you'll get about 20 pop up windows in addition).
And don't try to jam links to everything on the index.html page. Spread it out a bit, in a logical manner. Every gaming site(which all look the same) love to do this.
Don't have excessive amounts of porn banners just to make a few bucks you won't see in referrals. You'll lose out on the audience of people who surf at work.
Not that I'm surprised or anything, but 75% of the serious posts so far dismiss the ideas in the book as common sense.
Have any of you actually read the book?
Come one, people.
(ie you shouldnt use frames)
Just for the record, there are lots of good reasons not to use frames often, though I myself don't tell people to "never" use them.
Basically, frames often create an absolute navigation nightmare. Which is ironic, because simple navigation was the reason they were created. Let me give you an example from an old IBM site I helped to code once (I'd point you there, but let's just say it was so long ago the product line's been renamed). Basically, they wanted to use a navigation frame on the left determined by the "type" of the visitor, eg, management, IT, or engineer.
The right-hand "content" frame would then get various case studies, whitepapers, whatever, which could be shown to any user "type", but the prominence in the navigation frame would be different. Anyway, it was a nightmare because when someone would call and say "I saw this on your X webpage," the sales rep would never know exactly what that page looked like to them because he didn't know which frame was on the left. Let alone trying to give someone a "deep" link within the site: there'd be no navigation frame!
I think eventually they switched to a dynamically generated table-based page, but that was after I left. That pretty much turned me off of frames as a general navigation tool, although I will acknowledge that they're quite useful in situations where the navigation frame never changes, such as in browsing a PDF file or book online, when you really, really only want to use the frame to navigate around in a specific area of content.
If the navigation from changes from section to section, though, and the same content is plugged in to multiple sections, just forget it. Use tables and have an App Server that dynamically generates the pages for you.
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.
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)
Do we really another book from him telling us not build sites using any post-1996 technology? ... Should we
really keep from using current
technology in order to be backwards
compatible with the 2.3% of all users
who are incapable of upgrading their
browser? How can innovation occur if we
confine ourselves to Nielson's 256
color, 1995 view of the web?
Jakob is primarily addressing web sites that sell products. Not entertainment sites. Not personal sites. Sites whose goal is to maximize sales. This is not about Art or Beauty. It's about business. Maximizing the number of users who can access your site will increase the number of users who can buy products from you.
Furthermore, Jakob isn't suggesting that you should stick with the state of the web in 1996. He suggests that you lag the current state of the web by several years. He suggests you create sites that degrade gracefully. He suggests you focus on content and usuability. All of his suggestions stem from the goal of creating sites that satisfy your customer's needs and desires. He research shows that focusing in these areas increases completed sales. Sounds like good business practice to me.
Can you really trust someone who includes the string "discount usability engineering" in the meta keywords on his site to give you good advice on web design?
Most certainly. Part of his work is trying to convince people that you can do effective usability engineering without spending a great deal of money. Too many people skip usability testing because it's perceived as being expensive to do. More sites need to do usability engineering, and some simple, "discount" usability engineering is significantly better than no usability engineering.
Yes, Nielsen can sound like a broken record. But the only reason he's saying the same things over and over again is because they *still need saying*.
Even after five years of widespread web use, there are still many who just don't get it, who think that the way to pull users to a site is to hide the useful information and clog it with graphics and effects that were passe in 1997. (Possibly these sites are a little reduced in number after the dotcom crash, but not gone altogether. And there's always the worry that existing sites will forget their purpose and go downhill (eg Altavista).)
So I say that Nielsen should keep on plugging away with the same message. You may have heard it all before but not everyone has.
-- Ed Avis ed@membled.com
Looks OK to me with Mozilla 0.9.6. It uses Flash, though. Many web designers who use Flash neglect to provide an alternate non-Flash page.
At least one of the points in the article you cite is no longer valid. Nielsen points out in the article that nearly 13% of browsers can't view frames. However, the article was written at the end of 1996, when Netscape 3 could claim almost half of the browser share.
His "Authoring Problems" issue strikes me, frankly, as baloney. Frames aren't significantly harder to use than tables, and yet I rarely hear people advocating the elimination of tables, unless it's for other reasons. Besides which, the state of the WYSIWYG authoring tools is such that at least they can produce frames reliably now.
In other respects, much of what he wrote five years ago still applies now, and personally, I hate writing frames. Just be aware of how the technology has changed.
It'd sure be nice to see a summary of the list of flaws from the beginning of the book? I wanted to see if my pet peeves were in there:
Load Time
I hope Nielsen made prominent comments about load time. If I were the guy approving the design of the company's external web site, I'd do the final review offsite where one would have to use a dial-up connection to view the site. That would go a lo-o-o-ng way to reduce the amount of gratuitous graphics that most corporate web sites shove onto their homepages.
Not Testing with Popular Browsers
Not testing with all the popular browsers should be a misdemeanor, at least. (IE dominance aside, would it kill 'em to at least try out the top three or four?) True story: Compaq's home page used to have a link to text-only version of the same page. Unfortunately, all the links on the ``text-only'' page pointed to pages that were lousy with graphics and tons of Java/Javascript that crashed the browser that they shipped with their UNIX workstations. So much for text-only. The day after I called their office to point out that I was unable to view their web site using the software they shipped with their OS, the text-only link disappeared from their home page. I can only imagine the conversation between the manager and web page maintainer:
Boss: ``Hey! People that follow the text-only link from the home page have their browsers crash. Fix it.''
Maintainer: ``Sure, boss. Just take a few seconds.... Done!''
And Compaq people who I have to deal with wonder why I laugh when they suggest ``you know, this information is available on the web site''. The thing that pissed me off the most about this incident was that the pages wouldn't load using a browser that they were shipping on the OS CDs. Web pages on the CDs had links to pages on the corporate site that would crash your browser. Pathetic.
Teeny, Tiny Fonts
Then there are the web sites whose designers have 20/5 vision (or better) and force you to view the site with the smallest possible font that your browser is capable of displaying. Guess visitors will actually be able decide for themselves what font size is best for the viewer sometime before the heat death of the universe. If we want the ability to choose in our lifetimes, though, I'm betting that it'll only happen after someone shoots all these arrogant designers (``Listen! I'm an artiste! What school of design did you attend?'') and pry their pet style sheets from their cold, dead fingers. (BTW, the line forms behind me.)
Why do I mention these? Because it appears that 99% of the companies with these broken web pages couldn't care less whether users have an easy time accessing their sites. If they actually gave a damn, they'd stop creating web sites that didn't appear to purposely antagonize their visitors.
Gotta wonder: Who was it that posted the web page ``Why Web Sucks''? Hopefully it's still around. IMHO, it's still relevant.
CUR ALLOC 20195.....5804M
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.
A Government Is a Body of People, Usually Notably Ungoverned
It may seem like common sense, but good page design is hard to implement. In our classes, we make sure that we always have representatives from at least two firms registered for any class. The students then do a usability analysis on pages that they did not create.
When the first student makes "dumb mistakes" on a page, the designer is sure that it's a fluke. When the third person makes the same "mistakes", it's funny to see the designer's jaw drop. Usability is not about being pretty, nor is it about what is expected.
Good usability incorporates page purpose, site purpose, and user expectations to make it easier to accomplish the purpose for the user. If I can't get to my desired item easily, return to it, and help other people find it, the site is not usable for me. End of story.
That thing about oil rigs and shadows in the water? It may seem trivial, but if a major purpose of the website is improved public relations with a potentially hostile audience, little things take on bigger meaning....
Why didn't you just hit CTRL-N to open the offending page in a new normal window with scrollbars etc.? Seems a lot easier...