Top
Ten Mistakes in Web Design
Jakob Nielsen's Alertbox for May 1996 and May 30, 1999:
1. Using
Frames
Splitting a page into frames is very confusing for users since frames break
the fundamental user model of the web page. All of a sudden, you cannot bookmark
the current page and return to it (the bookmark points to another version of
the frameset), URLs stop working, and printouts become difficult. Even worse,
the predictability of user actions goes out the door: who knows what information
will appear where when you click on a link?
2. Gratuitous
Use of Bleeding-Edge Technology
Don't try to attract users to your site by bragging about use of the latest
web technology. You may attract a few nerds, but mainstream users will care
more about useful content and your ability to offer good customer service. Using
the latest and greatest before it is even out of beta is a sure way to discourage
users: if their system crashes while visiting your site, you can bet that many
of them will not be back. Unless you are in the business of selling Internet
products or services, it is better to wait until some experience has been gained
with respect to the appropriate ways of using new techniques. When desktop publishing
was young, people put twenty fonts in their documents: let's avoid similar design
bloat on the Web.
As an example: Use VRML if you actually have information that maps naturally
onto a three-dimensional space (e.g., architectural design, shoot-them-up games,
surgery planning). Don't use VRML if your data is N-dimensional since it is
usually better to produce 2-dimensional overviews that fit with the actual display
and input hardware available to the user.
3. Scrolling
Text, Marquees, and Constantly Running Animations
Never include page elements that move incessantly. Moving images have an overpowering
effect on the human peripheral vision. A web page should not emulate Times Square
in New York City in its constant attack on the human senses: give your user
some peace and quiet to actually read the text!
Of course, <BLINK> is simply evil. Enough said.
4. Complex
URLs
Even though machine-level addressing like the URL should never have been exposed
in the user interface, it is there and we have found that users actually try
to decode the URLs of pages to infer the structure of web sites. Users do this
because of the horrifying lack of support for navigation and sense of location
in current web browsers. Thus, a URL should contain human-readable directory
and file names that reflect the nature of the information space.
Also, users sometimes need to type in a URL, so try to minimize the risk of
typos by using short names with all lower-case characters and no special characters
(many people don't know how to type a ~).
5. Orphan
Pages
Make sure that all pages include a clear indication of what web site they belong
to since users may access pages directly without coming in through your home
page. For the same reason, every page should have a link up to your home page
as well as some indication of where they fit within the structure of your information
space.
6. Long
Scrolling Pages
Only 10% of users scroll beyond the information that is visible on the screen
when a page comes up. All critical content and navigation options should be
on the top part of the page.
Note added December 1997: More recent studies show that users are more willing
to scroll now than they were in the early years of the Web. I still recommend
minimizing scrolling on navigation pages, but it is no longer an absolute ban.
7. Lack
of Navigation Support
Don't assume that users know as much about your site as you do. They always
have difficulty finding information, so they need support in the form of a strong
sense of structure and place. Start your design with a good understanding of
the structure of the information space and communicate this structure explicitly
to the user. Provide a site map and let users know where they are and where
they can go. Also, you will need a good search feature since even the best navigation
support will never be enough.
8. Non-Standard
Link Colors
Links to pages that have not been seen by the user are blue; links to previously
seen pages are purple or red. Don't mess with these colors since the ability
to understand what links have been followed is one of the few navigational aides
that is standard in most web browsers. Consistency is key to teaching users
what the link colors mean.
9. Outdated
Information
Budget to hire a web gardener as part of your team. You need somebody to root
out the weeds and replant the flowers as the website changes but most people
would rather spend their time creating new content than on maintenance. In practice,
maintenance is a cheap way of enhancing the content on your website since many
old pages keep their relevance and should be linked into the new pages. Of course,
some pages are better off being removed completely from the server after their
expiration date.
10. Overly
Long Download Times
I am placing this issue last because most people already know about it; not
because it is the least important. Traditional human factors guidelines indicate
10 seconds as the maximum response time before users lose interest. On the web,
users have been trained to endure so much suffering that it may be acceptable
to increase this limit to 15 seconds for a few pages.
The
Top Ten New Mistakes of Web Design
1. Breaking or Slowing Down the Back Button
The Back button is the lifeline of the Web user and the second-most used navigation
feature (after following hypertext links). Users happily know that they can
try anything on the Web and always be saved by a click or two on Back to return
them to familiar territory.
Except, of course, for those sites that break Back by committing one of these
design sins:
- opening a new browser window (see mistake #2)
- using an immediate redirect: every time the user clicks Back, the browser
returns to a page that bounces the user forward to the undesired location
- prevents caching such that the Back navigation requires a fresh trip to the
server; all hypertext navigation should be sub-second and this goes double for
backtracking
2. Opening
New Browser Windows
Opening up new browser windows is like a vacuum cleaner sales person who starts
a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen
with any more windows, thanks (particularly since current operating systems
have miserable window management). If I want a new window, I will open it myself!
Designers open new browser windows on the theory that it keeps users on their
site. But even disregarding the user-hostile message implied in taking over
the user's machine, the strategy is self-defeating since it disables the Back
button which is the normal way users return to previous sites. Users often don't
notice that a new window has opened, especially if they are using a small monitor
where the windows are maximized to fill up the screen. So a user who tries to
return to the origin will be confused by a grayed out Back button.
3. Non-Standard
Use of GUI Widgets
Consistency is one of the most powerful usability principles: when things always
behave the same, users don't have to worry about what will happen. Instead,
they know what will happen based on earlier experience. Every time you release
an apple over Sir Isaac Newton, it will drop on his head. That's good.
The more users' expectations prove right, the more they will feel in control
of the system and the more they will like it. And the more the system breaks
users' expectations, the more they will feel insecure. Oops, maybe if I let
go of this apple, it will turn into a tomato and jump a mile into the sky.
Interaction consistency is an additional reason it's wrong to open new browser
windows: the standard result of clicking a link is that the destination page
replaces the origination page in the same browser window. Anything else is a
violation of the users' expectations and makes them feel insecure in their mastery
of the Web.
Currently, the worst consistency violations on the Web are found in the use
of GUI widgets such as radio buttons and checkboxes. The appropriate behavior
of these design elements is defined in the Windows UI standard, the Macintosh
UI standard, and the Java UI standard. Which of these standards to follow depends
on the platform used by the majority of your users (good bet: Windows), but
it hardly matters for the most basic widgets since all the standards have close-to-identical
rules.
For example, the rules for radio buttons state that they are used to select
one among a set of options but that the choice of options does not take effect
until the user has confirmed the choice by clicking an OK button. Unfortunately,
I have seen many websites where radio buttons are used as action buttons that
have an immediate result when clicked. Such wanton deviations from accepted
interface standards make the Web harder to use.
4. Lack
of Biographies
My first Web studies in 1994 showed that users want to know the people behind
information on the Web. In particular, biographies and photographs of the authors
help make the Web a less impersonal place and increase trust. Personality and
point-of-view often wins over anonymous bits coming over the wire.
Yet many sites still don't use columnists and avoid by-lines on their articles.
Even sites with by-lines often forget the link to the author's biography and
a way for the user to find other articles by the same author.
It is particularly bad when a by-line is made into a mailto: link instead of
a link to the author's biography. Two reasons:
- it is much more common for a reader to want to know more about an author (including
finding the writer's other articles) than it is for the reader to want to contact
the author - sure, contact info is often a good part of the biography, but it
should not be the primary or only piece of data about the author
- it breaks the conventions of the Web when clicking on blue underlined text
spawns an email message instead of activating a hypertext link to a new page;
such inconsistency reduces usability by making the Web less predictable
5. Lack
of Archives
Old information is often good information and can be useful to readers. Even
when new information is more valuable than old information, there is almost
always some value to the old stuff, and it is very cheap to keep it online.
I estimate that having archives may add about 10% to the cost of running a site
but increase its usefulness by about 50%.
Archives are also necessary as the only way to eliminate linkrot and thus encourage
other sites to link to you.
6. Moving
Pages to New URLs
Anytime a page moves, you break any incoming links from other sites. Why hurt
the people who send you free customer referrals?
7. Headlines
That Make No Sense Out of Context
Headlines and other microcontent must be written very differently for the Web
than for old media: they are actionable items that serve as UI elements and
should help users navigate.
Headlines are often removed from the context of the full page and used in tables
of content (e.g., home pages or category pages) and in search engine results.
In either case the writing needs to be very plain and meet two goals:
- tell users what's at the other end of the link with no guesswork required
- protect users from following the link if they would not be interested in the
destination page (so no teasers - they may work once or twice to drive up traffic,
but in the long run they will make users abandon the site and reduce its credibility)
8. Jumping
at the Latest Internet Buzzword
The web is awash in money and people who proclaim to have found the way to salvation
for all the sites that continue to lose money.
Push, community, chat, free email, 3D sitemaps, auctions - you know the drill.
But there is no magic bullet. Most Internet buzzwords have some substance and
might bring small benefits to those few websites that can use them appropriately.
Most of the time, most websites will be hurt by implementing the latest buzzword.
The opportunity cost is high from focusing attention on a fad instead of spending
the time, money, and management bandwidth on improving basic customer service
and usability.
There will be a new buzzword next month. Count on it. But don't jump at it just
because Jupiter writes a report about it.
9. Slow
Server Response Times
Slow response times are the worst offender against Web usability: in my survey
of the original "top-ten" mistakes, major sites had a truly horrifying
84% violation score with respect to the response time rule.
Bloated graphic design was the original offender in the response time area.
Some sites still have too many graphics or too big graphics; or they use applets
where plain or Dynamic HTML would have done the trick. So I am not giving up
my crusade to minimize download times.
The growth in web-based applications, e-commerce, and personalization often
means that each page view must be computed on the fly. As a result, the experienced
delay in loading the page is determined not simply by the download delay (bad
as it is) but also by the server performance. Sometimes building a page also
involves connections to back-end mainframes or database servers, slowing down
the process even further.
Users don't care why response times are slow. All they know is that the site
doesn't offer good service: slow response times often translate directly into
a reduced level of trust and they always cause a loss of traffic as users take
their business elsewhere. So invest in a fast server and get a performance expert
to review your system architecture and code quality to optimize response times.
10. Anything
That Looks Like Advertising
Selective attention is very powerful, and Web users have learned to stop paying
attention to any ads that get in the way of their goal-driven navigation. That's
why click-through rates are being cut in half every year and why Web advertisements
don't work.
Unfortunately, users also ignore legitimate design elements that look like prevalent
forms of advertising. After all, when you ignore something, you don't study
it in detail to find out what it is.
Therefore, it is best to avoid any designs that look like advertisements. The
exact implications of this guideline will vary with new forms of ads; currently
follow these rules:
- banner blindness means that users never fixate their eyes on anything that
looks like a banner ad due to shape or position on the page
- animation avoidance makes users ignore areas with blinking or flashing text
or other aggressive animations
- pop-up purges mean that users close pop-up windoids before they have even
fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities
triumph). I don't want to ban pop-ups completely since they can sometimes be
a productive part of an interface, but I advise making sure that there is an
alternative way of using the site for users who never see the pop-ups.
|