Paul Rouke and PRWD on User Centered Design

LinkedIn, the highly popular network for business professionals around the world, has recently relaunched their new user interface.

Brimming with good examples of personalisation, rich user interactions and intuitive navigation touches, I was just about to connect with Anish Kapoor, co-founder of Yuuguu, when I was presented with this jolly old chubby wizard informing me that the site is currently under-going system upgrades…

Picture taken from LinkedIn website.
Hopefully it won’t be offline for too long as there’ll be a fair few million people around the globe anxious to continue using this fantastic web application!

If you haven’t yet registered on LinkedIn then I would strongly suggest giving it a try. You can view

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?

*Update 5th September - I must commend Kodak (in particular Thomas Hoehn, Director, Marketing and Customer Experience) for not only being quick to provide their feedback to my comments in this post (see the comments) but in also providing insights into the scale of the Kodak online operation - anyone for 100,000+ pages! - along with some of the new functionality they are looking to roll-out. Although in my comments below I have been quite critical of the current user experience of on the Kodak website, this isn’t an umbrella view of what Kodak are doing online, rather specific comments on just the product listing facility currently in use.

Now back to the original post…

Comparing and researching hundreds of digital cameras to find your new companion for the next few years should be an enjoyable, user friendly and visually rich experience - here are how 2 of the major manufacturers, Fujifilm and Kodak, are providing significantly different experiences.

For anyone who may also be interested in researching cameras online, at the end of this post is a variety of sites I have found most useful, constructive and informative, along with some of the digital camera models I have been looking at.

What I expect to get from the manufacturer websites

1. Enjoy a more interactive experience, to take me as close to handling the cameras as possible without going to a high street specialist
2. Ensure that I am aware of the latest models available
3. Determine which digital cameras fit within certain budget and specification brackets

This is where I have experienced 2 significantly different user experiences which I felt compelled to write about here.

Fujifilm - Intuitive, Customer Focused and most of all Useful

Summary of the Fujifilm user experience

Utilising Ajax functionality to provide immediate product availability updates based on user selections, this product comparison tool allows users to quickly and intuitively update the products to show which ones fit within the users shopping criteria.

User experience benefits

• Product filtering controls displayed in standard web form format ie. simple checkbox buttons, to ensure immediate user recognition
• Users can filter products by key product data, such as price ranges, zoom levels and movie functionality
• Users see immediate page responses as they check the various options on and off
• Product comparison functionality has been included in the tool for an enhanced and more useful user experience
• Irrespective of screen resolution the tool fills the available space, rather than being fixed width and potential cutting off on smaller resolutions

Recommended user experience improvements

Although when you view the Kodak user experience below, it is clear that Fujifilm certainly have the competitive advantage, to further improve the user experience, flexibility of the tool and usefulness to the more serious photographer, I would recommend some of the following:

• Providing greater amount of filtering control, and group the controls ie. photo specifications (to include megapixels, max resolution, size of LCD, lens range, ISO sensitivity), phone specs (to include weight, battery type, storage types) and more special features (to include image stabilisation, face recognition)
• Expanding on this customisation and filtering, provide distinct user experiences for different camera user types ie. the casual camera user, the prosumer user and professional users - therefore a user, by perhaps answering 1 simple question, can indicate which type of customer they are, and the shopping tool can be tailored with specific product filtering attributes - again all this can be achieved on the same page using Ajax to provide a seamless and attention holding user experience
• Consider the use of slider tools, which allow a user to slide bars to specify ranges of a particular feature that they are interested in ie. choosing between 5 and 10 megapixel, or choose between 300 and 400 grammes for example). View an implementation that Amazon uses for its diamond search facility
• As a user hovers over a camera, provide a small window which features a snapshot of the camera, possibly featuring a snippet of an external review to further entice the user to consider the camera
• For more instant explanations of specific features, rather than clicking to view more info, again a small window could be displayed above the shopping tool

Kodak - Traditional Product Display, Not User Friendly

Summary of the Kodak user experience

Adopting a more traditional product listing style, Kodak allows the user to sort the range of products (all 70-80 of them) by one of the featured specifications (megapixels, zoom, display, memory, price).

User experience downfalls

• No ability to filter the products means that you are always scrolling up and down the list of 70+ cameras
• Price confusion - some products have prices, others doesn’t - does this mean the phone isn’t available or obsolete? Can I buy this phone online? What is the price I can expect to be charged by the retailer?
• With no product filters, significant scrolling is required to view products in the mid or lower ranges of your chosen sorted column
• There is significant amounts of duplicated product specifications, but with no filtering option I still have to read the details for each camera, even though its spec may be identical to the previous camera
• The user experience (and attention levels) are interrupted each time you wish to sort the list, as the site uses standard page refreshes compared to Fujifilm dynamic page updating
• There is no visual indicator as to which column the products are currently filtered by, which can be an issue if you are moving back and forth between specific camera product pages and this list
• No comparison facility, which is crucial when shopping for technology products, where slight difference in specifications can be a decision maker for lots of shoppers

Summary of my online shopping experience at Fujifilm and Kodak

1. Fujifilm are harnessing some of user experience enhancements possible with web 2.0 functionality
2. Kodak provide a more traditional product listing which requires significantly more time for a user to interact with and identify their ideal camera
3. Based on the above brand perception is much better for Fujifilm
4. I would be much more inclined to recommend Fujifilm to friends looking for cameras with specific specifications from the main manufacturers
5. One advantage Kodak has over Fujifilm is the integrated shopping experience, allowing you to purchase some of the cameras direct - again as mentioned earlier as this isn’t a facility offered for each camera it could in fact be detrimental to the brand and user experience - for instance a user may wonder why Kodak are willing to sell only some cameras direct
6. Although Fujifilm certainly have the competitive advantage over Kodak with their current shopping comparison tool, as I have idenfied there are further enhancements that they could make to create an even richer and useful tool for all levels of digital camera shopper

As promised, useful links for online camera shopping!

• Digital Photography Review - highly detailed, independent reviews
• Trusted Reviews - very comprehensive digital camera reviews
• Digital Camera Resources - more in-depth digital camera reviews
• Photography Blog - advertiser intensive but useful reviews

And some of the digital cameras I have been looking at…

• The Olympus SP560-UZ - the strongest contender yet for my cash!
• Fujifilm Finepix S9600
• Fujifilm S6500fd
• Olympus E-410
• Nikon D40

I would welcome your comments on any aspect of this post, whether its the camera models I am considering (and your recommendations), other manufacturer websites providing good or bad user experiences, as well as comments on my comments and recommendations.

Taking a different view of the upcoming FA Cup Final between Chelsea v Man United (come on the reds!), following the relaunch of the Manchester United website in 2006, which has since received multiple award nominations, I was interested to see how Chelsea are promoting themselves online, both in football and commercial terms, in comparison.

Surprising to say the least, but the current Chelsea FC website is a fully flash driven site, providing an ultimately different user experience to Manchester United.

As expected and required for a variety of reasons including search engine optimisation and accessibility, a text only version of the site has been provided.

Having spent some time exploring the Chelsea website, as I’m already fairly familiar with the Man United website in terms of information architecture, user experience and ultimately the user experience that has won them awards, I am beginning to un-cover some fairly significant user experience issues which can only be detrimental the overall Chelsea brand experience and online revenue generation currently.

Very top level, but below are some of my initial user experience comments, in no particular order (**editors note - as I have been analysing the Chelsea website to produce this post I have realised that I need to get back to paid work, so whereas the following list and this post in general could be alot longer, I had to hold off going into this subject too deeply!):

• non-caching flash homepage - the main flash movie that you view on the homepage (once it finishes loading, which even on an 8MB broadband connection feels quite frustrating) hasn’t been coded to allow for caching of the flash file, so therefore each time a user wishes to return to the homepage, (perhaps as they are feeling lost - but that is another matter) they have to wait for the full movie to load. To compound matters, viewing the site in Firefox actually made the flash file hang at some stages, requiring a browser refresh.
• mixed navigational methods - although one of my key recommendations for large, particularly e-commerce websites, is to provide users with alternative ways to navigate a site based on their browsing preferences ie. using the search facility, exploring the promoted products/information and navigating through the main navigational routes, the implementation of some of Chelsea’s browsing features, such as the zoom functionality in particular and the discovery of the sidebar sitemap, ensure that rather than generating confidence in the user, confusion is brought on followed by frustration at trying to understand how the site is working
• fixed site size, both horizontally and vertically - by using a full fixed width flash movie to display the site, a user has to continually click inside small internal frames to scroll through the content within the frame. By the nature of the site, articles and reports can be extensive, which requires significant amount of scrolling, although unfortunately not by the standard means of scrolling the browser window
• poor quality imagery - although the site isn’t actually selling products, the quality of the imagery used throughout the site is detrimental to the overall appeal of the site, as it provides a much less professional representation of the club and its sponsors to a visitor
• non-clickable areas appearing to be clickable - some of the ‘hit areas’ within the site have been incorrectly included within the flash movies, which result in the mouse cursor changing to signify a link when in fact the area isn’t clickable

What Manchester United are doing well from a user experience aspect

1. a structured, consistent and professional presentation of information
2. a standard but ultimately intuitive navigation and information architecture
3. a polished visual style which provides fans and business users with the appropriate levels of brand and club awareness and information
4. use of interactive flash where it can enhance the user experience ie. a virtual tour of Old Trafford
5. a highly visible and consistent search facility, a must for such a content rich and deep website

What Manchester United are doing well from a commercial aspect

1. constantly integrated promotion of commercial channels such as MU TV, MU Mobile, MU Pics, MU Finance
2. constant promotion and visibility of the register/login/account details functionality - ultimately by encouraging fans to register Man Utd can tailor content and offers accordingly, providing much more commercial value to the site
3. an integrated visual approach combining the brand and the sponsors
4. an overall professional visual style which caters for both the fans and corporate requirements, which ultimately reflects well on Manchester United as a commercial business

My recommendations to the online brand manager at Chelsea FC

If I was sat in front of the online brand/marketing manager for Chelsea, I would recommend a range of actions which would certainly help Chelsea focus their current online brand marketing.

1. carry out user testing, with a range of users such as casual supporters, die-hard supporters, corporate hospitality users, the press, visually impaired and more
2. obtain a heuristic evaluation of the website (view a 1 page overview of what is a hueristic evaluation and how it works)
3. develop persona’s of typical users of the site, concentrating on what key areas they are likely to be looking for within the site
4. carry out card sorting exercises to gain an insight into how actual users expect to locate different pieces of information throughout the site
5. based on the above points, consider testing a different, user centred design solution which would aim to vastly increase the usability and overall user experience of the site

In my view, although such a user centred design project will have resource and cost implications, by really focussing the site on the user, I would predict Chelsea FC would experience significant :

• increases in page views
• increases in length of visit
• increases in natural search traffic
• increases in uptake of commercial channels (betting, mobile, TV etc)
• increases in visitor loyalty, especially if user registration is introduced (similar to ONE United)
• decreases in visitor drop-out rates
• good press regarding the site and its usability and accessibility

Final thoughts

Comparing the 2 online presences currently, although Chelsea have made significant on the pitch strides to rival Manchester United, the current online battle is most certainly being won by Manchester United, who appear to be harnessing most of the commercial opportunities that can lead from an immersive and intuitive user experience.

Ultimately results on the pitch will always make the headlines (and provide the marketing) for a football club, but I look forward to seeing whether Chelsea will look to online as a marketing channel with which they can more effectively promote the club and the brand to what is now a worldwide audience.

I’d be interested to hear any feedback to this post, as well as finding out if anyone has more examples of potentially harmful rather than positive user experiences amongst football clubs and other sporting brands online?

As a business and personal user of Google Analytics, along with being a user interface designer, it is great to now be using the new Google Analytics interface, which has been given a significant user interface redesign.

The amount of data that is recorded by Google Analytics and is therefore made available through the interface is vast, which makes both the information architecture and user experience of this interface critical to the software’s success.

For SME businesses I would thoroughly recommend considering implementing Google Analytics into your site, especially if you currently have no user friendly and multi-leveled way of accessing statistics to your site visitor behaviour.

There is already significant articles on the subject of the new Google Analytics interface, so rather than re-inventing the wheel below are links to my most relevant and useful articles reviewing the new interface:

• Avinash Kaushik, an independent consultant and now working for Google as an Analytics Evangelist, provides his view on the 1st 5 things you should do when using v2
• 27 Features That Make Google Analytics Best of Breed on Mashable
• The Google Analytics official blog

Hats off to the user interface designers and information architects responsible for the new interface!