 |
| |
(By the way, a lot of these tips have appeared on other
lists put together by design/usability pundits that I admire.
If I have restated one of their tips, I've credited them.
At the end of the article, you'll find a list
of my favorite pundit resources, so you can explore
their good advice yourself.)
Get to know your audience and design for them—not
for yourself or your colleagues
You are a professional. You work with design every day;
you work on the web every day. Your colleagues probably
do the same. You read the source code on the pages you browse
to figure out how the authors of those pages did things
and to see if the page authors wrote their own JavaScript.
You are part of the technology elite.
But, guess what. People who visit the web pages that you
create are NOT part of that elite. They are probably so
much less knowledgeable of the technologies that you are
working with that it is easy for you to forget how removed
they are. Most of the people who visit your web pages are
people like my mother—both in terms of the number
of browsers that they are familiar with and in terms of
the dollars that they have available to spend online. Remember
that they get new browsers when they upgrade computers—not
when one company or another decides to release an update.
The people who visit your web pages know may nothing about
plug-ins or Java or anything other than "www."
In fact, they may not even what "www" means.
If the majority of the people who are going to be buying
your client's products are like my mother, then you had
better reconcile yourself to the fact that they are the
customers you need to please.
There are a variety of ways you can get to know your audience.
One way is to use surveys. You or your client can also pay
for demographic information about your market.
Perhaps the best way to get to know your audience is to
get to know your audience—firsthand. If you are selling
bricks and mortar on your website, then spend a morning
in the parking lot of a bricks and mortar store. Watch the
store's customers as they go in and out of the store. See
what they are buying. Do the same to see the customers of
a service-oriented business. Sit in the lobby of a doctor's
office or in a building with lawyers in it. Whatever the
business, get to know the customers.
Here are some demographic considerations to take into account
when identifying your target audience:
- If you see that your customers are all middle aged or
older, think about type size. Make sure your text isn't
isn't too small or difficult to read.
- If you have a primarily male audience, you have to think
about color-blindness. If you are working with women,
you don't have this concern.
- If your audience is younger, maybe you should have less
text and more graphics (including Flash content).
- If your audience is likely to spend money easily, put
a special offer on the front page of the site. If they
are the thrifty sort, make the special offer a reduced-price
special offer.
|
Even after
you've considered the demographics and propensities of your
likely audience, put yourself in the shoes of the business
store clerk. Consider, for instance: where you would put
the "on sale" items? If you open your eyes and
get out of your technology-elite perspective, you might
find out something about your audience and it just might
surprise you.
How about an example of good design and great usability?
One site I like is Joann.com,
which is a chain of fabric stores. They have large type,
easy navigation, and lots of specials. When I go into the
physical store, the customers are predominately women who
are 30 years old or older. Many of them shop there to make
things for their kids and grandkids. Not that many of the
customers are likely to be computer literate. That's my
impression, at least, derived from talking to people while
waiting in line. What I'm particicularly impressed with
is the way the Joann.com website has loads of specials and
features that tie in perfectly with their physical stores.
The customers in line at the checkout stand talk about the
website and how they check it weekly to see what is on sale.
|
Test your site with inexperienced web users
Never overestimate the lowest level of users who
visit your site. Usability testing is one of the most important
things you can do when rolling out a new website. When you
have your site mocked up, test the design and the flow of
your navigation with someone who knows nothing about the
web. Don't look in your own circles. Reach out. Ask one
of the coffee-servers at Starbucks. Check with your mom.
Ask a local librarian. Check with the receptionist where
you work. Not all of these people are going to be representative
of your website's anticipated clients, but they will look
at your site with a set of eyes that are a lot fresher than
yours.
Do not discount anything these not-so-web-savvy users say
or do. Don't just rely on them to tell you what was wrong—be
there when they access the site for the first time and watch
them as they browse around. Watch, especially, where they
hesitate. See what they look at. Listen to them talk to
themselves. In fact, urge them to talk out loud while you
watch. The feedback they offer as they natter along is very
useful.
Specifically focus on whether they identify with your basic
navigation of the site. For instance, let's assume you have
a clothing site and your navigation has an initial split
between men's and women's clothes. Pay attention to whether
this division makes sense to your first-time users. If you
observe them looking for trousers or blouses or shoes before
they make the men/women split, then you have made their
experience one click more frustrating than it needs to be.
Test early and test often. Fixing things at the beginning
of the design process will be five to ten times less time-consuming
than redesigning a website after production.
|
Make the content on your first page rich and explanatory
The first page of your site should provide as much
of what the user is looking for on your site as you can
show. (This is one of Jakob
Nielsen's current points.) Don't show a company graphic
all by itself or an animated logo spinning around. What
does your user care about that? Your user comes to the site
to get information, right? So, give it to them.
On your first page, consider doing the following:
- Create a very simple, easy-to-understand navigation
system that doesn't take up too much space.
- Make sure your user has a way to search the site. (More
on that later.)
- Make the title of the page explanatory. If your user
bookmarks the site (and you really want them to do this
so they come back often), the first 20 or so characters
on the page is what they will see in their favorites/bookmarks
menus. If you are the San Francisco branch of the Music
Store, entitle the page "Music Store - SF,"
not "Your one stop shop for music past and present."
- At the top of the first page, add a one sentence tag
line that summarizes what the user will find in the site.
This is not the mission statement of the company. It is
informative, short and sweet.
- Add the first paragraph of the latest news story on
the company. Odds are that some of the site visitors are
coming to your site because they heard about a piece of
news. Make a link from this first paragraph to the section
where the company news would be kept.
- Place titles and a synopsis with links to the full text
for each article that you think people want to read.
- Provide a way of contacting the company on the first
page. Often, people come to the website just to get a
phone number. In fact, put the main phone number on each
page.
- Provide a way of contacting the company on the first
page. Often, people come to the website just to get a
phone number. In fact, put the main phone number on each
page.
- If you have a physical presence other than your website,
provide a store address or locator on the front page.
Or, put a link to either a store locator or a listing
of all the stores that people can search or sort through.
- If you are selling directly from the web page (or if
you have an advertising circular), put some of the profiled
products on the front page. Don't just leave a link for
specials.
- If you are selling a service, highlight some of those
services on the front page rather than making your user
dig for them.
Check out the Wolf
Camera site for an outstanding example of most of these
points. |
|
Archive content after redesigning or changing a
site
The need for archiving is another one of Jacob
Nielsen's excellent tips. When users come to your site,
they see the things you present them. If you do a good job
and you present what site visitors are looking for, they
may bookmark the page, tell their friends about the site,
or use that information in some way. If you update your
site and change the content on the front page, the next
time they come back, they are not going to find what they
were looking for. However, if you provide a section of archived
content (or a link to an archived content page) people will
find that content easier.
In short, keep an archive and make sure that people can
find links to the archive from the places they would be
looking for the original information. |
Include useful search terms in meta tags and titles
Meta tags help with indexing and searching your
site. There are two meta tags that you certainly should
be using: description and keywords.
Description is a short description of the site. Again,
this needs to be explanatory and it is not a marketing
message. When this comes up in a search engine, it is
your chance to tell the potential visitor what your site
has to offer, not how great you are.
Keywords are words that are offered to search engines
to help them display your page to people who are searching
the web. If you load those meta tags with information
that is too granular or too general or too obscure, people
are not going to find the page. Or, they will be overwhelmed
with pages that only partially match what they are looking
for. Try asking a dozen people who are both familiar and
unfamiliar with the site. When you tell them what your
site has on it, ask them to think out loud and free associate
words and phrases. This is a good basis for the meta tags
on your pages.
Here's an example of some meta tags that might not help
much. If you are an auto body shop in San Jose, California,
your meta tags could look like:
body, shop, San Jose, California, car,
bondo, repair
Now, these keywords might be seem logical, but the problem
is that they would cause you to get as many hits from
people looking for porn as you would get for people looking
for body shops.
These keywords would be more specific and better situated
for your client:
auto body-shop, body shop, body shop San
Jose, auto repair
Use the right keywords and think about how people will
search for you.
|
Provide contact and copyright information on every
page
Put your contact information on every page. How
many times have you used the web like a big phone directory?
I do it all the time and I know that a lot of other people
do too. If you are setup to talk directly to customers,
make sure you are making it easy for them to contact you.
There's another reason you might want to provide contact
information on every page. Sometimes people "deep
link" to pages existing in the lower nagivational
levels in your website. You may not like the practice,
but you can't really do too much to stop them. However,
you can make sure that your copyright and contact information
are on each page. This way, no matter how someone gets
to your page, they can contact you.
|
Set up your navigation system to help users find
what they are looking for
Some sort of navigation system is, obviously, essential
to your site. Sometimes it's comprised of fancy JavaScript
rollovers. Sometimes it's made up of Flash files. Sometimes
it's just a series of text links separated with a colon
(":") character or two. What is not so obvious
is that whichever technology you use to build the navigation
system won't be worth squat if people can't: a) find it
or b) figure it out.
There is something to be said for the web convention for
text links. They are in text, they are blue, and they have
an underline. Even people who know virtually nothing about
the web usually know this. If you deviate from this convention
for any reason, you are going to have to somehow train the
user to click the right elements to get somewhere. Perhaps
what to click in the navigation system will be obvious,
or perhaps you'll have to spend time informing your visitors
about the convention you're using for links. In either case,
it is a usability cost: small in the former case and huge
in the latter.
If you decide that your navigation and links need to differ
visually from than the standards, take time early on to
test the interface. Test it with people who don't know a
thing about your site or the products you have on it.
One good resource for learning about navigation is Information
Architecture for the World Wide Web from O'Reilly.
The authors are librarians and they go into great detail
aobut navigation techniques. They even spend a good amount
of time talking about which part of speech to use to make
your navigation consistent and logical. |
|
Provide search options
Navigation from the user interface (UI) is only one way
people traverse a site. The other major way of navigating
(other than just randomly browsing ) is to search the site.
Search engines are very complex these days. They allow a
multitude of options and the cost ranges from free services
to very expensive. You can even buy Google's search engine
technology for your site search engine. If you use Macromedia
ColdFusion MX, you already have access to the Verity
search engine.
You need to think about which engine you want to use and
factor that into the cost of building the site. But, whatever
the cost, you do want a search engine. How often
have you been to a site looking for a Marvin the Martian
doll and not been able to decide if it was under "Stuffed
Animals" or "Movie Characters"?
You'll get both kinds of users--those who search for something
on a site and those who look through a hierarchy of topics
for expected categories. Make them both happy. |
Maintain consistency of design
Don't let a site grow organically over time and
develop sections that have features and conventions that
are not applied to the rest of the site. This is a common
problem. Websites start small, mostly. They grow and new
features and conventions are added to help the user. But
over time, these additions constitute a whole new way
to navigate and interact with the site. If you have to
work on one section at a time, then at least keep a list
of the new conventions that you are adding. Then, as time
allows add them to the pages you authored previously.
Better yet, work with your team to collect all the new
features and agree on them as a team. Then, apply them
to all the sections of your site at the same time that
you roll out the new sections.
|
Think about noise,
movement, or anything that spins twice ... no, wait ... three
times
Yes, I work for Macromedia and I do think Macromedia Flash
MX is cool. However, anything that doesn't contribute directly
to the understanding of the site or doesn't impart information
should be thought about long and hard. If your user thinks
she has to wait for unimportant stuff to download to use your
site, she is going to lose patience and leave.
The worst offender here is the large introduction. Give
the user information and not fluff. You should never even
be in the situation where you should contemplate a "skip
intro" button.
On the other hand, if you use Macromedia Flash MX to
create a useful movie describing how to use a product,
to illustrate a technique, or to present dynamic data
in a rich Internet application, then you're on the right
track. There are some excellent examples of how to create
Macromedia Flash MX content that improve a site dramatically.
Check out the Pet
Market application to see an excellent use of Macromedia
Flash MX.
The same caution goes for music, whistles, and beeps.
No one except designers and children really like things
that pop and whir and sputter when you click on them.
They are a waste of time for you to set up, they play
unreliably across browsers and platforms, and they don't
really impart information. If you are doing an audio tour
on-line or teaching a language, that is a different matter.
But for decoration, avoid sound.
|
Proofread the text on your sites
Simply put, misspellings and incorrect grammar
turn off your users. They cause your site to look as though
someone rushed it into production or make you look like
you don't care enough to do the job right. (I am a product
of Benedictine education and they certainly drummed that
one in.)
|
Provide printer-friendly pages
Web pages are great ways to get information out
to an almost unlimited number of people. If your information
is really so good and useful, it is likely users will want
to have it available even when they are not at the computer.
For years we have had it pounded into our heads that the
web requires us to break information down into small-sized,
readable chunks (which is true). But, now we need to drum
it back in our heads that the big, long, easily-printed
page has its place, too.
If you have information that users may want to print,
think about setting up a PDF file (which opens from a
link). This usually makes the printing process so much
easier. At the least, you can take the same content that
has been spread out over the smaller, linked pages and
put all of it into one large document. Then, give the
users a link to that consolidated document so they don't
have to print out multiple pages.
A great example is Webmonkey.
Look for the print icon and text link at the top left
of the page. Click on the print icon and see how it works.
|
Enhance your pages—don't replace them
Jacqueline Hamilton is a new name to me. I have
a link to her site in the resources section below and it
is worth a look. This is her advice:
Enhance your pages, don't replace them.
As people visit your sites, they develop patterns in what
they look for and where they go. They bookmark the places
that they like, not the pages you think they should link
to. If you remove the pages on the URL, then you break
the link the customer may have to you.
If you do have to do a major site redesign, try to make
links that go to the same sections as the previous links
would have. If there are major changes, at least add a
redirect from the old pages to the new pages. That way,
if someone has an old URL, they won't get a broken link
page when they come back to your site.
|
| |
Resources
Now visit the websites of some of my favorite design
and usability pundits: |
|
|
|
| About
the author
Matt Brown is a Community Manager for Macromedia and
technical editor of more than a dozen software books. Matt
has taught courses at Foothill College and San Francisco
State's Multimedia Studies Program and is a regular speaker
at conferences and user groups. |
|
|
|
|
|
