Author: Phil Pearce Date: 26/04/2013
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.
- Heatmap – The degree of attention given to an area of the screen
- Opacity – Hides the least interesting areas of the screen – what remains?
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:
There are no hero images on the website.
Action: Test hero images to draw user attention to product benefits.
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:
Right-Rotated is text is hard to read, as the eye naturally follows from left to right:
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:
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:
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!
Action1: test using a border for example:
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:
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!
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:
Here is download of the Fen-Gui images used in the above: (14mb file)
IE10 “leave this page” dialog box looks a bit crude on the /design.php page cart page: