Sep 6, 2016
What are directional cues? Directional cues are visual guides that point us to what we’re looking for or where we’re supposed to go. You might not notice it, but we are surrounded by directional cues in our everyday lives. There are signs that tell us where the restroom is. There are signs that tell us which way is the exit is. There are signs that point us to the nearest subway station entrance. These are directional cues are everywhere.
Using directional cues is a tried, tested and true strategy in the real world that can also be applied to web page design. By adding directional cues to your web page, you can direct your visitors to focus on more your call to action. Over time, this will lead to an increase in clicks for your call to action and a boost in your conversion rate.
1. Use an image that offers a subtle directional cue
Choosing the right image for your web page’s hero banner can have a significant impact on how your visitors view your call to action. It’s best to choose a hero banner image with subtle directional cues that guide your visitors towards your main message or call to action. These images generally involve a person pointing or looking in a certain direction.
Let’s take a look at this sample hero banner:
This is a pretty standard hero banner for a construction company. We’ve got the “Get a Quote” call to action button on the left, and we have a standard stock image as the background. The problem with this design is that the guy in the image is looking right at you, causing you to maintain eye contact with him. This means that visitors will spend more time looking at his face than the important information on the left, which will cause your conversion rate to take a hit.
How can we make it better? Well, we can try using a directional image:
In this example, we’ve simply changed background image to one that offers a directional cue. By choosing this image, we will be drawing the focus away from the guy’s face and shifting it to the content on the left. This image works because when you look at the guy’s face, you will be curious to find out what he’s look at, which is the sales pitch and the call to action. And when this happens, your visitors will spend more time on your sales pitch and are more likely to click your call to action, leading to an increase in conversions.
2. Use arrows to supplement your call to action
People have been using arrows as a directional cue for centuries and it’s literally the oldest trick in the book. So, why not use them on your web page?
By adding an arrow to our sample hero banner, we’ve made our call to action button stand out more. It might not look the best aesthetically, but it gets the job done because it sticks out like a sore thumb and draws people’s attention towards your call to action.
If you want to make it even more effective, you can animate the arrow so that it slides in towards the call to action button. This motion towards the call to action button will draw even more attention to it.
The easiest way to get this done is to use the “Fancy Shape” element from within our website builder. Simply add the Fancy Shape element, and then go to “Style” to change its animation and color settings. There are many animation styles to choose from, but the most effective and least distracting one would be “Slide In”, which is located under the “Transitions” category. This is a natural slide in effect that you can use to direct your arrow towards what you want your visitors to see. When done right, this will give you a boost in your call to action’s click-through rate, which means more conversions for you.
Donald paulos says (Sep 9, 2016):
I well be glad
Website.com says (Sep 13, 2016):
Yes! Thanks for reading, Donald!