Page layout diagrams.
All articles
Oct 3, 2006 | Updated Apr 10, 2021

Keeping Page Layouts Simple and Easy to Scan

Complicated page layouts confuse users and cause them to overlook important content. Avoid this fate by following a few key design principles.

Complicated page layouts confuse users and cause them to overlook important content. Avoid this fate by following a few key design principles.

An overlooked source of long task times and task failures is a destination page that is so poorly laid out that the user can’t find what they are looking for—even when they’ve landed on the right page. It is very frustrating to watch in a test situation—participants fruitlessly scanning the page that contains the desired information, yet they are not able to discover that information. So close and yet so far.

Why does this happen? Usually, it’s because the page carries a very high cognitive load for users. In other words, people have to work too hard to figure out the page. While site managers may obsess over inter-page navigation (the links that take users from page to page) intra-page navigation (helping users navigate within a page) often gets short-shrift.

To help users find what they are looking for on a page, it’s critical to establish a clear visual hierarchy that gives heavy visual weight to primary elements and less visual weight to subordinate elements. On the web, people don’t read pages word-by-word—they tend to scan to find what they are looking for. Pages where all elements have a similar visual weight are very difficult to scan.

Another tendency is to express the same function in different ways “just to make sure users get it.” For example, a page might have multiple, seemingly different calls to action: Start Now, Open an Account, Invest for Free (these links are from an actual site and they all lead to the same destination). This approach not only adds to page complexity, users are almost always confused by options that seem the similar yet are labeled differently.

It’s not necessary to have completely stripped-down pages in order to make them easy to use. Even pages with a large amount of content can be organized in a way that makes them easy to scan. The key is organizing information into to meaningful groups that help users scan and process the page. Portal-type pages such as use this approach. In addition to grouping information on the page, tabbed card stacks can be used as a kind of intermediate approach between “showing everything” on the page and requiring users to go to a different page. Particularly with Ajax, the tab interaction can be very responsive, doing a much better job of keeping the users’ context than in the past.

When we talk about these principles with clients, they often show clear awareness of them despite their web site’s evidence to the contrary. The problem is that page layouts are often developed organically at the hands of several individuals at different points in time. Also, page real estate within the organization is a valuable commodity and no department wants to feel “left out.” The result is pages that do not have a central focus, contain too much information (it’s often politically difficult to remove information once it has staked a claim on a page) and are therefore very difficult to use. As consultants, we have a bit more freedom to “ask the dumb questions” and challenge the status quo. Still, organizational issues can make it difficult to make the type of substantive changes necessary.

When you look at your current site, think about “simplifying until it hurts.” This is a motto we picked up during work with Apple Computer and a great mindset to work within. Consider creating a short checklist to keep page complexity under control:

  • Are there any duplicated links, buttons or other page elements?
  • What are the most important elements on this page? Do they pop?
  • Are there elements that could be removed from this page—that detract from its main focus?
  • Is the page easy to scan? Is information grouped logically?

Reducing page complexity is often a good “low hanging fruit” starting point to making your pages easier to use.