~kiko

Resumé

Software

Diary

Papers

Outdoors

Travel

Book shelf

Unix help

A Practical Summary of ``Designing Web Usability''

Christian Reis
[kiko@async.com.br]
Async Open Source, Inc.
São Carlos, Brazil

Abstract:

This article makes a short review and lists the major practical points that Jakob Nielsen stresses in his recent book ``Designing Web Usability''[1]. This is a simple summary and is not intended to replace the book in any manner at all; it is made with the purpose of quickly transmitting the important points the book defends.

Introduction

Jakob Nielsen's latest book is an excellent read and provides extensive backup for the very sane advice he has to give. This document is a simple enumeration of a number of practical tips and ideas on online design the book provides. There is extensive backing up in the book and on Jakob's site (http://www.useit.com), so my explanations will stay brief. I have omitted the practical suggestions for Intra and Extranet design since they are of less concern to my intended audience. Further understanding should be be attained by reading the book itself, in any case. .

This book is an outstanding source of information and explanations on why and how to engineer proper online interfaces, providing insight on current best (or common) practices, interface conventions, site structuring and accessibility. It contains various illustrations of real-world sites displaying both interesting and disastrous online interfaces, and annotations on what they could do (but usually don't) to fix their problems.

The book does emphasize on sites with plenty of text, shopping and online editorial content, so it may appeal less to sites that intend to show off multimedia effects (and non-Web applications that merely happen to use web technology as a basis). The book's position on these cases is, basically, what follows: on the Web, content is always master over form. Useless multimedia and glitz have no place.

Basics

This section covers basic background issues that explain the reasoning behind the need and importance of Web usability.

1. Why do we still use books?
   The Web is an excellent medium for communication, but low screen DPI, combined with low writer and reader experience with online text, allow for some years still of widespread use of books. Books are still better for building long, steady arguments; they offer little distraction, and provide good readability. Jakob expects this to change by 2007, however, since by then screen technology and online usability will have improved significantly.

2. Why is usability important to Web sites?
   The Web has a different use perspective than conventional, non-networked products. The fact is that most physical goods and software are pre-paid; customers usually buy the product before actually trying it out. The Web reverses this; users are allowed to experience the Web site before deciding on whether to spend their money (and/or more time) on that site. This makes Web usability the single most important issue for a company that does business online.

3. How is proper usability attained?
   ``10% inspiration, 90% perspiration.'' Jakob indicates that observing users in daily contact with the product and stressing usability testing is the only way to develop a usable product. Basic guidelines for page and site design will follow, but the main issue is actually verifying, pondering, and fixing usability issues.

4. Why are today's sites so bad?
   Jakob defends it's very easy to make a usability mistake. The Web is a very recent communication medium, and few people have spent enough time understanding how exactly using the Web is different from conventional interface design. Apart from that, many companies still insist on using the Web as a brochure, and not as a new business channel. They design Web sites that mirror internal organization, and not user's needs; they emphasize on ``coolness'' as a show-off factor, and not on proper content. Apart from that, writers are not accostumed to generating text that is to be read online, which must be much briefer and make good use of links and anchors.

Page Design

In this section, conventions on page design are laid out, and suggestions are made to improve the general interface experience for each page that composes a site.

1. Maximize Screen Real Estate
   Maximizing the display area for your actual content is perhaps the most important change that can be made. Navigation control, although absolutely necessary, should be minimized, as should be distractions and advertisement. Jakob suggests that 50 to 80% of the screen should be reserved for the content to be displayed. Screen sizes have grown very slowly the past years -- nothing close to resembling Moore's Law -- and will continue to do so because of monitors' high cost. Screens of 640x480 and 800x600 pixels are still the norm, and will be for the next two years at least.

2. Use standard HTML
   Browser upgrades occurred very quickly when the Web was still young. This is no longer the case; huge downloads, a larger, more disperse user base and resistance to change have brought global upgrades down to less than 1% of the installed base per month. Therefore, it is vital to make sure the site works on all browsers; having a testing infrastructure with all browser versions is of vital importance for any Web development center. Jakob emphasizes the importance of using semantic and relative encoding -- using appropriate H1-Hn headings, percentages for sizes and fallback font names.

3. Keep response time down
   Sites that take more than 10 seconds to load will lose traffic. Jakob compares Web response times to conventional interface response times, and concedes that the network lag is the definite problem here. Keeping a page under 30K is extremely desirable, and using tables and fonts to liven up layout, instead of graphics, essential.
   

   Make sure that the top of the page renders quickly; keep the top images and tables simple so that, even if the page takes some time to load, there will be content to show the user that progress is occurring.

4. Use images properly
   Minimize the use of graphics for decoration; images should be used for delivering information, and not as plain eye candy.
   • Jakob recites the age-old law of using HEIGHT and WIDTH for all images to keep rendering time for pages low.

   • Never leave out ALT tags. Images with no ALT information are unusable for non-graphic browsers, including speech synthesizers for the visually disabled, and they provide helpful information through tooltips on most browsers. ALT tags should convey the meaning of the picture, not just a description of it, and they should be empty if the image is only used for decoration.

   • Using NAME tags on INPUT TYPE="IMAGE" buttons and keeping them in sync with ALT information is my suggestion here, for some browsers ignore the ALT information on image buttons.

5. Use hyperlinks properly
   Linking properly is a very important technique that many sites should learn to do correctly.
   • Anchors should be short, usually no more than 4 words long.

   • Links to large pages or downloads -- today, anything over 50k -- should have the target's size explicitly displayed.

   • Jakob suggests using Microsoft's LINK TITLE extension as a good way of providing information on the link's destination.

   • The actual link should placed upon text that describes it, and not on the URLs it leads to -- the URL is not what should be emphasized

   • Standard link colors should never be changed, for they make navigation easier to understand, and visited sections, easier to remember.

   • Don't open new windows. window.open() and TARGET="_new" are evil and intrusive.

6. Generate static URLs for dynamic content
   If your site generates URLs dynamically, either through search engines or through database access, and users would profit from accessing these links frequently, provide a static URL that can be bookmarked and emailed. Jakob also advises on avoiding subscription and registration to accessing content, and suggests redirecting on-the-fly, or offering a freely available content section, if logins are absolutely required.

7. Advertise properly
   Banners should contain content that interests users, and not just a ``Click On Me'' message. The pages they link to should act accordingly to this message, following up on users' interest.

8. Don't use frames
   Avoid the use of frames. Frames break the ultimately simple single-page model that the Web grew around and that users have come to rely on. Frames also complicate navigation, the back button, printing and search engine indexing. If you must use frames, you must also account for frameless browsers with NOFRAMES sections.

9. Offer a printable version of important content
   If your site offers long text, reports, interesting essays or news, offering a version specially laid out for hardcopy is very important. Offering a print-ready version in PostScript or PDF format is an alternative, although the large size will hamper download.

10. Use style sheets whenever possible
    Style sheets can be used to customize your pages according to a site-wide standard. As long as your site doesn't rely on CSS to render -- and testing on non-CSS browsers is a must -- using CSS is a way to keep consistency and adapt easily to different output media.

Content Design

This section suggests how content should be composed for online exposure and distribution. It is important to stress that content should have a proper reason to be online, and it should be presented in a very easy to digest format. Content with no purpose should be removed.

1. Be succinct
   Write 50% of what would be written in an offline publication. Since it is much harder to stay focused when reading online, keeping the message short, using short paragraphs, lists and hypertext links is very important. Use headlines, pull-notes and margin notes to make your message stand out, and avoid useless messages such as ``Welcome''.

2. Use the `inverted pyramid' writing style
   Write the general idea of the text in the beginning, and then concentrate on detail throughout the text. This way, readers can get the gist of the message even if they don't read everything.

3. Improve readability
   Work to minimize vertical scrolling, and eliminate horizontal scrolling. Apart from that, using high-contrast colors, on a plain background with large fonts will make your message much easier to read. If using small fonts, use a sans-serif type, as it is much more legible. Busy backgrounds are horrible and make reading online even harder than it already is.
   

   Jakob indicates that page titles should be properly designed so that when bookmarked, a page title indicates clearly what content the page carries.

4. Reduce image sizes
   Instead of simply scaling or cutting images up, combining both techniques can reduce download times and still carry the intended message. Using the proper format for the type of image you are sending is very important and hardly any trouble.

5. Use audio, video and animation only as necessary
   Multimedia should be used to add depth to the content you are showing, and not as a design gimmick.
   • Using mouseovers to hide and show information is usually a bad idea; mouseovers should provide interface feedback, but not drive content display.

   • Animations should be used sparingly. Animations can better display transitions and enrich graphical representation; however, pure attention-getting has shown itself an annoyance to be avoided. If animations are used, make sure there's a good reason for it.

   • Video is excellent for showing real-word activity; however, online video should be divided into short episodes (preferably of less than 1 minute).

   • Providing downloaded video is preferable to streaming, since it can be kept and experienced without worrying about network delays.

   • Using transcripts and photos is a good alternative to displaying video content.

   • Audio is good for music applications, and online language training. It can also be used for enriching the graphical interface; however, it can become annoying very quickly.

6. Use 3D only if appropriate
   3D is excellent for specific tasks; examples are displaying real-world objects and performing spatial visualization; on the other hand, 3D navigation is confusing, and input devices are badly suited for it, so it should be avoided.

Site Design

Advice on how to structure your site and on what assumptions to make on user behavior regarding it is given here.

1. Compose your home page properly
   Your home page is usually the first thing a user will come into contact. Explaining clearly what the site does, where the user is, and how he should get what he wants, is essential. Clutter and useless messages on the home page (such as "Welcome to Foo.com") should be avoided. Home pages of less size will receive more hits, regardless of content, simply because of limited network bandwidth, so aim for the smallest size you can manage.

2. Plan the site structure
   The most important thing stressed about site structure is to have one; bad navigation is usually a consequence of having no purposeful hierarchical organization. Planning the structure and navigation is time-consuming, and should be done with the user's expectations in mind, not the site creator or owner's. A user-oriented site structure may mean the site will not reflect the company's organization, and that different departments may have to collaborate accordingly.

3. Provide proper navigation support
   Provide the user with information to allow him to know where he is and to get where he wants; don't hide your site's structure. The standard navigation options are:
   • Breadth-wise: show only top-level options, and don't follow the current path down the hierarchy. This isn't very convenient as it doesn't allow the user to choose other options in his current level, but it does allow access to main sections and doesn't clutter the interface too much.

   • Depth-wise: show the current location in the hierarchy (such as home[IMAGE gif]products[IMAGE gif]computers or home[IMAGE gif]races[IMAGE gif]ecochallenge). This navigation scheme should allow the user to jump to any superior level desired. The advantage here is that the user can see exactly where he is in the sites hierarchy.

   • Combined or Fish-eye: shows both top-level destinations and lower-level destinations leading to current option. Although this permits the best accessibility, the main problem here is the interface clutter that can be introduced. The use of DHTML here can be beneficial as it can help avoid navigational clutter.

4. Use consistent, standard practices
   The user's online experience is not limited to one site; what he experiences is `The Internet' through a single application: the browser. Using standard conventions will ease the impact of your site on the user, and make using your site easier.
   • Place the site logo on the top of the screen, preferably on the left hand side. The site logo should be a link to the home page.

   • Use a wide search box -- most boxes are too small; a current common practice is placing it on the upper right corner.

   • Use shopping carts for online stores; they are already common enough to have been understood by many users.

5. Don't assume a screen size
   Try to allow the screen to display at any width, and remember, horizontal scrolling is prohibited. Widths of 640 pixels will be common for years to come, and as online devices show up, even narrower screens will come into use.

6. Don't use splash screens and avoid real-world metaphors
    Splash screens are useless and add further delay to access content. Online users are fleeting and will often give up if the site can't be easily reached. The use of real-world metaphors for the site is usually a bad idea; examples of failed metaphors given are site layouts that imitate television sets, office desks and magazine covers. A site is a site, not a real-world object.

7. Sift through overwhelming amounts of information so your users don't have to
   Current UI design is very much inspired by PARC and Apple's designs from almost 20 years ago, where the amount of files and documents a user kept and used was very small; usually no less than a hundred. The Web brings billions of pages in contact to these users; helping them find what they want is very important. Aggregating, summarizing, filtering, truncating and annotating this content into links are techniques that should be used constantly with this target in mind.

8. Provide a proper search engine
   50search engine to find what they want. Searching should therefore be easy to access and included on every page. Leaving advanced options and boolean search to a separate, expert search will also improve ease of use.
   

   Offering a spellcheck, synonym and related lookup is an excellent feature for any search. The order in which results appear is very important: links should always be shown in order of decreasing relevance. Showing the page searched for in the context of the search keywords is a good idea: this can be done by highlighting the words, for example.
   

   It is important to provide META tags with keywords and descriptions so search engines can index your site properly.

9. Choose the right domain name
   If your site is intended for an international audience and it's main language is English, use a .com, .net or .org TLD. Always have the domain name be the same name as your company. If it's intended for a specific country, use a TLD corresponding to that country.

10. Design URLs properly
    Make your URLs understandable and `hackable': users still rely on URL decomposition and guessing to navigate, so using real words, with no mixed or uppercase and avoiding special characters will always be a good idea.
    If your site offers periodical content, having an ``archive URL'' which points to it's permanent location so it can be bookmarked and referenced. Support URLs that have changed so users aren't left stranded with Error 404 messages on their screens.

11. Integrate applets seamlessly
    Applets can enrich the web experience greatly. However, if your site uses applets, take care as to integrate it with the site layout so it doesn't disrupt the page's feeling of a unified document. If the applet cannot be integrated, it should be displayed in a separate window, and it can then behave as a normal UI application.

Accessibility for Disabled and International Users

If your site intends to cater to the largest audience possible, it should take into account users with disabilities and from other locations. There are a couple of practical suggestions laid out in the book.

1. Design for easy accessibility
   Always use relative font sizes, ALT entries, H1-Hn markup and high contrast colors to provide better understandability to all users. Check the design with various font sizes and default background colors to be sure users can enlarge them if needed. Use keyboard accelerators when possible to avoid requiring actual mouse movement.
   

   Imagemaps should be carefully created to be easy to use: they should always be client-side (to provide proper feedback) and should be easy to click, with no tiny areas. Using an ALT description will also aid the user, since it's often displayed as a tooltip.
   

   For sites with multimedia content, audio should be provided with transcripts and video, with subtitles, so that users with hearing or visual disabilities can access the information as well.

2. Follow the Accessibility Guidelines
   If your site has a major user base of disabled users, it should follow the Web Accessibility Guidelines[*].

3. Consider International Users
   The web's public is, today, split in a 50/50 proportion between American and international users. This ratio has a tendency to further pend towards the latter; providing a means for this public to access your content, if desired, implicates designing the site with them in mind.
   

   Analyzing server logs to check procedence of users, and comparing that with the proportion of total Web users, will provide a good indication of what countries or languages should be targeted.

4. Permit easy choice of language
   There are three main ways to switch languages:
   • Use a staging page. This is generally regarded as a bad idea for the same reason as splash screens.

   • Use a language menu on the home page. This is a standard practice and most multi-lingual sites today use this approach.

   • Use a language menu on all pages. This has a tendency to clutter the interface; how many times does a user switch languages?

   Use a word for each language (and not a flag, which is generally ambiguous) in the target language -- español for spanish, for example. As always, don't let the user click and re-select the current language.
   

   Search engines for fully multi-lingual sites should provide hits only in the current selected language. However, if part of the content is only available in another language, providing indication of the language and a possibility to auto-translate are probably good ideas.
   

   Time display is an important detail: times should always accompany AM/PM and the relevant time zone. Finally, don't block access to pages designed for other countries; apart from it being hard to guess what country the user comes from, there is always the chance of blocking overseas branches of the same company, and people traveling.

Bibliography

1

Nielsen, Jakob. Designing Web Usability, 2000.

2

W3 Consortium, Web Accessibility Initiative, http://www.w3c.org/WAI/, last visited in July, 2000.