RWeb Blog: Optimize your Landing Page with Heat Maps

In my Overcoming HiPPO Feedback on Website Design blog and video I discussed how you can use the free heat map tool Feng-Gui to discover how people would scan a future webpage.

I am currently working with Ultimate Construction to design a landing page for a Google Pay-Per-Click (PPC) campaign that we intend to run in San Diego County for keywords related to "kitchen remodeling" and discovered another great use of the heat mapping tool.

When we received back the initial design we felt that the landing page wasn't focused enough. It was very difficult to communicate back to the designer that the landing page wasn't focused enough and didn't assist in helping us determine where are attention was needed. I decided to run the design (which was provided in JPG format by the designer) through Feng-Gui.com and the tool did a great job of visually illustrating that the eye was being pulled all over the place and not neccasily on the most important part of the webpages (like the form submit button). Here's the screen shot.

I sent the heat map to the designer while explaining some of my concerns and offering additional recommendations like moving up the landing page (by removing the logo from the top), de-emphasizing main navigation, replacing one of the 3 pictures with an area where Ultimate Construction could list their unique selling points, etc.

The designer was able to take the heat map and feedback and produce a much more focused landing page. The heat map of the updated landing page showed (that after the prominent kitchen remodeling image in the top left section of the landing page) the visitor would focus on the "Get Free Quote" button, Other Kitchen Remodeling work Ultimate Construction has done and then back up to the main banner area with client's key messaging. The eye movements seem to "jump" less (the numbers are sequentially closer to each other) and are focused on the most important parts of the landing page which should result in a great number of form submissions, ("conversions"), for Ultimate Construction. Here is a screen shot of the revised landing page although we made some additional improvements before launching the final landing page.

Note: The text in the creative comps was only used for illustrative purposes and does not represent the final text used on the landing pages. You can see the final landing page here. In addition, we highly recommend using Google Website Optimizer and reviewing your Google Analytics data to better understand how your landing page can be improved after it is launched.

Wednesday, June 9, 2010

Optimize your Landing Page with Heat Maps