How To Use Design To Form Directional Cues On Landing Pages

Last week we launched a post on directional cues for increasing landing page conversions, and you guys expressed a lot of interest in learning more, so here we go…

When designing conversion focused landing pages, directional cues are key to leading the viewer to the most important element on your landing page: the call-to-action (CTA); the design of your landing page should direct the viewer’s eye to your form, transaction point or telephone number. There are two ways this can be done, implicitly or explicitly.  

Implicit directional cues are those that are implied. They include things like: direction of view, color, visual weighting, prioritization, repetition of color, shape and size.

Explicit directional cues are obvious. They include lines, curves, graphical arrows and other similar features.

To give you a better idea of how to include directional cues on your landing pages to increase conversions, lets look at some examples:

 

The use of contrasting colors here (the red brochure on the orange form header) directs your eye to the CTA. 

 

This is a great example of color being used as an implicit directional cue. The CTA’s are brightly colored pods, whereas other areas are muted in dull colors. The shape of the rounded pods also provides good visual repetition. Additionally, the CTAs are given more visual weight and higher prioritization than the content pods. 

 

This Art Institute landing page provides a great example of an explicit directional cue with it’s “START HERE” arrow.

 

Here is an example of how body language can be used as a directional cue. You see the Geico gecco is standing slightly shifted towards the form.

You can see there are a variety of ways you can get creative with directional cues. The best way to determine what will work best for you is to test it.

For instance, here is an example of what appears to be an experiment:

 

The car is being used as a pointer rather than the man’s direction of view. It’s worth a try to see if it works! 

Whatever ways you come up with to play around with design to create directional cues, just remember to keep the focus on your call-to-action. That’s what it’s all about!

For more info on directional cues, check out this post with 5 directional cues for increasing landing page conversions.