Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User Experiences

By , January 19th, 2012 in Landing Pages | 20 comments

Numerous studies have been conducted to determine “hot spots,” or the areas of a Web page users’ eyes tend to focus on first and those that get the most attention. There’s a natural pattern to the path most users’ eyes follow on a page that can can be used to a designer’s advantage when planning page design and layout.

According to EyeTools.com, an individual eye path, called a heat map, looks like little more than a totally random smattering of points, or hot spots, scattered over the page, but by analyzing the paths of multiple users it’s possible to determine logical or common paths.

This pattern can aid designers in placing key information in common hot spots on a web page or image.

This heat map, created by TechWyse.com, illustrates the areas of the landing page where readers eyes focus on first.

Lack of pattern indicates confusion

Analyzing heat maps is a useful method to determine whether a landing page or image makes sense to consumers and impacts their experience. Path patterns should emerge when data from multiple users is compiled; scattered or random paths indicate that readers are confused.

If a heat map demonstrates that readers’ eyes are focusing on unimportant areas of a page, it’s time to revisit the design. Ideally, a heat map should show concentrated areas around CTAs (calls to action). In the example below, the most concentrated focal area is a portion of the header that says “No Fees.” While this is important information, users only briefly visit the “Current Stats” area on the left-hand side of the page, and completely skip over the call to action immediately below it, which reads, “Request Info.”

A good landing page designer knows that every pixel of a landing page has a purpose. Even white space, which not only reduces clutter but helps guide eye path to the most crucial areas of a page. Ample white space surrounding a call to action will help readers quickly focus in on this important area. Further, images can be used to subconsciously direct a reader’s attention. For instance, readers tend to look in the direction of another person’s eyes, so a photo with a person looking directly at a call to action will almost always force a reader to immediately follow the path.

This image (courtesy of SocialTriggers.com) illustrates a study conducted by Usable World. In this advertisement, readers’ eyes follow the subject’s eye direction, leading straight to the header. In this case, the baby’s chin acts as a natural arrow, which also directs reader’s attention to the copy.
This sample, also from TechWyse.com, shows the original landing page. Notice how readers’ eyes tend to jump around the page and fail to focus on the call to action.

Looking pretty isn’t enough

OneExtraPixel.com notes that many designers get caught up in the idea of creating a flashy, impressive graphic piece that impresses the customer (in this case, the brand or business purchasing the ad or design). Most landing pages designed with attractiveness as the primary factor fall short of conversion goals because they fail to take eye path into consideration.

Author Eric Rowell says,
A good web design effectively satisfies the purpose of the website first, and then looks pretty second,”
comparing the process to an architect designing a home without windows and doors. In other words, function comes first.

First steps: defining landing page goals

Designing a landing page that converts is next to impossible if the page has no objective. A landing page designer should have a full understanding of the goals of the page prior to undertaking any aspect of the design. There are three important points to consider when defining landing page goals:

  • Identify the problem the user is trying to solve
  • Provide a solution
  • Offer a call to action that solves the problem
YouSendIt’s landing page identifies a problem (sending large files), offers a solution (unlimited access from anywhere to send, share and store your files) and a clear call to action (Send a File – Try it now).

Each of these points should be addressed consecutively through the page design in order to seamlessly move readers through the buying process.

Further, a landing page should accomplish the following goals.

  • Differentiate the product, service or brand from competition. What’s the unique selling proposition, or USP?
  • Decrease consumer anxiety. Is there a satisfaction guarantee or a no-questions-asked return policy?
  • Offer an incentive for completing a call to action. What will be gained or lost by forking over some hard-earned cash?
Square.com differentiates itself and reduces consumer anxiety with low processing fees and next-day payouts. The incentive? Buyers can immediately start accepting credit cards, and they’ll get a free Square Card Reader.

Proper design guides readers to take action

Landing pages are designed to entice readers to take a specific action. Using heat map technology, landing pages can systematically guide readers to various points of a page, each step building on the last to complete a compelling sales message.

The Pixsysm Blog points out a few common pitfalls landing page designers tend to make:

  • Objects that compete for a reader’s attention. More than one glaringly obvious call to action creates confusion; when a reader lands on a page, the final call to action should be clear and compelling. There should be no guesswork or decisions to be made by the reader regarding next steps.
  • Too many fonts. Choose one or (at the most) two fonts that compliment each other. Use one font to emphasize important points and the other to convey supporting information.
  • Don’t use boxes if not for a call to action. Boxes should be reserved for the main call to action, because a box tends to cause readers’ eyes to stop. Randomly-placed boxes appearing before the call to action can cause readers to get lost, confused, or leave the page altogether.
  • Use a logical hierarchy of headings. Headings are used to lead a readers’ path through order of importance; like boxes, they should be used strategically to guide readers from point to point.

Using design to dictate eye path

Heat maps for non-landing pages tend to follow an “F” pattern, meaning readers tend to start from the top left and work from left to right and then take a vertical path down the page.

This image (courtesy of UseIt.com) illustrates the typical “F” pattern common to most non-landing pages.

Landing pages, on the other hand, can follow a completely different path as dictated by proper design. In a previous post, Oli covers 8 Visual Design Techniques that can be used to dictate eye path and improve landing page conversions.

Here are a few tips, including some from Triple Moons Design.

  • Use white space to your advantage. White space is relaxing and can guide a readers’ eyes to the next important step in the buying process.
  • Start with a compelling headline. Most readers start at the top left corner of a page; this is a great place to put the company logo followed by a major headline.
  • Use bullet points to convey bits of information. Bulleted lists are enticing to readers, because they briefly convey important highlights.
  • Use images as directional cues to guide eye path. Social Triggers says an image of a person looking at a specific area of the page will draw attention to it. Further, images can create subtle arrows that dictate eye path subconsciously. For example, an image of a person with one hand on her hip can point a reader’s attention to the direction the elbow points.

Using eye path in design can be as simple as asking a group of friends to look at a page and note where their eyes fall in order. There are more sophisticated methods of analysis, but a landing page that isn’t converting is a sure indicator that the design doesn’t follow a logical eye path.

– Angela Stringfellow

This is a guest post, all opinions are those of the author.

Angela Stringfellow has spent the last few years of corporate life working in marketing management in the healthcare industry before transitioning her real-world marketing experience to the web. For the past several years, Angela has worked as a consultant with businesses small and large to build comprehensive social media campaigns, blogging and editorial strategies and enhance overall brand reputation and media presence, with a primary focus on Web 2.0 technologies and content marketing.

Comments

  1. […] or the areas of a Web page users’ eyes tend to focus on first and get the most attentio Link – Trackbacks Posted in User experience (UX) | Permalink. ← Website Usability 101 […]

  2. Ian Everdell says:

    Hi Angela,

    Great post, and I fully agree with all of the tips and best practices that you’ve provided for good landing page design.

    However, I feel it necessary to point out to other readers of this post that the two heatmaps that you show from TechWyse are not generated by actual eye tracking research, but rather by a computer simulation of eye tracking.

    FengGui (and other tools like AttentionWizard and 3M’s VAS) use computer vision algorithms to identify the parts of an image that could theoretically attract visual attention based solely on what’s called “salience” – that is, there are image characteristics that our brains are tuned to look for. These include areas of high contrast (e.g., an orange button on a blue background), sharp edges (e.g., where a blue background transitions to a white one), and faces.

    The challenge with these tools is that visual salience guides “bottom-up” attention. But our brains also make use of “top-down” cues to guide attention – these are cues that are related to our goals, the task at hand, and so on. Essentially, our brains and eyes get tuned to look for things that are relevant to what we’re doing.

    If (and that’s a big if) someone is looking at a landing page with absolutely no task or goal in mind, then the algorithms may at least approximate what we’ll look at for the first couple of seconds. But generally we’re not looking at landing pages for no particular reason. This is a common issue with many of the recent eye tracking studies that have come out comparing different social networks – the participants were not given actual tasks, and were instead just told to “look at the page”. That’s unrealistic.

    The first landing page from TechWyse shows the first fixation landing on the image in the top right. I can pretty much guarantee you that this is not what will happen. And while I agree that the original landing page is way too busy, again, there’s no way the first fixation would be at the very bottom of the page (which is what the heatmap shows).

    I suspect if these two pages were examined with real eye tracking and real participants given a real task to do, the heatmaps would show something much closer to the F-pattern that is pretty standard. Yes, there would be some differences (e.g., the calls to action and forms would attract attention), but not to the extent that the FengGui heatmaps show.

    I’m not totally opposed to the eye tracking simulators, but I do feel it’s necessary to understand their limitations.

    • Oli Gardner says:

      Thanks for the detailed explanations Ian – I’m sure that will provide very useful to readers.

    • Mary says:

      @ Angela: Great post! This is a good resource for marketers looking to design effective landing pages. Along the lines of a user visiting a page without any goal or with a specific purpose: Do you think a users expectations for page layout are a large factor in landing page success and CT rates for CTA’s?

      @ Ian: Do you know if the F pattern is influenced by the typical page format, or is solely a readers natural tendency?

      • Ian Everdell says:

        The way we look at a webpage is definitely influenced by habits and typical designs – we read left to right, top to bottom, so that’s the behaviour we would naturally fall into. But because of this, it’s also the design pattern that typically gets used.

        We’ve seen this type of behaviour in other “Western” cultures as well (Germany, Australia, Mexico), but you would expect different behaviour for cultures that read right to left. In a study in China, we found that participants were much more likely to read all of the text, so the heatmaps were more rectangular than triangular.

        The “F” pattern really applies to “reading” text – web users start by scanning the first couple of lines of text, get bored, jump to the next paragraph, scan a little less horizontally, then get even more bored and just skim down the rest of the page waiting for relevant information to jump out at them (I’m generalizing, but that’s basically what happens unless you’ve written some pretty amazing content).

        We see that users will most typically “anchor” in the top left of the page (look there first), although you can quickly modify where they go next through design, images, etc.

        So to answer your question, yes, the F pattern is influenced by typical page format (but why not design your content in a way that is familiar to users?), but you can definitely influence it.

  3. Great article. Really helpful and lots of detailed information.

  4. Great post Angela. I’m glad to see I’m not the only one telling folks to set their goals first and that “looking pretty isn’t enough”. I’m a checklist guy, so I’ve added several of your items to my Landing Page checklist. Thanks for the great info.

  5. […] OneExtraPixel.com notes that many designers get caught up in the idea of creating a flashy, impressive graphic piece that impresses the customer (in this case, the brand or business purchasing the ad or design). Most landing pages designed with attractiveness as the primary factor fall short of conversion goals because they fail to take eye path into consideration. Author Eric Rowell says, Looking pretty isn’t enough “ A good web design effectively satisfies the purpose of the website first, and then looks pretty second ,” This sample, also from TechWyse.com , shows the original landing page. Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User Experiences | Unbounce […]

  6. zwembroek says:

    Just Browsing…

    While I was browsing today I noticed a great post concerning…

  7. […] by 100 percent. And in this instance, the additional graphic element also draws the reader’s eye path to the bulleted list of […]

  8. […] Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User Experiences – In typical Unbounce fashion, this post shares how to keep people moving through your landing page using killer design (and good testing data). […]

  9. Lynn Dalsing says:

    While heat map data isn’t always going to be easy to parse or 100% reliable, it’s great to see a simple breakdown of how to use this type of info to move visitors through a page. We shared this in our roundup of email marketing related news at http://blog.ividence.com/en/archives/news-of-note-on-the-inbox-august-13-2012

  10. […] 11.Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User … Jan 19, 2012 … If a heat map demonstrates that readers’ eyes are focusing on unimportant …. and get the most attentio Link – Trackbacks Posted in User experience (UX) | Permalink. … you show from TechWyse are not generated by actual eye tracking research, …. This is a guest post, all opinions are those of the author. http://unbounce.com/landing-pages/the-basics-of-eye-path-tracking-in-designing-a-good-landing-page-user-experience/ […]

  11. […] 14.Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User … Jan 19, 2012 … There’s a natural pattern to the path most users’ eyes follow on a page that can … a landing page or image makes sense to consumers and impacts their experience. …. This is a common issue with many of the recent eye tracking studies that have …. This is a guest post, all opinions are those of the author. http://unbounce.com/landing-pages/the-basics-of-eye-path-tracking-in-designing-a-good-landing-page-user-experience/ 15.Identifying web usability problems from eye-tracking data Tags: evaluation/methodology eye-tracking human factors usability problems user …. REVIEWS. Reviews are not available for this item. Computing Reviews logo … Docile avatars: aesthetics, experience, and sexual interaction in Second Life … http://dl.acm.org/citation.cfm?id=1531311 […]

  12. […] 2.Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User … Jan 19, 2012 … This heat map, created by TechWyse.com, illustrates the areas of the landing … a landing page or image makes sense to consumers and impacts their experience. ….. This is a guest post, all opinions are those of the author. http://unbounce.com/landing-pages/the-basics-of-eye-path-tracking-in-designing-a-good-landing-page-user-experience/ […]

  13. […] 12.Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User … Jan 19, 2012 … According to EyeTools.com, an individual eye path, called a heat … or image makes sense to consumers and impacts their experience. …. I’m not totally opposed to the eye tracking simulators, but I do feel it’s necessary to understand their limitations. … This is a guest post, all opinions are those of the author. http://unbounce.com/landing-pages/the-basics-of-eye-path-tracking-in-designing-a-good-landing-page-user-experience/ […]

  14. […] 7.Using Eye-Path Heatmaps to Design Kick-Ass Landing Page User … Jan 19, 2012 … According to EyeTools.com, an individual eye path, called a heat map, … or image makes sense to consumers and impacts their experience. …. White space is relaxing and can guide a readers’ eyes to the next important step in the buying process. …. This is a guest post, all opinions are those of the author. http://unbounce.com/landing-pages/the-basics-of-eye-path-tracking-in-designing-a-good-landing-page-user-experience/ […]

  15. Calgary SEO says:

    I constantly spent mmy half an hour to read
    this blog’s articles or reviews all the time along with a mug of coffee.

  16. […] Include your standard navigation bar to keep things visually consistent and brand focused. Use eye path tactics to emphasis your offer.                Place the call to action above the fold where […]