A Practical Summary of ``Designing Web Usability''
Async Open Source, Inc.
São Carlos, Brazil
This article makes a short review and lists the major practical points
that Jakob Nielsen stresses in his recent book ``Designing Web
]. 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.
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.
This section covers basic background issues that explain the reasoning
behind the need and importance of Web usability.
- 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
- 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.
- 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.
- 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.
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
- 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''.
- 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.
- 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
- 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.
- 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
- 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
- Providing downloaded video is preferable to streaming,
since it can be kept and experienced without worrying about network
- 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.
- 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.
Advice on how to structure your site and on what assumptions to make on
user behavior regarding it is given here.
- 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
- 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.
- 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
- 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.
- 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.
- 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
- 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.
- 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.
- 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
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
It is important to provide META tags with keywords and
descriptions so search engines can index your site properly.
- 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.
- 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
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.
- 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.
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
- 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
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.
- Follow the Accessibility Guidelines
If your site has a major user base of disabled users, it should follow the
Web Accessibility Guidelines[*].
- 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.
- Permit easy choice of language
There are three main ways to 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
- 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?
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.
- Nielsen, Jakob. Designing Web Usability, 2000.
- W3 Consortium, Web Accessibility Initiative,
http://www.w3c.org/WAI/, last visited in July, 2000.