How directional cues maximize UX and boost conversions

Default avatar.
September 21, 2015
How directional cues maximize UX and boost conversions.
If there’s a common question that web designers ask themselves, it’s usually: How can I improve user experience? User experience is always front and center—or at least it should be—in design; without users to read or view that content, click that call to action, or sign up on that form, no website would have a purpose. Designers have a number of different tricks up their sleeve to make UX that much better, and one of those is the use of directional cues. These directional cues aren’t subtle; their job is to make it so that every last user can’t miss that big, ol’ call to action button somewhere on the page. In other words, directional cues are like huge billboards on a page, literally pointing the user in a very clear direction. The strategy behind their inclusion is to increase all-important conversions. Anything you can do as a designer, to increase conversions, you should do. Directional cues help do this efficiently, here’s how:

What are directional cues?

Directional cues come in all shapes and sizes, and you may even be surprised to learn what can pass as a directional cue. Furthermore, there are both explicit (very obvious) and implicit (more low-key) directional cues. Page elements that can be considered explicit directional cues include:
  • Arrows
  • Fingers pointing
  • Eye direction (when people’s faces are looking at a call to action)
  • Lines
  • Curves
Kin HR’s site uses the gazes of models in the background to focus attention on their calls to action in the foreground. (The effect is particularly pronounced on a tablet viewport.) kinhr Here’s an ideal example of an explicit directional cue from Salesforce’s landing page. Note the use of the obvious arrow directing the user’s eye to the short web form. salesforce Implicit directional cues are far easier to miss, and those elements that constitute an implicit directional cue are debatable, but they could include:
  • Color
  • Repetition of size, color and shape
  • Hierarchy
For an example of an implicit directional cue, check out The Daily Egg’s about us page. The email newsletter sign-up form has a green background, but white fields. This noticeable contrast draws the eye, thus providing an implicit cue to fill it out. crazyegg

How do you clarify page goals?

Every page has a purpose, which is usually to get a visitor to buy, sign up for, or subscribe to something. When users don’t understand what the page’s purpose is—such as when the navigation is poorly implemented or the page is much too cluttered—the user experience will drastically decline. This is where a crystal clear directional cue can be the page’s lifesaver. After all, when the users receive cues on what they’re supposed to do on the page, then their experience drastically improves. Their confusion and frustration is replaced by a confidence and efficiency that are brought about by great organization, design and planning. Fittingly, a superb example of a directional cue comes to us on a page that talks about the definition of a directional cue. On Unbounce’s definition page, note the huge arrow pointing to the right and thereby prompting visitors to actually read the definition of a directional cue! Thanks to this simple page element, users can clearly understand that the goal of the page is to read and understand this definition. unbounce

Empowering users with directional cues

Visual Website Optimizer looked at a page displaying an ad for Sunsilk shampoo. The results were astounding: when the woman’s eyes in the ad actually looked to her right—at the bottle of shampoo, instead of into space—the number of users who finally looked at the bottle skyrocketed to 84%, from just a meager 6% when the original ad had the woman looking straight ahead. Eazers.com is a German site for coupons that effectively uses the same technique; the gaze of the model draws your eyes straight to the central calls to action. eazers There’s no doubt that directional cues are very beneficial on a page, and it comes as no surprise, that the improved user experience provided by directional cues also naturally boosts the conversion rate on sites, as the two are interlinked. When the user experience of your site increases, people convert at higher rates because they understand what they’re supposed to do. Users sometimes know exactly what they’re looking for when they visit your site. These are likely return visitors who want to use what they used the last time they were on your site. For these types of users, it’s paramount that your user experience is top-notch because the last thing you want to do is repel sure-bet conversions! One of the easiest ways to ensure a great user experience for a returning visitor who wants to use the same feature again is by providing a directional cue that’s easy to spot, interpret and then click on.

Don’t take directional cues for granted

The next time you’re designing and think of dismissing directional cues as just a bunch of unnecessary arrows, lines or curves, think again! Research has shown that they’re definitively tied into the user experience and, consequently, a page’s conversion rate. To help your site visitors experience a much better user experience—and your clients obtain a much better conversion rate—you’ve got to incorporate these directional cues into your design. More than issuing an instruction, directional cues are heavy-hints at what the user is expected to do. Some users won’t, some will, but the important thing is that they clearly understand what the ‘normal’ use of the page is. Directional cues are one of the best tools designers have for enhancing UX, and helping users to boost conversions for your client.

Marc Schenker

Marc’s a copywriter who covers design news for Web Designer Depot. Find out more about him at thegloriouscompanyltd.com.

Read Next

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…