Product page on the H&M website

Screenshot from www.hm.co.uk showing product detail page.

I was looking through a few commerce sites for a client and was amazed at the diversity of approaches to photos they took.

One that stood out to me was H&M.

The first thing that grabs you is the use of photos through the entire site. They use large and bold photos on every page you visit en route to the product page.

The default photo size on the product page is quite large and certainly bigger than many of the competitors that I looked at.

The alternate views were abundant and useful.With this shirt for example, you get a variety of angles and also the choice to see it on and off a model.

The zoom options were also interesting. They offer a click to zoom and then drag to navigate as well as a ‘view full screen’ option that loads a much larger photo. The drag option fails however on mobile devices such as the iPhone as you can’t drag the photo.

It was a really interesting exercise to compare so many sites side by side and I had forgotten how useful it can be to take a load of screen shots and see the different approaches that people were taking in terms of photography.

The photos on sites like Boden, Mamas & Papas and H&M were so dominant it got me wondering at what point the photos became available within the design process. I can just imagine how spare the wireframes must have looked with huge boxes with crosses in them everywhere!

Another interesting observation was how disjointed the photographic style can become on sites like Amazon which essentially act as an aggregator, as opposed to say Mamas & Papas where all the photos fit a clearly defined style guide.

I’d recommend creating a wall of screenshots early in the design process to give you a very quick feel for patterns and opportunities to differentiate yourself from the competition.

  1. jchudley posted this
A blog celebrating photos, the unsung heroes of great user experience design, by James Chudley (@chudders)

My 60 page 'Usability of web photos' ebook is available for only £2 / €3.50 / $3.50.

A percentage of every sale will go to Children in Need.

Buy Usability of web photos

view archive