Directional Cues
Directional Cues
Definition
Directional cues are elements of the design of a page that influence where visitors focus their attention. Explicit cues use elements such as arrows, lines or a pointed finger to direct a visitor’s attention. Suggestive cues use imagery (e.g. a face looking towards the call to action) or white space to subtly draw the user’s attention to the desired area of the page.
Explicit Cues:
The Sky TV page below uses a hand drawn arrow to encourage visitors to scroll to see further content below the fold. It is fairly subtle. A larger arrow and font size would be more effective here.
Source: Sky.com
This example from Typeform.com is much more prominent and effective at encouraging visitors to scroll. The use of white space also improves contrast and produces a visibly clean design.
Image source: Typeform.com
Horizontal lines should be used with care as they are interpreted by the brain as a stop signal. They disrupt eye flow and can discourage users from browsing further down a page. If a horizontal line goes across the entire page just above the fold users may think it is the bottom of the page rather than separating different sections. False bottoms can also be caused by large hero images that take up the entire screen.
Image Source: Milexa.com
The image of the wooden floor on the Milexa.com homepage creates a strong horizontal line at the bottom of the screen which could easily be interpreted as the page bottom. A simple arrow or making the hero image smaller to show the beginning of content below the fold would resolve this problem.
LingCars.com below uses numerous explicit visual cues to direct the user’s gaze as it has an almost overwhelming amount of content. This approach to website design is more common in Japan because of the lack of capital letters and italics in Japanese. For this reason designers use decorative or graphic text and directional cues to create emphasis and a stronger visual hierarchy. See Cross Cultural Website Optimization for more details.
Image source: Lingscars.com
Suggestive Cues:
The hero image below on Very.co.uk uses a torch to subtly direct your gaze towards the offer copy. Unfortunately the character is looking towards the user and this has the opposite effect. People are drawn to looking at eyes and faces. This design would be more effective if the character was looking towards the offer.
Image source: Very.co.uk
The use of white space on Steve Krug’s website presents an uncluttered look. It helps to retain the user’s attention as there are few distractions to interrupt browsing. White space helps to separate content on different topics without the need for boxes and lines which can discourage browsing.
Image source: Sensible.com
However, excessive white space (or negative space) can give the impression that there is no additional content to see below. In this example below on Atrafloor.com there is so little content it gives the impression that the page is broken and that there is no further content below the fold.
Image Source: Atrafloor.com/our-story/
Conclusion:
Directional cues are an important element of good user centred design. They can provide powerful visual cues to direct gaze towards important elements on a page. However, care needs to be taken to ensure all directional cues work together and don’t conflict. This can be counterproductive and distract from the primary conversion objective.
Resources:
Conversion marketing – Glossary of Conversion Marketing.
Over 300 tools reviewed – Digital Marketing Toolbox.
A/B testing software – Which A/B testing tool should you choose?
