Improve engagement and conversion rates.
Use the AIDA framework to tailor content directly to each stage of a visitor’s decision-making process.
Taking AIDA into consideration during the design process sets a guideline for how eye paths on the site should be directed.
For example, good copywriting, high-resolution imagery, explainer videos, and high-quality sound can all be used to build desire. Sometimes just text and an image would be enough to grab attention. But depending on the product or service you sell, an accompanying video or sound may bring additional explanatory value. At the same time, any elements on the page should guide the customer to the call-to-action where they must make a decision.
Use images of people who look like your customers, or images of people with open body language and a warm gaze, in a direction of something you want site visitors to look at.
Ahmed Hussam discusses in a Tutsplus article a lot of different techniques to direct the visitor’s eye. One of which is having your model look in a specific direction, or pose a certain way. Combining gaze, emotion, body language, and design is what brings the best results.
SoundCloud’s front page is a really good example. The girl with the coffee cup image would successfully convert users because her whole body and her gaze are directed toward the call to action. She is smiling, seems happy, and looks like someone who might use SoundCloud regularly.
If the only thing the customer sees before being halted by the call-to-action is a high-quality image of a pleased smiling customer, it will likely give a push towards accepting the solution offered.
Avoid rotating images and guiding the visitor away from your home screen by using models who are looking, or appearing to move away from the site.
Research has repeatedly shown that rotating images kill conversions. Images where the subject looks away from the site, off the screen, are also found to be ineffective. These images may result in high bounce rates on your pages, even when they are of good quality like in the case of the Kirschner Brasil site:
Alternatively, see the image of musical artist Andrea who effectively highlights her own name and title:
With a slight emphasis on her last name, it’s easy for viewers to remember as their eyes are automatically drawn to it by following her gaze. The subject’s mouth is also slightly open, a subtle design choice that may work as a visual reinforcement that Andrea Mann is a jazz vocalist.
Use composition tricks, such as using arrows or spotlighting, to create an alternative route for those who are not ready to purchase or sign up just yet.
For example, The Power of Pinning demonstrates how the flow begins by making eye contact, then uses body language to direct you to the main value proposition on the right, and then encourages you to scroll down using an arrow. The arrow creates a clear path for visitors who may need more information to make an informed decision:
Use hand-drawn arrows and graphs. There is something loved, nostalgic, yet surprising about it, that allows directing an eye at anything. For example, Renegade Diet Book perfectly draws attention to the main product with just a small hand-drawn arrow:
In addition, the direction of the forearms subtly draws attention to the social proof underneath, and encourages visitors unfamiliar with the book to learn more what it’s all about.
Use simple layouts like an F-shaped design pattern with one column, and bulleted info to increase readability and make pages easier to scan and understand.
One study by French researcher Marie-Line Bosse, shows that a high degree of eye movement has a direct correlation to lower attention spans and retention rates for readers. Formatting the site copy to make it more readable will contribute to less eye movement.
Avoiding complicated solutions such as 2 column layouts, where the users will have to zig-zag with their eyes from left to right, whilst scrolling down to understand what the page is about.
For example, Starbucks webpage presents customer benefits in a two column layout for their coffeehouse page. The eye’s movement would start from Starbucks Digital Network, move on to Wi-Fi, then back on Entertainment, and so forth. With a quick formatting fix all this information could be presented in a much simpler way. Bulleted lists are a good solution.
Plan out and implement a strong visual hierarchy where the visual design, guides the visitor’s eye through key pieces of information, finishing with your call to action.
Selecting what to use will depend on the type and purpose of your website. However, a clearly outlined hierarchy is a key factor for all. To be sure you won’t get stuck, start designing your page in the following order:
- Prioritize everything you want to display on your homepage, from what you want a visitor to see first to what you want them to end up on.
- Make sure that the visual design matches the hierarchy.
- Check that there is always a guide or connection to the next piece of information.
- Make sure that the end of the flow is set in stone.
Stories sell and all stories have an ending.
Frame your CTA button, increase the button size, or surround it with whitespace and small arrows that point to it, so that the user naturally focuses there.
A good design will frame the images, text inside boxes, or anything you’re trying to call attention to, so the eyes and brain can process only the most important elements one chunk at a time. Sometimes the space around the object builds the frame, sometimes the frame is made from simple shapes.
For example, the Inze.it page below does both, by blurring the background image to focus on the iPhone, and using a rectangle to frame the call to action.
Use other solutions to highlight your CTA buttons, depending on best practices within your industry, and after reviewing case studies to see which solutions might work well for you:
- Increase the size of the button.
- Separate the button by surrounding it with white space. For example, see how Apple uses whitespace in its designs to draw attention to the smallest details.
- Use a button design that will contrast the rest of the design to increase clicks on the button.
- Design your button to look like a button.
Set a clear CTA that tells users exactly what they are looking for or what will get after clicking on the button, and give supporting information that enforces creates a sense of urgency.
Write supporting information that you can place on the button or below it, depending on design and space around the CTA, to enforce people’s urge to buy.
Use copy to create a sense of urgency. If something will be soon out of stock or is open for the last day, people feel that they need to make the decision fast as otherwise, they might lose the product or benefit. Thus words like “last,” “free,” “now” are good to use on the CTA copy.
Conduct tests to ensure your CTA copy is working.