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

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, 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, 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 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, 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 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? 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 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

default author image
About Angela Stringfellow
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.
» More blog posts by Angela Stringfellow