Image of Sky Broadband homepage which uses a directional cue

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, whilst 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 though and could easily be missed.

Image of Skytv homepage uses directional cue
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 and uncluttered design.

Image of explicit cue on Typeform.com
Image source: Typeform.com

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.

Explicit cues on Lingscars.com
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 as people are drawn to looking at eyes and faces. This design would potentially be more effective it the character was shown looking towards the offer copy.

Image of hero banner on Very.co.uk using directional cues
Image source: Very.co.uk

The use of white space on Steve Krug’s website presents an uncluttered look which 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 of use of white space on sensible.com
Image source: Sensible.com

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, as we have seen above, care needs to be taken to ensure all directional cues work together and don’t conflict as 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?

Digital Marketing and Insight