Trends

Using Directional Cues in Web Design to Improve UX

Manhattan looking up by dibrova

Use directional cues in web design to improve your users’ UX

If we had to define the common struggle of all web designers, it would be: is there a way to improve user experience?

User experience has become the central part of every design project since designers have to ensure users will follow their cues: read the content; perform the action; click the call to action. Otherwise, websites would be absolutely useless.

Provide the best experience you can

You have to plan the user experience in advance since it is the essential factor for the success of your design.

The hunt for functional solutions doesn’t finish once the site is ready. It goes on improving, and trying to predict answers to all questions that may arise in future.

Well-executed user experience is what distinguishes great websites from the rest. You’ve probably witnessed it yourself: some websites are quite easy and straightforward to use; while others make it too complicated to find what you’re looking for.

Honestly, designing user experience is not fast, but it is worth to invest time in trying to make a user-friendly environment which will inspire conversions.

Sounds confusing, but there are many tricks and best practices to consider making your design work flawlessly.

The way the two guys are positioned makes you look in the center of the page.

The most recommended trick is to improve UX with directional cues.

These cues are an important part of the overall user experience, which might seem difficult to notice at first site, but they’re the basics of your website’s functionality.

For example, you can use a background photo with people looking in a certain direction. This is where you’ll place your core message and CTA.

What are directional cues in web design?

A directional cue is not a particular item – it’s a role which can be performed by almost every element on your site, thanks to shape and size variations.

Therefore, you have directional cues which are explicit and obvious; and such which are less visible.

Arrow on the left of the secondary CTA “Watch the video”

Here are some of the web elements which can act as explicit directional cues:

  • Pointers (arrows, finger pointers)
  • Calls to action buttons (direction providers)
  • Curves
  • Lines

How can directional cues improve user experience and maximize conversions?

Believe it or not, conversion opportunities ‘hide’ in the first impression you’ve tried to create for your users.

You need to use this ‘first encounter’ to direct users towards booking, reading, or purchasing.

A flawless visual hierarchy: Large tagline, followed by good copy and the CTA.

Boosting conversions is the dream of every website, and it is such a powerful concept that it redirected design’s efforts from great visual appearances to usability and functionality.

Why would users follow your directional cues?

Directional cues are beneficial for the site’s owner because they boost conversions and they improve the user experience.

IFTTT has never been shy about their buttons.

However, how could users be motivated to follow the directional cues? You should include copy near the directional cues that will tell them why they should click on a button and what they should expect after that.

People don’t like to waste time or to perform actions whose result they cannot predict. This is why you as a designer should never overlook directional cues. As we already pointed out, directional cues can enhance the experience; and they can lead you to better conversion rates.

Lattice placed their CTA right near the people illustration

Your users already have a purpose when visiting your site. You should design the page in a way that will help them accomplish that goal. Create a workflow that is easy for them to understand and use.

A user who accomplished their aim and is satisfied by their experience is likely to return and to recommend your website.

Users care about their experience because they’ve awarded you with the most expensive thing they have: their trust and time. Employing directional cues is the best tactic for improving their experience, and to avoid misuse and misinterpretations.

Make things easy for the visitors

Let them find what they came for, and then give them a reason to come back.

Keep the cues clear – introduce familiar elements, such as arrows, finger points, or other pathways which leave no space for confusion. Usually, these cues are placed in your website’s header, where the CTA is as well. However, this doesn’t mean that you should create limits for your layout.

Since a lot of designers and marketers place the CTA below the fold, directional cues work well there as well.

Opendoor makes it easy for its visitors by placing an arrow to direct its users

Choose such cues that can be clearly associated with the aim you’re trying to achieve. For instance, if you want to obtain more direct bookings, employ a functional and accessible search button.

The art of directional cues can be really adopted by observing direct marketers and their sale campaigns. They are certainly the ones who rely most on visual guidelines, in order to motivate people to take action and to buy their products.

You need to develop an agenda for communicating with users, and you need to provide clear guidelines for the actions you want them to perform.

Standardized forms, such as ‘go’, or ‘subscribe for more information’ are efficient, but visual cues with minimal text are significantly better.

How to use colors as directional cues

Everhour uses an accent color only on its CTA

It may sound difficult to believe, but your color palette is one of the most powerful tools which could improve user experience and the way how people interact with your product.

You need to understand their psychological effect and to make a color scheme that can trigger action or motivate conversions. Consequently, the revenue of your business and your profit will increase. Isn’t that exactly what you wanted?

Provide a ‘proof of quality’ to your customers

Stripe’s layout contains the tagline and the CTA inside the colorful header illustration

The same as purchasing a service from a physical store, customers would appreciate seeing your performance before opting for your offer. You could use feedbacks, videos, or testimonials to convince users they’re making the right choice. Your legitimacy and the trust people invest in you is your biggest asset for boosting conversion rates.

Stripe, shown in the image above, mentions that they handle billions of dollars every year for forward-thinking businesses around the world. If that isn’t trustworthy, I don’t know what is.

Remember there will be many users on your website who have absolutely no clue what your activity is about.

You need to provide them with all necessary information and clear directions toward quality previews so that they’ll have no second thought on whether to accept your offer.

Evernote makes a summary of what you could be getting from them

People say eyes are the window to the human soul, and that’s exactly what directional cues are to the website. Users need your messages, images, or videos in order to estimate whether you’re worthy of their attention.

Even the tiniest cues, such as pointers or gestures can be powerful directional cues. Once users are there, you have to use every opportunity to make them stay on the website.

Final thoughts

All of the arrows, curves or images you use to attract attention are not just unnecessary clutter. They’re more powerful than you think, and it is likely that your conversion success will depend on them. Nowadays, a designer’s knowledge doesn’t consist of creating beauty; but something that is really useful and it eases user experience.

Be brave and take directions personally! They are not just instructions that tell users what to do – orders can be drawbacks for your users, but hints and motivating items look natural, and they are less pushy. Therefore, make use of all tools that you have and enhance the user experience.

By providing excellent user experience, you’re motivating users to take action; and you’re improving your conversion rates. Directional cues are essential for every design project.

Related reading:

About the Author Bogdan Sandu

Bogdan is a designer and editor at DesignYourWay. He's reading design books the same way a hamster eats carrots, and talks all the time about trends, best practices and design principles.