We are being asked more and more by our retail 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, 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 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’.
Navigation & Filtering Responsive Design Best Practice
- 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 use the soon to become fully established design pattern of a ‘3 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 a more information driven experience with smaller images
- 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 do a fantastic job of focussing 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 users position whilst they are selecting filters, Nixon are ticking many of the boxes for best practice – I do love their 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 Responsive Design Best Practice
- 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 – Nixon provide big impact, high quality images which on desktop in particular means you get one of the most visually 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 are one of the retailers who recognise the importance of delivering high quality editorial content in both written and visual form. Their product pages typically feature both text and video content to engage visitors and sell their brand and proposition
This is the 1st of 2 articles looking at the user experience of the responsive Nixon website. I was initially drawn to their 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.