How to use a photo to keep eyes on the page
In good web design, the elements of a layout work together to move a visitor toward an end result, whether it’s to read an article or click an “Order Now” button. Mix together a well-chosen photo, a powerful heading, and body copy that sings and you have the recipe for a web page that compels visitors to take action.
But you shouldn’t just drop a photo in a layout and move on. First, you need to recognize the direction of movement within the image. Then you can use that to shift a visitor’s focus wherever you want. The finished page will have a more professional look and keep visitors engaged.
Here’s an example:
The initial focus in this layout is on the gorilla in the photo. But details in the image, such as where the gorilla is looking and where it’s fingers are pointing, shift attention upward and into the heading. The photo works to keep the visitor on the page and subtly pushes them to read the article. If the image were flipped horizontally, it would look out of place and be much less effective.
The following points will help you determine how a visitor’s focus will move through an image, so keep them in mind as you position your photos for maximum effect.
Light versus shadow
The eye tends to move toward whichever is less prominent. In a darker photo, the eye goes to lighter sections. In a brighter photo, focus moves to the shadows.
The flow of shapes and lines
The lines and shapes that make up objects in a photo can create a sense of directional movement. The gorilla’s fingers in the picture above are a good example. They point up so the eye follows them upward.
Proportion
Smaller objects in a photo can draw attention away from larger objects. Something that takes up a lot of space in an image is hard to see all at once. The eye has to move around to “get the whole picture”. Because there’s no place to rest, attention tends to shift to something else in the photo. A smaller object, on the other hand, is easy to see all at once, so the eye is more willing to move to it and rest there.
Color
A splash of color in a section of a photo can draw the eye in that direction. Also, as with light and shadow, a dark color attracts the eye in an overall light-colored photo and vice-versa.
Level of detail or focus
The initial focal point of an image is the section with the greatest level of detail and the sharpest focus because it’s the most visually interesting. But the eye tends to move from there to less detailed, less focused areas to complete the picture.
The principles in action
Below is a layout with text and a photo of Harold and Ginny when they found out Darth Vader was Luke Skywalker’s father.
Notice how much space Harold takes up in the photo. Also note how he leans to the left and his hand, particularly the lines of his fingers, point in that direction. Ginny is much smaller and her fur and skin are dark when compared to the overall brightness of the photo. All of these elements (proportion, the flow of shapes and lines, color, and light versus shadow) pull the visitor’s attention to the left of the photo and back into the block of text.
The example below uses the same text with the photo flipped horizontally.
Feel the difference? All the elements that moved the visitor’s focus into the block of text before now pull to the right and away from it. If the image is floated to the right, however, it’s again positioned to move the eye into the text.
Now it’s your turn
Below is a block of text with an image placeholder. Beneath that are four photos. The goal is to decide whether each photo would work as-is to move the visitor’s focus into the text or if the image should be reversed, i.e. flipped horizontally. You want the direction of movement within the photo to go to the left. (Be sure to make up your mind before you read the answer next to each picture.)
Jilted Lover Monkey
The light and shadows are pretty evenly divided through the middle of the photo as is the level of detail. However, the blue and white blankets on the right side pull the eye in that direction. The image would have to be reversed to take advantage of this and move the eye into the text.
Hypnotist Monkey
Here the monkey is leaning to the left. His body takes up most of the background on the right side. The smaller size of his face along with his mesmerizing features move the eye to the left. As attention shifts to the soft-focused background, the branches lead the eye out the left side of the photo. So this picture works as-is.
Toupee Monkey
This one’s a bit more difficult. The initial focal point of the image is the orangutan’s face, which turns slightly to the left. His arms and knee point in the same direction. The darker boulder on the left and the shadow under the tree also bring the focus to the left side of the photo. The open grassy area and the smoother, neutral-colored rocks on the right side are less interesting visually so they fade into the background. This image works well with text on the left side.
Proctologist Monkey
The monkey doing the “investigation” has his back to the left side of the photo, which stops movement in that direction. Both monkeys face to the right, the lines of their hands and feet point to the right, and the angle of the photo makes it feel like the viewer is standing to the left and slightly behind them. All of these elements together create a strong movement to the right side of the photo. This picture would have to be reversed to shift the eye into text on the left side.
Before you put a photo in your next layout, consider how a visitor’s eye will flow through the image. Then use that to your advantage to create a design that looks professional and keeps eyes on the page.
(Photo Credits: Hypnotist Monkey by Auro Queiroz. Proctologist Monkey by Rita Juliana.)
About Chet Garrison
Chet is a freelance graphic and web designer with a genuine passion for great design. When he’s not glued to his computer, you can find him in a catatonic state watching re-runs of Roseanne and eating Cheez-It’s.
