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 organisation. Visitors use that understanding of the page organisation 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 visualisation 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 organisation 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.


Discuss this in the Builder Forums
Do you have a related question or comment? You can access our HTML forum from here and post your questions, reply to other users, search for answers and more.

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.

Wide World of Web This was published in Wide World of Web, check every Wednesday for more stories

Related links

Comments

1

Aussie Blogger - 23/03/07

Don't forget, a lot of pages are designed with Google in mind, it's a juggling act between SEO and usability.

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

1

Aussie Blogger - 23/03/07

Don't forget, a lot of pages are designed with Google in mind, it's a juggling act between SEO and usability. ... more

Log in


Sign up | Forgot your password?

  • Staff Microsoft shows off IE9 preview

    This week, highlights from Microsoft's MIX10 conference and more in the Roundup. Read more »

    -- posted by Staff

  • Chris Duckett IE9's H.264 vote killed Ogg

    In a split decision by the judges, the winner of the W3C/WHATWG video codec consensus is H.264, taking home the future of video playback on the internet while loser Ogg goes home with nothing but thoughts of what might have been. Read more »

    -- posted by Chris Duckett

  • Staff Google launches Apps Marketplace

    Google launches and app store, while Mozilla plans to re-write its open-source license. More of this week's news in the Roundup. Read more »

    -- posted by Staff

What's on?

  • Optus Deal

    Broadband + home phone + PlayStation®3 in a single package price!