Fen-Gui Analysis
Version: V1
Author: Phil Pearce Date: 26/04/2013

Summary

Feng-gui.com offers a suite of attention and virtual eye-tracking reports. Two screen shots were used – the homepage and business card category page, as these were the two most highly trafficked areas of the website.

Homepage:

image002
Category page for business cards:

category page for business cards
Two reports are generated:

  • Heatmap – The degree of attention given to an area of the screen
  • Opacity – Hides the least interesting areas of the screen – what remains?

 

Heatmaps 

heatmaps

heatmap image
Heatmap Findings

Hero image eye direction.

Human beings are innately programed to focus on eyes and eye directions within photos. This is especially the case where the person in the image is looking directly at the camera, we also subconsciously follow the gaze of images within a photo.

Here is an eye tracking example based on 104 users:

heatmap baby looking straight to camera

Here is the same text, with the eye gaze change to look at the product image:

heatmap baby looking at title of article
You will see in the above photo, the hero image`s face receives slightly less heat and the product text receives much more attention.

There are no hero images on the website.

Action: Test hero images to draw user attention to product benefits.
Colour contrast

The heat map is affected by colour contrast variations and the placement of these contrast on the page.

Thus on the category page only 2 groups of elements are drawing attention:

  • black cards and title on light grey background
  • green buttons and green logo

heatmap image

Contrast between grey text on light grey background does not draw the eye’s attention:

closeup of grey text of slightly lighter grey background
Action: Update to black text or a white background to increase the contrast and improve readability.

Right-Rotated is text is hard to read, as the eye naturally follows from left to right:

image016business card

This is easier to read:

image020
Contrasts suggest that the white on grey cards and blue on grey don’t stand out. Only the black and white cards are detectable:

image022
Action1: try changing the background colour to makes the white and blue product images stand out, or add a dark border on the category page:

business card image026
Alternatively replace the Black cards for light blue or light green:

image028
On the category page the green buttons have a very strong contrast on the light grey page which is great! However, the “design your own” button is being overshadowed (literally) by “Use Moo designs”:

image030 green button heatmaps
Action1: Assuming that average order value is higher for custom designs, then change the 2 buttons from left align to centre align and add an “or” divider to make it clear that there is a choice:

image034
Action2: From the Feng-gui data, I suggest running a test with the action buttons changed to include a raised shadow. As I suspect that this will cause the buttons to be more prominent on category pages and product, and thus result in more users entering the checkout process:

image036alternative button suggestions

 

image040 image042

Action3: pointed or directional buttons should be tested to improve click through:

image036alternative button suggestions

 

Opacity Area

The inverse of the colour contrast campaign is the Opacity report. It shows that the homepage is very focused on the brand logo, green browse button and multicolour card image. The category pages is similar.

This is a good so far, as the important are being focused on, great!

image046 opacity maps showing areas of interest
However, the Tag line and carousel buttons does not stand out and it is not contrasting enough.

Action1: test using a border for example:

border title

image052
Top navigation menu does not stand out and it is not contrasting enough.

menu
Action2: make the tab board always visible (not just on hover).

image056

change to:

image058

The same applies to the carousel tab:

image060

Top navigation cart links are in size 8 font and do not stand out:

image062

Action3: change the cart to make it distinctive an increase the same as the other navigation links:

image064

The popup on the homepage will mean the ~70% of users will have a mouse position which is top middle right of the page:

image066

image068
Action: Moving the close box corner to the bottom right, will means that the mouse would be next to the browse button:

 

image070

pop-up box button coseups

 

image074

opacity maps

Also the popup is triggering a vertical scroll bar in Firefox v20 which should be removed.

This is a nice touch – a subliminal arrow on the homepage cause the user to focus on the browse button, great!

image078

subliminal arrow opacity map
Actions Summary

Based on the analysis above we suggest:

1. Test hero images on category or product pages – this should also be run as a test.

2. Add raised shadow to buttons site-wide to “make them look like buttons” run this change as a test to confirm sales uplift.

3. Add borders to the “we love to print” and to the top navigation. Add a contact us link to the top right and run tests to confirm less user confusion.

4. Move the carousel to the left navigation on the homepage, so that the next day delivery and/or free shipping info is not below the fold – this should also be run as a test.

5. Add a search box to the top of the global header and/or in the centre of the homepage, run this change as a test to confirm sales uplift.

6. Text change of “refer a friend ” to “share the love & refer a friend” – test this.

 

Mock-up pages to test

[Original] homepage:

image082

 

[V2] Homepage with site search in centre of page:

image084

 

[V3] Homepage with site search in header:

pages to test
Next day delivery is only shown to 30% of users who have big monitors (without scrolling):

scrolling map of different screen sizes
Appendix

Here is download of the Fen-Gui images used in the above: (14mb file)

https://www.dropbox.com/l/zqvmVjXYIh0abHrmS0fmE8
Other issues

IE10 “leave this page” dialog box looks a bit crude on the /design.php page cart page:

IE10 leave cart dialog box
Firefox is fine:

firefox leave this page dialog box

 

0117 3361103

FREE GOOGLE TAG MANAGER BOOK

For the PDF Copy, please enter email address
DOWNLOAD
close-link
Click Me