{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

We are being asked more and more by our clients to provide support as they move towards responsive design. In particular our retail clients are aiming to deliver ‘best in class’ responsive ecommerce experiences for their visitors.

Couple this with them being committed to an optimisation strategy, and we are extremely excited about the potential to improve their online performance.

But the challenge is, with so few larger retailers with large product catalogues already having moved to a responsive design (and this doesn’t mean the ones that have are necessarily doing it well) where can inspiration be gained to deliver a best in class experience?

Enter stage left Nixon, which starts its about page text with ‘We make the little shit better’.

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?!
Paul Rouke

Published 29 April, 2013 by Paul Rouke

Paul Rouke is Founder & CEO at PRWD, author and a contributor to Econsultancy. You can follow him on Twitter or hook up with him on LinkedIn.

35 more posts from this author

Comments (14)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

nel mooy, marketing director at towergate

Although not retail, there are commonalities because of the large number of products and product categories:
www.towergateinsurance.co.uk is an insurance site that has been built using responsive design

over 3 years ago

Avatar-blank-50x50

Peter Drakes, Business Analyst at Session Digital Ltd

Whilst the points made are good, the execution fails! Reduce the browser window to just above tablet size and you lose text until the 'tablet' view kicks in.

This is the difference between true responsive design and merely 'adaptive'...

:)

over 3 years ago

Avatar-blank-50x50

Mat Diss

The site looks nice but hits the usual problems with client side responsive. Firstly, the mens watch page scrolls on and on and on - how many users will ever get to the items at the bottom? Secondly, the page is huge. The mens watch page is 2MB is size - and because it's designed with responsive, the phone has to be sent the whole 2MB of data (no thought for network connection) and them promptly ignores most of it. This is not a good user experience.

Much better to do server side responsive where the server decides what is best to send to the device, reducing page weight and enhancing user experience.

over 3 years ago

Avatar-blank-50x50

Chris O'Donoghue, Senior Optimisation Producer at Virgin Media

I think http://www.currys.co.uk have had a good go at a responsive ecommerce site. They have a good merchandised search function across all devices and clear user friendly navigation. My one criticism is the grid layout appears to be a bit restrictive and there is a lot of wasted space on some of pages.

over 3 years ago

Avatar-blank-50x50

Jonathon

Brilliant article, its great to see a company really absorb responsive design. But one thing I noticed, for the usability of the website, is the £££ signs for low to high price filter really going to work?. Would people know how to use it?

Is it one of those systems where it just jumps out at you to what it does and how to use it?

Im not sure but the target market that the website has been designed for must know.

Thanks for the article.

Jon

over 3 years ago

Avatar-blank-50x50

Hamza

"soon to become fully established design pattern of a ‘three bar’ tool icon"

I wouldn't want to risk any portion of my mobile visitors not being able to navigate my site by using something that's not yet established.

How about replacing the 3 bars with a short descriptive word such as "menu" until someone else has done all the trailblazing and educating?

over 3 years ago

Stuart McMillan

Stuart McMillan, Deputy Head of Ecommerce at Schuh

@Matt Diss, Google are fairly explicit in this matter, their recommendation is to deliver *exactly* the same HTML/CSS/JS to all devices and then use the CSS & JS to adapt it. https://developers.google.com/webmasters/smartphone-sites/details

over 3 years ago

Paul Rouke

Paul Rouke, Founder & CEO at PRWDSmall Business Multi-user

@Nel - thanks for being the 1st to comment and for linking to your I presume failrly new responsively designed website. It looks like some good ideas went in to that. Whay type of uplift have you seen in visitors engaging and requesting a quote? I expect your new website is significantly more user-centered than your previous one?

@Peter - thanks for reading through the article and taking a look at the Nixon website on your desktop. Are there any areas of the website in particular you feel they are getting right? Also do you have one or two examples of retailers with responsive sites?

@Matt - thanks for reading through the article and doing some page size testing. From my experience using the site on mobile on 3G, during which I took most of the screenshots for this article, I didn't experience any delay in browsing and product page rendering, although perhaps there are some specific products which have much larger page weights that I didn't go on.

@Chris - thanks for having a read and for your comments. Curry's is one of the main examples of a large multi-channel retailer who has gone responsive. I'd really like to see them offering multi-select on all their filters across devices, but as you say they do have good primary and secondary navigation that is very quick across devices.

over 3 years ago

Paul Rouke

Paul Rouke, Founder & CEO at PRWDSmall Business Multi-user

@Jon - thanks for your comments, much appreciated. I must say I've hardly seen any retailers adopt this same approach for displaying price hi-low and low-high sort options. A pure-play retailer we have been working with does have a competitor that uses the same £/££/£££ visual symbol to signify whether a product is high end or low end, but in user testing people much preferred simple flags such as 'high end' or 'entry level'.

As you say without having spent time with the Nixon target audience using their site its a bit of an unknown, but I expect that it is something that people would pick up quite quickly, especially with them positioned right next to the other sort options.

@Hamza - adding the word 'menu' underneath the menu icon would be the quickest way to satisfy the concern around some visitors on mobile not realising there is a menu available if they press the symbol. I suspect a failrly high percentage of users who visit retail sites on their mobile also use the likes of Facebook who were one of the 1st mainstream brands to use this icon to represent the main menu.

@Stuart - thanks for having a read and for your clarification comment. Speak soon

over 3 years ago

Avatar-blank-50x50

Peter Drakes, Business Analyst at Session Digital Ltd

@Paul As I stated the points you highlight are good - the thought and thinking behind the site is OK and as a client and a user I would be generally pleased (more often that not these things are not how we (as ecom experts) would like them due to client requirements and 'meddling'!)

As always, especially on eConsultancy, people pick on the 5% that is wrong, not the 95% that is right - I don't think my comments are any different in that regard! whilst I disapprove of words

My original point being - it isn't really 'responsive' (although there is heated debate on whether responsive is part of adaptive or vice versa). My understanding of responsive however is that regardless of the device screen the assets on the browser rearrange to display optimally.

Nixon simply has three different views for a desktop, tablet and mobile (which I believe is called 'adaptive') - so if a manufacturer brings out a different sized tablet or phone, the experience will not be optimal for the user and potentially a new layout needs to be added.

over 3 years ago

Avatar-blank-50x50

Peter Drakes, Business Analyst at Session Digital Ltd

PEBCAK!
* Whilst I disapprove of words.... and phrases such as masterclass and best practise being used, especially so frequently, this is a good start for a lot of brands finally stepping into the mobile and multi-screen space.

over 3 years ago

Avatar-blank-50x50

nel mooy, marketing director at towergate

Hello Paul

We launched end December and have seen a significant uplift in leads, but have to say that is due to our overall strategy not just our responsive design. Overall it has allowed us to be more appropriate per channel and indeed therefore more customer centric, for instance by displaying geographic numbers on mobile.

over 3 years ago

Avatar-blank-50x50

Peter Drakes, Business Analyst at Session Digital Ltd

@paul - sorry couldn't mention before - this is our most recent responsive design although the new changes aren't live yet on most brand sites...

http://www.marketingweek.co.uk/news/pz-cussons-readies-digital-push-across-brand-portfolio/4006731.article

over 3 years ago

Avatar-blank-50x50

Sherwood Botsford, Midship's mite, bosun tight & crew of the captain's gig at Sherwood's Forests Tree Farm

How do you handle large hierarchical menus? My web site currently has 270 pages, some of them 0ver 2000 words.. Menus are 3-5 levels deep, The site is largely editorial: It's job is to teach people enough to choose the right tree, give them ideas about landscaping etc. Currently my layout is much like a magazine -- text flowing around captioned images.

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.