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.
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.
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.
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.
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.
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.
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.
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?