Archive for the ‘heatmaps’ Category

Create your web pages as if everyone has ADD

August 8, 2008 1 comment

Imagine your users – coming to your site. What is their goal?  What do they want to accomplish?

Can users come to your website and accomplish their task in thirty seconds – or less?  Studies show that website visitors have attentions spans lasting between nine and thirty seconds. Someone with Attention Deficit Disorder (ADD) also has a short attention span, and difficulty completing tasks. If your website includes a shopping cart, users are even more impatient. A Nov 2006 study identified ‘4 seconds’ as the minimum acceptable retail web page response time.

So if your web pages are slow pages – due to flash, content available only within a file, huge images – you may have accidentally created a website good at customer elimination. Users will not read your carefully, lovingly created content – they want short text strings in bullet point format that they can click on to accomplish their task(s).

Creating useful web pages is more of a science than an art. Your users want to quick, understandable content – easily scannable text accompanied by just enough graphics to help them choose what they want. Today’s users do indeed act – online at least – as if they have ADD.

If I sound flippant, actually I’m not. I know many people with ADD – and know many people who don’t. Both groups are equally impatient when online. Its easy to feel the pain of an organization that spent big bucks on big, slow, showy website that alienates users. In designing websites, KISS (Keep it Simple Stupid) is the golden rule. If your users have short attention spans, simple designs and easy to read text is appealing to them.

I went to Websites that suck (2008 contenders) to find examples of websites where users can not easily accomplish their tasks.  In the examples below the customer elimination effect includes:
a. Key information is not on the top, left or center of the front page –where users expect it (users get tired of looking for info and leave, see eyetracking/heatmapping).
b. Important content is contained in a file, or via flash, video, or audio-  instead of straightforward and easy to scan text (takes too long to render content and interpret it).
c. Inefficient use of screen real estate leaves key information placed at the bottom of the page (users won’t scroll as they assume important info is on the top)
d. Navigation is difficult (requires too much effort and time from the ADD user)
e. Layout is poor – menus don’t follow conventions and are hard to understand, read and user (requires too much effort and time from the ADD user)

1. Brill Publications: Problems: See items a through e above. Also, the site’s navigation is difficult and has too many urls. This site strays from the home page & supporting pages concept that users expect.

2. Land between the Lakes: Problems: a through e above.  Also, this site is problematic for color blind users- anyone who has trouble seeing colors in the green range will have difficulties, as will anyone who can’t read sideways.

3. Auglaize County, Ohio: Problems: Items a and c are the biggest problem this page has. Otherwise, it’s an okay page. But it is a BIG problems, as the first time user has no idea there is anything worth scrolling down to see. I kept clicking on the photos, thinking they were the entry into the site.

Cited Studies:
The average attention span for web browsing is about 10 seconds.

Akamai and JupiterResearch Identify ‘4 Seconds’ as the New Threshold of Acceptability for Retail Web Page Response Times – Nov 2006


Eyetracking, heatmapping and your website

July 2, 2007 1 comment

What is eyetracking? Heatmapping? Why should you care?

For website creators its close to the gold standard for learning how users actually use your website. I attended an Eyetracking Demonstration led by Dr. Kathryn Summers, University of Baltimore & Michael Summmers, Summers Consulting, Inc. in collaboration with Nick Boswell, Tobii Technology and GSA’s Web Manager University, which produced the July 2007 event.

Eyetracking follows a user’s eyes as they try to accomplish a specific task on your website. During the presentation, Michael Summers explained that measuring exactly where user’s eyeballs look on a page – as well as where they do not look – can be vital for website managers. Web managers need to know, for example, to not put anything in the upper right corner – it won’t be seen. We’ve become conditioned to expect advertising there and our eyes avoid looking at that area.

We watched users look for the Federal Emergency Management Agency (FEMA) phone number on We could see from eyetracking data – represented as red lines and dots – that users were scanning furiously, choosing many paths throughout the website, making false starts, but finally completing the task. Their difficulties indicated that users needed more help to be able to accomplish this task easily. People who are in a disaster and looking for FEMA’s phone number are likely to be impatient and need to find this information as quickly as possible. One can see the logic in performing these tests as you can literally see the information through another’s eyes.

Heatmaps were created at the end of each user’s eyetracking tests. Generally heatmaps demonstrate what areas of the webpage are viewed most, and where user’s eyes lingered the longest (indicating areas of most interest). Heatmaps can generated in other ways – by clickthroughs on the links within a page – but this blog post is not about those types of heatmaps.

Rules of thumb that I learned from this demo:

I asked if there was eyetracking data that tracks shopping cart abandonment. Well – no. This research is proprietary and in high demand. Most ecommerce based organizations are highly interested in what factors lead to shopping cart abandonment, and conversely, conversion rates – how to convert users into buyers. Jakob Hencke, of Tobii Technology, said that the  Tobii forum is a good place to research that information. Google’s website optimizer forum may be a good resource too.