The purpose of visual cues is to help guide visitors around your web page and point them in a particular direction. Maybe you want visitors to notice your value proposition or call-to-action, or perhaps you want them to see a lead-generation form.
According to UX designer Andree Huk, “Creating visual cues is the best method to present a sites’ structure and content. These cues are like landmarks that help your visitors find their way around your site and content fast. Without cues, you will lose visitors immediately.”
Visual cues operate on an unconscious level—well, for your visitors, that is. You, on the other hand, can and should be aware of how visual cues influence your visitors’ focus.
From bright banners to pointing fingers, visual cues come in many different forms. But the four main categories of visual cues are as follows:
When something is different from or contrasts with its surroundings, we tend to notice it more—for example, a person who is eight feet tall standing in a crowd of average-height people. And the same concept can be applied to white-space. When you leave white space around an item on your website, such as your call-to-action, that item begins to contrast with its surroundings, making it more eye-catching.
As humans, we have an unconscious attraction to people’s faces, especially faces that are emoting and perceived as attractive. Therefore, if your web page features a photo of a person’s face, that’s the first thing your visitors will likely look at. And the second thing will be whatever the eyes of the person in the photo are looking at. Check out the example below:
Your eyes are first drawn to the photo of the man. Then, they shift to follow his line of sight over to the Contact Us form.
This is the most common type of visual cue and it’s especially helpful at drawing visitors’ attention to call-to-action buttons. “It’s likely that you’ll find more success with arrows that direct people’s behavior, rather than direct their focus,” advises Wishpond. “For instance, use them with ‘do this thing’ rather than ‘look at this thing.'”
Here are four tips for using arrow/linear cues:
- Contrast your arrow color with the rest of your page
- A/B test upward- and downward-pointing arrows
- Use only one arrow per landing page
- Add dimension by making your arrow appear as if it’s jumping off the page, as in the image below:
Encapsulation works to segment your pages by framing focal points and creating a hierarchy using visual elements, including color, contrast, and cues. Encapsulation is beneficial because it helps visitors’ eyes move more purposefully from one focal point to another as opposed to bouncing haphazardly around your landing page.
Which Visual Cues Are The Most Effective?
In order to assess the efficacy of a variety of visual cues, the ConversionXL Institute conducted a study using eye-tracking and a post-task questionnaire. The visual cues included in the study were as follows:
- Human looking at a form
- Human looking away from a form
- Triangular graphic
- Prominent form
- And a control (no cue).
Ben Labay: “The visual cues did differentially impact how much a user pays attention to the form.
- The hand-drawn arrow resulted in the longest amount of time on the form.
- The human looking away from the form resulted in the shortest…
- Test hand-drawn directional objects (e.g. an arrow) for guiding the attention of users.
- If you use an image of a human as a visual cue, have this person looking in the direction of the CTA or key feature. While this variant didn’t significantly differ from the control, the human looking away from the form resulted in the lowest fixation duration on the form.”
Which visual cues do you use most often on your website? How do you decide where to place them?