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. A larger arrow and font size would be more effective here.

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

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.

Milexa.com homepage lacks directional cues to prevent the perception of a false bottom
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.

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

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 above the fold that it may give the impression that the page is broken and that there is no further content below the fold.

 

Image of Atrafloor.com page with excessive white space
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, 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?

Call Me Now!