Hardware

Reduce visual clutter to improve usability

A modern home page often includes a barrage of information. We need to reduce this visual clutter or we risk overwhelming site visitors and making it difficult for those visitors to find what they're looking for.

I've noticed a disturbing trend in Web design over the last couple of years. Web pages—especially home pages—are getting bigger as designers pack increasing quantities of information into each page.

Previously, a home page might contain a logo and tag line, an attractive graphic, some site navigation buttons, and a welcome message. Now, it's common to see all of that and much more, including:

  • Headlines and text for multiple news items
  • Separate headers and quick links for several site features
  • An assortment of graphics for promotions and advertisements
  • Logos for various affiliates, memberships, and awards
  • Copyright notices and other legal disclaimers

This barrage of information can be overwhelming for site visitors, which often leads to them having a hard time finding what they're looking for among all the distractions.

Design for users

There are several contributing factors for this trend. One factor is designers who work on large, high-resolution monitors and don't adequately test their designs on smaller monitors at lower-resolution settings.

Viewing a large Web page on a large monitor enables viewers (i.e., designers and visitors alike) to see most, if not all, the various page elements. Seeing the relationship between those elements is what enables the visitor to understand their logical organization. Visitors use that understanding of the page organization to find what they want.

When visitors view a large Web page on small monitors or in small browser windows, they can see only a few of the page elements at any one time. They can't observe the relationship between various page elements unless they build a mental picture of the entire Web page by scrolling around and observing the component parts. Many Web site visitors don't have the required visualization skills for this mental exercise, and many others aren't willing to invest the time and effort. The result is that a large portion of the site visitors have difficulty understanding the organization of large Web pages and finding what they want on those pages.

The simple solution is for designers to tailor their designs to the screen resolutions and browser window sizes that site visitors actually use. Fortunately, we're no longer restricted to 640 x 480 resolution. A 15-in. monitor running at 800 x 600 resolution is a more practical minimum configuration, and many current computers come with 17-in. monitors and default to 1024 x 768 resolution. Still, that's substantially less viewable area than a typical designer's system, which might include a 19- or 21-in. monitor operating at 1280 x 1024 or higher. If you design Web pages that need that much screen real estate to look their best, then your site visitors with smaller monitors will have trouble using those pages.

Usability improvements

Oddly enough, I think part of the blame for the usability problems of large, cluttered Web pages is an overzealous effort to improve usability.

Many designers are reacting to complaints about the excessive number of clicks required to reach specific pages. They're also hearing criticism of pages that are devoid of content and simply present a series of links, which makes them function like full-page menus. Designers respond by flattening the navigation structure of their Web sites and using fewer, but larger, pages.

To reduce the number of clicks necessary to reach certain content, designers often place quick links to that content on the site's home page. Visitors can click a single link instead of drilling down through the navigation tree. It's a good idea—provided the quick link is easy for the visitor to find and identify. However, it's counterproductive if the number of quick links and other elements competing for visitors' attention create a visual clutter that makes it hard for visitors to pick out the item they want.

The ultimate in click reduction is zero-click content—news items and other content that are on the home page rather than being on separate pages that visitors access via navigation links. This is another good idea that can help ensure that as many visitors as possible can see important content. However, it's easy to place too much content on a single page—especially a site's home page. If visitors must scroll around a page to see all the content, they aren't really saving any time or effort. In fact, scrolling is often less efficient than linked pages because well-constructed links provide a description of the linked content, whereas the only way to find out what is hiding beyond the edge of the browser window is to scroll over for a look.

Adding quick links and text content to a site's home page can help improve usability by increasing information density and making content accessible with fewer clicks. This is good up to a point, but if designers take it too far, these same tools can push the page design from clean to cluttered and create overly large pages that won't fit in typical browser windows. Perhaps it's time to return some sanity (and some much-needed white space) to the more cluttered Web site designs. The result will be Web pages that are both more attractive and easier to use.

Editor's Picks

Free Newsletters, In your Inbox