Eye Movement Patterns in Web Design

Eye Movement Patterns in Web Design

One of the most overlooked design principles in web design today is eye movement patterns. All too often, web designers are so overly focused on making their website look “pretty” by adding distracting graphics and animations, using overly complex background images, drop shadows, and glowing form fields, that they forget why they are making the website in the first place.

How could this happen? It seems like a lot of designers have the misconception that “web design” translates to “make a website look pretty“. In fact, this couldn’t be further from the truth.

Eye Movement Patterns in Web Design

A good web design effectively satisfies the purpose of the website first, and then looks pretty second. Building a poorly designed website is like building a house out of marble, granite, and imported Spanish tiles, and then forgetting to add in windows and doors. A good architect pays keen attention to the purpose of the house – creating living quarters that are accessible– and then filling in the details with nice materials.

Eye movement patterns are the foundation of web page usability. The purpose of this post is to define eye movement theory in web design, explore hot spots, dive into F-patterns, and help get you on track towards effective web design. Let’s get started!

Eye Movement Patterns

What are Eye Movement Patterns? Eye Movement Patterns refer to the complete paths that the human eye takes when looking at a web page – from the moment visitors enter a page to the moment they leave it. Why is this important? To answer this question, we first need to understand the purpose of a web page.

What does your web page do? How will users get from point A to point B? Let’s say that you’re creating a landing page. What is the purpose of a landing page? You guessed it – to get visitors to use your services or purchase your products. How will you get people to do that? Typically, the purpose of a landing page is to help your visitors identify with a particular problem which causes them to seek resolution. Next, you’ll want to present a solution to the problem, who solves it (i.e. your company name, logo, or brand) and how to get started. How can we do this? Simply put, we can control how users see our pages by understanding hot spots.

Hot Spots

What are hot spots? Hot spots are the areas on a web page that visitors’ eyes focus on the most. Let’s take a look at a case study that analyzed eye movement patterns on a landing page to discover where visitor’s eyes focused on the most. Below, you can see Credo Mobil’s original landing page before an eye movement tracking study was performed.

Credo Before

At first glance, I would say that it’s a pretty nice looking design. Right? But, is it functional? Let’s take a look at the eye tracking results below.

Credo Before Heatmap

The areas in red and yellow are referred to as “hot spots” and indicate the locations on the screen where the users focused on the most. As you can see, the results are pretty bleak. Despite the nice appearance of the landing page, users’ attention is drawn to three blank areas on the screen – yikes! You’ll also notice that visitors end up looking all over the place, as if they are trying to figure out what’s important, and what they should do next. This page definitely needed help.

So what’s the solution? Here was Credo Mobil’s intent for the landing page:

  1. Show a cool phone that visitors might be interested in
  2. Get a glimpse of the company name
  3. Guide visitors to a call-to-action button to purchase the phone

After seeing the eye tracking results, Credo Mobile decided to redesign their landing page – go figure. You can see the resulting page below.

Credo After

And here are the new eye movement results:

Credo After Heatmap

F-Patterns

But what if you’re creating a non-landing page? This is where F-patterns come in. F-patterns appear in most non-landing web pages. Take a look at the following eye tracking results performed on three different web pages.

Heatmap

As you can see, they all share one thing in common – visitors will naturally focus on a point in the upper left corner of the page, skim to the right, look down, skim to the right again, etc., until an “F” shape region has been mapped. The F-pattern occurs because users typically scan horizontally less and less as their eyes move downwards. These eye mappings are referred to as F-patterns.

Take a look at the left heat map. What’s interesting to note here is the fact that there is virtually no visitor awareness of the right column on the page. If important information or links reside in this region, this webpage is definitely in trouble. As another example, take a look at the center heatmap. These results show a critical flaw in the page’s design – content in the upper left portion of the left column is virtually unseen.

Why? When users first land on the page, their eyes immediately jump to the dominating insect image, and then continue on downwards to the actual content. Only then, do their eyes glance to the left and pick out the titles of the left column, completely missing its major sections at the top. As you can see from the right-most heatmap – Google’s results page – you can see that it is quite effective. Users focus on the first and most relevant search queries, while also glancing at the paid advertisements on the right.

Eye Movement Web Design Guidelines

So what can we take away from these studies? First of all, when designing a web page, we need to determine if the page is classified as a landing page or a non-landing page. Remember, landing pages typically present a problem, offer a solution, and provide a “call to action” button in order to solve the problem. These types of pages tend to be somewhat more free form than other pages. In other words, the visitor’s eye movements patterns are irregular, and traverse the page depending on how you’ve laid it out. On the other hand, visitors typically follow the F-pattern when viewing non-landing pages, like a blog post or an about section.

Creating a successful non-landing page design is fairly straight forward – just remember the F-pattern. Make sure that your logo appears in the upper left portion of the page. Ensure that your main navigation links reside near the top of the screen, preferably stretched out horizontally along the top of the “F”. If you have a large amount of important menu links, keep them on the left side of the page. If you include large images or other dominating visuals inside your page, keep in mind that users will typically begin their eye movements there, and then begin searching for the next important section. As a result, it’s usually a good idea to keep these types of images or visuals near the top of the page, so that the visitor begins at the top and naturally works their way down through the content.

On the other hand, creating a successful landing pages is one of the most difficult challenges to overcome in web design. Why is this? Simply put, it’s much more difficult to create a design that works against the classic F-pattern than it is to follow it. Fortunately, users are quite accustomed to seeing non-traditional page designs for landing pages. Successful landing pages typically go through many iterations, repeatedly fine-tuning certain elements of the page in order to control the user’s eye movement patterns, creating a natural user experience that avoids user confusion and frustration – the key ingredient to losing conversions.

References

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.