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.
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 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.
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.
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.
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.
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.
Interesting read.Before I started blogging I had never taken the time to fully appreciate how complex visual design is. Now it’s almost 50% of what I think of when I compose a post.
With all of the information present on the internet, keeping any one person on your site for a long period of time is an impressive feat.
Thank you. Genuinely .. This kind of explanation was impossible to find. I have a social science background but i delve into design off and on. And I felt clueless when it came t eye movement. That may not be the case from here on.
Thanks a lot
Thank you for this! Your articles are super helpful to a new designer. I just started in an entry level developer position at a startup company. I work in Wordpress and use a few different page builders/visual composers, but have been lacking in theoretical and statistical background of design and how best to guide viewers’ sight. You’ve piqued my interest in learning so much more about design!
I’m so happy to have found a fantastic blog devoted to answering a simple yet unique question that only artists that know they are artists will truly appreciate. You know- the ones that find it hard to explain why he/she see the world in a certain way and can’t quite grasp how and why they do! I find your words articulated in a direct, creative and yet comprehensive manner written in layman’s terms without being condescending. Thank you, thank you for helping me design my son’s album cover without apprehension.
A proud mother.
P.s. I hear the forecast here in New Haven, CT is 58° (that’s great weather for us!) I believe you contributed vital information that started a phenomenal positive direct for my son’s successful future!
This is a really good, carefully considered, science-based, visual design fundamentals article. It just needs more visual support. It is essentially a visual design fundamentals guide without any strong visual examples.
In the one instance where a graphic was inserted (the arrow at the beginning), it was done so to emphasize how your eye will follow a leading line or arrow. And it certainly serves this purpose. Unfortunately, the choice to use a grungy arrow as opposed to a clean one, muddies the point a little. The grungy artifacts actually serve to distract the eye a bit. And it is even underscored just a few sentences later: “Studies have shown that we can be distracted by visual information even when it’s not relevant.” This is what happens in small degrees with the grungy artifacts outside the arrow shape, and to a lesser degree inside the arrow shape.
And while this may seem like I’m really splitting hairs, it is because I am an Art Director and I have read a LOT of articles on design fundamentals –most of them not very good – and this one is really, really good. With a little visual help, it could be outstanding!
Color helps make information memorable. I agree with this concept when it comes to developing curriculum and learning goals for students. Color helps them earn different points and curriculum that relate to the main idea.
I am designer and read this article which helped me. how can i use important things ..thankj you very much
I am a photographer who often uses colour, size and contrast to guide the eye. Your article is loaded with precious insight. Greatly appreciated.
Thanks Pierre. I’m glad I could help.