Five days: MarksAndSpencer.com 11 May 2006
Welcome to day four
Over the course of this week, we're publishing Eye Tracking heatmaps from five websites. We'll give you our thoughts on each and hopefully you'll give us your questions, comments and analysis. More information about the study can be found in our original announcement.
About Marks & Spencer
Marks & Spencer plc is the largest clothing retailer in the UK, a multi-billion pound food retailer and an icon of British business. The company began life when market trader Michael Marks and wholesale company cashier Tom Spencer opened their first shop in the 1890s. In 1997 it became the first British retailer to make a pre-tax profit of over £1 billion, but has since seen tougher times and is now less than a quarter of the size of the UK's most profitable retailer, Tesco.
MarksAndSpencer.com is often held up as a paragon of usability by the UK press. Webuser magazine, for example, gave the site a five star rating and a glowing review: "The high-street legend looks rejuvenated on the internet...It's obvious that care has been taken in making sure that customers will find the site attractive and easy to use, and it has to be said they've succeeded admirably." But talk is cheap - let's take a look at how it performed during our testing...
The white line represents the page fold at our 1024 x 768 monitor resolution. Users needed to scroll to view content located beneath.
You can tell a lot about an organisation from its homepage. Most homepages are a schizophrenic mish-mash of content, devoid of organisation and designed-by-committee. They usually reflect the design team's best attempt at negotiating internal politics and often give each of the warring factions a presence in order to keep the peace. So it's refreshing to come across a homepage like Marks and Spencer's.The M&S homepage is clean, well-organised and doesn't seek to overwhelm users with content. This creates a positive perception of the company as a whole (hence all the positive press). But does it work?
Well, that depends. What's striking from the heatmap is that almost all visual attention centres on the page header (containing the main navigation) and the left-hand menu. Great if M&S wants to connect users with products as quickly as possible, but not so great if they want them to engage with the features in the page's main area. It's worth noting that only one of our forty users actually clicked an item in the main body of the page (Then again, some of the features target quite specific demographics).
It is interesting to see the apparent linkage between "Women" - the first option in the main navigation menu - and "Women" - the first option / heading in the left-hand navigation menu. Having looked at "Women" in the main menu we might have expected users to proceed horizontally across the rest of the options in the main menu, but instead they were drawn down the left column by the second "Women" option. Video replays of the individual sessions confirm this visual linking effect.
Once users made their way down the left-hand column, many clicked an option and were transported to a new page, having seen little else of the homepage's contents. Again, this goes some way to explaining why the main body of the page was largely ignored.
Also of interest is the level of attention paid to the "Shopping Basket" feature in the top-right-hand corner of the homepage. Users generally pay very little attention to this area on most sites - as can be seen on our Amazon heatmap, where the "Spring Bargains" feature is virtually ignored. We believe that the increased visibility of M&S's "Shopping Basket" can be attributed to the fact that it is located in close proximity to other attractive content items, like the main navigation menu and (to a lesser extent) the search feature. Other contributory factors include the visual emphasis provided by the shopping basket icon and the "View" and "Checkout" buttons (Buttons plural or button singular? You decide!).
Those new to eye tracking may be surprised to see that visual activity in the main area of the page revolved around the three faces. The faces of the two women and the little girl were seen by more than 35% of our users - and even distracted these users from looking at the clothes they were wearing! This behaviour is very common - in fact it's a wired response for nearly all of us. Due to the importance of facial identity and expression in terms of social communication, humans have developed a strong compulsion to look for faces (this compulsion is so strong that we sometimes see them in places that they don't exist, for example, in clouds or tea leaves). Thus, on a webpage, faces are typically the first thing that users head for. (We covered this phenomenom in more detail in a recent newsletter).
The woman in the main banner is Twiggy, sixties model and America's Top Model judge (!). M&S credits Twiggy with persuading more women to return to its stores and helping drive a 6.8 percent surge in sales over the first three months of this year. It's therefore extremely important that such an influential figure is noticed by their website users.
Notice how the MasterCard "WIN TICKETS TO THE 2006 FIFA WORLD CUP" advert is overlooked. In a page that seems primarily targeted at women, we might have expected our male users to pick out this offer more readily. But they didn't.
M&S's "fat footer" was the surprise success of this design. 10% of users clicked on items located within it. This shows how important it can be to give users something to do - other than read your boring copyright notice - if they've reached the end of your page without clicking. Leave 'em hanging and you'll lose 'em.
Over to you
So that's our take. Now, over to you. Do you agree with our findings, or disagree? Perhaps you've noticed something we've missed. We'd love to hear from you...
...and if you're interested in commissioning an Eye Tracking study of your own site, please don't hesitate to get in touch
Bookmark this page
To create a TrackBack to this entry simply append
ping/ to the permalink URL for this page.