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.
4Leading 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.
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.
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.
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.
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.
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 much less effective design.
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).
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.
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.
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.
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.
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.
