Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

Visible Narratives: Understanding Visual Organization

by Luke Wroblewski
on October 31, 2006

Art vs. engineering. Aesthetics vs. usability. Usability experts are from Mars, graphic designers are from Venus . The debate between design (of the visual sort) and design (of the technical
sort) remains ongoing. A website, however, can’t take sides: it needs
both to be successful.

“Interactive design [is] a seamless blend of graphic arts, technology,
and psychology.”—Brad Wieners Wired,
2002

So, why the debate? Perhaps the dividing line sits in our minds: left brain
(logical) vs. right brain (intuitive). Or, if we take a less deterministic
view: few engineers have taken the time to study art and few artists have spent
time programming or conducting usability tests. But times are changing. Visual
designers working on the web need an understanding of the medium in which they
work, so many have taken to code. Many have entered the usability lab.

But what about the other side? Are developers and human factors professionals
immersed in literature on gestalt and color theory? They certainly have the
tools for it—programming environments make it very easy to throw around
images, colors, and fonts (of all shapes and sizes). But with power comes responsibility.
And in this case, the need to understand how visual information communicates
with your audience.

“We find that people quickly evaluate a site by visual design alone.” —Stanford
Guidelines for Web Credibility
, 2002

Visual communication can be thought of as two intertwined parts: personality,
or look and feel, and visual organization. The personality of a presentation
is what provides the emotional impact —your instinctual response to what
you see. Creating an appropriate personality requires the use of colors, type
treatments, images, shapes, patterns, and more, to “say” the right
thing to your audience. This article, however, focuses on the other side of
the visual communication coin: visual organization.

How we see: visual relationships

Whenever we attempt to make sense of information visually, we first observe
similarities and differences in what we are seeing. These relationships allow
us to not only distinguish objects but to give them meaning. For example,
a difference in color implies two distinct objects (or different parts of
the same object), a difference in scale suggests one object is further from
us than the other, a difference in texture (one is more blurry) enforces
this idea, and so on. Once we have an understanding of the relationships
between elements, we can piece together the whole story and understand what
we are seeing.

This process is accelerated by our ability to group information visually.
When we observe one blade of grass, nearby objects that share a similar color,
shape, size, and position are grouped together and given meaning: a lawn. We
don’t have to compare each blade to the others.

The principles of perception give us valuable insight into how we visually
group information. For example, objects near each other are grouped (proximity),
as are objects that share many visual characteristics (similarity).

Principles of Perception

Fig 1: Principles of perception: proximity, similarity,
continuance, and closure.

But understanding the psychological manner in which we group visual information
is not enough if we want to be able to communicate a specific message. In order
to do that, we need to know how to use visual relationships to our advantage—we
need to know what makes things different.

Though lots of variations are possible, we can group distinct visual characteristics
into five general categories: color, texture, shape, direction, and size. Introducing
variations in one or all of these categories creates visual contrast.
The more contrast between two objects, the more likely they will be perceived
as distinct and unrelated.

Visual Differences between objects

Fig 2: Visual differences between objects.

Telling a story: visual hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate
ideas through the organizing and manipulating of words and pictures.”—Jeffery
Veen, The Art and Science of Web Design

Now that we understand the basic ways to visually distinguish objects, we
can look at the big picture: using visual relationships to tell a coherent
story. Elements within a “visual narrative” are arranged in an
easily understood order of importance. A center of attention attracts the viewer’s
attention, and each subsequent focal point adds to the story. This logical
ordering is known as a visual hierarchy.

To build effective visual hierarchies, we use visual relationships to add
more or less visual weight to page elements and thereby establish a pattern
of movement through the layout. Visual weight can be measured by the
degree to which a page element demands our attention or keeps our interest.
Large red type, for example, contrasts with a white background much more than
a light gray dot. As a result, the visual weight of the red type grabs our
attention first, though it might not keep our attention as long as a detailed
image.

Differing Visual Weights

Fig 3: Three objects with differing visual weights created
by variations in color, shape, and texture.

Visually dominant elements (those with the heaviest visual weight) get noticed
the most. They are the center of interest in a layout and they determine where
the story begins. The hierarchy of subsequent elements guides our eyes through
the rest of the composition, giving us pieces of the story as we go. The relative
position of each element in the hierarchy provides valuable information about
its importance to the big picture.

Circus Poster

Fig
4: The heaviest (most visually dominant) elements in this circus poster are
the images of the performers and the title. They communicate the big picture:
the circus is in town. The lightest (least visually dominant) elements in
the hierarchy are the ticket prices and features. If the hierarchy were reversed,
few people would know the circus was in town. Instead they would be confused
as they passed posters seemingly promoting “$5.50.”

A balanced hierarchy provides not only a clear path for recognizing and understanding
information, it also helps unify the disparate elements within a page layout
into a cohesive whole. This creates a sense of order and balance. Without visual
hierarchy, page elements compete for attention, and as a result, none of them
win. In all hierarchies, only certain elements should be on top; the rest need
to follow suit. The appropriate position of each element in the hierarchy depends
on the message you are trying to communicate.

Visual Hierarchy

Fig 5: In a layout with an effective visual hierarchy,
the distinct visual weight of each element guides viewers through the page
in an informative and appropriate manner.

Putting it to use

Any given web page is composed of many distinct elements. Navigation menus
(possibly several layers deep), contact information, search boxes, site identifiers,
and shopping carts are just a few. The visual organization of a web page
can communicate valuable information about the similarities and differences
between elements and their relative importance. Once your audience understands
the significance of your page elements, they can apply that knowledge to
the rest of the site.

Changes in Visual Hierarchy

Fig 6: If all the elements in a page layout are given
equal visual weight, making sense of the page is difficult. Meaning is created
through the differences and similarities among elements and their place in
the page’s visual hierarchy.

Generally, the hierarchy of a web page is based on distinctions between the
content, navigation, and supporting information on a page. Within each of these
sections further distinctions can also be made. A general web page hierarchy
(from highest to lowest importance) may look like the following:

Content

  • Page title
  • Subsection title
  • Embedded links
  • Supplementary information (captions, etc.)

Navigation

  • Location indicator
  • Top-level navigation options
  • Sub-navigation options
  • Trace route (breadcrumbs)

Supporting elements

  • Site identifier
  • Site-wide utilities (shopping cart, site map, etc.)
  • Footer information (privacy policy, contact info, etc.)

Generic Page

Fig 7: The visual hierarchy of a generic web page.

Of course, there are many situations where deviating from this formula is
advised (on navigation pages, home pages, etc.). The content, audience, and
goals of each page should determine its exact hierarchy. Nonetheless, the visual
representation of each element on a web page should always be:

  • Appropriate for and indicative of the element’s function
  • Applied consistently throughout the site
  • Positioned properly in the page’s visual hierarchy (in a manner reflective
    of its relative importance)

Visual hierarchy, however, does more than simply explain page elements. It
guides users through the site’s content and interactions. Armed with
an understanding of each element’s place in a hierarchy, we can emphasize
important elements (such as content or interaction points), and subdue other
elements (supporting information).

Amazon's Visual Hierarchy

Fig 8: In this online form, visual hierarchy guides the
user through the necessary steps to place an order. It also emphasizes (with
color, positioning, and scale) the first step (“Ordering from…”)
and the last step (the “Sign-In” button). Simultaneously, the supporting
information is subdued (it has little visual weight) and does not interfere
with the main interaction sequence.

Similarly, visual hierarchy can provide users with a sense of where they are
within a website, to direct their attention (to special offers, for example),
to suggest distinct choices, to explain new elements, and more. However, effective
visual communication does not “speak” loudly. It quietly educates
and guides the audience through the interface.

Given the massive number of web pages and applications, users often rely on
visual cues (especially initially) to assess web interfaces. Therefore, a well
thought-out visual organization can greatly enhance usability by grouping information
into meaningful page elements and sequences. Such a system relies on an understanding
of how people use visual relationships to distinguish objects and what those
relationships reveal to viewers (through visual weight and hierarchy). But
visual organization is only half of visual communication. The rest, personality
(or look and feel), is another story…

Originally published in Boxes & Arrows – January 20th, 2003