Eye-tracking and mobile: Web design in 2015
What is eye-tracking?
Eye-tracking studies are an important way to learn how website visitors will interact with a website. These studies use technology which follows the eye-movements of a website user and creates a heatmap showing the results of where the user spent time viewing the page.
Does mobile change what we’ve learned from eye-tracking studies?
Not really. Most of the same results still hold true, although we see an even greater emphasis on headlines and white space for mobile users.
What does eye-tracking tell us about how visitors are interacting with websites?
Quite a bit. I've taken the studies and summarized the findings for you below, including tips on how to use these results in your website design.
5 Website Design Tips using Eye-tracking
1. Users spend more time on the left.
We’ve talked before about the importance of putting the company logo at the top left. Users spend the majority of time viewing information
on the left side of the page. We are trained to read from top left to bottom right, and this behavior applies to our usage of web pages. Put your most important information on the left-hand side of your website.
Also, keep in mind the
F pattern that many follow when viewing information on your page.
Because of the small screen size of some mobile devices, users tend to skim down the headlines (see #3). What should we learn from these studies, then? When designing a responsive website, be sure the right side information ends up towards the bottom of the page when altering the design for mobile viewers. This ensures that they are still viewing the most important information first.
2. Banner blindness.
This phenomena has existed for years. The more something looks too polished, like a banner or ad, the less likely we are to look at it. Because users have been bombarded by ads and banners on the web, we’ve trained our eyes to overlook them and scan for the important information.
Banners or pop ups don’t always display properly and can be very intrusive on mobile devices, so this is another great reason to avoid
both when designing for mobile users.
3. Headlines are crucial to mobile viewers
Eye tracking studies have shown that people spend more time looking at headlines than text. This is especially true for recent
mobile eye tracking studies. Mobile readers skim headlines and rarely read text. They also use headlines to orient themselves on the page, and identify the information they are looking for.
Large, bold headlines are most likely to draw the eyes of the viewer when they come to your web page. Be sure your headlines are summarizing the content for each section to get the most out of them. Remember, your visitors are using these headlines to find the information they want quickly, so make the headlines as informative as possible.
4. Users like white space.
White space, or negative space, is the blank parts of your website. It might seem wasted, but this space is important because it helps the viewer quickly absorb the information they want in digestible chunks. The eye will naturally jump to organized clusters of information. So use plenty of white space throughout your designs.
5. Use images of people.
Our eyes are naturally attracted to
images of people. Users most prefer to look at pictures of attractive women and babies. Use images to draw the eye, and direct the users’ gaze. For example, if the image of a person on your page looks towards your call to action, the website visitor is more likely to look towards your call to action (like your sign up form or button).
Want to use these tips in your next website design? Here is a teeny tiny infographic to keep handy and share with others:
