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.
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.
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.
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:
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.
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:
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.
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.
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.