What can we learn from Jakob Nielsen?by Philip Greenspun (philg@arsdigita.com) Submitted on: 2000-09-04
ArsDigita : ArsDigita Systems Journal : One article
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.
ArsDigita Systems Journal has a narrower audience in some
ways. Nobody comes to ASJ to learn about HTML or graphic design, for
example. But our audience is interested in a broader class of Web
services than those treated by Nielsen. In particular, ASJ readers
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. We do have
readers that would like to sell a few more widgets from their catalog
ecommerce sites, but on balance we'd like every article here to be
worth the time of an MIT computer science senior taking Software
Engineering for Web Applications (http://philip.greenspun.com/teaching/one-term-web).
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.
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.
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
[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.
What does Nielsen recommend?
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/.]
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).
"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."
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://www.arsdigita.com/books/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:
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:
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.)
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.
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:
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.
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."
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.
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!
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:
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.
Image Maps
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:
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."
From Braillenet:
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.
Frames
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:
Instead try:
Give each frame a title
A TITLE attribute should be added to each FRAME element to describe the purpose and content of the
<FRAMESET ROWS="100,*">
Tables
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:
might be read by a screen reader as: There is a 30% chance of rain Classes at the University of 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.
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
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:
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.
Page layout
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?
Long documents
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.
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. Thomas Gray wrote: 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" [1]: 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. [1] 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" :) 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, 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. 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.)
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.
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.
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:
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.
|
|