PRWD

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

Summary

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.

Filtered navigation is widely adopted as one of the best ways to let users browse through large categories of products. It really doesn’t need to be complicated, but there are a few things that you should get right. Here are our top tips.

1. Indicate the number of products in each filter-category

(Schuh)

It’s a really simple one, but it’s surprising how often this isn’t done. Indicating next to a filter-category how many items a user can expect to get helps users to make decisions about whether a category is worth selecting. This can reduce disappointment for users who otherwise might select a category and then find fewer items than they hoped for.

2. Allow multi-select

(Monsoon)

This is nearly always the first thing that we check for when reviewing filtered navigation. We find that for some users it is vital to be able to configure filters to show products from a few important filters. We’ll take no excuses. Multi-select is a must.

3. Visual Filtering – Allow users to remove certain options from the filters

(ASOS)

Visual filtering allows user to change their filter settings from the product listing without interacting with the filters. The example above from ASOS (pretty much the only retailer we see doing this) shows that when you hover over a product, you can choose to ‘Hide this brand’ which de-selects that brand from the brand filtering. This allows users to even more quickly edit the products displayed without have to read through large lists of filter settings.

4. Give users control when entering values

(Speedo)

In recent user testing we have found that users want control over how they enter pricing. Some preferred to have a flexible slider, while others wanted to manually enter their own values. Suggested pricing bands came out worst because they offer the user least control.

5. Provide filters that matter to customers

Not so much feature or functionality, but we find that asking users which filters they would like to use can be an eye-opening experience and can reveal some user priorities that had not been previously anticipated. Adding new filters or changing the prominence of existing filters can really benefit from user feedback. It is also important to add analytics tracking to filter in order to identify which filters are most widely or commonly used.

6. Provide more information if filters are complex

(Schuh)
Sometimes the names of the filters themselves are not easy for users to understand. In the example above, Schuh have made it easy to access more information about sizing conversions.

We have seen other examples where retailers provide a link to their size guide, which is a great idea. We have also identified retailers who have filters with complex or technical options that would benefit from a quick modal pop up with explanations or clarification. Why not make it easier for users to filter accurately?

7. Maintain users filter choices

Another no-brainer, but we see too many examples of users navigating back to lister/sub-category pages only to find that their filter selections have reset. This can really frustrate users and reduces their patience with the website and ultimately the amount of time that they are likely to spend browsing.

BONUS – Introduce social proof and consumer behaviour tailored filters

(Lakeland)

Often overlooked, one of our clients that recognises that filtered navigation can be used to provide visitors with recommendations based on not just product specific attributes but different types of product categorisation. In this case visitors can choose to look at what are the customer favourites in this particular range (have we ever mentioned that social proof is one of the most persuasive techniques you can use to encourage visitors to buy). In addition they can filter out only the new products, or interestingly just the products which have video reviews.

When we conducted user research with Lakeland following the launch of their website this was one of the many recommended improvements, as without this visitors were often not realising that some products did have video demonstrations.

What do you think?

If you agree, disagree or think we’ve missed a key one, let us know in the comments below.

Introduction

On-site surveys are sometimes widely discussed, but we find that too few companies are using them to gain data and insights directly from their customers. In this post we will review three great tools that will help you get started.

Qualaroo (formerly KissInsights)

Strengths:

• Fully customisable questions. Create a survey from scratch or work with survey recommendations based on your type of website.
• Custom targeting that allows you to select who sees the surveys and nudges, for example: only returning visitors, anyone who has already visited at least X pages on your site.
• Free to get started and reasonably priced as you move up through premium, plus and high-volume packages
• Strong visual design that will complement high quality, professional websites. It comes with attractive light and dark themes.
• Works with http and https pages
• There is a handy ‘send this code to your developer‘ option when creating a survey.
• Easy to use dashboard area.

Weaknesses:

• Not a great platform to ask more than 2 questions
• Is less likely to capture responses on exit compared to some other solutions

Price:

Free – $49 /month

$0 for up to 100 responses, $29 per month for up to 1000 responses and $49 for 2000 responses and no branding.

Who uses it?

Intuit, MavenLink, Internships.com, Groupon, ReTargeter, Just Answer.

Should you use it?

If you want answers to short specific questions, that can be highly customised in content and display settings, then Qualaroo is a great option.

4Q

Strengths:

• Simple, but incredibly powerful set of questions.
• Great for benchmarking task completion and user satisfaction over time.
• Tools to analyse users’ reasons for visiting the website against task completion and satisfaction scores.
• Find out what users love about the website, or which areas could be improved.
• Collect comment on what users like and what could be improved.
• Easy to add to your website.
• Simple integration with Google Analytics.
• Control invitation rate.
• Works with http and https pages.
• Advanced interface customisation on plus and premium packages.

Weaknesses:

• Less customisation and flexibility than other on-site survey tools, although this appears to be a deliberate choice.
• The styling of the basic version is not as attractive as other solutions.

Price:

$19 – $399 /month

The basic package starts at $19 per month (or you can use the 15 day free trial), you’ll be able to collect 250 survey responses. The Plus package allows 1000 responses and the Premium package raises that to 5000 responses.

Who uses it?

Unknown

Should you use it?

If you are looking for benchmarking of key statistic like task completion rate and user satisfaction, then 4Q will be a great option for you. Also, if you are looking for positive and negative user comments that will help you to improve your website then 4Q has a helpful filtering system that will allow you to analyse comments.

Kampyle

Strengths:

• Reasonably priced SME packages
• Wide range of additional features for enterprise customers.
• Google Analytics and Adwords integration (on some packages)
• Built in response system to allow you to interact with users.
• Wide range of features that can be customised using their form wizard
• Shopping cart abandonment tool
• Works with http and https pages

Weaknesses:

• Kampyle is more customisable and therefore perhaps not as simple to use as some of the simpler tools.

Price:

$99 – $499+ /month

The bronze package starts at $99 per month (or you can use the 15 day free trial), you’ll be able to collect 200 survey responses. The Silver package allows 500 responses and the Gold package raises that to 1000 responses. Enterprise solutions are also available that can be customised with additional features.

Who uses it?

Mozilla Firefox, Orange, O2, Telstra, Clarks, Econsultancy.

Should you use it?

If you are looking for an enterprise level solution with a huge range of features then Kampyle might be the way to go.

Conclusion

As you can see, each tools has its uses and we would recommend all of these to different clients with different requirements. The main thing is, if you are not currently running an on-site survey tool in any capacity, we would recommend that your try one of these tools as a relatively cheap and simple way to collect user insights feed this information into the decisions. If you want to suggest any other tools or offer your feedback on any of the above, just add a comment below.

Visit their websites to get started

Qualaroo: visit website

4Q: visit website

Kampyle: visit website

I’ve recently had the pleasure of speaking at the Internet Retailing Conference 2011 in London in one of the 8 workshops that took place.

I was invited to speak by one of our partners, remote usability testing service WhatUsersDo. I chose to speak about remote and moderated usability testing. Below the slides is a list of useful links providing tips and best practice about usability testing, whether moderated or remote.

My slides below look in particular at:

• how important is usability testing?
• a comparison of moderated & remote usability testing
• what business questions can usability testing answer?
• plus in the workshop I carried out a moderated test session with one of the attendees

Useful links on usability testing

• 67 questions usability testing can answer
• User Testing 101 – Good, Better, Best Approaches
• 5 Tips When Conducting User Research
• Lab Based User Testing – Objectives, Methodology, Deliverables
• The business benefits of user testing
• 9 women x 9 hours = 9 usability insights
• Conversion rate optimisation tips and best practice articles
• How Appliances Online increased sales by 9.5% through usability testing
• How Speedy gained strategic business insights through usability testing
• MMU’s fully featured usability testing lab in Manchester

Following on from my article I published on Econsultancy ‘Shopping Basket Best Practice from ASOS’ (link under the slides), I was delighted to be asked to be the first person to present at the very first Conversion Thursday Manchester on Thursday 24th February 2011.

The meet-up was superb with some of the great and the good of the analytics and conversion industry attending. Below are my presentation slides.

Useful Links

• Shopping basket best practice from ASOS
• ASOS
• over 15 articles on e-commerce usability best practice
• Conversion Thursday Manchester (and the event Twitter tag #CTMan)
• E-commerce user testing service
• E-commerce usability & best practice training

Details are below of an upcoming event I’ll be speaking at, at MMU in Manchester. I must say I’m really looking forward to it – there should be a good mix of students, industry professionals, agency staff and client side people attending.

With 300 tickets available in all it should be a pretty well attended event.

“Usability & User Experience 101″

• When: Thursday, February 10, 2011 from 5:00 PM – 7:00 PM (GMT)
• Where: Michael E. Porter Lecture Theatre, MMU Business School, Aytoun Street, M1 3GH Manchester
• Who with: Paul Rouke, Head of Usability at PRWD
• Twitter Hashtag: #UX101
• Register for FREE: http://saschoolux101.eventbrite.com/
• Tickets: At the start there were 100 tickets available for students and 200 for the rest of industry

Event Overview

In this event, Paul will introduce you to usability and user experience, and provide you with a range of insights, tips and best practice that can be used when working on web projects.

The talk will cover key site areas such as homepages, landing pages and enquiry pages, and will include time for questions both during and after the talk.

You’re encouraged to tweet about the talk before, during and after, using the hashtag #UX101.

About Paul Rouke

Paul is Head of Usability and founder of PRWD, a Manchester based usability consultancy who help businesses generate more leads and more sales from their websites.

Paul is a usability consultant, trainer and speaker who absolutely loves sharing tips, advice and customer insights to SME’s through to blue chip companies on how they can improve their usability and on-site conversion rates.

Paul works with a range of well known and respected brands including Speedo International, Lakeland, JD Williams, Econsultancy, Smart Insights (run by Dr Dave Chaffey), The Royal Mail and The Scout Association who all recognise the increased sales and profit they can gain by investing in improved on-site usability to improve their conversion rates.

Paul is one of Econsultancy’s well respected training team, and he delivers two courses, Usability and User Experience and E-commerce Usability and Best Practice. Paul also writes articles for Econsultancy’s award winning blog, sharing tips, advice and recommendations.

In addition to working with Econsultancy, Smart Insights co-founder Dr Dave Chaffey brought Paul in to be the expert commentator on usability and conversion optimisation for Smart Insights, a digital portal and consultancy who provide advice and software to help businesses succeed online.

Paul’s business PRWD also has a usability blog sharing tips and advice and company news. You can follow Paul on Twitter for his latest insights, links and commentary on all things usability and conversion optimisation, or if you prefer you connect through Linked In.

Who We Are Looking For

Are you a passionate, creative and detail driven visual designer looking for a challenging role as a user experience designer? Or are you looking for your first real commercial opportunity to put your skills, creativity, passion and flair to the test? If either of these is you then you could be just what we are looking for.

Working closely with our User Experience Director Paul Rouke and our web developer, you will bring a completely new, creative dimension to our business. Whilst you will bring your own experiences and ideas on website user experience into a range of client projects, you will also be encouraged to learn and develop from working closely with Paul, further developing your awareness and expertise in web usability and best practice.

You will be responsible for designing the user experience for a range of client websites, both content driven and e-commerce, as well as applying your skills and creative abilities in helping to further develop our benchmarking application. This application allows us to evaluate and benchmark websites based on usability principles and best practice. In addition you will be involved in designing other web applications that we choose to develop based upon commercial opportunities.

Your background will have taught you that its not just how websites and applications look and feel that make them successful, its how they actually work for end users. With this in mind you’ll need a good understanding of typography, spacing, page layout and general website design best practice.

Alongside your creative abilities we are hoping you will also have some front end development skills, in particular xHTML, CSS and JavaScript.

Your salary will depend on your experience, although we aren’t looking for someone with years of industry experience – instead you will be expected to build on your existing skills and experiences, and learn and develop as your daily work in user experience design and usability increase.

If this sounds like you, please send through samples of your previous design work and a little more about yourself to designer @ prwd.co.uk so we can assess your suitability for the position.

Please note we won’t be dealing with recruitment agencies.

Full Job Specifications and Responsibilities

Essential design experience and capabilities:

• Experience using Adobe Photoshop
• Experience using Adobe Illustrator
• Understanding of design theory, typography, colour and layout to create clean inspirational designs
• The ability to design user interfaces from paper prototypes through to finalised visual designs
• Understanding of on-site search engine optimisation approaches and techniques

You will benefit from having:

• Experience of using Axure Pro
• Experience of using Google Analytics
• Experience of front end web development – xHtml, CSS and Javascript

Key responsibilities:

• Visual design of user interfaces for content managed websites
• Visual design of user interfaces for e-commerce websites
• Creation of assets for websites and web applications ready for use by our developer
• Creation of website style guidelines where necessary
• Work as part of project teams to deliver to demanding client and user requirements, and project timescales
• Provide accurate and realistic effort estimates and manage resulting expectations
• Collaborate with our user experience director on website design projects, particularly those where we are using our user-centered design process
• Work closely with our web developer to deliver client websites on time and on budget
• Meet with and speak to our clients throughout all project stages
• Design and develop brand logos, brand identity and other illustration work where necessary
• Write articles for our blog relating to your work and other business activities where suitable
• To undertake other duties as necessary including duties appropriate to the effective running of the business, include other none directly related housekeeping tasks

Due to the challenging nature of this role, further key responsibilities may be added over time where necessary.

About you

The successful applicant will be:

• Comfortable speaking directly with our clients
• Enthusiastic – somebody happy to be working and wants to go the extra mile to create quality work
• Passionate about providing first class service and support to our customers
• Somebody who can have fun and is happy to help out with other jobs when called upon – and can also pro-actively pitch in with clear ideas in open discussion
• Keen to work with and try new technologies
• Up to speed with the latest developments in the industry – somebody who uses social media, social networking and other techniques to keep on top of the latest developments
• Somebody who puts the end user at the heart of an engaging web experience
• Somebody who brings in new ideas, has a passion for what they do and wants to be at the forefront of their profession

We are looking for an individual whose honesty, integrity, initiative and hands on approach to problem solving shines through. Key personal characteristics include a confident ability, reliability, flexibility and a willingness to contribute to a team working environment.

Personal development

You will have a strong desire to develop yourself personally whilst continually advancing your visual design and creative capabilities. In addition, over time through your experience of working with Paul Rouke, you will be expected to be able to provide usability advice and consultancy to our clients. In summary you will be expected to play a significant role in the development and growth of our business.

What we offer

• Salary appropriate to experience
• A relaxed dress code, although there may be occasions were more formal appearance is required
• Modern working conditions at PRWD’s office, close to Manchester city centre
• Standard working hours of 37.5 hours per week
• 25 days holiday per year (plus statutory bank holidays)

Are you interested?

If so, please send through samples of your previous design work and a little more about yourself to designer @ prwd.co.uk so we can assess your suitability for the position.

Please note we won’t be dealing with recruitment agencies.