Boost your site's usability: think like a user

1st March 2001

User Vision offer key guidelines to help improve your website and improve customer satisfaction.

To reap the benefits of improving your e-commerce conversion, the site design needs to come under careful scrutiny. You need to forget that you already know every page of your web site by heart and view it with the blank slate of a first time user. Its also worth bearing in mind what most users want from the web. Although today’s web technologies allow the creation of visually stunning, animated web pages, most web consumers prefer sites that let them get on with their goals, such as buying products or finding information.

Recently Forrester Research interviewed 8,600 web-using households to find out why people return to web sites. The three most important factors were high-quality content, ease of use, and quick page downloads. These rated far ahead of aspects of web sites such as chat rooms, incentives and cutting edge technology.

Graph showing that high quality content and ease of use are the main reasons people return to websites

Consumers want sites that make it easy to find what they are seeking. They want pages that load quickly and to feel that they are in control with clear navigation. Purchasing or registering on the site must be straightforward and provide a sense of trust throughout the transaction. Due to the ease of switching to competitor sites on the web, consumers quickly leave sites that provide a poor experience, and they usually do not return. So how do you improve the design of your site?
Some tips on improving your customers experience

There are some fundamental principles which any site should follow to help customers use it.

Understand your users – Research your target users – who they are, what they want from the site and their interaction preferences. Often only the business and the web design team are considered, leading to sites designed around the business view of itself but failing to engage users.

Create a great first impression – The home page should clearly state the company, its purpose, and what it offers visitors. Too many sites rely on visitors’ burning curiosity to explore and figure it out. Web logs are showing the fact – they won’t bother.

Provide clear, consistent navigation – These are the ‘handrails’ for your site. Show your visitors where they are, and give a clear idea where they can go. Clearly identify links to other pages by underlining or using a different colour text.

Avoid gratuitous animation – If you are planning on doing business through your site, use animation only where appropriate. It may be amazing to look at, but constantly moving web images may confuse or distract goal-driven users.

Lay out pages consistently and with an obvious visual hierarchy – This will help the majority of people who scan pages rather than read them.

Make the purchase process as simple as possible – Usability tests show that people get scared the closer they get to the purchase point. Anything that causes confusion or distrust of the company may trigger users to exit.

Usability test your site – Even informal tests with a few ‘customers’ will reveal difficulties that you probably did not predict. Take note of any problems and fix them in your site design.

All of these methods are relatively simple to implement, and are very cost effective when considering the improved revenue from your web site. With a regular application of these principles you will be able to convert more people from simply looking at your site to purchasing your products or services.

Here’s how to do it: Usability at John Lewis

The John Lewis store in Edinburgh is located a stones throw away from last month’s online store review, Jenners, and shows many features that suggest it has a more successful online revenue channel.

From the start, the home page avoids the unnecessary Flash introduction and clearly points the user to the front door to the store. The link for the shop also contains an ALT tag, an important feature for visually impaired users using screen readers. Such users rely on the ALT tags to understand what the image is (see related article on disabled users of the web). Although they have not been applied to all images yet (most notably to the product pictures), John Lewis has started in the important area of catering for special needs users.

Screenshot of John Lewis's homepage

Finding what you’re looking for

One of the main problems in a large site with many products is information architecture – categorising and labelling items in a way that users can find what they want. John Lewis uses cascading rollovers to quickly and clearly reveal the hierarchy of the items for sale. An advantage to the rollover is it avoids clicking several links (and the corresponding download times) to reach a page deep in the hierarchy. Clicking top level links also provides a page with the subcategories for users performing a broad search rather than for a specific item. Although the technology required to implement this effect will not work on some older browsers (an alternative is provided), rollovers can be a good way to inform users what they will get before they click a link.

Screenshot showing the navigation on the John Lewis website

Clean pages

The pages for the individual products are also cleanly laid out, describing the item in sufficient detail, and providing a clear link for adding the item to the shopping bag (3). The shopping bag itself uses a rollover to reveal items already added.

A screenshot of a Casio watch product page on the John Lewis site

Registration and checkout

Having displayed the products well, the site unfortunately loses customers as they approach the checkout. One main drawback is the length of the registration process. Before purchasing their goods users must answer intrusive questions including their age, interests, email preferences (text or HTML?), how often they shop at John Lewis, and their favourite store. It is unthinkable to ask such questions to customers in a real store, and asking them here for marketing purposes causes many shoppers to abandon their purchase, despite the store’s promises not to misuse the data.

The checkout process is implemented using frames, causing the user to scroll quite a lot to review their order. However, items are presented clearly for review before payment, and importantly the back button can be used in case details need to be changed. Especially during the payment phase, the back button provides an important source of comfort for online shoppers so they carry through with their purchase.

Overall, John Lewis have implemented a site which is usable and easy to navigate. The main change necessary to improve the site and its conversion rate is to reduce the pre-purchase registration and fully implement the ALT tags for disable users.

What Can you do next?

Want this article on your website?

If you liked this article, feel free to republish it on your own website. All that we ask is that you include the citation below, including links, at the end of the article.

This article was written by Chris Rourke. Chris is the Managing Director of User Vision, a usability and accessibility consultancy that helps clients gain a competitive advantage through improved ease of use.

Tesco Bank has worked closely with User Vision for a number of years and utilise their expertise in usability testing, customer research and user experience development. User Vision are an extension of our Digital team and we have a strong working relationship. Their services have contributed to the success of the bank and we have always found the team at User Vision very responsive, accommodating, hardworking and a strong match for our culture and values at Tesco.

Head of Digital Operations, Tesco Bank.