Nielsen’s group recently published the results from an eye tracking study for user attention for horizontal dimension.
Their main observation is
- Left half of any page gets 69% of viewing time and right half gets about 30%.
- Their recommendation is ‘Stick to the conventional Layout’ for the best results.
- Keep navigation all the way to the left. This is where people look to find a list of current options.
- Keep the main content a bit further in from the left.
- The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
- Keep secondary content to the right.
Brendan Reagan from Grokdotcom came up with his own way to apply that data for testing the page layouts.
Nielsen’s data for viewing time across horizontal dimension by 100 px each is found in the chart below.
I translated this data into a reusable heat map to be shared with UX team at work and I figured I should share it here as well. You can get the full sized png template here.
When I came across ABtests.com, I looked through the samples uploaded and found this sign up page A/B testing by LessAccounting. Original test write up theorized that having the buttons on the left might be the primary contributing factor to 20% increase in conversion rate. His hypothesis is correct if we can believe Nielsen’s data as correct across all sites with left to right reading languages.
Comparing the sums of attention percentage for each layout, we can clearly see the left layout got much more attention. This test is particularly a good A/B test to support Nielsen’s data since all other elements (content, call to action button color, size) remain exactly the same in both layouts. The only difference here is the position of the call to action buttons and more informational bulleted text.
|
|
|
|
- If it’s an existing site, resize your browser window to 1100 px before taking a screen shot.
- If it’s a design in progress, you should capture it around 1100 px size.
- Open your image in Photoshop and layer this heat map over.
- Line up the top of the heat map color bars with top of your image so that you can see the percentages clearly. (optional)
- Adjust the opacity till your image is visible.
You can take this template and start layering over landing or new content pages you are designing and optimize your layout to maximize intended conversion metrics.