| Why
is usability important to
good design?
Usability is important to
web site design because if
it's missing, the site can
alientate or confuse the user,
as well as detract from whatever
your main message, product
or service is.
Good design should be seamless,
almost invisible.
Good design isn't just about
a web site looking cool, it's
about helping the site communicate
it's goal with as little effort
as possible on the part of
the user. If the site has
strong usability, more people
will notice how great the
design is because they won't
be wasting time trying to
figure out how the site works.
Bad design can cause visitors
to do any of the following:
- click
the back button waiting
for a long download
- get
frustrated because they
have to guess where, and
what, the navigation is
and may guess wrongly, wasting
their time
- give
up and go to a different
web site, or even
- tell
other people how bad the
site is
Don't sacrifice usability
for design.
What you consider to be important
regarding usability will depend
largely on your target audience
and purpose of your site.
If you can implement some
of the following points, it'll
go a long way to providing
a more user-friendly site
and more appreciative visitors:
Navigation
Navigation is probably the
single most important aspect
to a web site. It shows the
visitor where they are, where
they can go, and where they
have already been. Or, at
least, it should!
Make it obvious to the visitor
what is navigation and what
isn't. Keep your main site
navigation in a consistent
place with a consistent look
and consistent behavior. Aim
to place your main site navigation
"above the fold" on a screen
resolution of 800x600. Make
sure it's obvious where your
visitor is in the site hierarchy
on any given page.
Graphical navigation
Try to include a text version
of graphical navigation items.
It isn't always obvious to
a visitor when graphics are
links, make it easier for
them by including meaningful
alt text for graphical links.
If you use an icon next to
a text link, make sure both
items are clickable. Be especially
careful when using image maps
as navigation, often the visitor
can lose track of where they
are and where they've been.
A well known example of a
site which uses image maps
wisely is Amazon
because they combine it with
the very usable tab based
system. Gap
also makes use of a tab based
system, this makes it clear
which section you are in.
Color
Consider color-blind users
by avoiding bad combinations
of colors, particularly red/green,
next to each other. Check
that your design still works
when it's in grayscale, that
the navigation is still usable
without color.
For optimum usability, never
use color as the only indicator
of change. Try and provide
other clues the visitor by
emphasizing the section heading
or including an arrow next
to the current navigation
item, or using icons. Atomz
use
arrows and bold in addition
to a color change to indicate
which section the visitor
is in, it's clear, simple
and obvious where you are
in the site hierarchy.
Breadcrumbs
If possible, use breadcrumbs,
as in:
Home : Section One : Subcategory One : Page One
These show the visitor where
they are in the site hierarchy.
Make each preceding item a
link, the last item (i.e.
the current page) should not
be a link as this may confuse
visitors who click on it only
to find the current page reappears.
IBM 's
navigation does use breadcrumbs,
however, the breadcrumbs could
have been more user friendly
had the previous items been
links. Tarantella
's
web site is a far better example
of breadcrumbs put to good
use.
Hyperlinks
Try
to stick to standards for
links - underline them,
blue for unvisited, red/purple
for visited. Try to make
the visited link a duller,
less saturated color than
unvisited so that the links
the visitor hasn't been to
yet stand out more.
Don't
force your visitors to learn
new rules for which text is
a link by using unusual colors
or relying on "hover" effects
- some people still use Netscape
4.x. Make it easy for your
visitors, it won't spoil your
design.
Other considerations
Always
provide an easy to find way
to get HOME. Make the
logo in the masthead, if you
have one, a clickable home
link too.
Check your design with "Greeked",
or Latin, text (or even replacing
the real text with gobbledy-gook!)
- is it still obvious what
is navigation and what isn't?
If it's relevant, provide
a search feature - some visitors
will get lost, some prefer
the convenience of a search
box. Make sure that the search
results are relevant, and
the order of relevance is
obvious.
Create custom error pages
with a short description of
your site and a mini site
map. Don't disable the back
button, some Flash sites do
this, especially those with
JavaScript redirects. Check
whether it's possible to get
back to the previous site
your visitor went to by testing
this yourself. Get people
who haven't seen your design
to carry out tasks on your
site and tell you where they
had difficulties.
Gap
makes
use of user-friendly tab based
system
Atomz
navigation
panel shows clearly where
you are
Tarantella
shows good use of breadcrumbs
Accessibility
Accessibility is becoming
increasingly important, especially
if your site is educational
or government based. Accessibility
to everyone, regardless of
browser, platform, operating
system, plug-in or disability
is important when designing
a web site.
Make sure your site is usable
(works well and looks right)
on the main flavors of browsers
and platforms. Write correct
html, so that blind users
with speech synthesizers can
have the page "read" to them
accurately. Always include
suitable alt text on images.
Make sure text is set to relative
not fixed sizes, so that when
a visitor wants to adjust
the font size in their browser
your site allows this.
Ocean
Riders Sandals and the
American
National Bank web sites
are completely accessible
to visitors with disabilities,
as approved by Bobby
.
Consistency
Maintain a consistent look
to your web site. Don't bombard
your visitor with hundreds
of different fonts. Choose
one or two main font faces
(maximum of three across the
site) to use and stick to
consistent sizes and colors
for headings, navigation,
captions, normal paragraphs
etc.
Specify a list of possible
fonts (Verdana, Arial, Helvetica,
sans-serif) in the html or
style sheet so that the visitors'
computer will be able to choose
the first font available on
their system. Similarly, don't
use too many different colors.
Use restraint and stick to
a simple color palette. Remember
to test for color blind issues
by checking everything is
readable in grayscale or by
downloading color palettes
for the different forms of
color blindness.
Frames
Be careful when using frames
to create your site. If there's
no way to avoid using them,
then make sure you don't destroy
the url location of each page
by using target="_top" in
your links so that each frameset
is freshly loaded into the
browser window with the full
url of that page.
Also, be aware of printing
and search engine problems.
The printer may only print
one frame, rather than the
whole frameset, which could
be useless to the visitor
if they don't know how to
work around this.
The same goes for search engines,
they read each frame as a
separate html page and can
have problems indexing your
site and providing accurate
results for a visitor's search.
The visitor may click on a
link in the search engines'
results, only to be shown
a content frame with no navigation,
or vice versa. Make good use
of the <noframes> tag
and provide descriptive information
here, rather than the common,
but useless, "your browser
doesn't support frames" text.
Try and also provide a non-framed
version of your site for visitors
to choose if they wish.
American
National Bank is completely
accessible by visitors with
disabilities
Ocean
Riders Sandals consider
accessibility important
Flash sites and usability
factors
Flash enabled sites can be
fantastic, but don't use Flash
"just because you can". Use
it to enhance your site and
add features that simply can't
be done with static html --
OR, provide a Flash and Non-Flash
version. There's certainly
nothing wrong with creating
the next Flash web site masterpiece
if you like, but provide a
fast easy to use version of
your site for those not interested
in your bandwidth-hogging
masterwork. ;-)
Consider usability from the
outset. If accessibility is
important to your site, don't
use Flash. Link colors don't
change, text cannot be made
bigger in the browser, the
"find in page" feature no
longer works and the back
button does not work predictably.
If you use an intro page,
indicate how long it will
take to download. ALWAYS include
a prominent "skip intro" button.
As above, include an html
version of your site that
your visitor can choose instead
of the Flash version. Visitors
may have the Flash plug-in
and a fast connection but
don't always want, or have
the time, to view the Flash
enabled site. Make this html
version as attractive as your
Flash site, rather than a
brief after thought. Give
your visitors the choice of
viewing the html version by
having a prominent link on
each version of the site that
they can click to view the
alternate site.
Splash screens
Splash screens that don't
tell your visitor anything
about what you do, or what
they need to do to enter the
site, are practically useless.
They often serve no purpose
other than to display some
graphics or tell the visitor
what software they need to
be able to view the site.
Most visitors aren't looking
for impressive graphics, they're
looking for information. Make
it easy, don't add another
obstacle to their goal.
At the very least, give them
some initial navigation choices
to reduce the number of decisions
they have to make. Dr
Party is a reasonable
example of a splash screen
that makes it obvious what
the site does and what choices
the visitor has to make by
providing navigation items.
Use of plug-ins
If gaining visitors, and customers,
are important to your site's
success, don't tell them they
have to go away and upgrade
or change flavor of browser
or download a plug in to view
the site - chances are they
won't come back. Design your
site to be viewed by as many
browser flavors / versions,
platforms, and screen resolutions
as possible and not be totally
dependent on the latest plug-in.
Graphic heavy, text light
splash screens also don't
do your site any favors with
search engines. Your home
page is the most important
page on your site - give the
search engines some text to
spider and make it easy for
visitors to find you. Also
remember that large graphics
can take a long time to download,
sending your visitor straight
to the back button! Unfortunately,
having meta tags wasn't enough
to get Dr
Party's
graphic only home page in
the first 5 pages of results
on Google for "party organisers".
Screen resolution
Try and stick to a "liquid"
design, where your layout
will resize itself to any
screen size. This is easily
achieved by having percentage
widths on tables and layers.
Test your layout to make sure
that it both fits smaller
screen resolutions and that
there are no more than 12
words to a line, more than
this makes for harder reading.
If you really can't have a
liquid design, at least make
your site fit 800x600 - it's
still the most popular size
and many sites can be left
unusable if half the navigation
if off one side and the visitor
has to scroll horizontally
to see it (that's if they
even realize it's hidden!)
To fit 800x600 screen resolutions,
your design will need to be
no more than 770 pixels wide,
or to be safe, we suggest
740.
Finally!
Keep it simple, make your
navigation intuitive, use
lots of "white" or empty space
to separate elements on the
page and put your visitors
first.
Some of you won't totally
agree with all of the points
here, but the main purpose
of this article is to get
people thinking about usability.
If you think about usability
before embarking on a new
design project, and incorporate
it into the design in the
development stages, the finished
web site will both look good
and be usable. Your visitor
will spend less time trying
to figure out how to use your
site and more time admiring
the design because using it
will be like second nature.
Don't just take it from me,
read up on web usability issues
from the experts. Visit Jakob
Nielsen's web site http://www.useit.com/
or read either of his latest
books, "Designing Web Usability"
(published December 1999)
and "HomePage Usability" (published
November 2001 an co-written
with Marie Tahir). Also worth
a read is Steve Krug's "Don't
Make Me Think!" (published
October 2000). |
