STRATEGIES

De-Clutter Your Site with Page Organization

Clarity plus a healthy dose of organization makes for a good customer experience.

Note: This article originally appeared in the Yahoo! Small Business newsletter, Insights. A wide variety of other informative articles is available in Yahoo!'s Small Business resources page.

Easy-to-read web pages adhere to the same big secret of navigation and nomenclature: strive for clarity, and add a healthy dose of organization. Your customers don't have the time to navigate through a cluttered web site, so if you inundate them with too much content, choices, imagery, piles of navigation, loads of links, and very little white space, you can create a visual assault that can leave them feeling overwhelmed and confused.

To reduce page congestion, consider these organizational tips on the following characteristics:

Page Headers
You need only one. Refrain from making all the bold text in your body copy enormous and styled like the page header.

Body Copy
Text on computer screens can be hard enough to read--don't make it harder by using light-colored text on a dark background, especially on pages with lengthy copy, such as press releases or product descriptions. Consider the amount of spacing between the lines of copy and the gutters surrounding the copy: A little extra padding between text elements adds visual "breathability." Also, try to keep the amount of page-scrolling to a minimum. If you have a long page of copy, break the copy into pages.

Colors
The use of color in your web site can create eye appeal or visual anarchy. Try to avoid using too many colors at once, stick to a condensed palette, and keep your color usage consistent throughout the site.

An excellent example of color usage is the WD-40 web site. In the Products section, you can see how cleverly the colors act as a branding enhancement and take on the role of cueing the viewer to navigate through the pages. Compare the LavaPro page and the WD-40 No-Mess Pen page. Note how the colors on each page become strategic visual markers that help guide the eye through the layouts. The LavaPro page relies on high-contrast header colors in conjunction with product placement, and the No-Mess Pen page subtly integrates a softer palette with the full-throttle primary colors found in the product. What's fascinating is that both pages mesh well with the web site's global color palette.

Clickables
Don't leave your audience guessing what is clickable and what isn't. For example, if you have text links in a different color and underlined as a style on the web site, don't underline text in the body copy or headers. It sends a conflicting click message to the viewer and gives them a bumpier ride.