Upload
elizabeth-arostegui
View
212
Download
0
Embed Size (px)
Citation preview
7/30/2019 Visible Narratives Understanding Visual Organization
1/6
Print this | Discuss this Article | Large Font Version January 20, 2003
Read more articles in How to: Methods & Approaches
Visible Narratives: Understanding Visual Organizationby Luke Wroblewski
Discuss
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 immersedin 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, andmore, 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 relationshipsWhenever 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
Visual designers
working on the
web need an
understanding of
the medium inwhich they work,
so many have
taken to code.
Many have
entered the
usability lab.
Recen
Vaska" I'm"typog
princimuchFebruLuke" TypeorganivisualwithinFebruvaska" I thihowevleft ou
mentiFebruBen C" Greasee sowith manimaJanuaPaula" Fabudon'tlookedearly '
Janua
Share
Your e
Messa
Send
Notify
Sign u
new aBoxes
Name:
Page 1 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization
15.02.2005file://F:\ztemp\Visible Narratives Understanding Visual Organization\visible_narrativ...
7/30/2019 Visible Narratives Understanding Visual Organization
2/6
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).
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, weneed to know how to use visual relationships to our advantagewe 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.
Fig 2: Visual differences between objects.
Telling a story: visual hierarchyDesigners 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.
Email:
Su
Un
Page 2 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization
15.02.2005file://F:\ztemp\Visible Narratives Understanding Visual Organization\visible_narrativ...
7/30/2019 Visible Narratives Understanding Visual Organization
3/6
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.
Fig 4: The heaviest (most visually dominant) elements in this circus posterare the images of the performers and the title. They communicate the bigpicture: the circus is in town. The lightest (least visually dominant) elementsin the hierarchy are the ticket prices and features. If the hierarchy werereversed, few people would know the circus was in town. Instead they wouldbe 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 appropriateposition of each element in the hierarchy depends on the
message you are trying to communicate.
Fig 5: In a layout with an effective visual hierarchy, the distinct visual weight of each element guidesviewers through the page in an informative and appropriate manner.
Putting it to useAny 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.
Page 3 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization
15.02.2005file://F:\ztemp\Visible Narratives Understanding Visual Organization\visible_narrativ...
7/30/2019 Visible Narratives Understanding Visual Organization
4/6
Fig 6: If all the elements in a page layout are given equal visual weight, making sense of the page isdifficult. Meaning is created through the differences and similarities among elements and their place in thepage'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
z Page title
z Subsection title
z Embedded links
z Supplementary information (captions, etc.)
Navigation
z Location indicator
z Top-level navigation options
z Sub-navigation options
z Trace route (breadcrumbs)
Supporting elements
z Site identifier
z Site-wide utilities (shopping cart, site map, etc.)
z Footer information (privacy policy, contact info, etc.)
Fig 7: The visual hierarchy of a generic web page.
Of course, there are many situations where deviating from this formula is advised (on
Page 4 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization
15.02.2005file://F:\ztemp\Visible Narratives Understanding Visual Organization\visible_narrativ...
7/30/2019 Visible Narratives Understanding Visual Organization
5/6
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:
z Appropriate for and indicative of the element's function
z Applied consistently throughout the site
z Positioned properly in the page's visual hierarchy (in a manner reflective of itsrelative 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).
Fig 8: In this online form, visual hierarchy guides the user through the necessary steps to place an order. Italso emphasizes (with color, positioning, and scale) the first step (Ordering from...) and the last step (theSign-In button). Simultaneously, the supporting information is subdued (it has little visual weight) anddoes 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 pageelements 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...
For more information:
z Web design: art versus engineering, The Jungle
z Aesthetics and Apparent Usability, Noam Tractinsky, CHI97 Electronic Publications: Papers
Page 5 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization
15.02.2005file://F:\ztemp\Visible Narratives Understanding Visual Organization\visible_narrativ...
7/30/2019 Visible Narratives Understanding Visual Organization
6/6
Discuss
z Usability experts are from Mars, graphic designers are from Venus by Curt Cloninger, A List Apart
z Stanford Guidelines for Web Credibility, 2002
z The Art and Science of Web Design Jeffery Veen, New Riders Publishing, 2000
Luke Wroblewski is a Senior Interface Designer at the National Center for Supercomputing Applications
(NCSA), birthplace of the first widely distributed graphical Web browser, NCSA Mosaic. At NCSA, he has
designed interface solutions for Hewlett-Packard, IBM, and Kellogg's, and co-developed the Open Portal
Interface Environment (OPIE).
Print this | Discuss this Article
Recent ArticlesColoring Outside the Lines
Building a Metadata-Based WebsiteIA Classics: Tools of the Trade in Comic Book
FormCard-Based Classification EvaluationCreating a Controlled VocabularyAll Previous Articles
Copyright
Page 6 of 6Boxes and Arrows: Visible Narratives: Understanding Visual Organization