1. Use Only Five to Seven Main Categories
Five and seven are magic numbers in life because remembering a list of five
to seven things is easy. Any more than that and our brains lose track. Maybe
it’s because we have five fingers on each hand. We can mentally attach one
item to each digit, and if we’ve had enough coffee, we can remember a few
more items on the next hand.
2. Develop Wireframes for Each Unique Page Layout
One of the most important steps of the Web design process, and one that you
should never skip even for small scale sites, is the development of wireframes.
Like blueprints for a house, wireframes are diagram-like drawings that articulate
your thoughts for laying out content on the page and figuring out the
interaction required to get through the content.
3. Always Label Your Buttons and Icons
As idiot-proof as you think your icon or illustration may be, I’ve found that
you can never rely on pictures alone to tell users what a button does. Unless
you’re designing a print function or other commonly recognized task, adding
a simple text label to a button or icon is a good idea. After all, no picture
could reliably represent the Product Catalog section of a site.
4. Mind the Download Time
To maximize the user experience of your site, always keep in mind the connection
speed of your end users and the ease of which they can access key
areas of your site. For example, avoid long all-Flash intro sequences that
must play through before users can make a navigation choice. Even if your
Flash intro has a Skip Intro button, you force users to download the Flash
movie to the point where they can even click the Skip button. Only then can
they finally access the global navigation. Such a two-step process that can
also involve a long wait is annoying for your repeat visitors.
5. Provide “You Are Here” Feedback
The navigation system that you design should not only provide
access to all the main functional areas of the site, but also give users
some sense as to where they are in the Web site. Like a mouse able to
see the maze from an aerial view, your navigation system should provide
the same sense of orientation and visually show people the size and scope of the site.
6. Make It Easy to Get Back Home
One of the functional items people forget to include most often in Web design
is a link back to the home page. People drill down in a site, find the info they
need, and then suddenly realize that the only way to get back to the home
page is by reentering the URL.
7. Visually Differentiate Clickable and Nonclickable Things
Although reusing graphics wherever you can to take advantage of the browser’s
caching ability is tempting, don’t use the same graphic as a button on one
page and as a decorative headline on another. For example, if you use an icon
as a button leading to the About section of the site, don’t use the same icon
merely as decoration for the headline on that page. Otherwise, people will
still think that it’s a button. Give the icon a slightly different visual treatment
so people know that its function has changed.
8. “One of These Buttons Is Not Like the Others”
Continuing along the same lines as #6 in this list (“Make It Easy to Get Back
Home”) is consistency. If you’ve ever watched Sesame Street, you may remember
the famous skit: “One of these things is not like the others.” In this scenario,
kids are taught to weed out the objects that don’t fit with the rest of the group.
This is an excellent analogy for user interface design.
9. Tread Lightly with Real-Life Metaphors
Sometimes clients want the interactive model for their Web site to be inspired
by an object or a place, or modeled after an experience like watching a movie
or playing a video game. For example, a client for a children’s site might want
to use a 3D clubhouse for the main interface.
10. Use Color-Coding Sparingly
Another way to orient people in your Web site is to color-code each of the
main sections. Color-coding is most useful in cases where the site has just a
few sections, but each are deep in content. For example, a corporate site may
have a branded online store that has a different color scheme than the main
site. Or a conference Web site may have a few different tracks that you can
color-code so prospective attendees know they are looking at the right one
when thumbing through the session descriptions.
