Natural Selections: Colors Found in Nature and Interface Design

Written by: Luke Wroblewski
“Perhaps no other design element has as much influence on how we feel in a space (a website, a home, etc.) as color.”

The World Wide Web is awash with sterile design solutions. Hewlett-Packard, IBM, Dell, Microsoft, and countless others are virtually indistinguishable from each other (similar layout, similar color scheme). Though one might say that this uniformity makes web browsing easier by virtue of a standardized interface, the reality is such sites create mundane experiences for their users and fail to make a positive connection with their audience.

One easily remedied cause of such drab design is color. Perhaps no other design element has as much influence on how we feel in a space (a website, a home, etc.) as color. Colors can instantaneously change our moods and alter our opinions. They can make us comfortable, put us in a state of awe, or get us excited. In the case of interface design, color combinations found in nature are especially useful. From complex web applications to informative “brochure-ware” sites, naturally occurring color combinations have the potential to distinguish (by helping create a more memorable website), guide (by allowing users to focus on interactions), engage (by making page layouts comfortable and more inviting), and inspire (by offering new ideas for color selection).

Distinguish
As we go through our lives, we quickly forget about events that are routine and mundane. We tend to save our memories for unique experiences or events with which we had an emotional attachment. It’s no different as we go through the web. When all websites look the same, it’s quite easy to drop them into the “been there, seen that” bin. And once you consider how fast we move through websites, it’s probably even easier.

Therefore, any opportunities websites have to be distinct shouldn’t be squandered. If your site stands out, chances are web users might give it more time or thought when they arrive. They might even remember it and come back. There’s probablybly no better opportunity to make a favorable impression than with color. People have an immediate response to color: they get excited, they get happy, or they get bored.

A unique palette based on colors found in nature can get you out of the World Wide Web color rut (Fig 1) and help create a more memorable website. For example, the naturally occurring color combination (Fig 2) used in this website mock-up (Fig 3) is a stark contrast to the more “standard” version (Fig 4) of the same site. The soft colors are subtle enough to work as background, yet distinct enough to separate the four main information areas of the site.

But before you go applying “prairie tones” to your design, remember your color selections need to be appropriate for your audience. Because color communicates so effectively, it’s important to make sure that it says the right thing.

“Form follows function—that has been misunderstood. Form and function should be one, joined in a spiritual union.”
Frank Lloyd Wright

GuideColors found in nature are often less saturated and more pleasing to the eye than their artificial counterparts. As a result, they allow users to focus on interactions, and not be distracted by overly bright hues. When you attempt to focus on the information in a layout with very saturated hues (Fig 4), your eye consistently returns to the bright colors (in this example, to the blue bar at the top). In contrast, the blues and yellows in the alternate layout (Fig 3) create a balance that allows the images, navigation, and content to come forward. (This is especially useful for pages that have lots of content.) The strongest visual elements are the most useful ones: navigation menus and featured content, not background colors. Perhaps this occurs because of our familiarity with nature’s color combinations. We are used to backdrops composed of blues, yellows, and grays because we see them every day.

This phenomenon becomes especially important in web-based applications where users can interact with an online service for hours or days at a time. Having a palette that does not fight for a user’s attention allows them to focus on their work and on important information. Of course, color isn’t all you need to create a great web experience; structure, interaction, layout, and more need to work together to create usable and useful websites and applications. But color is an important part of the equation and shouldn’t be ignored.

“Nature’s colors are familiar and have a widely accepted harmony.”
Edward Tufte, 1989
EngageColor combinations found in nature are especially useful for addressing another design consideration: emotional response. Usability is vital for easily getting users from Point A to Point B, but it takes personality to create enjoyable experiences that people want to repeat and share.

Consider the following two versions of a transaction form. One (Fig 5) uses a palette that is bleak and intimidating. The other makes use of a naturally occurring color palette and is more approachable because of its warmer, more inviting colors. For the clericals who must repeatedly use this online program, a less intimidating interface can engage them and provide a more comfortable setting within which they can work.

Inspire
Color combinations found in nature also provide a wealth of inspiration. The diversity of the natural world continually offers new ideas and approaches to color selection. For instance, the colors used to encourage tourism in the city of Dublin are not the orange, green, and white of the Irish flag you might expect. Instead, they come from a naturally occurring color combination on the Irish coast. This combination is both lively and attractive, making Dublin seem fun and expansive. It’s a shame this color scheme was not carried through to the Dublin website, which is much less vibrant and engaging.

All that said, naturally occurring color combinations are not a silver bullet. Sometimes, you might want to inspire “shock and awe” in your audience. In which case, colors that never occur together in nature (and therefore seem uncomfortable) could be your best bet. Other times, your favorite shade of corporate blue could be just what your audience is looking for. But when it comes to extended or complex interactions and unique ideas, color combinations found in nature are a valuable weapon to have in your arsenal.


Setting the Mood with Color by Sean Glithero
http://coe.sdsu.edu/eet/Articles/colormood/start.htm

Color My World by Molly E. Holzschlag
http://www.webtechniques.com/archives/2000/09/desi/

Color Design for the Web by Vaishali Singh
http://www.coolhomepages.com/cda/color/

Visible Narratives: Understanding Visual Organization

Written by: Luke Wroblewski
“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. ”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).


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.


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.


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 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.


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.


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.)


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).


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…

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).