Lots of web sites are designed to be interacted with. But it’s putting that interaction to the test that often gets forgotten about.

A user to your site will probably have never met you, and will never ever have visited the site before, but needs to use it immediately, no exceptions.

You can do the granny test: sit her in front of your web site, and if she doesn’t understand what to do, simplify.

There’s a lovely little tool to tap into the wisom of the crowds on this dilemma. It’s called CrazyEgg (nice name), and I first read about it on MicroISV on a Shoestring.

CrazyEgg lets you “visualize your visitors”:

• Run a test on a page over a certain number of visits (say, 1,000 people).
• And see what people are clicking on the page, even if it’s not a link they’re clicking on.

Seems simple, but to see a heatmap of where the most clicks are going is very revealing.

CrazyEgg to the rescue

I’ve been running such tests since last month. One of the tests was on an inner page of Irish-Sayings.com for people who were not logged in. The idea behind it is that you can listen to some sayings for free, but are asked to sign up for once-off membership to hear all 900 recordings.

Some recordings are listed as a “taster”, but cannot be listened to without logging in. Here’s what the list looked like:

A simple list of audio not available without signing up.

Simplez, right?

It’s just a simple text list. The English is in black, and the Irish is in green to highlight it.

Along comes the CrazyEgg heatmap after 1,000 visits:

PNG Heatmap of the text link, every click makes that areas “hotter”.

Heatmap of an area without any links on Irish-Sayings.com.

Feck! People were actually clicking on the green text, presumably trying to listen to the audio. It’s not just a couple of clicks, there have been dozens of clicks recorded on the text. Visitors are getting confused! Or more specifically, I’m confusing my visitors.

The design has been like that for at least a year already…

The Solution

Quite simple, I changed the Irish green text to black italics as another way of highlighting it.

The result: hopefully happier visitors who don’t get confused by the design.