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.

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?

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.

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.

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.