for the user
a Sense of Order
process, learn and remember organized information better than unorganized
Alignment: Most people perceive items that are aligned
vertically and/or horizontally to be more organized than those
that are not.
functions represented by like
contrast to make elements more or less dominant in the
display, influencing the order in which they are processed and
their perceived importance or urgency. The primary visual possibilities
Elements that are close together in a visual display will be assumed
to be related. Elements that are far apart will not be seen as
related to each other. When elements are not clearly differentiated
by proximity, your audience has to group them consciously by focusing
on them, taking in their meaning, and deciding which ones go together.
Present related elements in close spatial proximity and unrelated
elements separated by space and visual treatment:
many ways a site is like a store. You're designing a space that
a potential customer will visit, browse around in, look at prices,
compare items, hopefully make some decisions about purchase
in your favor, and leave. If the entire experience is satisfactory,
he or she will return. If not, tough luck. So how do you design
this space? There's the now famous retail story of beer and
diapers. A store in the U.S. discovered that on Fridays, the
sales of both beer and diapers increased. After due observation,
they concluded that families leaving town for the weekend normally
stocked up on beer and diapers for the trip. The store proceeded
to stock beer and diapers next to each other, close to the entrance,
and watched the sales of these two items go through the roof!
This is a perfect example of knowing your user's needs and providing
easy access to those needs. What Goes Where When.
Designing a site, apply the same reasoning used by the beer-and-diaper
concept. Place related content items close to each other, either
in the navigation systems or in the actual content. If you can
personalize a site to each individual visitor's needs, you can
allow the user to define his or her own "ideal structure." So,
while the family going out of town can still order beer and
diapers easily, the college student can have the beer stocked
with ice cream and other snacks.
Kapoor, Karuna and Ved Bhusan Sen, 'Implementing
Information Across Your Site'
naturally associate paired elements as being connected, so when
laying out visual elements, know that the user will attempt
to interpret the contents and functions of various page elements
and how those elements relate to one another. Spatial organization
of information allows for quicker location and interpretation.
list is easier to search than the same items presented in a
running text marquee.
alphabetized list is easier to search than one in random order.
is easier to read if broken into paragraphs than jammed together.
text documents are easier to read with visually distinct headings
than without them
Oppedisano, Rick, 'Common
Principles: A Usable Interface Design Primer'
on prior learning
employing standard functions and forms. Exploit known conventions
blue, underlined text
buttons with text labels
searching as the default
familiar with the conventions that your users are familiar with and use
them. The 'index tab' navigation bar, for example, builds on user's real-world
familiarity with using filing cabinets and card indexes:
a good example see: ZoneZero
– from Analogue to Digital Photography
they are familiar with certain conventions, don't use those elements to
mean something else or your users will end up feeling like Alice in Lewis
Carroll's 'Through the Looking Glass'...
don't know what you mean by 'glory,'" Alice said. Humpty Dumpty
smiled contemptuously. "Of course you don't -- till I tell you.
I meant 'there's a nice knock-down argument for you!'" "But
'glory' doesn't mean 'a nice knock-down argument,'" Alice objected.
"When I use a word," Humpty Dumpty said in rather a scornful
tone, "it means just what I choose it to mean--neither more nor
less." "The question is," said Alice, "whether you
can make words mean so many different things." "The question
is," said Humpty Dumpty, " which is to be master -- that's
the predictable underlying structure of books that makes a complex organization
scheme almost invisible to most readers, allowing the content to dominate
the reader's attention. .... If your reader is to understand the provenance
of a document and how the information on the page relates to the rest
of the Web site, you've got to provide that information for them on
every page of the site. Pages in a well-designed site should share a
consistent, predictable design structure, a "blueprint" or
design grid that fixes the terminology and location of landmark navigation
and editorial links.
Logic: Ten fundamentals of Web design'
components should appear in standard locations throughout the site.
features should be consistent both in labeling, design and positioning
throughout the site. If users know what to expect, it will be easier for
them to build a conceptual map of what should happen next.
page-side navigation bar seems almost a Web cliche. Yet it works well
precisely because it's so common; newcomers to the site will feel reasonably
at ease. Since it will be loaded onto every page in a site, it can show
a series of small images which users' browsers will need to download only
once. Proper use of these images can also tell viewers which part of the
site they're actually in. The navigation bar may even provide a decent
use for the far-too-common Netscape frames device: you can create a single
borderless frame to the left of the page whose elements stay in position
as you scroll down the page. Done well, a navigation bar can give viewers
the same sense of location that we get from a book simply by glancing
at how many pages we've read. In that sense, the navigation bar is no
more a cliche than the title page of a book, a device which evolved only
slowly over the century after Europe took up the printing press.
Adam Baker, 'Pliant
response for websites'
Nielsen -- Make sure 'search' is always available and/or provide search
if the site has more than 100 pages.
designing complex web sites, it is particularly important to provide context
within the greater whole -- a 'you are here' statement. Many contextual
clues in the physical world do not exist on the Web. There are no natural
landmarks and no north and south. Unlike physical travel, hypertextual
navigation allows users to be transported right into the middle of a large
unfamiliar web site. Links from remote web pages and search engine result
pages allow users to completely bypass the front door or main page of
the web site. To further complicate matters, people often print web pages
to read later or to pass along to a colleague, resulting in even more
loss of context.
Adam Baker, 'Pliant
response for websites'
the same as everybody else: if most big websites do something in a certain
way, then follow along since users will expect things to work the same
on your site. Remember Jakob's Law of the Web User Experience: users
spend most of their time on other sites, so that's where they form their
expectations for how the Web works.
Good Deeds in Web Design'
pages should include the organization's or site's name and or logo.
might be done as part of the title or header of the page. As a user
moves through the levels of a site, it should be clear that they are
still within that site (see also 'Breadcrumbs' below). Carrying the
graphic identity throughout the site supports such context and consistency.
In addition, if a user bypasses the frontpage and directly accesses
a subsidiary page of the site, it should be easy for them to work out
what site they are viewing.
following items should be present on every page of a site to aid in
the author's institutional affiliations
the revision date
link to the local home page
the structure of your site's hierarchy, and indicate where each specific
page dwells within that hierarchy. Yahoo, for example has been using 'breadcrumbing'
for years, allowing users to easily jump back to a more general level
of the subject hierarchy.
navigation system should present the structure of the information hierarchy
in a clear and consistent manner and indicate the location within that
Adam Baker, 'Pliant
response for websites'
Keith Instone, 'Location,
Path and Attribute Breadcrumbs' (pdf)
the same top-level navigational possibilities are available throughout
the site. This is as simple as a nav bar situated in the same place on
every page to give access to top-level categories of information (e.g
Home/Contact/Services/Products/News). Use supplemental nav bars to access
information inside these top-level catagories.
use graphics-only navigation bars
very few images that all people instantly 'get' without thinking about.
Supplement graphics with clear text labels. Ue the ALT tag (or a small
text nav bar in addition to your spiffy graphical one) so that users with
their graphics turned off will be able to navigate.
pages, sections within pages, and chunks of information within sections
of a web document.
functions the user can perform: 'Search' 'Download Software' 'Print'
can be textual or graphical (icons), or both.
in the argot of the information architect— are a linchpin in both navigation
and searching/browsing systems. To be effective as part of these systems,
a label must be meaningful to all users. It must be logical, and it must
be used consistently throughout the site. Rosenfeld identifies four ways
to "strengthen your labeling scheme":
for relationships between labels.
existing schemes where possible.
general or heterogeneous subject areas.
offers his take on labels in "Microcontent: How to Write Headlines,
Page Titles, and Subject Lines." In this "Alertbox" article,
Nielsen points out that online headings differ from print headings in
heads are often displayed out of context, e.g., in link and bookmark
lists. [I'm assuming he means the contents of the <TITLE> tag.]
Even when a headline is displayed together with related content, the
difficulty of reading online and the reduced amount of information that
can be seen at a glance makes it harder for users to learn enough from
surrounding data. ...headline text must stand on its own and make sense
when the rest of the content is not available.
the 80/20 rule as a guideline: 20 percent of all possible navigational
approaches will likely satisfy 80 percent of users' navigational needs.
Concentrate only on providing the most appropriate ways to get to information.
Rosenfeld, Louis, Special
Report: Design Usability Seven Pitfalls to Avoid in Information Architecture'
'progress indicators' -- if you have concatenated several pages into
a sequence, ensure that there is some visual indication for users of how
far through the sequence they are.
Tim Gasperak, 'Tim's
User Interface Guidelines'
Jen Muehlbauer 'Help
People Find Themselves'
Bonnie Skaalid, 'Web
Design for Instruction'
Peter Morville, 'Software
for Information Architects'
is worth a thousand pictures...
wrote of our very common practices of surrounding images with words which
help to specify and stabilize the interpretations of particular images:
all images are polysemous; they imply, underlying their signifiers,
a 'floating chain' of signifieds, the reader able to choose some and
ignore others. Polysemy poses a question of meaning and this question
always comes through as a dysfunction....Hence in every society various
techniques are developed intended to fix the floating chain of signifieds
in such a way as to counter the terror of uncertain signs; the linguistic
message is one of those techniques.
Roland Barthes, "The Rhetoric of the Image" in Image, Music, Text
, pp. 38-39.
"linguistic messages" are captions, labels, placards, guidebooks, brochures,
and fliers--all bits of institutional apparatuses which select and present
texts and images for the public.
are few things as quietly powerful as labels. We are completely surrounded
by them and for the most part their influence is invisible. They are
seen only by the people they hurt. Bowker and Star provide a couple
of good examples. They discuss the politics and pain involved in the
transition over several years from the label "gay-related immune disorder"
(GRID) through a chain of other labels to the now accepted "acquired
immune deficiency syndrome" (AIDS). In another example, they explain
that "many patients feel that one of the greatest burdens of having
chronic fatigue syndrome is the name of the illness." The word fatigue
indicates everyday tiredness and makes it less likely that friends,
family, employers, and co-workers will take the condition seriously.
When we develop labeling systems and controlled vocabularies, we struggle
to balance literary and user warrant. We strive for clarity and predictability,
while trying to keep our labels relatively short. Perhaps we should
also consider the potential impact our labels can have on people and
Peter Morville, 'The
Ethics of Information Architecture' 2000
links (links inside body-copy) distract the eye by drawing attention
to themselves and interrupt the flow of the text.
can be missed by readers skimming the copy so ensure that important
necessary links have special attention drawn to them -- e.g by being
placed in margins, on a seperate line after the appropriate parahraph,
or gather together in a bullet-point list.
links often do not have self-evident destinations, so ensure you make
the destination obvious by providing context in the linked or surrounding
example, imagine encountering the following sentence on a Web page:
I'm writing a screenplay in my spare time. Where's
that link going to go? To a copy of the work-in-progress? A Web
page about screenwriting? You could look down at the bottom of the
browser window for clues. If you see news:misc.writing.screenplays
when you mouse over the link, the mystery is solved. However, the
status bar rarely provides such obvious context, and you shouldn't
expect users to rely on it. Context is always helpful, like in the
following examples: I'm writing a screenplay in my spare time. Want
to read it? I'm writing a screenplay in my spare time, so I
hang out at misc.writing.screenplays. I'm writing a screenplay
in my spare time, and I've found this Web site quite
Navigation and Usability Guide, Web Review 1998 (please note
the above are dummy links)
4 IE also supports mouse-over meta-tagging of titles. This is a simple
case of writing, for example <A HREF="http://www.labyrinth.net.au/~saul"
TITLE ="Go to Shiralee Saul's homepage. Opens in a new window.">My
the same possibility to other browsers. (also see Jakob Nielsen,
Link Titles to Help Users Predict Where They Are Going')
Choices Add up to Conscious Overhead and Distractedness.
There is really no need to interrupt the train of thought in the
current article or subsection to interject, "HEY, do you really
want to keep reading? Are you sure? Maybe you actually want to
go this way instead. OR, maybe, that way!!! WELL, what will it
be? Make up your mind. Read this -- no, Click Here, if you want
(do you want, or not? Please respond.)... Note: readme first.
you have ten thousand links pointing every which direction, this
causes cognitive churn, because you are constantly making explicit,
conscious decisions about whether to abandon the current focused
task and temporarily commit to another. But if there is a moderately
long article or H2 passage that caught your eye, and it's definitely
worth reading, then all the exit ramps are superfluous and could
continue exerting a pull, a drag. When you are rushing along the
freeway of an interesting, worthwhile passage, running your cognitive
modem at a high data transfer rate, all those hypertext link choices
act like wind drag, slowing you down.
are both pros and cons to placing numerous hypertext links all
throughout your articles, looking like raisin-toast and feeling
like spaghetti text. The user has so many choices already, with
Back, Forward, scrolling, top-of-page keystrokes. We have enough
choices -- what we need is structure, definite lines of flow,
and engaging, well-labelled entry points; not an explicit decision
point in every sentence.
Michael Hoffman, 'Enabling
Extremely Rapid Navigation in Your Web or Document
notes that links to exterior web sites is seen by iusers to add credibility
to the site. see Morkes, John and Jakob Nielsen, 'Concise,
SCANNABLE, and Objective: How to Write for the Web'
link within a navigation bar must be immediately comprehensible
to the user. In practise this means avoiding jargon, acronyms, product
names, or any form of 'quirky' labelling. Use clear language, and
where possible observe established conventions. Again, don't impose
a restrictive 'one-word' or 'two-word' naming policy - use however
many words are required to accurately convey meaning.
Farrell, Tom, 'Some
Tips On Navigation'
on the Web we experience something we can never experience in the
real world: places without space. Instead of needing a containing
space to enable movement, the Web has hyperlinks. Links are at the
heart of the Web and the Web's spatiality. The fact that the linked
pages come from many people turns the Web into a place larger than
we are. It is a public place, a place we can enter, wander, and get
lost, but cannot own. Since place and space have been inseparable
in all of our experience in the real world until now, when we experience
the Web's place-ness, we assume that it must also have the usual attributes
of spatiality, including the accidental nature of geography. That
makes it easy to lose sight of the fact that what holds the Web together
isn't a carpet of rock but the world's collective passion.
David Weinberger, Small
Pievces Loosely Joined
follow a pattern: they decide what they are going to click on before they
move the mouse. Space conserving design devices such as fly outs, rollovers,
and dropdowns actually decrease user efficiency. This is most prevalent
when users have to scroll. They bring their mouse to the scroll bar and
it stays there until they are ready to click on something. Unfortunately
the information in fly outs, rollovers, or dropdowns can't help users
decide where to click because the information isn't available to users
when they are making their decision. It isn't until after they've decided
where to click that they see what the element has to say.
Ojakaar, Erik, 'Users
Decide First; Move Second'
Don't hide navigation information in rollovers, pop-up or dropdown menus,
for effective feedback:
what's clickable by designing with distinguishable styles (i.e. buttons
that look different than headlines, logos, or other graphic text)
a subtle visual cue for mouse rollovers
implement a drastic visual cue for mouse clicks
keep feedback simple: don't try to supplement menu choices with lengthy
pliant response on websites will include subtle audio clues, and perhaps
tactile feedback through hardware (both of which would make manipulability
even more clear). In the meantime, however, these little pliant response
tips will make users more comfortable with any website
Adam Baker, 'Pliant
response for websites'
on strictly hierarchical navigation; use global navigation to allow users
to jump 'horizontally' within the site. Users should be able to access
all the important sections of a site from any page on that site. For example,
the user should be able to go directly to the 'About this organisation/company/whatever',
'Contact us' etc without having to return to the site's Homepage.
a variety of means for users to find what they are looking for. Supplement
your global navigation with optios such as:
use multimedia such as Quicktime, RealPlayer, Flash, Shockwave, RealAudio
to communicate core content.
be searched effectively
to print or otherwise record information
bandwidth discriminates against majority with low bandwidth access.
more difficult or impossible to use for those with physical disabilities.
alternatives to your multimedia.
use multimedia intros for homepages -- if you have to put a 'skip intro'
button, you don't need those bells and whistles at all.
Multimedia To Save Screen Space. Use pop-up menus and animation to
preserve that valuable screen real estate.
Muehlbauer, Jen, 'The
Navigation and Usability Guide'
internationally (David Kleinberg) -- remember that web sites can
and will be accessed from anywhere in the world -- be aware of culturally-specific
means of colours, shapes, etc. Observe cultural conventions.
that all important pages are accessible for users with disabilities,
especially blind users.
product photos, but avoid cluttered and bloated product family pages with
lots of photos. Instead have a small photo on each of the individual product
pages and link the photo to one or more bigger ones that show as much
detail as users need. This varies depending on type of product. Some products
may even need zoomable or rotatable photos, but reserve all such advanced
features for the secondary pages. The primary product page must be fast
and should be limited to a thumbnail shot.
image reduction when preparing small photos and images: instead of simply
resizing the original image to a tiny and unreadable thumbnail, zoom in
on the most relevant detail and use a combination of cropping and resizing.
Jakob Nielsen, 'Ten
Good Deeds in Web Design'
be a dill...
use 'back' links -- these will be meaningless if the user has jumped
from another site. Make sure that such links are clearly labelled with
destination -- e.g. 'Back to Table of Contents', 'Back to my Homepage'.
link pages to themselves -- if the page is accessed via a global navigation
bar, gray or otherwise visually indicate that that link is not available--
but don't remove the navigational element
the site in all the browsers your audience will use
'orphan' pages -- make sure navigation works on all pages.
- Dan Shafer
-- Never use a graphic where HTML text will do
Nielsen -- Test your site on actual users, don't just guess what user
response will be.
Guidelines for Web Credibility
grain of salt