Thursday, March 31, 2011

Is moving away from product page standards a good tactic?

I have invested a huge amount of time and tests on our website's product pages in order to optimise it to maximise usability and conversion. However in reality, these pages look very similar to many other product pages. Product image with a buy button to the right, followed by product description, reviews etc. underneath. This is mainly because these are the online standards and crucially, what users expect. It's the same reason why car designers don't move the brake to the right hand side.

I was surprised then to see that, the hugely successful fashion retailor, had moved its product pages away from this standard. This is an example of their product page:

The navigation from item price through colour and size selections is intuitive and nicely structured. The add to shopping bag area (it's not a button!) is greyed out, which turns black and becomes active when colour, size and quantity has been selected. 

This is a nice idea; does it work though? The progression down through the options to the add to bag button is natural but being placed far down the screen, and not even looking like a button, is a move quite far away from the web standard. 

I'm very much in favour of innovation and not following norms for norms sake, however websites have moved to standards for a reason - usability. When designing and optimising websites, the questions we have to answer are: what do users know and expect and and what do they need to know? It would be interesting to run behavioural tests on this product page to see how users navigate and find the add to bag button. 

One of the most influential tests that has informed website design revealed the f-shaped pattern for reading web content. Through eye tracking software, this research found that users read web pages in the shape of the letter F. Two horizontal stripes, followed by a vertical stripe:

The middle image above is a product page from an ecommerce website. The red box in the top right hand corner is the add to cart button. If you placed this F pattern over the Uniqlo product page, the chances are that users would miss the add to bag button.

To take the F-shape behaviour further, my own research suggests that users expect to scroll down through a product page in the F-shape and then back up before adding to cart. This is all part of the user's product research and decision making process. To then have to look for the add to cart button or scroll back down the page, like Uniqlo makes you do, isn't particularly usable. This is why add to cart buttons are almost always at the top of the product page.

When you do click add to cart, you stay on the page with a message at the top of the screen that it's in the bag. From here, there's no checkout button, just a link to your bag, which isn't highlighted. Again, there's optimisation work for Uniqlo here that could improve its conversion.

I don't know what Uniqlo's website conversion is like, so it's difficult to make judgements, however my recommendation would be to revisit its product pages and add to cart button, include a checkout button and revert back to standards - they're called standards for a reason.