What can we learn from Jakob Nielsen?
by Philip Greenspun in September 2000
Jakob Nielsen, maintainer of www.useit.com, has published a hardcopy book entitled Designing Web Usability. This article asks "What can we learn from this book?"
It might seem like a stupid question. A person might easily slide $45 across the counter at a book shop and go home to read the 419 attractively laid-out pages. Of what use is a secondary source?
Nielsen writes for a broad audience of decision-makers, HTML designers, graphic designers, and programmers. Nearly all of the examples are from e-commerce, corporate, or commercial sites. Students at MIT are a narrower audience in some ways. Nobody comes to MIT to learn about HTML or graphic design, for example. But our students are interested in a broader class of Web services than those treated by Nielsen. In particular, MIT-trained software engineers aspire to build sites that are collaborative, sites that use computing technology in an effective way, sites that have a dramatic impact on the users' perceptions of how the Internet can be applied.
The goal of this article is to pick out the most interesting stuff from Nielsen's book, leave out stuff that would be obvious to our readers (e.g., "frames suck"), and tie Nielsen's material to related ideas.
Screen SpaceComputer enthusiasts in the late 1970s had personal computers with bitmap video and two 20" monitors. Billions of dollars of investment in the computer hardware industry has enabled computer enthusiasts 20 years later to enjoy a faster CPU and ... two 21" monitors. This lack of progress has resulted in universal kvetching and bizarre fantasies of walls covered in 200 dpi LCD displays or 3x2 arrays of monitors dominating a desktop.
Nielsen holds screen space sacred. The cruelest thing that one can do to a user is to waste his or her screen space. Nielsen picks apart popular sites to show how small a percentage of the screen is ultimately used for content. The rest is wasted on browser and operating system controls, site navigation, advertising, or whitespace that results from fixed-width HTML designs that don't expand when the user expands the browser window on a large-screen monitor.
Speed, Speed, SpeedNielsen refers to, but does not cite or describe, experiments done in the 1960s, 70s, and 80s, that established acceptable response times for information systems. For interactive computing, 0.1 second is the limit. For screen-click-screen-click-screen computering, 1 second is the limit for the user to retain an uninterrupted flow of thought. If the response time for a screen degrades beyond 10 seconds, the user stops focussing on the task at hand entirely and will try to perform other tasks while waiting for the information system to respond.
IBM found that users were most productive when mainframes responded within 1 second.
What are the implications for Web service design? Even if you have extremely powerful servers and unlimited bandwidth, the user will be bandwidth-constrained. So you need to make pages that are very small and graphically light or ones that display incrementally, which can be done by
For an example of HTML design that yields incremental loading, visit http://www.photo.net/samantha/samantha-X. Even on a modem, the user can start reading this page in less than one second despite the fact that it is 37Kbytes long and contains 28 photographs, each approximately 8kbytes in size.
- avoiding the use of HTML tables, particularly avoid making the entire page a single HTML table, which would mean that all the bytes needed to be received before a single word could be rendered
- put WIDTH and HEIGHT tags on all the images so that the browser knows in advance how much space to allocate for them
- put ALT tags on all the images so that users with very slow links can use your site by disabling automatic image loading
Fancy HTMLNielsen argues persuasively that users will become ever more resistant to upgrading browser software. Modern browsers are pretty good. The newest Web users tend to be less interested in technology per se than the people who got connected in 1994. It therefore makes less and less sense to build a Web site that depends on newer HTML tags, plug-ins, etc. Nielsen goes so far as to advocate HTML 1.0 (!). Personally I've taken more a liberal view since 1995 (September 2000). If the Netscape 1.1 browser, shipped in 1994, could read it, it is okay to use on a Web site. Netscape 1.1 implies HTML 2.0 plus tables but not frames.
[The statistics on the photo.net site do not support even my conservatism. In September 2000, only about 3% of users were using 3.0 or older browsers, based on the daily log analysis of 25,000 user visits.]
In the long run, Nielsen's advice will become obsolete due to changing execution environments for computer software. The operating system + browser + amateur system administrator in every home will be replaced by computing appliances that can run bits of software downloaded as needed from various servers without the user's intervention.
Site Organization Considered HarmfulOn page 164, Nielsen refers to research by Mark Hurst, Jared Spool, and himself that showed depressing rates of success by users in attempting to use corporate Web sites. Only 26 percent of users were able to find the job openings page and apply for a job. When it came to finding the answer to a specific question, users had a 42 percent chance of success. These results were obtained experimenting with sites amply supplied with money and Web design professionals.
What does Nielsen recommend?
Nielsen admits that all of these methods break down to some degree on large sites, e.g., those with more than 10,000 pages, particularly when the site is for a corporation with diverse product lines. Recall that Nielsen's old job was on the sun.com site, which, despite much effort and technical prowess, is much more difficult to use than the typical small company's site.
- axe the "home" button on the home page, since it is annoying to click on something and end up back where you are [ed: this goes against the dicta of Macintosh Human Interface Guidelines; the genius of pull-down menus is stability of interface, an option that doesn't make sense in a particular context remains in the same place but greyed out-- see the section of Chapter 4, The Menu Bar, where Apple says "Your application's menu titles should remain constant. This constancy adds to the user's sense of perceived stability of the interface and helps users identify applications when they switch from one to another." The Macintosh way to do this would be to leave the "home" button but greyed out.]
- the home page should offer three or four features:
- a navigation directory to the rest of the site
- (if applicable) a quick form that target the most popular dynamic service available on the site, e.g., on an airline site a quick fare/schedule finder
- include a logo or site name in the upper left-hand corner of each interior page, linked to the site home page
- ensure that interior navigation answers the following questions:
- Where am I?
- Where have I been?
- Where can I go?
To answer "Where am I?" relative to other sites on the Internet, Nielsen repeats his recommendation that each page include the site name or logo. He also suggests showing "parts of the site structure and highlighting the area where the current page is located" (this is never really explained) and a clear headline. Personally I would add that users don't need to see the entire site structure; the Yahoo style of navigation bar is effective at showing a user how one particular page rests underneath a hierarchy.
To answer "Where have I been?" Nielsen says "the browser keeps track in the Back menu" and "don't change the standard link colors." Personally I would add that the Yahoo style of navigation bar is effective for users who have actually clicked down from the home page.
To answer "Where can I go?" Nielsen suggests ... links! In standard colors. Nielsen does not like rollovers, select boxes, or graphics because they don't work the way that other sites do, they don't turn purple once visited, and not all of the choices are visible immediately. [Nielsen's last point here is one made earlier in Edward Tufte's classic Visual Explanations (1997).] He eschews the breadth-emphasizing tabs at the top of each interior page as a waste of space, preferring instead Yahoo-style nav bars (which he calls "full hierarchical path" or "breadcrumb navigation").
[See also "Go To Statement Considered Harmful" (1968) by Edsger W. Dijkstra at http://www.acm.org/classics/oct95/.]
AccessibilityNielsen points out that the Americans with Disabilities Act may require that your intranet be accessible. Rather than offer his own advice, he basically suggests that readers visit http://www.w3.org/WAI/. [Personally I dread having to visit the W3C's site. If you find someone with 20/20 vision who can reliably find anything on w3.org, please write up a report on the phenomenon and let the rest of us know how it is done.]
Even if you don't personally care about the ability of the visually impaired to use your public Internet site, Nielsen gives an example of how you might become shamed into accessibility. He shows http://www.speed-of-thought.com, the Web site companion to Bill Gates's second book, Business @ the Speed of Thought. The home page contained not a single piece of text, just a bunch of GIFs that would be unreadable by a blind person. The Los Angeles Times caught wind of this phenomenon and their story shamed Microsoft into adding ALT tags so that the blind, or those who'd turned off image loading, would be able to navigate the site. Nielsen does not point out the irony in the fact that this book, in which Bill Gates claims to have finally figured out how to use the Internet, is not available in full text form on the Internet (see below).
Acronomic PlatitudesNielsen states that what users want are HOME RUN Web sites:
The last item may need some explanation. Nielsen runs a successful usability consulting business and thus encounters Web teams from a variety of organizations. His conclusion from experience:
- High Quality content
- Often Updated
- Minimal download time
- Ease of use
- Relevant to users' needs
- Unique to the online medium
- Net-centric corporate culture"The HOME RUN approach to web design requires the entire company to get behind the website to deliver an optimal customer experience in the online world. No web team, no matter how good, can create a website that really works if the rest of the company is mired in the physical world and unwilling to put the Internet first in all aspects of virtually all projects.
"Many Internet-only start-up companies do have the right attitude and organize their entire corporation around the goal of serving customers online. But it is a hard transition for a legacy company as long as most departments are staffed by people who do not view the Web as a strategic imperative. Therefore most big-company websites will remain unnecessarily complex for many years to come because they will continue to attempt to paper over an underlying reality that is not Internet-centric."
FunSome parts of the book are just plain fun (well, about as much fun as you could hope for from a Danish guy who majored in computer science). Nielsen tears apart Art Technology Group's use of 3D graphics on the Sony catalog site, explaining that human beings are not frogs and that text is a lot easier to read when not distorted by a 3D projection onto the 2D monitor.
The Goal: Written for Idiots by IdiotsNielsen suggests keeping navigation pages short so that users don't have to scroll to get to a link. Probably good advice for most sites. But he proceeds to suggest that you should write short and write as though the readers will only scan the document. If you end up somehow with a big long document, split it up with hyperlinks and build a separate printable version: "Users will almost never scroll through very long pages, though. As I mentioned earlier, web texts need to be short."
Personally, I think that Nielsen's advice only makes sense for the purely commercial sites that make up virtually all the examples in Designing Web Usability. Users come to get basic information, as quickly as possible, and leave. Commercial sites usually don't have access to good writers because such people would rather be working on the Great American Novel than explaining foobar.com's return policy. The kindest thing that an editor can do for a bad writer is take out all the unnecessary words and clauses.
I have empirical evidence that long pages can attract and hold readers. The photo.net site built a readership of more than 100,000 people with the full texts of Travels with Samantha (http://www.photo.net/samantha/; 350 printed pages divided into 19 long Web pages) and Philip and Alex's Guide to Web Publishing (now at http://philip.greenspun.com/panda/; 600 pages divided into 17 long Web pages). Close to 25,000 people per year read a 30-page story about what it was like to work with Macmillan on my first "dead trees" book. See http://philip.greenspun.com/wtr/dead-trees/story to find all 30 printed pages in a single HTML page. There is no need for a printer-friendly version; because all the content is at one URL, the user can just click on the browser's Print button.
The Web is in fact an ideal medium for longish documents. When you put your whole book on the Web, a reader can pick out an especially relevant chapter and email it to colleagues. Thanks to the search engines, the Web enormously increases the number of people who'll read at least parts of your book. Moreover, a reader who comes in from a search engine is likely to find your book highly relevant to the problem at hand.
What if you don't have enough material for a whole book? Suppose that in 1985 you had enough ideas to fill up 47 pages. That would have been much too long for a magazine but much too short for a book publisher. Because the Web did not exist yet, you had no way of distributing your ideas to a mass audience. A writer who wanted to reach an audience would be encouraged to keep adding filler until a respectable book length was achieved. Nowadays, with the Web audience pushing 100 million people, there is no imperative to bloat. The 47-page idea can be published to a worldwide audience as a 47-page HTML document. A writer will only inflate his or her ideas to book length for reasons of naiveté or microgreed ("micro" because of the pathetic royalties paid by book publishers to authors). Business bestsellers are the classical bookstore bloat victims. Geoffrey Moore's Crossing the Chasm is one of the most important tech business books ever. Yet its 227 pages can be summarized in one sentence: Don't celebrate your victory in a market after becoming the market leader with pioneer consumers; as the mass market develops and all the competitive offerings have adequate performance, the new consumers won't care about the advanced features that your organization is exquisitely tuned to produce but rather ease of setup, ease of use, and low cost. [Moore wrote in 1991 so we can't really fault him for not making this a 50-page Web essay instead of a 227-page book.]
Just as the Internet has created opportunity for authors who keep their ideas to the right length, it creates risk for those who indulge in bloat. Here are some reader opinions harvested with a Google search:
If any of these authors above (except me, dammit!) had kept their expositions to 30-50 pages and published on the Web, the world would have been a vastly richer place. Perhaps the authors made a bit of extra money from publishing in hardcopy but think of the tragic waste of readers' time.
- "About 300 pages too long ... elementary writing style, boring boring boring" says Annette McCaskey at epinions, about Ann Rule's 351-page Bitter Harvest. "If I didn't have to write a paper on it, I would have stopped reading about 50 pages in. My only consolation after having read this book it is that, since my professor liked it so much, my research paper can be full of pointless filler and I'll probably get a good grade."
- "A verbose articulation of ideas described better by others" and "Way too long for the central argument" say Amazon reader reviews of Don Norman's 320-page Invisible Computer.
- "Hooooo, boy! This thing is SLOW! The author steps through each piece of the user interface, bit by bit by bit, and writes entire chapters on what seem the most trivial details. Truth is, though, his points are valid and thought provoking, but his writing is more tedious than Tolstoy." is one Amazon user's take on Alan Cooper's 580-page About Face (oddly, Amazon says that it is 400 pages but I slogged through it and found 580 pages (and about 250 pages of ideas)).
- "Its content can be grasped just by reading through the sub-headings" is an Amazon comment on Gary Hamel's 336-page Leading the Revolution
- "Each chapter can easily be written concisely in one single page without losing any juicy stuff (cos there isn't much)." is the Amazon take on the svelte-for-the-genre 261-page Blown to Bits, a book that I treasure for its closing paragraph alone, in which the essential nature of a company is revealed to be a purposeful community.
- "The first few pages present the idea of the book" and "This book is about 150 pages too long" is the Amazon verdict for the 320-page The Death of Competition by James Moore.
- (this one really hurts) Despite the more than 200 5-star reader reviews at Amazon of Philip and Alex's Guide to Web Publishing, the review that jumps out at me is the following:"Phil and Alex's way cool in-joke laden guide could be edited down by 30% without any loss in content, printed on non-gloss paper to save 30-50% more in unneeded weight. Greenspun abuses print the way the web novices he critiques use the web--utterly superfluous production values that add no value to the user but only heap on costs and hence price; utterly gratuitous graphics which prove that force me, the book buyer, to subsidize Greenspun's embarrassingly mediocre talent ... Philip, the design of your book violates every single rule you hammer away at for 570 pages. Keep the dog, hire an editor, drop the ego, practice in print what you preach on the web. Read Ed Tufte's books and make the next edition actually use graphic presentation to communicate. Respect print, it's older than you are."Ouch! I would have hoped to get credit for having made the book available online for free for the last three years, where a user can disable image loading, print a chapter at a time, etc. But Amazon deletes any comment that references a URL external to their site so perhaps this is too much to ask.
Should every document be attacked with an eye to cutting down to 30-50 pages? If everyone did that we'd be culturally poorer, sort of like the world of the symphony after a visit by the efficiency expert:Could John McPhee have covered North American geology in fewer than 696 pages? Probably. Would a 200-page Annals of the Former World have the same impact on readers? Maybe not. Could McPhee have made more money as content editor of an ecommerce site? Probably. But perhaps he is happier with his Pulitzer Prize than a few extra bucks. As we tell students at MIT: It is very tough to be poor when you've got the skills necessary to build a Web-based information system. At the same time, it is statistically difficult to become the richest person in the world. If you can't become richer than Bill Gates, an improbable event, there will be no distinction in merely being slightly richer than some other rich Web nerd. So you might as well try to build something great.An efficiency expert was given a ticket for a performance of Schubert's Unfinished Symphony. The next morning she wrote a memo to the concert office: 1. For a considerable period, the oboe players had nothing to do. Their number should be reduced and their work spread over the whole orchestra, avoiding peaks of inactivity. 2. All 12 violins were playing identical notes. This seems to be unneeded duplication, and the staff of this section should be cut. If a volume of sound is really required, this could be accomplished with the use of an amplifier. 3. Much effort was involved in playing the 16th notes. This appear to be an excessive refinement, and it is recommended that all notes be rounded up to the nearest 8th note. If this were done, it would be possible to use para-professionals instead of experienced musicians. 4. No useful purpose is served by repeating with horns the passage that has already been handled by strings. If all such redundant passages were eliminated then the concert could be reduced from two hours to twenty minutes. 5. The symphony had two movements. If Mr. Schubert didn't achieve his musical goals by the end of the first movement, then he should have stopped there. In light of the above, one can only conclude that had Mr. Schubert given attention to these matters, he probably would have had time to finish the symphony.
In the writing department, great is Moby Dick (822 pages). Great is Independence Day (451 pages about a single weekend). Great is A Pattern Language (1171 pages of interesting ideas). Great is not writing for readers who scan. This truth is not restricted to works of literature. Thomas Kuhn, in The Structure of Scientific Revolutions, argued that a journal paper is productive in a post-paradigmatic science such as modern particle physics, but that a book-length document is usually necessary to achieve progress in a pre-paradigmatic science. When everyone agrees on a certain way of looking at the world and explaining phenomena, the paper reporting on a single experiment is comprehensible and useful. But to imbue readers with a new frame of reference and relate particular results within that frame requires a book. Kuhn noted that Newton published Principia (500-1000 pages in modern editions) rather than a journal paper on the calculus.
Is there a middle ground? Sure. Standard journalism training is to try to cram a short version of a story into the first couple of paragraphs and let the reader keep reading (scroll) if interested to get all the details. If you want to sell toasters keep the prose short as Nielsen suggests. If you want to change business minds, stick to the length of your idea (probably 30 pages). If you want to change a pre-paradigmatic field of science or challenge Bellow, Ford, Roth, and Updike for ascendancy in the Great American Novel, write a full book. (But please be good enough to park it on the Web so that we can find it when we need it.)
What you can't learn from Designing Web UsabilityAt 400 pages, Nielsen's book cannot cover everything. He does not include references or explain how experiments might be done to shed light on improving usability. He does not say how to actually conduct a usability study on a Web site.
Ben Schneiderman's Designing the User Interface describes a user satisfaction questionnaire that is sold for $1000/site from http://www.lap.umd.edu/QUIS/. It seems awfully long and ill-suited to evaluating Design A versus Design B, however.
TufteIf you want to read something in hardcopy but would rather limit yourself to 4 pages instead of 400, try pages 146 to 149 of Edward Tufte's Visual Explanations: Images and Quantities, Evidence and Narrative (1997; Graphics Press). In these four pages, Tufte makes the following points:
What is truly impressive is that Tufte wasn't even writing about the Web. He was explaining his design for a guide kiosk at Washington's National Gallery. Moreover, because the pages on which he articulates these ideas happen to be mostly given over to illustrations of kiosk screens, Tufte actually gets these fundamental ideas across in less than two pages of text.
- The screen should contain information, not navigation or administration icons. The information should become the interface, i.e., clicking on a word that was itself informational should take you to a screen with more detailed information.
- Give users broad flat overviews of the information (e.g., tables of contents) rather than forcing them through sequential screens of choices.
- Organize your data according to expected user interest rather than mimicking the internal structure of your organization [see Example 4 in Chapter 1 of Philip and Alex's Guide to Web Publishing].
- Why use icons for navigation when words are clearer and take up less screen space?.
Links ("Where can I go")
- amazon.com to buy Designing Web Usability (Nielsen has elected not to make the book available on the Web)
- http://philip.greenspun.com/panda/ -- Philip and Alex's Guide to Web Publishing, some of the same ideas as in Nielsen's book but (a) written two years earlier, (b) available free online, and (c) mixed in with a lot of distracting photographs, ideas for building sites that support human collaboration, and painful technical stuff.
- http://philip.greenspun.com/teaching/one-term-web to find links to all of the teaching materials that we use for our students at MIT (we've written three textbooks, numerous problem sets, and some papers like this; they are all free online for use by other universities and the general public).
- to amazon.com to pick up the fundamentals with Edward Tufte's classic trio: The Visual Display of Quantitative Information (1983), Envisioning Information (1990), and Visual Explanations : Images and Quantities, Evidence and Narrative (1997).
[This is a flame I wrote back in 1996, when I had a small web tools development company with some friends. I think it still applies to designing useful web content]
Document Centric Is Good, Not Bad
I have seen articles in the trade press which refer in a disparaging way to the "outdated document-centric" technology of the Web, and how some new frob from some new startup company is going to save everyone from this sadly misguided approach to Web technology.
Example:Well, I like documents. I like HTML because it lets you easily produce documents that look pretty good, and do this automatically. In fact, it lets you build interfaces to programs which generate good looking and easy to read documents on the fly, which are delivered to users.Web middleware tolls the death knell of HTTP.(In the Middle) (Internet/Web/Online Service Information)(Column) Network Computing v7, n14 (Sept 15, 1996):143 (2 pages). Pub Type: Column. New Web-enabling technologies based on middleware are supplementing the HTTP protocol and may ultimately replace it. HTTP offers broad but shallow functionality and suffers from many limitations in performance, efficiency and security. It is highly document-centric and can make application development awkward. Distributed Computing Environment (DCE) vendors are working on a new DCE-enabled middleware standard that runs HTTP over a secure Remote Procedure Call (RPC) interface, while other vendors are shipping products that replace HTTP entirely. BEA Systems' new BEA Jolt is a Web link to the TUXEDO transaction monitor and message-oriented blah blah blah
Documents are good things. Like books, and the written word, they are a technology which has been developed for thousands of years. Giving someone a document containing information is a far more powerful enabling tool than popping up a bunch of buttons and menus. The user is free to move around in the document, to search it at their convenience, to store it, and to access it with their own tools. Embedding of HTML and advanced user interface controls in documents is an added bonus, as of course are hyperlinks.
The trend in Web technology today is companies stepping all over each other to produce Windows 95 interfaces to Web data. Well I think this is a mistake. The explosive growth in the World Wide Web has been due in no small part to the ease and fluidity of the HTML document model of information delivery. I am not ready to throw this out, and I would rather work with it, than try to force fit the Web into Microsoft's myopic view of how computers must be used.
-- Henry Minsky, September 11, 2000
Well, no offense, but I do think that both Travels and the Web Ho book would be easier to read if they were split up a bit more. There's no good stopping point in the middle of the chapters that one can easilly get back to, which means that one has to either read each chapter in a single sitting or go scrolling through a large document trying to find where one stopped the last time.
-- Perrin Harkins, September 11, 2000
It was very kind of you, Perrin, to scroll all the way to the bottom of this long article and the long comments to contribute a comment about how you don't like long articles where one must scroll :-)
I have a composer friend in New York who is always in need of a new girlfriend. Solicitious friends inquire "What kind of a girl do you want? An intellectual?" He replies "I like a girl who uses a bookmark to read People magazine."
-- Philip Greenspun, September 13, 2000
From the perspective of an ASJ reader, there could be a few small things that would make it more usable.
- Indication on the asj page, that some content is either new or revised.
The asj page is getting longer everyday, and it is quite easy to miss new articles or revisions of an article. It would be nice to have either a "new since last visit" for asj, or atleast (new) or (revised) markers like in the online version of Phil's book.
- bboard style email alert's for new content or revised articles.
Lot of times, one learns of new content when you come back to re-read some article, or when someone refers to it else where. If you are an active developer on ACS, the bboard content gets to your email, and it would be just as useful to have email alerts for static content. Just the notification of content, not necessarily the article itself. Atleast for asj articles!
-- Mohan Pakkurti, September 13, 2000
General Guidelines for Web Accessibility
Accessibility of web resources for visually impaired persons can provide some good insight to good design for sighted persons as well. That said, realize that nearly 15% of web users suffer from some sort of visual impairment - be it colorblindness to complete loss of sight. The numbers may even be higher, depending upon the source - I have seen numbers go as high as 55%, taking into account all forms of colorblindness, age related macular degeneration, diabetic retinopathy, etc. I don't have exact numbers handy, so I'll leave these statistics as an exercise in trust. :-)
Good web design accommodates all users. The Americans with Disabilities Act (ADA), passed in 1994, means that sites hosted within the United States are obligated to provide equitable access to persons that require assistive or adaptive technology to utilize online resources. Public institutions especially are under the gun to accomplish this. Any material provided by a public institution that is not reasonably accessible by a medium other than the web must meet accessibility requirements.
The severity of this is punctuated by recent lawsuits. A blind Australian man is suing the International Olympic Committee (IOC) because his screen reader cannot access the Olympic 2000 web site. America Online recently faced a class-action lawsuit by visually impaired persons who were unable to use AOL resources, even though they were paying for them. It is only a matter of time before Universities become targets of this as well. In short, as more and more resources move exclusively to the web, these resources must be accessibly to everyone.
Note that this isn't just in the United States. I'm pretty certain that they have the Internet in other countries. So, why does the ADA matter if I live in, say, Senagal? Because, quite simply, it is the right thing to do.
That said, how can I make my site accessible? Here's my list of easy steps to take. Much of this seems obvious - until you realize how many web developers and designers ignore the obvious. How usable is that ultra cool flash animation? Does your main page use pictures to express concepts, but doesn't actually spell out the concepts? Wow. Been there, seen that, clicked on to somewhere else. 'Nuf said. Here's the short list:
Images & Animations
The number one issue with visually impaired persons accessing web pages has to do with content conveyed by images that is not contained elsewhere on the page. Adaptive technologies (such as web page readers using voice synthesis) rely upon the web page author to convey information about images and animations in the form of an ALT tag.
All HTML IMG elements should contain a short alternative text description that represents the function of the graphic. This is important for users who have turned off image-loading in their web browsers, those using text based browsers like Lynx, and people who are blind and require the use of a screen reader to read the contents of the screen for them. For example, use a tag like the following:
<IMG src="masterpiece.gif" height="40" width="500" alt="An image of a sad-looking clown painted in soft colors on a velveteen background">
When creating alternative text, aim for a functional label based on the context in which it is used rather than a visual description. A good test to determine if alternative text is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener? If you think that including alternative text is not necessary because descriptive text is already provided above or below the image, use ALT="" in the IMG tag.
Like images that convey information, image maps are often used to control navigation on a page. Often, this is the only place that navigation is available on a page. Unless screen readers can convey this navigation information to visually impaired users, the links are useless. All major browsers today support client-side image maps. Client side image maps should always been used in place of the older server side image maps except for a few specific cases (like clickable geographic maps). There is no problem with using both server and client side image maps, for example:
<AREA SHAPE="RECT" COORDS="5,5,100,40" HREF="index.html" ALT="Link back to the main page">
<AREA SHAPE="RECT" COORDS="150,1,195,140" HREF="catalog.html" ALT="Link to Online Catalog">
<IMG SRC="mainlogo.GIF" ALT="Main logo for the web site" ISMAP USEMAP="#csmap" HEIGHT=200 WIDTH=200>
The best way to guarantee that links in image maps are available to everyone is to include text versions of the links with meaningful descriptions elsewhere on the page. Which leads us to...
Create Meaningful Links
Users who are blind often jump from link to link when skimming a page or looking for information. When they do this, only the text of the link ("link text") is read. Therefore, it is important that link text make sense when read without surrounding text. For example, authors should not use "click here" as link text several times on the same page; this requires a user browsing the page with a screen reader to step through each link and read the surrounding text to determine the purpose of the link. Instead, link text should carry sufficient information, as in "download this document in ASCII text," "view the full version in HTML," or "for the text version select this link."
Click here and win an orange
This example is very bad because the text of the link gives no indication about the destination.
Click here and win an orange
This example is bad because the text of the link is too long.
Click here and win an orange
This example is clear, the link indicates precisely and concisely where it points.
Each FRAME must reference an HTML file
When creating a frames-based web page, it is possible to make the source of a frame be an image rather than an HTML file. When this is done, it is not possible to include alternative text for the image. Instead of referencing an image directly, the frame should point to an HTML file that contains the image. For example, DON'T DO:
<FRAME SRC="banner.gif" TITLE="Frame banner">
<FRAME SRC="banner.html" TITLE="Frame banner">
----- banner.html -----
<IMG SRC="banner.html" ALT="Company XYZ's logo and new product listing.">
Give each frame a title
A TITLE attribute should be added to each FRAME element to describe the purpose and content of the
FRAME. For example,
<FRAME SRC="navigate.html" TITLE="Navigation Bar">
<FRAME SRC="content.html" TITLE="The Navigation Bar changes the contents of this frame.">
TablesIf possible, avoid using tables to format text documents in columns
Tables are used either to layout a page of graphics, text and other elements such as navigation bars or to present data in a tabular format such as train schedules, spreadsheets, etc. Unfortunately, screen reading tools for the blind have a difficult time reading multiple columns of text -- they often read across rows as a single sentence. For example:
There is a 30% chance of rain Classes at the University of showers this morning, but the Michigan will resume on weekend looks like it will be sunny. September 3rd.
might be read by a screen reader as:
There is a 30% chance of rain Classes at the University of
showers this morning, but the Michigan will resume on
weekend looks like it will be sunny. September 3rd.
While this is a problem that the tools need to solve, authors can help the tools interpret tables effectively by providing information about the table. In the future, style sheets should be used to layout pages with graphics, text and other elements. Where multicolumn text and HTML tables are used, consider making the table, page, or site available in a text-only version. In the future, as more browsers and screen readers support the HTML 4.0 specification, it will be possible to label HTML tables in ways which allow them to be more accessible.
Colors and Contrast
Care should be taken to avoid using color combinations that can be difficult to read for persons with color deficit vision. (i.e. - colorblindness) Most persons with this disorder have issues with red/green or blue/yellow combinations. Also, avoid noisy backgrounds that detract from the readability of the page.
If possible, set your monitor to display in grayscale and review the site. If a normally sighted person can't easily make out the text, consider revising your choices.
Check Your Work!
The bottom line for any publication is proofreading. Good design takes time. Skimping on accessibility issues will only limit the audience of your web site. Automated tools can help identify issues with pages, and are a good starting point for making your site accessible. Note, however, that current automated tools can't catch everything. Test your site using a screen reader. View it on all possible platforms in all possible browsers. Take your time, and do things right.
Bobby is a free tool for checking general accessibility issues of a web site. Go to http://www.cast.org/bobby to have your site checked for accessibility issues.
-- Hans Masing, September 13, 2000
For some time now, I have been a booster of the idea of creating a ACS usability testing module, based on Nielsen's heuristic usability testing techniques, that could be used to test all ACS-based sites. I even wrote up a spec for such a beast and submitted it the OpenACS team, although it seemed at the time like the best thing to do was to wait until after 4.0 comes out to implement it.
-- Michael Feldstein, September 13, 2000
... Blown to Bits, a book that I treasure for its closing book that I treasure for its closing paragraph alone, in which the essential nature of a company is revealed to be a purposeful community.How about quoting such gems?
BTW - are cite tags really a security hole? (Initially, I cut & pasted the blockquoted text source, but the original's cite tag was flagged.)
-- Andy Freeman, September 19, 2000
I just want to comment that this article should be included in Philip's book review rather than an independent article. Someone need to organize ArsDigita's content because it is getting a little confusing.
-- Victor Cheng, October 4, 2000
The Point-Interaction is necessary to education
My name is Thomas Gray and I am a graduate student in Mechanical Engineering at MIT. I am starting my second year of database-backed web publishing with my site at http://sharingfirst.mit.edu. The site focuses on online education in robotics. Our goal is to excite highschool students and teach them about robotics.
The Missing Wow Factor
I am aware of the consistent claims that sites should be simple, text driven, accessible, etc. While these ideas are fantastically practical, they fail to excite and inspire the public. Both Greenspun and Nielsen need to allow room in their mental model for rich, vibrant media types to capture and hold an audiences attention. I admit that animations and audio are used poorly by web novices but why should we drop them from the big picture.
The Power of Interaction
Thanks for reading
Chinese proverb: Tell me and I will forget, Show me and I will remember, Involve me and I will understand.
-- Thomas Gray, October 5, 2000
Powerful, friendly queries
Thomas, your first point is a good one. Graphics are very useful for interactive pages, and a prime example of this is helping users build powerful queries. If you are a user with a non-technical background, you are:
- more likely to want to search a site for information (either because you are less familiar with navigation styles or techniques, or figure it should be easier.
- less likely to be familiar with composing text queries using boolean-style AND and ORs.
Having to wait for a graphical user interface to load may be tedious, but it may reap rewards; if you a looking for a funny, light-hearted book, you are much more likely to get a query right if you drag a slider towards the `happy face' than if you have to enter a number between 0-10 (0, serious, 10 happy). Seeing the happy icon confirms you are specifying the correct query.
What happened to `a picture is worth a thousand words'? Images are much more accurate for depicting emotions and feelings. We make use of bold, colour and italic text because changing the appearance of text is just as useful as what it says.
There are other more psychological points that might be worth considering when designing the layout of a page: what about possible tendencies for people to associate the left with the past, and the right with the future? (highly disputable, I realise, but nevertheless interesting - consider that you are reading these lines of text from left to right). Also, maintaining consistency - this is only touched upon with the `home button' stability of interface menu discussion. How does this carry over to web sites on a more grand scale?
Lastly, regarding long pages - yes, the web is an ideal medium for longish documents; this is because you can improve their navigability without breaking up the flow. Anchors and links are really useful - it shouldn't hurt to put a few links at the top of the document to the significant subheadings and changes in topic. This would be a great thing to do with the online version of Philip and Alex's Guide to Web Publishing and the problem sets.
-- Sarah Ewen, October 19, 2000
Philip has succeeded in writing a good distillation for techies of Nielsen's book.
Interesting observation: Nielsen described "Philip and Alex's" as (I paraphrase) "preaching to the choir". Philip implies the opposite criticism of "Designing Usability", that it's too dumbed down for techies.
Philip's jabs about Nielsen not publishing "Designing Usability" on the Web are misleading. Nielsen does publish much of the same material in his Alertbox column. Even though I was already exposed to many of the same ideas through Alertbox, I still enjoyed reading "Designing Usability". I must have too much time on my hands :)
Perrin's criticism is on the mark. The webpages in Philip's online books are indeed too long to be easily read in today's Web browsers. Philip's server logs only prove that both his works were popular despite this. They prove nothing as to whether a different version would be more or less popular (or usable). He's invoking the Killer Phrase, "If it ain't broke, don't fix it".
This argument can't be won anyway. Publishing a new work in both long and subdivided formats, both equally prominent, neither the default format, would provide some conclusive evidence. Evidence of what I'm not sure. Perhaps it would show that long pages tend to have higher search engine relevancy. Or that shorter pages result in more return readership. Without evidence, it's just a matter of opinion.
Also, Philip, I may be misreading your reply to Perrin as a slam, but your implication is wrong: that someone has a low intellect or attention span because they find it difficult or inconvienient to scroll back to their place in one of your chapters. Flipping to one's place in a magazine or book is an entirely different activity than scrolling a long webpage back to the place you last read.
-- Tim Taylor, November 6, 2000
Thomas Gray wrote:The Missing Wow Factor
...while these ideas are fantastically practical, they fail to excite and inspire the public. [They] need to allow room in their mental model for rich, vibrant media types to capture and hold an audiences attention.
And now I will quote Tufte from pg 34 of "Envisioning Information", except I will replace the words "chartjunk" with "flash", and "numbers" and "data" with "content" :Lurking behind [flash] is contempt both for information and for the audience. [Flash] promoters imagine that [content] and details are boring, dull, and tedious, requiring ornament to enliven. Cosmetic decoration, which frequently distorts the [content], will never salvage an underlying lack of content. If the [content is] boring, then you've got the wrong [content].
There are appropriate uses for the technologies Thomas describes. They just aren't for embellishing content to achieve "Wow Factor". There are certainly concepts and ideas that are better expressed with "rich, vibrant media types" than with text, but as Hans wrote, you should provide an accessible text fallback.
 To be fair, I'll suggest that people repeat the same exercise, but this time replace "flash" with "short pages" and "content" with "long pages" :)
-- Tim Taylor, November 6, 2000
Tim: I wasn't slamming Perrin. I love the man! A quote from him ends one of my db nerd chapters.
You're probably right in that I should give Nielsen more credit for making his ideas absolutely crystal clear. Philip and Alex's Guide contains some of the same ideas, it is true, but they aren't set forth as clearly and completely.
But I do think that a book isn't very "usable" if it isn't available on the Web. If I want to refer my students to a portion of Nielsen's book, I really can't do it. Color Xeroxing is too painful for me (I'm lazy) and the students would lose the handout anyway. They could all buy the book, of course, but they are poor (MIT took all their money) and they shouldn't have to schlep a heavy book around campus if all they need is a few pages here and there.
-- Philip Greenspun, November 7, 2000
Philip, put that way I agree with you. Just goes to show how perspective makes a difference. It's been too long since I was a poor college student.
-- Tim Taylor, November 7, 2000
Re: Browser versions
There is a periodic issue with Certificate Authority certificates expiring, which has forced people to upgrade in the past. Also: many (if not most) e-commerce sites request users to upgrade to 3.x or above.
Examples of info on certificates expiring: http://www.thawte.com/certs/server/browsers.html, http://www.verisign.com/server/cus/rootcert/faq.html . It is possible (for many browsers) to install new certificates without upgrading the browser, but it's doubtful many users did so. (I expect this to change, going forward.)
-- Thomas Hundt, November 15, 2000
I'm in the camp that dislikes pages which necessitate a great deal of scrolling. I think a useful analogy in understanding why I (and possibly others) prefer short pages is to compare the process to reading a book or magazine.
A printed work is divided into nicely digestible pages where I can see only a certain amount of "content" at a given time. I can bookmark the page that I'm on (pardon the overloaded term) and I can readily see where I am in the larger document by looking at the thickness of the pages before and after my current position.
I confess that it is not a rational aversion that I have, although the ability to bookmark one's place in a long document is handy. I simply feel lost in the sea of information when I'm in the middle of a document that extends to near infity in either direction. Frankly, I nearly didn't read this article when I saw how small my scrollbar had become after the page finished loading.
I would normally dismiss this as personal preference, but I think the precedent set by books and magazines is likely to have subtly influenced the minds of most readers and swayed the issue from one of personal preference to one of generally accepted style.
-- Michael Bayne, December 13, 2000
Regarding Accessibility and 20/20 vision, the WAI has upgraded the appearance of some of their web pages. See http://www.w3.org/WAI/ as of late November, 2000. At this writing, the Authoring Tool Accessibility Guidelines still have the old, hard-to-read fonts and colors.
-- Ray Paseur, December 31, 2000
Regarding long pages, one of the biggest problems I find is that search engines are stuck with the model of "there is a match somewhere in this document, here is the top of the document, you the reader take it from here". So a larger document makes it harder to find the relevant search result, and authors often split things into smaller pieces to accomodate the limitations of search engines.
An alternative is to do make the search engine do the work of figuring out granularity. This is the approach taken at this new search engine for the Oracle8i docs. Even though most HTML files from the documentation represent a complete chapter, often >100K, the search returns results linking to any level of subheading within a file.
The "virtual book" variety of search uses a big table of contents to group similar results together, making a large set of search results comprehensible, in contrast to the usual result page showing "Matches 1-10 of 500".
Now there are a few tables and frames used in this system, but I think overall it hews pretty closely to Tufte's "broad, flat" notion.
-- John Russell, January 19, 2001
I am writing this because I have noticed comments from several readers objecting to long pages. One of the reasons that I spend so much time around the "Philip Greenspun Universe of Web Sites" is precisely due to those long pages.
As nearly as I can tell, the comments above have raised the following objections:
- Lack of a stopping point and the inability to bookmark within a long page.
- Dislike of using the scroll bar on the browser.
- The feeling of "being lost" in a sea of text that has no beginning and no end.
- Referral from the search engine often leaves the reader looking for some specific idea like a needle in a haystack.
My response to each of these objections is simple: The reader is not using the basic technology built into their web browser very effectively.
If you are feeling lost in a sea of text, or wish for a way to bookmark your place in the middle of a chapter or article, why not hit the print button on your browser? Now you have a document that is nicely broken up into individual pages (this one was 19 pages), and you can dogear those pages or put tabs or pen marks wherever you want on the pages. All the advantages of a paper document without having to mess with that silly "printer friendly version" stuff, plus you are still dealing with a single url.
Another simple function that would solve many of the objections above is the "Find on Page" or "Find" option that is built into almost every computer program on the planet that deals even remotely with text. If I have to leave a document, I will frequently write down a keyword located in the paragraph that I am currently reading. When I return, I do a search in the document for that word. If I am looking for a string in a search engine, I will frequently paste the same phrase into the search function in my browser so that once I am at the document, I am taken immediately to my item of interest.
I realize that ultimately this may boil down to a matter of preference, and that is why there is even a debate at all on the matter, but let me use a recent event to illustrate why I dislike documents that are broken up into short sections across multiple web pages.
I was interested in reading a document at http://techtv.com/screensavers and I was then submitted to humiliating load times, ads for stuff flashing all over the pages, and having to click "next page" every other paragraph. When I wrote to complain, I accused them of trying to bump up their page views in order to get more ad revenue. They responded by telling me that they did the little short pages to reduce load times! I was too angry to write back and point out that text takes almost no time to load and that it was their flashing banner ads that were causing long load times. In my humble opinion, if the article is shorter that 50 printed pages, give it to me all in one big page with minimal graphics, thank you very much.
Just my .02 usd.
-- Garn LeBaron, March 13, 2001
"Don't Make Me Think" by Steve Krug not only has a title that's right up my alley, but has a couple of chapters on how to run your own usability testing.
-- Phillip Harrington, June 30, 2003