How To Direct A Viewer’s Eye Through Your Design

Posted: 21 Apr 2014 05:30 AM PDT

Where in your design do people look first? Where do they look next? After that? How much control do you have when it comes to directing the viewer’s eye?

The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Today I want to continue and consider how designers might direct the eye of the viewer through a composition.

As I mentioned last week this series comes mainly from the book Visual Language for Designers by Connie Malamed.

Guide the Eye By Grabbing Attention

Our eyes take in a lot more visual information than our brain can consciously process. We want to focus on the most compelling information so we selectively look at what we think most important. This is called selective attention.

Studies have shown that we can be distracted by visual information even when it’s not relevant. If it’s attractive enough, it’ll grab our attention even against our intention. This suggests we can direct where the eye will look and select what will gain the viewer’s attention.

When we do we speed up visual processing, reduce cognitive load, and increase comprehension. Directing the eye allows us to

Guide the viewer’s eye along an intended path
Guide the viewer’s eye to the most important information

Our attention can be captured at any point along either the bottom-up or top-down process. To attract attention during the bottom-up process you want to use contrast and emphasis and to attract it during the top-down process you typically create steps in sequence.

Arrows and other visual cues will be understood more often than written directions alone

The movement of our eyes through a composition are not random. We look for desired information and our attention is pulled to specific elements with features prominently emphasized. We quickly skip over what’s irrelevant looking for meaning in what we focus on.

As we scan a design our eyes tend to move horizontally or vertically. Diagonal movements are less frequent. After a few fixations we get the gist of what we see and once we do eye movement is influenced by the content of the design itself.

Different people might scan the same design in different ways. Each of us is unique and will think different information more important. We all have some common tendencies, though.

For example most of us will start scanning in the upper left cornier of a design. Those who read right to left may start in the upper right corner, but there’s some debate whether that’s so.

Guide the Eye Through Visual Weight

The first step in directing the eye is drawing it into the composition. You can take advantage of the bottom-up process and emphasize an element so greatly it becomes the dominant visual element in the design.

This dominant element creates an entry point into your design. It suggests where the viewer should look first. Without a dominant element a viewer may find it difficult to organize the visual information in front of them.

You give elements different visual weights based on their color, size, shape, and a number of other factors that might draw attention.

You create a dominant element by giving it the most visual weight. From there you can create several focal points with varying degrees of visual weight. The more important the element, the more visual weight it would receive.

Ideally you’ll create several levels of importance through visual weight. Three is the typical amount as most people can only distinguish between most, least, and everything in between. It is possible to create more than three levels of importance, but with each new level there is less contrast between all levels and differences are harder to detect.

Techniques for Guiding the Eye

We have several techniques at our disposal to help us guide the viewer’s eye through a composition. The first two work because they affect visual weight.

Position

The position an element occupies in a composition creates perceptual forces and tension that affect it’s perceived importance.

For example higher in the composition is usually seen as more important than lower in the composition. This is why important information like logos and navigation are more likely located in headers than footers.

Studies suggest that anything seen in the upper half of an image is considered more active and dynamic. The upper location also increases the perceived visual weight of the element.

The position of elements helps vary their visual weight and helps you create a visual hierarchy leading the eye from one focal point to the next.

Emphasis

Emphasis makes elements stand out. Without it elements can appear flat and lifeless and there are less opportunities to direct the eye.

A varying degree of emphasis works best. The eye instinctively moves from most to least prominent. If everything is emphasized, then nothing is emphasized. You want to create a relative emphasis across elements in order to establish a dominant/subordinate hierarchy and structure for your information.

Contrast attracts attention. People sense that areas of difference are more important than areas of sameness. Contrast also helps us distinguish figure from ground. It helps us recognize shapes and textures and patterns. It makes some elements more prominent than others.

You can contrast elements through characteristics like size, color, shape, and texture. According to Rudolf Arnheim when all else is equal, visual weight will be most dependent on size. Others suggest tonal values offer the greatest impact.

Emphasis can also be created through contradiction. Place an unexpected object in a familiar context and the contrast in expectations will help draw the eye. You can also use attributes in unfamiliar ways. Make children larger than adults or elephants smaller than mice. This works because it breaks schemas, which lead to an increased interest.

Movement

Static compositions move and flow according to the directionality inside them. Lines, shapes, and textures carry energy and tension based on orientation, position, nearness to other elements, etc. This energy and tension create directional forces in the composition.

For example imagine the image of a pitcher pouring liquid. As the liquid flows down from the pitcher, your eye follows the perceived flow. Even though the pitcher and liquid are static in the composition, you sense the movement that’s occurring because you understand how the real world works.

Rudolf Arnheim suggested that three factors determine the direction of visual forces in a composition.

The attraction exerted from the visual weight of surrounding elements
The shape of objects along their axes
The visual direction and action of the subject

We perceive kinetic energy in static pictures because we know how objects move in the physical world. We know the liquid is pouring down from the pitcher and not the other way, because we know how gravity works.

We can take advantage of the quality of lines and shapes to create movement based on rhythm. Place several of the same element in sequence and vary some of it’s characteristics and rhythm is created for the eye to follow.

Left to right movement is easier to perceive even in cultures where reading occurs right to left. This movement appears to be more neurological than cultural.

You can also create movement through perspective, which draws the eye into the depth of field of the composition. The viewer deduces the depth in pictures based on how things appear in the visual world. Larger objects appear closer (and more important). Cooler colors appear further away.

Eye Gaze

Our brains are wired to detect and recognize human faces. In compositions we’re drawn to pictures of people and even more we notice their eyes specifically.

We automatically move our eyes in the direction we see someone else looking. It’s most likely a survival mechanism and it occurs in all people. Infants as young as three months old will follow the eye gaze of those around them. Whether it’s innate or learned, eye gaze leads to joint attention.

If you want someone to look in a specific direction in your design, you can place a human face looking in that direction.

Visual Cues

Like eye gaze we can offer visual cues that direct the eye and attention to elements of our choosing. Visual cues signal the viewer’s attention to more important information reducing fixations and time spent processing.

Visual cues include things like arrows, color, and captions. They provide shortcuts to finding information and have been shown to improve recall.

Arrows are often used because they’re very effective. They clearly point the way and direct attention. When an arrow points to a location it helps the viewer filter out the extraneous and focus on where the arrow leads. It keeps the focus on the essential which is a first step in comprehension.

Arrows and other visual cues are more likely to be understood than written directions alone. The cues provide a structure and cognitive framework to follow. Viewers can construct better structures in working memory making information easier to assimilate.

Arrows should be dominant enough to attract attention, but not enough to overpower everything else in the design.

Color is another cue that can be used to attract attention and direct the eye. Contrasting color acts as a signal for the eye to move. It’s one of the primitive features and it can play a large role in guiding the eye.

Color helps viewers search for and find what’s most important
Color helps viewers notice and distinguish elements
Color emphasizes figure/ground contrasts and relationships
Color helps make information memorable

Color helps us organize and categorize. Differences must vary enough from background and surrounding elements to get noticed quickly and you should avoid using too many colors in a single design. Use color to note key information and help recall, comprehension, and retention of information.

Summary

Because the eye is always moving and fixating we can help guide people through a composition by directing where the eye should look next.

We begin by creating a hierarchy of relative importance through visual weight. The more visual weight an element has the more attention it attracts. Creating levels of importance in a composition help the eye quickly understand the scene in front of them and suggest the order in which to take in specific information.

We can use position, emphasis, movement, eye gaze, and other visual cues to help the eye find its way through a composition. Doing so speeds up visual processing, reduces cognitive load, and increases the probability viewers will see what we want them to see.

Next week we’ll continue with a look at realism and how reducing realism is often the best way to reduce cognitive load, help people find things quicker, and help them comprehend and retain the information they encounter.

Download a free sample from my book Design Fundamentals.

The post How To Direct A Viewer’s Eye Through Your Design appeared first on Vanseo Design.