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

Eric Rowell is the founder and chief editor of WebKrunk and is fascinated with everything related to the web, including business, emerging technologies, online advertising, social media marketing, and the nature of the web.

Comments

  1. / Reply

    Nice article. As a reader, I can relate to the F-pattern. When people go to a website to read the information they want, usually, readers scan paragraphs in that pattern and determine if the information they want can be found there or not in just seconds. This will result to the visitor staying or not, just because of the placement of things.

    I agree that web designing is not just about making designs pretty, a web designer should not overlook usability.

    Really, this is a wonderful article! Cheers!

    • Ryan,
    • November 5, 2010
    / Reply

    I’ve definitely noticed myself following these patterns of viewing to. Great read! Thanks!

  2. / Reply

    Like you said Ryan the EMP is really neglglected. And is sad to admit but I’m in this group. Articles like this help us to remember what is really important. Thank you for share your knowledge.

    1. / Reply

      I’m sorry. I should say to Eric.

  3. / Reply

    The design which is functional tells users how to navigate through pages is very important as it will increase the ROI & Now just designing beautiful website is important, designing website that converts visitors into customers are the new big thing in design.

  4. / Reply

    Thanks for the article, the first case study was really quite interesting! It would be interesting to see more of those.

  5. / Reply

    Thanks guys for the nice comments!

    • Tim,
    • November 6, 2010
    / Reply

    Well, I didn’t know people read that way. Cool.

  6. / Reply

    really interesting read, i will investigate this further and try optimize my future projects for eye patterns :)

    • Carl,
    • November 7, 2010
    / Reply

    Amazing how keep this in mind really makes a difference when you design.

  7. / Reply

    I’ve been very focused on eye tracking and eye paths over the last few months. My main concern is about optimizing online sales – we want to make sure that users are looking where we want them to, in the order we want them to. And that’s really hard!

    So great you are spreading the message of eye movement patterns.

    However, I’d like to mention that the Credo case study is *not* an eye tracking study. AttentionWizard does not do eye tracking, they do attention maps. There’s a difference in that the latter is a simulation of where the user would look. Although attention maps are helpful, they are a long way from eye tracking.

    But your points are still completely valid, it’s just that the specific example isn’t. Maybe this one will do:
    http://usableworld.com.au/2009/03/16/you-look-where-they-look/

    A company that does eye tracking very cheaply is http://www.gazehawk.com. We recently used them for two studies and it was pretty amazing.

    Kind regards and thanks for a great blog,
    @jens_schriver

  8. / Reply

    Nice article!
    EMP should really affect webiste design.

    • Rosanna,
    • November 8, 2010
    / Reply

    I think these findings are somewhat off. But that I mean: I’m sure they work for the *majority* of people (as in right handed, left brain dominant folks) but I doubt they work for left handed and/or right brain dominant folks.
    Aside from anecdotal experience (mine!), I would venture to affirm that:
    *left handed people process the two halves of the screen (right and left) in a different way – actually the opposite of right handed people
    *right brain dominant folks process images first, then words.
    For all these reasons, I think that the owner of a site needs to have a clear idea of its target and then decide how to do the wireframing.

  9. / Reply

    You have very well article for new web designers and I like the second last one very much . Let me see that what I can do on my blog related to attraction/ eye movement results .

    • MIke,
    • November 8, 2010
    / Reply

    we always look to the left, lol thats what my tutor taught me in college.

    Great article , keep it up.

    • Mac,
    • November 9, 2010
    / Reply

    That’s a pretty clever article. The most I knew about eye movement patterns was that people are used to looking left to right, which is why the movement of your design should go that way as well.

  10. / Reply

    Nice article. It helps to bring certain points of the website into attention. But how can you set up such a tracking map?

    • Bryan,
    • November 9, 2010
    / Reply

    Hmm I don’t really look at websites like that but great article. Very interesting. Maybe that’s just the majority, if that is then this will be a great help. Thanks!

  11. / Reply

    What other patterns are archetypal for reference? Can you provide a few other mappings?

  12. / Reply

    moving patterns in web designing is extremely very important cause its also a way to gain more visitors in your site!

  13. / Reply

    Great resource!

  14. / Reply

    Thanks for the useful information.
    I am sure I will visit this blog again soon!

Leave a Reply

Your email address will not be published. Required fields are marked *

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.