More people are creating web sites, but many of them are unsure what constitutes good design on the Internet. This article explains what web usability is and outlines some basic principles for good web design.
As design tools make web development more accessible, more people are
creating personal websites. However, just having the ability to display text and
graphics and make links does not make a web site good. While there is not a
single "right" way to design a web site, there are design principles that can
help make a site usable and attractive.
What is web usability?
Web usability refers to the ability of a web site
visitor to navigate a web site and find important information. The definition of
usability may change somewhat depending on the goals of the web site. For
example, if a site is selling books, it is usable if a customer can easily find
books he is looking for, browse for other books, and complete his purchase
seamlessly and as quickly as he desires. On a children's gaming or activity
site, it is usable if the games are easy to access, if the goals of the
activities are clear and if the functions to accomplish the goals are
understandable. On a reference or informational site, usability may be defined
by a visitor's ability to find information and to research as deeply as he
desires.
Navigation rules
Navigation consistency: While web site
navigation can be presented to users in a variety of effective ways, the most
important rule is consistency. In a multi-page web site, it is critical that the
user is able to move from one page to another without getting lost; the key to
this is to keep top level menu items available from every location on the site.
For example, if the site is broken into three major sections, users should be
able to access the home page and the top page of each of those three primary
sections from page by using global navigation. This global navigation should be
on the same place on each page, commonly the header or a left or right
navigational area are reserved for this.
Standardized terminology: In addition to keeping the location of the
global menu or navigational items consistent, the terminology used to define the
menus should be understandable to the target audience of the site and should be
standard with other web sites. For example, since the term "home page" is
recognized by most Internet users, it would be unwise to label links to the
first page of your site something different like "main" or "top."
Label locations: In a web site of more than a few pages, it is
important to have a system that shows users where they are on the site, relative
to other portions of the site. This can be accomplished in a number of ways. One
easy rule is to make sure each page has a heading that corresponds to the links
that lead to that page. In other words, if you click on a link that says
"browse" and you go to a page that says "product categories" it can confuse a
user. On a later visit, he may be searching for a "product categories" link to
no avail. In addition, if the site is deep -- with many levels of links -- you
may want to include "breadcrumbs" in your headings. Breadcrumbs are headings
that show the path you took to get to each page. For example, if you click from
a home page to "Books," then "Fiction," then "Mysteries," the heading at the top
of the page would indicate Books: Fiction: Mysteries with "Books" and "Fiction"
being clickable links for those who would like to work their way back.
Basics of presenting information to users
People read web sites
differently than they read books or newspapers. Not only is the web interactive,
but when someone visits a web site, they usually have a specific goal in mind.
How people read web pages: People tend to scan web pages looking for
links or information that are of interest to them. For this reason you cannot
assume people will start in the upper, left corner of the page and go left to
right working their way down the page. A person's eyes will move around the
page, stopping on graphics or text that are of interest. In some cases, things
will draw the attention because of the content. In other instances, the
placement, size or color of an item will attract scrutiny.
Simple guidelines for information placement: Because there are so many
variables and since people perceive things differently, there are no hard and
fast rules to information placement. There are, however, some principles that
will generally help you attract attention to important elements on your page.
Important content or links should be in the top third of the page. If a user
does not see the content he wants in the first few seconds, he may click away
from the page before reaching the bottom, especially if scrolling is involved.
Make links obvious. People want to know what is clickable without testing
every element of the page. Underline text links and make clickable graphics look
like buttons to give users visual clues.
Make it easy for people to find the most common options. If you want
visitors to use an option on your web site, make sure it is not only placed
conveniently but that it stands out. In other words, on a retail site you do not
want to hide the "Purchase" button.
Write for the web: Unless the intent of your website is to carry a
catalogue of long technical articles, you will want to make sure your content is
short and succinct. Since people scan for information on the web, use spaces,
headings and bullets to organize your text. This makes it much easier to read
and to jump to important information.
Use open space to your advantage: Try to avoid cluttered web pages. A
page overstuffed with text, links and graphics, with elements all misaligned, is
visually confusing and hard to navigate. Instead, use open space to help display
elements in an attractive and organized fashion.
Common mistakes on the web
Design is very subjective. What some people
think is beautiful, other people find tacky. Some people prefer the classic
while others aspire to be avant-garde. Despite this, there are a few things that
you should avoid if you want the majority of people to find your web site
attractive and usable.
Avoid busy or dark backgrounds: dark backgrounds or those with busy
patterned backgrounds make it very difficult to read text. Light text on dark
backgrounds is harder to read than dark text on light backgrounds, and dark text
on dark backgrounds can be excruciating.
Eschew funky fonts: For any html text you use, define a standard font
face. Otherwise, any users who do not have your specialty font loaded on their
machine will see an alternate choice. When using text to create graphics, you
have more leeway since the user will not need your font. However, make sure you
use fonts that are clear and readable.
Forgetting the basics: Sometimes it is possible to get so caught up in
an innovative design that the basics get forgotten. Make sure you check that all
of the basic information about your company and services are front and center on
your home page. If you offer a search function, put it on every page in an
obvious location. Remember to include information to contact you on your site,
too.