Key principles for responsive design in ecommerce

There are far too many excellent articles out there already explaining the key principles of responsive design, so here are just three key principles specific to RWD in ecommerce:

  • Provide visitors with the same tools and features for browsing and filtering across all devices.
  • Use progressive disclosure to focus the visitor’s attention on the most influential and important elements whilst simplifying the user interface, particularly on mobile.
  • Provide both device specific user interactions and give visitors the ability to choose whether they have a richer or simpler browsing experience.

What Nixon is doing right

Navigation and filtering

Of course having a solid, well thought out and flexible navigation and filtering experience is crucial to user experience for visitors when shopping online.

Nixon is delivering on this in the following areas:

Consistency

The same filters are available across all devices (some retailers who have gone responsive choose to remove certain filters when on mobiles for instance – don’t do this!).

Simplification

Nixon uses the soon to become fully established design pattern of a ‘three bar’ tool icon in the header area on mobile to signify access to the primary navigation and tools. This simplifies the main viewport allowing the products more vertical space to engage visitors.

Flexibility

On desktop and tablet visitors have the choice of the grid format based on whether they want a more visual browsing experience with bigger images, or smaller images so a more information driven experience.

Intuitive

Primary colour swatches are provided rather than colour names, providing visitors with an immediate reference point for the colours as well as not overwhelming them with too many similar colours (tip – we find that up to 15 colour options works best).

Clarity 

Nixon does a fantastic job of focusing screen space on the most important content. Get down to mobile in landscape and after the logo you see category area, products currently being displayed, sort options, large filter area and then straight on to products – no fluff at all.

Filtering best practice

From allowing visitors to multi-select filters from the same filter group, to maintaining the user’s position whilst selecting filters, Nixon is ticking many of the boxes for best practice.

I do love the subtle touch on desktop which collapses the filter area if you scroll down the page to start viewing products, as they recognise that your behaviour has now shifted to browsing products rather than filtering.

Speed

Whether this is opening and using the mobile flyout menu or applying various filters across any devices, the speed of the browsing experience is excellent and really helps generate a positive, enjoyable attitude when shopping.

Product Page

Following on from the many excellent elements of Nixon’s browsing and filtering experience, once visitors are on the product page they won’t be disappointed.

Here are some of the highlights that Nixon is responsively delivering for visitors…

Cross selling

The ability to quickly move to other products in the range you are in is great, both in the main product image area on desktop and lower down the page on mobile.

Image quality and zoom level

Nixon provides big impact, high quality images which on desktop in particular means you get one of the most visual rich experiences when viewing enlarged images.

On saying this, zoom on tablet does need to be improved, and providing this facility on mobile would allow visitors to get closer to the details of products on these devices.

Image variety

Another best practice element of product pages is to provide visitors with enough images to get a true understanding and appreciation of products, and Nixon provide a range of alternative images for just this purpose.

Subtle positioning

Visit a product page on your mobile and you are positioned so that you can’t see the browser bar or the thin Nixon header area – you are immediately focussed on the product title and image

Subtle re-positioning

Try this yourself on a mobile – when you change the colour of a product there is a subtle position change that takes you up to the updated product image. It’s not rocket science but the simplicity at which Nixon deliver this is a super UX touch.

One big primary CTA

Across devices there is no argument as to what it is Nixon are wanting you to do with their add to cart button. If I’m being picky perhaps it could be full width on mobile

Editorial content

Nixon is one of the retailers who recognises the importance of delivering high quality editorial content in both written and visual form. The product pages typically feature both text and video content to engage visitors and sell their brand and proposition.

Summary

This is the first of two articles looking at the user experience of the responsive Nixon website. I was initially drawn to the website due to one of our clients asking us specifically to help them deliver a best in class navigation and filtering experience with responsive design.

As more and more retail brands are going responsive, hats off to the Nixon team for delivering some exceptional examples as described in this post.

Questions to you

  • Which other retailers do you feel are doing responsive e-commerce really well and why?
  • Are there any other good examples of providing multi-faceted navigation responsively?
  • Which retail brands do you expect will be fully responsive by 2014?
  • Is responsive design just a fad and we should all move along?!