Horizontal Attention Heat Map

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.

Horizontal Heat Map Overlay

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.

Less Accounting Right Layout
  • Call to action buttons are on the right  starting from 700 px to 1000 px horizontally
  • Sum of attention percentage ~20%
  • Conversion rate 10%
  • Call to action buttons are on the left starting from 100 px to 500 px horizontally.
  • Sum of atention percentage ~58%
  • Conversion rate 12%
How to Use This Heat Map
  • 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.

| Posted in General, UI | No Comments »

Finding Time to Read

If you haven’t read a book in a while because you haven’t found any time to read in your busy schedule, try this one simple thing.

Read ten pages of a book you always wanted to read before you go to bed. Every day, read just ten pages. If you fall asleep after that, it’s good. If you still have some energy, you can keep reading. The time doesn’t have to be before bedtime. It could be on your commute. It could be with your breakfast while you wait for coffee to brew. But for it to work, you have to do it every day at the same time and just make a habit out of it.

If you do this every day, you will have read 365 x 10 pages = 3650 pages  a year. That’s about 9 books per year, assuming an average book has 400 pages. No matter how busy you are, you can finish 9 books a year. That will put you way above the US average (1 book per year). You won’t feel guilty when next year comes, and you won’t have to make any more resolutions to make time for reading!

You will be amazed how many books you can finish over the years, especially if you have a few extra minutes to extend your  reading time to 15 or 20 minutes a day. Better yet, maybe you’ll get pulled deep into a great book and find yourself unable to tear your attention away from it. Either way, this is an easy way to get started if you want to read but haven’t found time to.

| Posted in General | No Comments »