Paul Rouke and PRWD on User Centered Design

This article is Part 1 of 4 articles focussing on User Centered Navigation and Findability within PRWD’s E-commerce Platform.

Navigating with Tags

Tagging content to allow users to navigate through a site isn’t a radically new technique, but in particular for e-commerce sites there aren’t currently many examples of where this style of user centered navigation is provided.

For v1.0 of the PRWD E-commerce Platform it was essential that we developed a tagging engine which would provide both our client and shoppers on their site with an intelligent way in which to group, browse and filter products which share similar characteristics.

To give a few examples…

1) Customer Needs To Protect Their Goods

They may be looking for materials which will protect the goods which they will be transporting from their warehouse to their customers business

Traditional E-commerce Navigation

Products which will potentially match these requirements could be located in 3 or 4 different categories, which using traditional navigation methods of browsing categories and sub-categories would make locating them fairly difficult and require a number clicks.

Intelligent PRWD Tag Engine Solution

Using the tag engine, Contact Packaging can specify which of their products, across any categories, fit into this customer requirement and assign the tag ’surface protection’ to each of them

Resulting Customer Findability

By clicking on the ’surface protection’ tag, customers will automatically be presented with all the products across the store which fit this description, providing immediate solutions to whichever type of protective materials they are looking for, whether its bubble wrap, polyethylene foam, hand stretch film or profile foam.

Take a look at the tag results for surface protection within Contact Packaging

2) Customer Needs a Variety of Tools

A warehouse manager may be looking for a variety of tools to be used within various parts of the warehouse, such as strapping tools, tape dispensers and tensioners

Traditional E-commerce Navigation

The customer may try and search for tools and hope that any tools across the site have been indexed with the word tool, and usually this would mean that the word tool would need to feature in the actual title of the product

Intelligent PRWD Tag Engine Solution

Using the tag engine, Contact Packaging can specify which of their products, across any categories, fit into this customer requirement and assign the tag ‘tools’ to each of them, irrespective of whether the product actual states that it is a tool in either its title or description

Resulting Customer Findability

By clicking on the ‘tool’ tag, customers again will automatically be presented with all the products across the store which fit this description, providing immediate solutions to whichever type of tools they are looking for

Take a look at the tag results for tools within Contact Packaging

3) Customer Needs Similar Products

A customer may have browsed to a product page from any of the navigational methods available, and then realised that the product they are looking at isn’t quite what they need

Traditional E-commerce Navigation

The customer can hope that there is an intelligent ‘related products’ feature on the product page which will show them other products more which better suit their needs, or they may perform a new search or try browsing a different category

Intelligent PRWD Tag Engine Solution

Tags which have been added to a particular product are provided on each product page, so along with the related and cross sell products functionality, customers can see what tags have been assigned to that product

Resulting Customer Findability

The customer can click on the tag which best fits with their requirement and then automatically be presented with all other products throughout the store which share this characteristic. It is then expected that the customer can quickly scan the products are decide which of them better fits their requirements.

Continually Evolving PRWD E-commerce Tag Engine

The above examples are specific to the Contact Packaging e-commerce store, but the same tag engine concept works across any size and complexity of e-commerce store (and content driven or business system platform), and in fact this method of navigation is even more useful when there are larger sets of products or content.

As the PRWD E-commerce Platform continually evolves following the launch of v1.0, the intelligence, flexibility and scope of our tag engine will be greatly enhanced to provide an even more powerful and robust way to group, filter and browse products and content.

User generated tags, although not deemed applicable for Contact Packaging, will also be introduced which will add a new dimension to how visitors can personally tag products and browse products based on user-generated tags.

Tags and Multi-Faceted Navigation

Although multi-faceted navigation hasn’t been included in the Contact Packaging e-commerce site, for much larger e-commerce sites we would regard this as a fundamental user centered navigation method. There are very exciting and powerful ways in which out tag engine interacts with and compliments a multi-faceted navigation system and this is something that I will be talking about more in the article on PRWD’s multi-faceted navigation system.

Your comments please…!

I’m very interested to hear about your thoughts on the effectiveness of tag clouds and tags in general as a way of navigating through a sites content by related attributes and meta data. How do you implement tags to assist users in navigating your site content? What % of users interact with tag clouds and related tags? How do tags work alongside your multi-faceted navigation system?

Following on from my initial post introducing PRWD’s new E-commerce Platform, my first in-depth look at the intelligence and flexibility which were fundamental aspects of the launch e-commerce site will focus on:

User Centered Navigation and Findability

No two web users will exhibit exactly the same browsing behaviour when navigating an e-commerce site, unless they are forced to by only having limited ways in which to search for products (such as categories & subcategories, a search facility and perhaps some use of cross selling during a shopping journey).

Although the actual number of products in the Contact Packaging store isn’t substantial (around 70 for launch, but with around 400 SKU’s), in order to provide user centered navigation and assist in a visitors findability we have provided a wide range of ways in which a visitor can browse for and locate products which match their wants and needs.

Best Practice Navigation and Findability Methods available include:

• Standard categories
• Dynamic categories
• Suggestive search
• Tag clouds
• Related products
• Cross sell products
• Shop by situation
• Best sellers
• Sales products
• Breadcrumb
• Products with related tags

Are we heading towards the longest article known to the blogosphere!?

It is at this point I begin wondering how long this article could end up, if, as I originally intended to, I now begin talking in detail about each of the findability methods listed above. Not to mention me wondering whether anyone will have the stamina (and time) to read and digest the information!

In order to keep this article to a more digestible length and focus on some of the more intelligent aspects of the stores navigation, I will assume that methods such as standard categories, related products, cross sell products, best sellers and sale products are fairly familiar with most people, as these form the primary and secondary ways to navigate most e-commerce websites.

Therefore I will focus my next few articles on:

1. tag clouds using the PRWD tagging engine
2. dynamic suggestive search using PRWD HybridSearch
3. dynamic categories/shop by situation
4. multi-faceted navigation

Following this introductory post going live I will shortly follow this up by talking in depth about the PRWD tagging engine.

House of Fraser have recently launched their 1st e-commerce site - following is a user experience review looking at how persuasion architecture has been adopted, key browsing functionality provided and the overall shopping experience you can expect at this new luxury online store.

For anyone interested in how I recommend House of Fraser can further enhance the user experience, I have gathered together a variety of recommendations, focusing on the checkout process, customer registration and specific areas during a visitors browsing process. Feel free to contact me if you are interested in hearing about these recommendations, as I will be passing them directly on to House of Fraser rather than sharing all this expertise with the whole online community.

Overview

Putting brands at what appears to be the forefront of their online strategy, the new House of Fraser website provides an almost immediate synergy between their online experience and the aspirations of the brand hungry visitor. On first view the site provides all the features and functionality you would expect from a site which has been developed using what I expect would have been a user centered design approach - high visibility of the search functionality and shopping basket (inc. summary of key info, a useful mini basket dropdown feature and the login/register links), clearly labeled and intuitive category navigation, a clear, best practice modeled checkout process and a strong focus on persuasion architecture. On to the review…

Visual Design Style

Going with a black, moody background, using a beveled header style similar to Windows Media Player11, the well structured pages throughout the site provide a very clear and uncluttered user experience. The extensive use of white backgrounds and keen use of space, especially as you are in the latter stages of a browsing and buying process, ensure the visibility of key functionality and product information is very high, and the use of large category headers and the related breadcrumb trail ensures users know exactly which category/sub-category they are in.

Site Navigation

Good signposting, filtering and brand focus

Overall the new site navigation works well, with clearly defined categories, page titles and breadcrumb trails. Link language is very consistent which ensure users don’t need to continually learn what is and isn’t clickable. The common and essential (for large e-commerce sites) multi-faceted navigation introduced at sub-category pages (allowing users to filter the current products by price bracket, colours and brand) works well and ensures the brand focused users can shop by their favourite brands once they are looking at the product type that interests them. Heavy branding throughout the site continually plays with consumer psychology, which in turn provides some of the persuasion content and momentum which is critical for shoppers looking to purchase expensive, branded products

Primary Category Navigation

By providing a top level category specifically for brands, along with John Lewis, this again supports what I expect will be a large percentage of visitors objectives which will be to shop by brand - these shoppers aren’t just looking for a branded dress or pair of trousers, they want to see what range of products from their favourite famous brands are available, irrespective of product type.

Slight navigational issues

Whilst browsing the site during the course of this user experience review I discovered some slight navigational issues which may well impact on a users overall user experience:

• On clicking a main brand promo from the top level category, you are taken to a search results page - I would suggest this keeps you within the womens category (inc. tab navigation remaining highlighted) but with a search filter applied on womenswear - to ensure consistency of breadcrumb. Also a new search box appears with a search term that you have supposedly entered
• In a search results page for womens tops, bottles of perfume, luggage and bags are displayed, some taking up the whole 1st results page which will confuse visitors
• Once within the brand directory, the main navigation tab disappears when you are browsing products from a particular brand, losing the visual indicator of which category you are within
• Also within the brand directory, when viewing products from a brand and then you remove that brand filter, rather than being taken back to the brand list page you go back to the homepage, which is dis-orientating
• Brand names on product lister pages are clickable to the product, but the product title isn’t - brand logos shown with actual products at earlier levels take you to all products by that brand - I would recommend adopting greater consistency
• If a product isn’t by a brand name, n/a is displayed in place of the brand logo - this brand logo slot could be removed if not a brand product for a tidier display of product information
• When viewing a bedlinen product page, it is hard to work out where to view product info ie, sizes, material, wash instructions - this info is actually found by clicking the individual product description which opens an Ajax pop-up - perhaps a simple underline would solve this

Homepage

The visual, flash driven main promotion, used to promote the current latest offers or trends, on the one hand provides an area of stimulation and intrigue for the visitor, but with its lack of instructional or support text can actually be an area of confusion for the visitor. I could imagine visitors wondering what will happen if they click within a certain area, or for the current sale example, how can they see the full range of products on sale.

*UPDATE - whilst producing this user experience review House of Fraser appear to have rectified this by including clear clickable areas within this flash driven promotion.

A suggestion to improve the user experience would be to provide feedback to the user relative to where they move their mouse, for instance having some text that says “Select stainless steel pan set - save up to £15″ appear near to the mouse as you hover over this product. In addition, if there is an actual sale category, providing a clear link to view all the sale products would also provide a more progressive browsing experience.

Top Level Category

Focus on Brands rather than product ranges

Following through on the brand focus, in comparison to competitor retail sites such as John Lewis, House of Fraser have chosen to introduce products through a featured brands section, rather than showing branded products from different categories. On the one hand this limits the variety of product ranges that are being promoted at this level, but it does allow this page to again target the brand hungry shoppers, in turn ticking the persuasion architecture boxes.

Shopping behaviour and personalisation

It is at the top level category page that significant real estate begins to be used to show you previously viewed products. This user focused facility, not often adopted on competitor websites but one of the many integral areas of personalisation adopted by Amazon, is a great way of allowing a user to quickly revisit a product they have looked at earlier and what they liked. By using cookies, without a visitor needing to be registered this already begins to make them feel that the site is working for them rather than a 1 size fits all approach. I expect House of Fraser will also use this stored browser behaviour, especially collected once a visitor is logged in, to provide personalised through-the-line marketing campaigns. I can’t emphasise the power of personalisation enough…

Product Page

Unique, image led

Although not providing a radically different layout to the product page compared to competitors (and therefore remaining consistent with best practice for product pages), House of Fraser have adopted quite an image led user interface, where as you zoom into the image it fills the full width of the product page. With the clever use of transparent backgrounds this doesn’t detract the user from the key functionality on the page (price, title, description, quantity and add to basket), instead it serves to provide a richer experience whilst ensuring the product page acts as a persuasive experience focused on getting an emotional response from the visitor, such as seeing the high quality of the expensive product, therefore justifying the potential expenditure being undertaken.

High quality goods = high quality images

As expected you can zoom and pan around the image, and House of Fraser provides great levels of detail through multiple zoom levels which is vital when trying to sell clothing and other luxury goods online.

Shopping Basket

Minimalism personified

Going very much for a less is more approach, the user certainly isn’t presented by many distractions, although for this key buying process page there are a variety of user experience enhancements I would recommend House of Fraser considering. These focus on continuing the persuasion architecture approach and ensuring visitors have all the necessary information which they need to decide on committing to the checkout process:

• visitors being made aware of what credit cards and payment options are available, using an unobtrusive link and a Ajax pop-up (an approach adopted on product pages)
• another large checkout button at the bottom of the basket, especially for visitors who have large baskets and scan through them before proceeding to checkout
• the standard delivery charge of £4.00 be applied to the basket, with a related message informing users that they can specify a different delivery option within the checkout process
• a link to explain about promo codes - where to find them, what do they look like - this again would be an Ajax pop-up
• in addition to showing recently viewed products, I would consider an area to cross sell and up-sell with a focus on brand names, as used throughout the site

Checkout Process

Striving to adopt best practice and reduce abandonment’s

House of Fraser have certainly taken into account the factors which can lead to increased checkout process abandonment’s and I’ve listed here some of the key points I have picked up on:

• for new visitors, providing the key benefits why you should register, thus encouraging users rather than making them seek out the benefits of registering through the help section
• once past the login/register page, the removal of all un-necessary links and functionality (navigation, search facility, mini basket, comprehensive footer) which can distract users and increase checkout process abandonment’s
• providing a clear, industry standard security message to offer re-assurance for visitors wary of shopping online
• a clear process indicator is provided - where I am, how many are stages left - so the user feels comfortable and in control

User Experience and Persuasion Architecture Improvements

As I mentioned at the start of this review there are a variety of areas where I recommend House of Fraser could improve on the user experience. These areas are:

• The Checkout Process
• Creating an Account (Registration) inc. the Recognition Points area
• Browsing and Searching Functionality
• Hamper Shopping

Please contact me directly if you are interested in learning about these recommendations.

Conclusion

Irrespective of the possible user experience improvements that could be introduced, House of Fraser have produced an excellent e-commerce website which perfectly suits its target audience and compliments its high street presence. With a degree of richer user experience functionality introduced, and a clear focus on branding and imagery, whilst adopting very much a user centered design approach and significant persuasion architecture techniques, House of Fraser’s 1st transactional web presence is destined to be a great success and very much a destination website for style and brand driven online shoppers.

So yes, I would say that overall the House of Fraser website is a User Experience triumph!

I’d love to read your views on both this post and the House of Fraser transactional website. How do you feel it compares to their main competitors such as John Lewis? Can you identify any user experience improvements?

I was delighted to have recently been interviewed by Dave Chaffey, BSc, PhD, FCIM, MIDM, for my thoughts, recommendations and guidance on the key aspect of findability in online marketing. Dave is an author, consultant and trainer specialising in E-commerce and E-marketing education and guidance. Huge online resources, reports, books and interviews can be found over at Dave’s highly popular website.

The 5 questions that Dave asked me were:

1. What do you see as findability? Why is findability relevant to marketers?
2. How do you tackle findability in your usability projects?
3. What would you say are the biggest findability errors that e-retail sites typically have from a marketing perspective?
4. I know you’re a big advocate of card-sorting. Typically this is part of a heavyweight usability project. Is there any place for it in improve findability of an existing site which is not due a major upgrade.
5. When working at Littlewoods Shop Direct Group there must have been a tension between print-based design techniques for the catalogues and web-based design techniques. Can web designers learn from the catalogue merchandising techniques. Any tips and tricks?

Take a look at the full Q and A session, which from my commercial experience at Littlewoods Shop Direct is geared towards large multi-channel retailers.

The recent annual report by IMRG says that e-commerce sales are growing faster than ever before, and predicts online sales in the UK will reach £78bn a year by 2010.

For those businesses beginning to truly harness the potential of their online sales channel, by investing resources into the likes of usability and information architecture, to provide their exisiting and new customers with a user centred design and shopping experience, are much more likely to both survive in and excel in the online arena as it matures over the next few years.

More information can be found on this online eretail report summary by E-consultancy.