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:
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
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:
Here is the same text, with the eye gaze change to look at the product image:
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
Contrast between grey text on light grey background does not draw the eye’s attention:
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:
Contrasts suggest that the white on grey cards and blue on grey don’t stand out. Only the black and white cards are detectable:
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:
Alternatively replace the Black cards for light blue or light green:
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”:
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:
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:
Action3: pointed or directional buttons should be tested to improve click through:
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!
However, the Tag line and carousel buttons does not stand out and it is not contrasting enough.
Action1: test using a border for example:
Top navigation menu does not stand out and it is not contrasting enough.
Action2: make the tab board always visible (not just on hover).
change to:
The same applies to the carousel tab:
Top navigation cart links are in size 8 font and do not stand out:
Action3: change the cart to make it distinctive an increase the same as the other navigation links:
The popup on the homepage will mean the ~70% of users will have a mouse position which is top middle right of the page:
Action: Moving the close box corner to the bottom right, will means that the mouse would be next to the browse button:
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!
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:
[V2] Homepage with site search in centre of page:
[V3] Homepage with site search in header:
Next day delivery is only shown to 30% of users who have big monitors (without scrolling):
Appendix
Here is download of the Fen-Gui images used in the above: (14mb file)
https://www.dropbox.com/s/af6x0vsxw38zqzb/Feng-Gui%20Moo%20RAW%20images.zip?n=9486393&oref=e
Other issues
IE10 “leave this page” dialog box looks a bit crude on the /design.php page cart page:
Firefox is fine:
