In the article I’ve taken a look at the following high street and pureplay retailers from a usability perspective…

The pureplay fashion retailers I’ve taken a look at are:

• ASOS
• Net-a-porter
• My Wardrobe
• The Outnet
• Koodos

The high street fashion retailers I’ve taken a look at are:

• Harvey Nichols
• Miss Selfridge
• Topshop
• Next
• New Look

The five questions I posed to each of these retailers are:

1. How seriously are they taking cross-selling and up-selling in order to encourage higher average order values?
2. Do they make standard delivery costs clear before you get into the actual checkout process?
3. Are payment options and cards accepted clear prior to checking out?
4. Have they enclosed their checkout as a way of potentially reducing checkout process abandonments?
5. Do they provide clear customer service contact details during the checkout process?

Take a look at the article and see how these retailers stack up!

If you are a fashion retailer you might also like to read about the Online Fashion 100 event on the 17th June in London, organised by Leon Bailey-Green.

Having recently delivered in-house e-commerce training and on the eve of a public training course with Econsultancy, I thought I’d share a fine example of an online retailer following usability and best practice principles to drive improvements to their conversion rates and customer retention.

Enter The Boook Depository. Only a young pureplay brand, launched in 2004 and with a recent redesign in 2009, The Book Depository certainly does alot of things right when it comes to providing an enjoyable, intelligent and usable shopping experience.

A screengrab of The Book Depository website, good usability and best practice

Using our new e-commerce benchmarking application I’m looking forward to comparing how The Book Depository fair to other online book sellers. One thing is for sure though, their approach of always tackling the question “what do our customers want” has led their e-commerce experience to be a fine example of good usability and following best practice.

Which online retailers would you put forward as more examples of a great user experience?

Top Tips for Increasing Your E-commerce Conversion Rates

Below are a few top tips for improving both the usability of your e-commerce site and small changes which can help improve conversion rates. Further resources are provided at the end of the article.

Search and Navigation

• Make search an integrated and intelligent piece of functionality – if it isn’t, visitors will quickly dismiss the tool as something that will help them find what they want, and in turn could consider jumping over to a competitor site.
• Provide predictive/suggestive search results – benefits include reducing the number of ‘no results found’ pages, promoting saving information which will appeal to shoppers, plus exposing some of your product catalogue which the shopper may not have realised existed
• Allow visitors to filter your product range by relevant attributes (price bracket, specification, colour, size etc) – the easier you can make it for shoppers to find products which match their requirements the more likely they will be to purchase from you

Shopping Basket

• Don’t hide your delivery costs until the checkout process – even if a shopper can specify a more expensive delivery option in checkout, at least ensure your standard delivery charges are provided
• Make it clear what payment options are available, before the checkout process – especially important if you don’t accept debit card payments like www.booking.com
• Promote free delivery options clearly, if you provide them – this can play a significant part in persuading visitors to both make a purchase, but also increase their order value if it means triggering a free delivery level

Checkout Process

• Rule number 1 – enclose your checkout process. There are a range of key reasons why this is so important for retailers, one of which is ensuring you are focusing the shoppers mind on the 1 key action you want them to do – place their order with you. More advice on why you should enclose your checkout process can be seen in the resources at the end of this article
• Make it absolutely clear the levels of security you provide – concerns over credit card fraud are here for the long term, and you should make sure your visitors have every confidence in you to keep their details secure
• Pay close attention to how to present forms – by adopting form field best practice you make the checkout process more streamlined and you keep the shopper in a positive buying mood. Straight to the point error messages that point the finger at the visitor is one way of putting a small usability barrier in front of them

All Areas, Especially Shopping Basket and Checkout

• Carry out split testing and multi-variate testing – alongside best practice principles, this is one of the primary ways of affectively measuring the differences in click-throughs and engagement when adopting different designs, buttons, colours and messages

Looking for More Best Practice Tips and Advice?

If you are interested in gaining a much greater understanding of how small but integral changes can be made to e-commerce sites to help improve conversion rates, then the upcoming training course on the 23rd April in London is for you.

There is also funding currently available which could cover the cost of the course.

Below are further details on what will be covered in the days training course:

Product page best practice

• how to introduce best practice into your customer experience
• how some of the biggest e-tailers are following or defining best practice
• how to cross-sell and up-sell affectively
• how to introduce persuasion architecture

Shopping basket best practice

• pros and cons of the most popular implementations
• understand the impact you can have on consumer confidence
• how to channel customers into the checkout process

Checkout process best practice

• the rational behind enclosing the process to reduce checkout abandonments
• a framework for delivering a best practice checkout process
• how to reduced usability barriers to completing forms during your checkout process

Advanced user experience techniques

• how to engage and delight customers with memorable interactions

Useful resources

• best practice tips for search implementation
• benefits of suggestive/predictive search (scroll down the page)
• benefits and best practice for multi-faceted navigation, for both users and retailers
• the importance of enclosing your checkout process
• form field best practice, vital for checkout processes

Full event details and resources

You can view further information from my presentations, including the video clip on User-centered design from a companies perspective, at the events page on our main business site.

In addition below are the presentations I gave on the night…

An introduction to usability

Usability for customer facing websites

Usability for internal software systems

What is multifaceted navigation?

In short this is an advanced navigation method where shoppers can filter out large sets of products or content by a variety of product attributes (sizes, colours, features, price range, specifications).

User benefits of multifaceted navigation

1. they can choose to be specific about the products which they are being shown
2. your users are empowered by the way you allow them to dynamically manage your product database
3. users can compare products by specific features, for instance when looking for a TV you can specify to see only TV’s that are 1080p and that are 46 inches
4. your users can shop how they are used to in a good high street store. ie. they tell the salesperson that they have so much to spend and are looking for particular product features or sizes, and they are then shown the products which suit their requirements
5. your user can find the products specific to their needs in a more efficient way, speeding up their browsing journey in what may well be a small space of time they have to shop online
6. your users don’t need to to visit multiple product pages and read each product description to know whether it matches their requirements
7. long, scrolling product listings pages (pre-product page) are eliminated as they can filter out the products which don’t match their needs
8. combined with the more widely used sorting techniques (price hi-low, price low-hi, latest, bestsellers, closest to your location ie. for a hotel) faceted browsing providers users with all the tools they need to hone in on the products/items which they are in a position to purchase
9. potentially confusing and bewildering amounts of products or items can be managed in a way which allows the visitor to focus their shopping experience on just the items which are suitable to them
10. users will reflect positively on the browsing experience with your website, in turn reflecting less favourably on your competitors who don’t provide this type of advanced navigation

Best practice advice

• Indicate how many products will be displayed when choosing a specific filter – users not only will get an understanding of your catalogue size but they will see whether by filtering by a particular attribute they will be narrowing their potential options too much to give them enough choice to make a buying decision
• Provide the ability to choose multiple filters across different attributes – this ensures that users have a truly dynamic and personalised browsing experience rather than only filtering a single attribute ie. colour or size
• Allow the user to switch filters on an off on the same user interface, rather than having to click back to be shown the different filters available for a particular attribute
• Encourage users to use this form of navigation with a clear, user friendly interface, rather than this form of advanced navigation being lost in a cluttered navigation menu
• Where applicable provide slider filters to allow users to specify exactly the upper and lower limits of a particular attribute they want to control, such as the lower and upper limits of their new house budget, rather than limiting them to specific tears of prices ie. £200,000 – £300,000
• Allow a user to select multiple filters for 1 attribute, allowing them to be even more specific in the features they are looking for within a range of products (whether this be clothes, insurance, holidays or houses)
• Don’t overlook the overall usability of your web application just to include multifaceted navigation – if implemented poorly these advanced navigation options can confuse and frustrate visitors

Typical web applications that benefit from multifaceted navigation

• E-commerce stores – selling a large number of products in each category range, allowing users to filter the products to focus in on what suits their budget and requirements
• Holiday, flight and hotel websites – users can input a variety of requirements (for instance, distance from beach, hotel star ratings, user reviews, near by attractions, distance to town centre) and see hotels which match these specific requirements
• Estate agent, housing websites – users can specify a variety of criteria (price bracket, number of bedrooms, distance from a local amenity, front or back garden, conservatory) and be presented with only the houses which satisfy the different criteria
• Price comparison sites – dependant on whether the user is looking for car insurance or their next mortgage, they can specify their unique requirements
• eCRM systems – where you are looking to filter out customers which match a series of requirements, such as contact method preferred, industry, annual budget and distance from a particular city

Examples of multifaceted navigation

Multifaceted navigation on Argos.co.uk

Multifaceted navigation on Hotels.com

Multifaceted navigation on Hotels.com

Multifaceted navigation on Uswitch.com

Multifaceted navigation on Skyscanner.net

Examples of where multifaceted navigation would significantly enhance the user experience

Kodak.com, a site which would benefit from multifaceted navigation

Currys.co.uk, a site which would benefit from multifaceted navigation

Homes4U.co.uk, a site which would benefit from multifaceted navigation

Mytravel.co.uk, a site which would benefit from multifaceted navigation

Advanced techniques to further enhance the users experience

• Maintain users key filter selections when they return to the site or begin their browsing process again, such as the price range that suits them or their preferred holiday destinations, for instance
• Where applicable provide sliders to allow for unique values to be chosen for the likes of price ranges, rather than having specific brackets of prices ie. £50 – £60
• Use interactive colour pickers as a more engaging way for your users to filter your product range.
• Consider user generated tagging, allowing your users to tag products/items as they see fit which in turn provides completely new attributes on which to filter content within your site

Further reading on navigation techniques and best practice

• tagging content and providing tag clouds to represent large sets of data
• suggestive/predictive search
• dynamic categorisation and shopping by user profiles and customer groups
• Navigation comparison between Kodak and Fujifilm

What are your experiences of multifaceted navigation?

I would really like to hear about your experiences, both as users, faceted navigation providers and from people on the client side involved in implementing navigation methods.

• How beneficial do you find this style of navigation?
• What sites do you feel are pushing the boundaries in navigation?
• What further user benefits would you add to the list above?

This follows our recent posts on what symbolises customer conversion, an inside look at brand concepting, and strapline brainstorming for UCDcommerce.

UCDcommerce Website Features

If you’ve not already taken a look at the UCDcommerce site, below is a summary of what we have decided to launch with:

An introduction to the platform, explaining how UCDcommerce allows us to deliver User Centered Designed e-commerce solutions

A page dedicated to why your business will benefit from using UCDcommerce, including the statement that “your business recognise the importance of user experience for increasing brand credibility, conversion and retention”

A page showing prospective e-commerce customers exactly who is behind the platform, the amount of credibility and blue chip experience we have, and our expert usability services

Additional areas we have included are:

• A definition of User Centered Design (UCD) for people who aren’t familiar with this method of designing user experiences
• Dynamic links into our most recent articles, on the subjects of UCDcommerce, retailing and best practice

Onwards and upwards

Alongside the development of our Content Management System and ERP (Enterprise Resource Planning) system, the continual evolvement of UCDcommerce will now begin in earnest, as we attract the right type of serious online retailers to our business.

The e-commerce site, selling a complete range of packaging materials and supplies, from masking tape and bubble wrap through to cardboard boxes and stretch wrapping machinery, has been designed by myself and developed by one remarkable technical architect and developer, Sam Clark. You may like to read Sam Clark’s initial thoughts on the e-commerce platform.

At this stage you may be wondering ‘why develop a completely new framework and platform when there are so many existing e-commerce providers out there?‘.

And my answer, as user experience director of PRWD, is this…

Our clients, both existing and potential, demand a scalable, best practice driven, intelligent and user focused e-commerce platform on which PRWD can develop bespoke e-commerce solutions to revolutionise their business online.

To give an example as to the type of e-commerce platform which may have supported this answer, our 1 main consideration was becoming a partner with Elastic Path, who have developed E-commerce Software which is used by the likes of Samsonite and Bond & Bond. BTW having looked at these 2 e-commerce sites I must stress they don’t follow our principles on e-commerce findability and user experience, but they may be worth a look all the same.

Complete control over the evolution of our E-commerce Platform

Rather than the partner route, our commercial decision was to develop a new framework (fortnum) and in-house platform, to ensure we had complete control of how the e-commerce platform would evolve, in key areas such as:

• customer intelligence
• CRM system integrations
• user functionality
• user engagement
• embracing and integrating with new technologies

The launch site is only the very start of what will technically be a continually drive in tackling the areas above, and in user experience is just our 1st interpretation of what will drive online sales for this particular client.

There are currently some known usability flaws which need addressing, of which I’m sure other usability professionals will recognise, but with this e-commerce store being in its launch phase there will be scope and budget to address them going forward.

In time I intend posting articles explaining the user centered design process that was adopted during this 1st development, with features on particular areas of the site including:

• user centered navigation and findability
• user engagement
• learnability
• consumer browsing behaviour targeting
• addressing security concerns
• the best practice driven checkout process

Comments please…!

I welcome comments from any readers of my blog and other usability professionals and technical architects and developers – and most importantly comments from online shoppers!

Although in principle forms are simply different drop downs, text entry boxes and preference setting checkboxes and radio buttons, the visual and coding execution of forms can be the difference between an abandoned shopping journey and a new customer transaction, registration or application.

Checkout process forms

Crucial to an e-commerce websites success, these forms in general request personal information, delivery information and finally payment information.

Best practise advice for checkout process forms

• ensure a visitor is provided highly visible and clear sign-posting as to a) how many steps are in the process flow b) which stage of the process they are in c) which stages have they have completed – view a article I have written on checkout best practice, which talks about some of these best practise points
• ensure it is clear to a visitor which fields are required and which are optional
• only request personal information which is required for them to complete the process (ask for more general personal information such as shopping habits and general interests in registration forms and newsletter sign-ups)
• provide context sensitive advice and information to assure wary users who may be unsure as to why they need to supply a specific piece of information, or a good example is visitors unsure what the ‘CSV’ number on the back of their credit or debit card is
• provide relevant security and payment certificates to alleviate safety concerns, especially true for a business without a solid and well know reputation
• allow a user to go back to a previous stage in the process without losing the information they have already keyed in (if this happens visitor frustration will occur, which can quickly be followed by a complete abandonment of the checkout process)
• on submission of form information, where a user has incorrectly entered data or not completed a required, provide friendly, inline messages at the point of the form where the error has occurred, along with an overview at the top of the form as to what fields require attention
• ensure it is clear as to what will be the next occurrence once this submit a form ie. which stage they are moving, whether payment details will be processed by a secure server etc
• prior to finally submitting an order, provide a summary of all the data the user has entered, allowing them (but not encouraging) to edit data if it is incorrect
• once an order has been placed and approved, provide the user with a printer-friendly, clear and user friendly summary of their order details (removing the digits from their credit or debit card of course!)
• errors pages – test, test and further test form processing prior to going live, as a page error (not to be confused with an error message displayed due to an empty required field for instance) displayed to a user is 1 significant way to make the alarm bells for user trust and confidence ring very loudly

I’m sure there will be more comprehensive best practise guides available for checkout process forms, but I hope this provides some tangible and clear guides as to the key areas of this process which I have experienced as having the most impact on conversion and drop-out rates.

Google Checkout is gathering momentum

Leveradging its global brand recognition and trust, Google now offers a new checkout solution, surprisingly titled Google Checkout. For a shopper, once they have provided their personal, delivery and payment details into their secure system once, as they visit E-commerce sites offering Google Checkout the visitor doesn’t have to re-enter all their details. For a seller, simply using a checkout system by such a trusted brand will not only streamline their checkout process for their customers, but the whole online trust issue amongst consumers will be negated, because it is Google.

I will be following the uptake by both consumer and businesses of this new checkout, as I don’t doubt for one second that it will prove to be another highly successful revenue stream for Google.

Form field hints for developers

For developers out there keen to provide inline and context sensitive form field hints, take a look at this interesting article on www.askthecssguy.com entitled form field hints with css and html