User Vision is reviewing the effectiveness of each of the retailers by 5 different criteria: Navigation and IA – how easy is it to navigate and find content on the site; Persuasion and Trust of the site e.g. features of the site that may serve to encourage visitors to complete a transaction and help to cultivate a sense of trust in visitors to the site; the Checkout/booking section of the site and how well this process has been put together and what features have been implemented to encourage users to complete this process. The Product & Merchandising is reviewed, to examine how well they perform at communicating the products to the customer and finally, a short accessibility review is conducted to get a quick overview of how well the site caters for users of assistive technologies.
The site was assessed along these criteria following a standard user journey through the site. In the case of the John Lewis site this was when purchasing a winter coat.
The John Lewis home page gives a good overview of the site and the carousel offers dynamic content that will keep repeat visitors interested. The header navigation divides the content of the site into appropriate sections, making it straightforward to find the relevant section. The navigation options are presented using a neutral colour palette, allowing the products to take precedence over the navigation features.
Figure 1: Home Page
The faceted product search feature on the site allows customers to filter a large amount of content easily. There are a considerable number of filters on this site (146 filter options for jackets alone). These are laid out and organised in a manner that allows for effective and efficient navigation. The filter categories are presumably ranked by frequency of use, with “Brand” at the top and “International Delivery” at the bottom. The filters themselves are ranked to show those with the largest number of results by default; those with lower results can be accessed by selecting ‘view more’. Overall these faceted search filters deal admirably with displaying a large number of options to users in a manner that is easy for them to understand and utilise. See figure 1.
Figure 2: Search
The product page itself strikes a good balance between presenting the product information and imagery. Some of the links on the product page may lead users away from the checkout process with no way of getting back to the product apart from using the browser navigation options e.g. the click and collect process link. Implementing the link in this way runs the risk that users may abandon the checkout process when they are taken away from the defined journey. Perhaps a light box implementation would reduce the risk of users leaving and not returning to the checkout process. Persuasion architecture could also be implemented on this page by displaying the number of items left in stock and highlighting when this number is low for a certain product.
The way in which the user adds products to the basket and proceeds to checkout is highly commendable. Having added the item to the basket users are presented with an inline call to action to proceed to checkout. Implementing the checkout function in this way, and not directing straight to the checkout may make it more likely that the user will continue to shop on the site and add more items to the basket before continuing to the checkout.
Figure 3: Product Page
The checkout section is well structured and good use of inline error identification means that users can quickly recognise and recover from errors. A key emotion at play during the checkout process on any site is trust. The John Lewis site manages this emotion excellently by clearly displaying the VeriSign logo, explaining to the user how their information will be processed and offering a contact number should they encounter difficulties. A more prominent colour than grey should be used to denote low stock, this may help in persuading customers to buy the product sooner rather than later.
Figure 4: Checkout
Some simple accessibility implementations have been introduced to help users who require assistive technologies. Notably the site offers ‘skip to content’ and ‘skip to accessibility’ links to facilitate more efficient navigation. These links will likely go unnoticed by sighted users but offer a valuable option for those who navigate using the keyboard. Whilst accessibility is generally well considered some issues were noted. Most significant was that whilst the circulating banner advert offered the user alternative descriptions for the images used, these links were read as a list of 4 items all directing the user to the John Lewis homepage, providing non-sighted users with no information about the products. Elsewhere images were used to create space in the page design and some form elements, such as the search bar, had no labels attributed to them making them unusable by non-sighted users.
For the most part, the John Lewis site is a great example of an effective ecommerce site. The faceted search feature is implemented excellently, managing to display a large number of filters for navigating through the online store. The product page strikes an exemplary balance between displaying detailed images of products and information about the product. The neutral colour palette of the navigation features allows the products to sell themselves. Customers are reassured throughout the checkout process, through appropriate feedback, that this is a secure site. Accessibility is well considered on the site, however some accessibility issues were identified.
Shane Walsh, User Experience Consultant, User Vision
