home

The present is a unique period because for the first time humanity has lost mastery of its tools - Jakob Nielsen.

About Me

Resume
References
History

Writing

Information Science
Web Development
Nielsen in 20 mins.
113 Guidelines
Don't Make Me Think
20 Heuristics for Site Evaluation
Accessibility
Indonesia
Demography

Jakob Nielsen in 20 minutes

Notes from: Jakob Nielsen. Designing Web Usability: The Practice Of Simplicity. Indianapolis, New Rider, 1999

This is a summary of what I believe are the most useful bits of this important book. Nielsen doesn't know all the answers and his pontificating style may be annoying, but he does provide a ground for common-sense and a true user focus.

I've left out his comments on frames because I originally wrote this for an audience of colleagues who were wise enough to just say no!

Page Design (Chapter 2)

2.1 Screen Real Estate

• Content should account for at least half of any page and preferably closer to 80% [p22].

2.2 Resolution-Independent Design

• You should design for all screen resolutions; ie pages that adapt to the size of the screen. The main principle is never to use a fixed pixel width for tables, frames or other design elements (except perhaps for thin stripes down the side) [p29].
• Ensure the design works well with various font sizes [p29].
• In general don't use text within graphics because it slows down transmission and makes for more work to translate the user interface into foreign languages [p29].

2.3 When Is It Safe to Upgrade?

• With an upgrade speed of 1% per week it takes 1 year before a majority of users install the upgrade [p34.]
• The web is slowing down in user uptake
• Provide an alternative format if you must break the "one-year waiting period" [p35].
• Check for first two years whether features degrade gracefully with older browsers [p36].

2.4 Separating Meaning and Presentation

• The notion of encoding the meaning of documents (known as semantic encoding) was temporarily lost when some browsers used proprietary tags to encode the exact rendering of the information; eg "18 pixel tall bold Garamond" rather than level-2 heading. [p36].
• In the future there will be a greater variety of web devices, which will require the return to semantic encoding [p37].
• Speech enabled browsers will occur soon and will require semantic encoding [p38].
• Information relating to presentation should be kept in a separate style sheet. Style sheets are the only solution to getting nice presentation with ever-increasing numbers of browsers and display devices [p38].

2.5 Response Times

• Fast response times are the most important design criterion [p42].
• Users need responses of less than 1 second when moving between pages [p42].
• 0.1 sec. is about the limit that the user feels there is instantaneous reaction [p42].
• 10 sec. is about the limit of keeping the user's attention focused on the dialogue [p44].
• For modem users anything above 50kb should come with a warning [p45].
• Make sure you have a fast server and get a performance expert to review your system architecture and code quality to optimise response times [p45].
• The sites that get the most traffic as faster than other sites.
• 10 sec. response times = 34kb on a modem, 150kb on ISDN and 2Mb on T1. However 1 sec. is only 2kb on a modem [p48].
• Links to URLs should display the terminating "/" [p50].

2.6 Guidelines for Glimpsing the First Screenful

• The top of the pages should be meaningful even when no images have been downloaded [put more text, less images].
• Always use ALT to explain the unloaded images.
• Include WIDTH and HEIGHT attributes on images.
• Avoid complex tables. Break them down into separate tables [p50].

2.7 Links

• Links to "more of the same" are one of the easiest ways of increasing the use of your site. [p56].
• Links to current issues/previous issue are pretty useless unless there is some description about what is in the issues [p58].
• Use of Link Titles are recommended [p60].
• Link Titles should be less than 60 characters [p62].
• Retain the default colour of links [p62].
• Always use the same URL: to refer to a given page (otherwise the site will appear to be unvisited) [p64].
• Do not use a person's name of a link to email. This should link to info. about the person while a link on the word email should be used to contact the person [p66].
• Outbound links turn into content and become a reason all by themselves for users to like your site and use it. It is very hard to find useful information on the web and users will love you for making it easier for them [p70].
• Consider affiliates programs that actually pay for inbound links [p74].
• With advertising links to your site - link to the payoff page - not to the homepage [p77].
• The advertising banner should be designed as a hyperlink. It should have an excellent rhetoric of departure to give users expectations of the content. [p77].
• Advertising gifs should be carefully considered - see Citibank example [p80].

2.8 Style Sheets

• CSS are one of the greatest hopes for recapturing the Web's ideal of the separation of presentation and content.
• Always use linked style sheets instead of embedded styles. Only by referencing an external file will you get the maintenance benefits of being able to update the look of your entire site with a single change. Also this makes pages smaller and faster to download [p81].
• For each site all the style sheets should be designed by a single central design group. They should be specialists who understand how the results may vary for different screens [p82].
• Your style sheets should come with a small manual that explains the different styles as well as when and how to use them. Include plenty or examples and screen snapshots.
• Where single page styles are required they should be embedded rather than linked, but the page should continue to be linked to the global style sheet - the local embedded will override the global [p83].
• Retain a decent presentation without style sheets - for older browsers, the visually impaired and those who have switched them off. To check conformance just disable CSS.
• Do not use more than two different fonts.
• Use an alternative set of fonts for each class.
• Do not use absolute font sizes. Specify all text relative to the base font size defined by the user's preference setting. Eg., large text could be defined as 200% [p84].
• Do not use the "!important" attribute.
• If you have multiple style sheets, make sure to use the same CLASS names for the same concept in all of the style sheets [p85].

2.9 Printing

• Provide two versions of all long documents. One optimised for online viewing by being appropriately chunked and another version optimised for printing [p94].
• Currently users will need to download the printable version manually, but hopefully browsers will soon start to implement the recommended standard for specifying alternative document versions. See recommended HTML [p95].
• Any printable file must accommodate A4 and US Letter.

Content Design (Chapter 3)

3.1 Writing for the Web

• Be succinct. Write no more than 50% of the texts you would have used to cover the same material in a print publication.
• Write for scannability. Don't require users to read long continuous blocks of text; instead use short paragraphs, subheadings and bulleted lists.
• Use hypertext to split up info into multiple pages.
• Reading from computer screens is 25% slower than from paper.
• What is respected is presentation of a clear voice, perspective and personality.
• Users have a dislike for fluff.
• The Web is a cool medium that encourages the use of facts with links to backup datasheets and detailed numbers [p101]
• Don't use useless expressions such as "Welcome". [p102]
• Users don't like to scroll.
• The screen readability problem will be solved in the future because screens with 300dpi resolutions have been invented. Expected to be in common use around 2007. [p103]
• High-end web sites should employ copy editors - improve bad or sloppy language and tighten up on writing.

3.2 Scannability

• Structure articles with two or levels of headlines - a general page heading, plus subheads and subsubheads where appropriate. Nested headings also assist the visually impaired.[p104]
• Write concise text, use scannable layout and objective language. [p105]
• Use bulleted lists.
• Use highlighting and emphasis to make important words stand out.

3.3 Plain Language

• Start each page with a conclusion.
• Topic sentences are important as is one idea per paragraph.
• Just the facts please [p111].

3.4 Page Chunking

• Hypertext should not be used to segment a long linear story into multiple pages. Having to download several segments slows reading and makes printing difficult. Split the content into coherent chunks that each focus on a certain topic.
• The user should be able to select those pages they care about and only download those pages. Hypertext structure should be based on your audience analysis.
• If you need to use "page 2" then provide a brief preview of that page.
• "pull-quotes" can add visual interest and help users scan the page. [p112]
• Scrolling navigation pages are bad - because you cannot see all available options.
• However scrolling through destination pages is not so bad.
• Limit use of "within page" links - as users expect links to go to another page [p115]
note: email this to a friend is a good piece of functionality.

3.5 Writing Headlines

• The headline must be able to stand on its own - without the rest of the content available.
• Explain what the article is about in terms that relate to the user. Use ultra-short abstract of the macro content.
• No puns or cute or cleaver headlines.
• Avoid teasers - people have been burned too often.
• Leave off A, The, An in email and page titles.
• Make the first word an important, information carrying one.
• Don't start page titles (say in a subsite) with the same word. [p125]

3.6 Legibility

• Use colours with high contrast between the text and the background.
• Avoid tiny font sizes.
Small text is more readable in sans serif such as Verdana, however most people prefer to read a serif font - so perhaps bigger text in serif. [p126]

3.7 Images

• Put length/running time of a video clip and/or size of large file.
• An image may be worth 1000 words but not if it takes 2000 words worth of download times.
• Higher-level pages should load quickly and have images minimised.
• For thumbnails use relevance-enhanced image reduction where appropriate. Eg to get thumbnail which is 10% of original - crop image to 32% dimensions -and then scale to 32% [p135].
• Users hate moving text and scrolling marquees [p143].
• Animation is useful for : showing continuity in transitions between two of more states, indicating movement back and forth along some navigational dimension, illustrating change over time, multiple information objects in the same space, visualising three dimensions objects, attracting attention[p143-148].
• advertising banners that move have done much harm to the credibility of animation [p147].

3.8 Video

• Users expect broadcast quality production values
• Most audio and video clips should be kept to less than a minute - because they are non-interactive [p150]

Site Design (Chapter 4)

4.1 General Recommendations/Comments

• Poor information architecture will always lead to poor usability [p198]
• Don't tell users what you don't have [p164]
• Don't push metaphors unless they're obvious [p180]
• Shopping carts have changed from a metaphor to an interface standard [p188]
• Long hot lists of links have become less common, but selective links which have been carefully chosen by an author are very useful [p218]
• In future the server may send a sitemap definition in XML to the client so that the browser can integrate it with maps of other regions of the web frequented by the user and then generate a customised navigation map for the user [p221]
• Once it becomes easier to navigate the best sites, users will revolt against the sites that make them spend most of their time on irrelevant pages.

4.2 Home Page

• The Home Page should not have a home button [p166]
• Should offer 3 features: directory of the site's main contents, summary of important news, search features [p168]
• Have a single consistent link to the home page from every other page on the site. The link should be in the top left hand corner. The logo can be this link [p178]

4.3 Navigation

• It a must to indicate: where I am, where I have been and where can I go [p188].
• Users don't like navigation interfaces which vary substantially from the norm.
• Browsers need to improve to have the following navigation support: moving up or down one level; moving to the next and previous elements; links should differ depending upon whether they are to this part of the site, or to another subsite, or to an external site; integration with a web site sitemap; integration of search engines to permit searches limited to either sites that the user likes or to specific pages that the user has already seen [p189]
• If you have a navigation bar that includes your current choice - the fact that you are on this page should be indicated in the navigation bar [p191]. Excellent example of this and site map for context on page 193.
• Three kinds of hypertext links:
  - Embedded Links : (the usual)
  - Structural Links: point to other levels of the site hierarchy
  - Associative Links: "see alsos"
  

4.4 Site Structure

• The site structure must mirror your user's view, not your organisational structure. ]
• This may mean that many subsites will have to be managed in collaboration with multiple departments [p198]
• Breadth: The most common navigational design is to list all the top levels down a left hand stripe. However it is excessive to dedicate 20% of an interior page to a listing of top-level options.
• Depth: This shows the full hierarchical path from the home page through all level down to the current page. This is often called breadbcrumbs [p203].
• Breadcrumbs are simple, take up less space and allow you to locate exactly where you are[p206].
• Looksmart has breadcrumbs but they take up too much space. DHTML can be used to combine permanent visability of all the levels (depth) with a temporary popup of the alternatives (breadth) on any given level where the pointer is over that level's name. See also http://www.sun.com
• The Sun use of elaborate set of navigation mechanisms should be for very large sites with highly heterogeneous contents [p207]

4.5 Subsites

• Subsites should have global navigation options in addition to its local navigation [p223].
• There is a tension between the desire of the subsite designer to optimise to the specific needs of local information versus the need for consistency across the entire site.
• A good subsite done well according to JN is AnchorDesk at ZdNet. [Comment: I'm not so sure].

4.6 Search Capabilities

• Generally good to have option to search the subsite (a scoped search) or all the site [p224].
• Search should be easily available on all pages on the site [p225].
• As users are generally not good at query reformulation it is recommended that there is minimal use of scoped search and no use of Boolean search in the primary search interface. Put these in a separate advanced search [p227].
• Excite has two good features: match rating and suggested expand search terms [p241].

4.7 Applets and Chat

• Chat is almost always the worst way to add community to the Web. People simply have nothing to say. And what they say isn't always appropriate for some audiences[p256].

Intranet Design (Chapter 5)

• Best to use different design interfaces for the Intranet and the Web Site [p264].
• Except for the security need, extranet design is closer to Internet design than to Intranet design [p267].
• On an intranet you can afford to overwhelm the novice user in return for better performance for experienced users [p275].
• The main benefit of an intranet is across the organisation communication. One of the main goals of intranets should be to get rid of unnecessary email [p277].
• For each employee it is recommended to have a link to their department, plus links to project pages for all projects they have worked on. All projects should have a home page to the personal pages of those working on it [p278].
• Intranet maintenance should be a regular part of everybody's job.
• Intranet portal home pages should have three components: a directory hierarchy that structures all content in the intranet (a Mini-Yahoo); a search engine; current news [p279].
• There should be a single design standard throughout - which must be evangelized (because it's hard to achieve)[p280].
• Every page should include an explicit intranet logo - which links to the intranet home page.
• Every intranet page should have a search button.
• The intranet standards should be available from the intranet itself [p281].
• The interface design standard must:
  • be well illustrated with examples
  • the examples should comply with the standard in all aspects
  • have a comprehensive checklists of what is required
  • have a standards expert available to review new designs in formal standards inspections and for informal consultations
  • seek out projects and insure they are supporting the standards
  • be a living document
  • either comply with the most popular other design standards or contain explicit statements highlighting the differences from these other standards
  • be supported by development tools and templates that make it easier to comply with the standard than to implement a non-standard design
  • have a good index if printed, or a good search supplemented with hypertext links to related rules if hypertext. [p282]
• The proposed design standard should be tested with designers to ensure that they can use it. [p284].
• The following default preferences should be set:
  • default page = intranet home page
  • remove any links, bookmarks, button, channels etc set by the browser vendor
  • set up browser preference to use that supported by IT dept [p287]
  • the default web-wide search button should be set to a single search service[p288]

Determining the Best Search Engine

• Select five of so problems that are typical and representative
• enter these queries into the top search engines and inspect the top 10 referenced pages
• give a rating of 0-3 from irrelevant to very useful
• add these up for the top 10
• determine no of seconds before first page has finished downloading
• no of seconds that the search takes
• prominence of the search type in field on the search page (how much junk is it surrounded by?)
• predictive value of the output. How well did the output indicate whether the content would be useful of not [p288/289].

Accessibility for Users with Disabilities (Chapter 6)

• Making the Web accessible for users with disabilities is to a great extent simply a matter of using HTML the way it was intended: ie to encode meaning rather than appearance.
• Those with poor eyesight can increase the font size.
• The blind can use text-to-speech conversion software (screen readers).
• In fact many with disabilities are empowered by computers to achieve things they could not otherwise [p298].
• good source of info about assistive technology: http://trace.wisc.edu/
• A web access symbol can be added to pages: http://www.wgbh.org/wgbh/pages/ncam/symbolwinner.html
• Get feedback on all designs from a red-green colour-blind person. [Comment: You can download a simulator]
• Use proper HTML markup; eg H1 for top level heading; H2 for next level etc.
• Never use absolute font sizes; always use relative (percentages) sizes to the default [p301].
• Test pages for default fonts set to 10,12 and 14 points - and then make check for disabled at 18 and 24.
• Note that search engines are also blind users - use the ALT on images [p303].
• ALTs should be utility descriptions that verbalise the meaning or role of the image. What is the image intended to communicate and what will happen if it is clicked [p305].
• If the image is purely decorate use ALT="" rather than an meaningless "large blue bullet" or no ALT at all.
• For people with difficulty hearing - transcripts should be supplied on audio clips and videos with subtitles (where practical)
• The web will make a move to interactive audio; eg audio chat will likely replace text chat - so that there should still be an option to input text [p308]
• Motor disabilities. Don't design image maps that require extremely precise mouse positioning
• A simple way to check for many accessibility problems is to access the website in a text only browser such a Lynx [p311]
- [Comment: or switch off the images in IE or Netscape]

International Use (Chapter 7)

• State times relative to GMT -Eg "Chat begins at 6.30pm in Sydney (+10 Greenwich Mean Time)"
• Dates should be given as 8 May not 8/5 [p318]

Future Predictions (Chapter 8)

8.1 Mobile Access

• Mobile access will be the 3rd killer app - after the email and web browsing. Internet access anyone, anywhere, anytime.
• You will be designing for a wider variety of screen sizes [p353]

8.2 Web TV

• In designing for Web TV you must consider:
  • the screen size is 544 x 376 [Comment: This is for NTSC only - need to check PAL size]
  • image maps may be difficult for users to use
  • do not include text within images
  • do not use multicolumn layout on the narrower screen (2 cols. max)
  • repeat navigation on bottom of screen if page needs more than 4 screen height scrolling
  • more use of hypertext; smaller chunks
  • try to eliminate scrolling
  • write less text [p356]

8.3 Death of the Browser

• There is no reason to treat info differently because it comes from the Internet rather than your hard disc.
• Currently browsers confused presentation of info and the navigation between information objects. They would be handled better (especially navigation) if they were separated.
• The history list, bookmarks will include internet objects, email messages and corporate documents.[p362]

8.4 Bandwidth

• xDSL etc will give users T1 speed in large numbers by 2003.
• Response times across oceans is usually less than 56kbs and is likely to get worse before it gets better.
• Only after 2003 will multimedia be viable on the web [p363].

8.5 Metaphors for the Web

• The Web can be used to integrate the Internet and TV to give added value to TV viewers, but such systems will not realise the true potential of the Web.
• TV is about characters, Movies are about stories, Theatre is about ideas.
• The Web is closer to the telephone: interactive; 1 to 1; low fidelity [p366].

8.6 The Future

• Rather than using banner adds better to attract people to do business right on the site; the model is direct marketing, not TV advertising [p367].
• The Web will supplement and integrate with broadcast TV.
• The amount of initiative and interactivity required of the user will be the major defining difference between TV-based web and computer-based web.
• Goodbye newspapers with high res PCs by 2008 [p374]

Conclusion (Chapter 9)

Foundations of a good web site

• H igh quality output
• O ften updated
• M inimal download time
• E ase of use
• R elevant to users' needs
• U nique to the online medium
• N et-centric corporate culture [p381/382]

Factors Driving Repeat Visitors To Their Favorite Web Sites

• High Quality Content 75%
• Ease of Use 66%
• Quick to Download 58%
• Updated Frequently 54%
• Coupons and Incentives 14%
• Favorite Brands 13%
• Cutting Edge Technology 12%
• Games 12%
• Purchasing Capabilities 11%
• Customizable Content 10%
• Chat, Bulletin Boards, Forums 10%
• Other 6%

Reward Users by :

• being nonlinear
• customise service
• being asynchronous
• support anonymity
• link liberally
• Support search and multiple views
• be small and cheap
• be free
• ignore geography (incluidng - office, car, holidays)

Neil Pollock 23 April 2000