Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Designing a Guided Tour

March 26, 2006

When designing and laying out the pages for a website it’s important to keep in mind that each page has a specific job to do according to the needs, desires and expectations of our client and the site’s end users. As the designer, it’s our job to ensure that when a user lands on a particular page he not only finds what he needs or has a good experience, but he also finds what the site owner (our client) wants him to find and does what the site owner wants him to do.

As I’ve outlined before, humans typically respond to the use of line, form, color, contrast, balance, texture and composition in largely predictable ways. Using what we know of human perception and fundamental artistry, we can lead the visitors’ eye into and through a page. We can establish and communicate the hierarchy of information importance by our use of color, text form and relative text size. And in certain situations we can use chunking to break up pages into conspicuous, easy to digest bits of information to ensure that important information gets seen and has a better chance of being communicated.

In this article I will show real-world examples of how certain web pages are successful and unsuccessful in providing a clear path through the page and the information offered on the page. I’ll use these examples to discuss what was done right or wrong with regard to design.

Note: The websites featured are for design example and tutorial purposes only. I do not show them in order to bring praise or ridicule upon the designers of these sites. If you happen to have been involved in the design of a site I hold up as a poor example, that’s life. Deal with it. I, too, have had to compromise what I knew to be better in order to satisfy a client.

Leading the Eye and Information Hierarchy

One
In this example, after noting the logo (something nearly all website visitors do first on a page) our eyes are immediately drawn to the colored boxes on the right. Those are links that the organization wants us to click in order to find out more about their stuff.

New Attitude website

The use of color here makes for a very conspicuous and eye-catching mechanism, and a successful design.

Two
Here’s an excellent use of color and contrast to lead the eye along a specific path.

Seen Creative website

Note how the contrast of the green on the black and then the black on the green and white helps to create a specific path into the page. The eye is drawn from the logo (1) to the primary message (2) then to the secondary message (3). It is worth noting that the arrow (again using contrast) helps to support this implied path.

path through the main page

Three
Here’s another example of good use of contrast to lead the eye. In this example, contrast is created with both color and shape.

Revolver website

In this design, the eye is drawn from the high-contrast logo to the download icon (a balancing element to the logo) and then over to the information about what the downloadable product is. There is more information on this page, but these elements constitute just about everything someone needs to know in order to make a decision to decide to use the product.

path through the Revolver website main page

There was a design gaff on this page, however. The image of the browser screen in the lower left is used to illustrate the effect of this application. The image continually changes from one image to another, which creates an unfortunate distraction from the otherwise effective design. The effect is something akin to your trying to read an article while your 4-year old niece is tugging on your sleeve and saying, “Hey, look. Hey, look. Hey, look!” It would have been far better to use a conspicuous call-to-action on the page to see the application in action.

Four
By contrast, we have this example of a less effective design.

HealthVibes website

There are too many photos and too many similar icons and too many colored boxes on the page. Virtually every element on the page has equal visual weight and it is hard to know what to read first or do next.

This page would be far more effective if all of the distraction was eliminated in favor of the “quit smoking” and “allergy and pain relief” sections. By leaving these as the only elements in the main content area below the header it would be clear to visitors what they should see or learn. Done that way, the layout would have been a good example of “chunking.”

Five
Because of the use of color contrast, the most conspicuous element on this page is the info-blurb at the top of the page. This is the most important bit of information on the page - for new visitors - and the design ensures that it will be seen first (after the quick glance at the logo).

WaSP website

The next most important thing on the page, as communicated by the design, is the information in the white portion of the page. Whether the designer intended it or not, the composition communicates that this is where to look next after the text in the header.

Chunking

One
In this example, the chunks of information constitute almost the entirety of the information to be communicated on this page. The image/info in the middle is conspicuous and communicates the general idea and then the three chunks of information cover the rest of what they want you to know.

izilla website

Two
This next page has quite a dizzying array of navigation at the top. Luckily, they’ve opted to provide a few chucks of info to outline their primary services. These chunks make for a more inviting and easy to understand mechanism for getting into the site. The use of color and photos of people’s faces makes the chunks all the more attention-grabbing.

IndiGo website

Three
Here we have an example of how chunking can lead to easy comprehension and more elegant structure and an example that shows how bad things can get when chunking is not used. On the left is The Wall Street Journal and on the right, The Times (London). The Times uses color to create sections of information that make the page seem neat and easy to read. The WSJ, by contrast, uses almost no color to lend a sense of structure to the page and, instead, just uses lines to separate bits of content.

The Wall Street JournalThe Times

Four
But be careful! Don’t forget that the web environment is generally a horizontal presentation environment. Channel 49 News (on the left) forgets or is not aware of this and tries to use chunking in a vertical manner, as if their website were a newspaper. The result is not as effective as it should be.

News 49The Times

The left and right columns of this page are completely disjointed and the attempt at using color (too many colors) to create structure only creates a bit of chaos. Contrast that with the better structure of The Times layout.

Conclusion

Clearly, it is important that before we begin designing a website we understand what information should be communicated by the pages and in what order that information is to be conveyed. Our job is to ensure that both site owner and site visitors are satisfied by the result.

So by way of a comprehensive discovery process, an understanding of human behaviors and psychology, and an understanding of the principles of interaction design we can craft a satisfying and somewhat predictable experience for site visitors. That’s an essential part of a designer’s job and mandate.

You should follow me on twitter

Archives

Archive

Practice