Design Visual Cues to Be More Impactful | Adobe XD Ideas

You’ve seen them everywhere on the web and in your apps: visual cues. They may be pretty obvious (like arrows pointing at specific page elements) or quite subtle (like someone’s soft gaze directed at a call-to-action [CTA] button).

Wherever you’ve seen them, one thing’s clear — they make the user experience (UX) on your user interface better and easier, while helping websites achieve specific page goals like signups, social shares, and purchases. In short, they’re here to help with conversions, too.

Unfortunately, it’s not as simple as just slapping a “Look here” sign next to a CTA that you really want your site visitors to click. There’s a lot of behavioral psychology going on underneath the simplest visual cues, which we’re going to look at in greater detail.

Why are human beings seemingly hardwired to respond to visual cues? Is it part of our evolutionary psychology? Do we need obvious cues because we’re otherwise just too inobservant? The truth is likely a mix of both.

According to an appropriately named scientific study titled “Eye gaze cannot be ignored (but neither can arrows),” published in the Quarterly Journal of Experimental Psychology:

“Gaze and arrows were presented before the target as uninformative distractors irrelevant for the task. The results showed similar patterns for gaze and arrows — namely, an interference effect when the distractors were incongruent with the upcoming target location. This suggests that the orienting of attention mediated by gaze and arrows can be considered as strongly automatic.”

In other words, study participants looked where gaze and arrows were pointing, regardless of how relevant they were. That’s powerful evidence that human beings are simply made that way, and, by extension, your site visitors are like that, too.

Visual cues abound on the web, with some working better than others. For this piece, we’ll look at just two main examples of visual cues, and then tie that into what you can do to design them more effectively for greater conversions.

Perhaps the most obvious visual cue, arrows are very explicit about what you should do. They’re also pervasive in everyday life off the web — think of road signs, for example. That’s what makes them ideal in web design as well.

Brewing company Anheuser-Busch uses many visual cues on its Student Programs page. For site visitors who want to know more about each program inside the card-based boxes, there’s a helpful “Learn More” CTA with an arrow inside of it, pointing to the right. This tells users that there’s more content on the next page — all they have to do to find it is to click on the CTA.

When we talk about social cues, the gaze of one’s eyes is a widely ingrained cue. Think about it. If you’re talking to people in front of you, and then their eyes suddenly gaze to a point behind you, you’re immediately curious about what they’re looking at that you can’t see. Distracted, you’ll likely turn your head to see what all the fuss is about. It’s on this principle that the line of sight works in web design, too.

Tech company Cisco’s network architecture page features an ideal example of this visual cue, right in its hero image. The hero image contains two CTAs to either watch or download short videos. Immediately to the right of these CTAs is a person’s face, in profile, zoomed-in to their eye looking at the CTAs. From a user behavior point of view, if you somehow miss the big CTAs, your gaze will hit the person’s eye, and you’ll automatically follow that line of sight right to the CTAs after all.

The latest research about visual cues sheds a lot of light on which visual cues to use and how to use them for more conversions. According to ConversionXL’s study on which cues drive the most attention, there are two types of cues that performed the best:

For the study purposes, “best” is defined as the amount of time a visitor looked at the form, thanks to the cue. The study looked at several cues, including:

So going back to our examples above, the Cisco example with the person’s eye looking at the CTA would be a textbook case of how to design a visual cue. The Anheuser-Busch example could still be improved upon for conversions’ sake because it’s not a hand-drawn arrow.

Amazon does visual cues well. Amazon uses hand-drawn arrows on the product pages of its many books to entice readers to preview the book before purchasing it. The hand-drawn arrow is accompanied by a helpful “Look inside” mention.

It should also be pointed out that the cue that drew the least attention, based on this study, was the one with the human looking away from the form. That’s the cue you’d want to avoid at all costs. Presidential candidate Hillary Clinton used just such a cue for her Hillary Victory Fund, where her gaze was looking away from the form meant to solicit donations for her campaign.

Visual cues are an integral part of UX design. Your users, as human beings, are programmed to look at traditional cues like arrows and eye gazes to help them figure out the next step. Using research-backed hard data, you can further maximize the effectiveness of these cues, whether on a website or app. Whether it’s for a form signup, a social media share, or getting an icon clicked or tapped, cues are highly useful.

In short, the latest research suggests that hand-drawn arrows work best, while people looking away from page elements will give you the worst results (it’s almost like you’re telling your users not to complete the task!).Remember these rules as you decide on the visual layout of your next project, and you’ll see greater success.

Words by Marc Schenker

Marc has covered UX and UI for Web Designer Depot, Shopify and SitePoint. He brings Adobe readers first looks into the hottest UI kits from the most visionary designers. He also runs The Glorious Company.