Not seeing the action you want on your website?
If you’re not leading your website visitors to take specific actions, they’ll just randomly browse through your pages, look at odd text and icons, then leave without buying anything.
The good news is that, if you carefully direct your user’s experience through your site, you can show them exactly what to look at, what to click, and even how to buy.
Here are some visual cues you can use to achieve that:
#1 – Arrows and Lines.
Don’t want your site visitors to get lost? Then point them in the right direction using arrows and lines. These helps your visitors focus on certain areas of your website. These lines “catch” their wandering eyes and redirect them to a form, an important point, or a call to action.
Freshbooks, an online invoicing app, does this well in their feature tour page (see above). After you’ve looked through all their available features, the illustrated hand points directly to the sign up form rather than leaving your eyes to idly roam.
There’s a similar application of this idea in the feature tour of Basecamp, a project management tool. The arrows guide the eye to specific details of a feature, so that you can easily spot the most important items rather than feel overwhelmed with the amount of detail on the page.
The arrows and lines you use on your site don’t have to be blatant. In this example from Gift Rocket, site visitors are immediately going to focus on the rocket illustration and its surrounding icons. But the top of the rocket is pointed at the headline, guiding your eyes to start reading.
Arrows can be as subtle.
#2 – Text Emphasis and Features.
A previous article by Gregory Ciotti mentioned the importance of headlines and subheadings to improve readability. But this also serves another function – it highlights the most important information to your reader. You can use the following font settings to catch a reader’s attention and manipulate how they read your site:
- Text size. Generally, the larger the size of your headlines compared to the rest of your body text, the more attention they get.
- Text weight. Bold typefaces also draw the eye’s attention. Though, like text size, there has to be surrounding “normal” text in the rest of the page. If everything is bold, nothing is bold.
- Color. To emphasize a text using color, make sure it contrasts with the background and surrounding graphic elements. Use a color picking application like Adobe’s Kuler to find complementary colors.
Just as you can use the above 3 components to make the text stand out, you can also use them to make the text blend in. This can be useful for additional navigation, data, and other text that is important, but secondary. After all, your customers just need the most basic information first (who are you and what you provide) before they decide to browse further.
Take this example from Netflix. While their headline, logo, and sign up form are all prominent, links to “Investor Relations”, “Jobs”, and “Media Center” are light grey on a black background. Because of the lesser contrast between the text and background, these links don’t initially draw the eye.
Sure, they are accessible to those looking for that kind of information – but the purpose of the Netflix homepage is to persuade new users to sign up. Every element of the website which is unrelated to that is not emphasized.
But tinkering with the typeface isn’t enough. The surrounding elements near the text also determine whether a visitor’s eyes will be drawn in to read it. In this study from Poynter, the presence of a small visual alongside the text drew above average attention to the teaser. This seems to be true of both online and offline media.
A good example of this is the below screenshot from A Small Orange, a website hosting company. Each icon uses oranges as a metaphor to illustrate what each of their service types mean. The images are bright and attractive, leading the viewer to read the text underneath them.
#3 – Instructional Text.
While the text style itself helps guide the reader, the content of the text itself is important. Notice how Facebook uses the words “Like”, “Share”, and “Comment” in their interface. These are imperative words that instruct you to do something. Take this example from copywriter Michel Fortin. In this article, he explains how he used CrazyEgg to find out the hottest spot on his website – the area that most visitors click on.
This turned out to be the “read more” link under his article excerpts. Here’s how he used the analytics information he got from our heatmap tool:
The discovery? Notice that the hottest spot is the “read more” link after the excerpt of the post.
People click more on this link to continue reading than they do any other link. (And that’s pretty much the same for every new post I publish.)
But it doesn’t stop there.
I’ve tested different wordings, such as “read more,” “read the rest,” “click here to read,” “continue reading,” and just plain “more.” (And a few others.)
Source: “These Test Results are Dense” by Michel Fortin
His tests indicated that “Continue Reading”, located on the left side of the page, was the winner. But this wasn’t the only instructional text on his page. At the top of his header, you can clearly see a button marked “Work With Me”.
Designer Dustin Curtis also makes similar assertion about instructional text. In “You should follow me on Twitter”, he discussed a simple study he conducted where he changed his Twitter follow text from “I’m on Twitter” to “You should follow me on Twitter here.” This change resulted in a 173% increase in his clickthrough rate.
Don’t be afraid to explicitly tell your website visitors what to do, and also remember to test which phrases work best. It’s not about being bossy, you’re just telling your visitors what the next step is.
#4 – People’s photographs.
The Poynter study mentioned earlier also shows how photos, especially colored photos, drew more reader attention. They also found that large photos drew more attention than black and white ones. This comes as no surprise, especially for photographs of human faces, since several studies show how we are drawn to human faces (especially the gaze), not to mention how fast we are drawn to them.
This means that if you want to quickly grab attention to a certain part of your website, use large photos of people. The photo must also be as attractive as possible, because this may encourage interaction more, as seen in this study on Facebook profile photos. One example of this is the homepage of Highrise, a contact management tool.
Before you enlarge all the photos of people on your website, know that smaller photos have their role. For example, if you place client photos next to testimonials, this may encourage a reader’s attention to read the testimonial – but you don’t want the photo to be too large that it distracts from the main call-to-action. The best way to do testimonial photos is to keep the size small, and you can also render them in black and white. This leaves the human features intact enough to attract attention, but not too much of it – such as this testimonial page from Free Agent.
Have you ever seen these visual cues in other websites? Do you think they are effective in directing your attention? What visual cues do you use to draw the visitors eye?