This is a new blog post series on Better User Experience.  We call it ‘Feng-GUI vs…’  Each episode we choose one homepage design from one of the Usability tools featured in our categorized blog-roll, and we test it using the attention tracking algorithm from Feng-GUI.

Crazy Egg

Before I get to the synthetic eye tracking, here are some of my thoughts about the design. I’ll use the CARP attributes of graphic design to guide my critic – that is Contrast/Color, Alignment, Repetition and Proximity.

The first thing I notice is the washed out color palette. I do like the headline “boost your websites profit within 30 days space-space guaranteed”, but the subheading is a little confusing. What exactly does this crazy egg do?

Contrast:

There is not enough.  For instance, the different styles of font for heading and body text are too similar – the two fonts in the logo don’t really connect with anything else. I do like the ‘get started’ button but I’m wondering why it has a text get started below it. There are no hard contrasting edges other than the get started button. I suppose the brand logos have strong contrast compared to the pastel palette of the rest of the page.

Repetition:

The two column content blocks are repeated but I’m wondering why the right block is a pink pastel shade background.

Alignment:

The centered alignment doesn’t seem professional to me. I think there are definite alignment issues here. Notice how the vertical edges don’t form any strong lines or edges.

And finally, proximity:

There are issues with proximity on this page. Notice the spacing between the header “What you’ll discover on this page” and the bulleted list below. It’s the same as the spacing between the header and the subtitle above. The padding and proximity help to create the visual hierarchy – or to reinforce the visual hierarchy established by the different heading styles.

My initial impression is generally positive – see my last post, ‘It’s the questions, stupid’ – but the more I dig into this the more I see room for improvement (or the more a critical nit picker I become). I would create more contrast by giving a little more white space around the main title and subheading. I would also fix the alignment issues – Get rid of the Centering!  And finally I would revisit the subheading copywriting – use fewer, stronger words.

Now let’s see what Feng-GUI thinks of the page:

The heat map:

The strong heading got quite a bit of attention-it seems that the text attracts the eye. The Brand logos got some attention, but I expected the red Virgin logo to get more. The most attention on the page went to the highly contrasting and proximally distant “get started” button. I feel that button is “the banana” or the critical path for the site – so that’s working.

The gaze plot:

It seems to be all over the place without any tight grouping of fixations. It starts at the ‘get started’ button – and then spirals around the layout. I feel this is because there is not enough visual interest to create a flow to the layout – call it lacking visual hierarchy.

Changes I would make

Maybe reinforce the connection between the ‘get started’ button and something else in the layout – the main headline, the logo – Anything to tie those two elements together to create a visual boundary. The pastel, top-border and small logo are not creating enough visual framework.

 

 

This is the first installment of ‘Feng GUI vs…’  I had some fun evaluating the page.  It was insightful to critique a page design and match that with how the attention tracking software ‘saw’ the page.  It’s all open to interpretation and the benefit is in the process of doing it.

Questions:

Did my interpretations match yours?

Would you like to see more installments of ‘Feng GUI vs…’ ?