UX best practices from homepage to checkout – UX Oxford

Luke Canvin

UX Oxford's September talk was given by James Chudley and Jesmond Allen from cxpartners on UX Components Deconstructed.

James and Jesmond are the authors of 'Smashing UX Design: foundations for designing online user experiences' and in this talk they focus on their advice for providing the best user experience on common website components; the homepage, category/product listing, product page, shopping basket, and checkout.

You can find the slides for the talk embedded at the end of the post.

Homepage UX

The first things we want to understand are the most common user tasks for the page, and how these compare with the business goals.

Example user tasks

  • What is this site for?
  • Let me get on with my task
  • Reflect what I've done on this site

Example business goals

  • Provide information on products and services
  • Make a good first impression
  • Commercial motivations such as showing advertising, gaining subscriptions, etc.

As designers we're somewhat caught in the middle of these often conflicting user and business requirements, so it's important we understand where the business' priorities lie and how best to balance the functionality of the page.

Top tips for homepages

1. The homepage is less important than everyone thinks

We often begin work on a website by designing the homepage, but how many homepages do we actually see? Perhaps it would be better to begin with other key pages, such as the product detail page.

2. Consider every homepage state

The homepage may need to change radically between states. For example, if a user is logged in they may need their account links, recommended products, previously viewed pages, favourites, messages, etc. These different states will all need care and attention so, when quoting, don't forget the time you need for that.

3. Avoid homepage bloat

A site's various stakeholders will all have their own priorities for the homepage and this can lead to more and more features being squeezed in there. A good tactic to avoid this is to use the user requirements to focus the functionality of the homepage on what's important to them.

Category and product listing page UX

Example user tasks

  • Does the site provide what I need?
  • Filtering and sorting the list
  • Understanding differences between the offerings

Example business goals

  • Show abundance and range
  • Show expertise
  • Explain the offerings

Here we need a careful balance between showing breadth and allowing the user to focus on what they are looking for.

Top tips for category and product listing pages

1. Task models are invaluable

We must understand the user's decision-making process through user research/testing in order to provide the right information at the right time. Creating a task model is the perfect deliverable for this and the client may never have seen their customer's thought process mapped out in that way before, which could be incredibly useful to them.

An example ecommerce task model
An example task model from James & Jesmond's presentation.

2. Prevent "pogoing"

Pogoing is the action of switching back and forward between pages (e.g. listing and product pages) in order to get the information you need.

  • Think about the key information required to make a decision and provide that up-front.
  • Don't go overboard, less important or more detailed information should still be reserved for the product page.
  • Allow users to choose to show all products rather than having pagination.
  • Some research shows that having an odd number of products in a row (if your listing has rows) might make it easier to make a choice.

Product page UX

Example user tasks

  • Is this the one I want?
  • Is it in stock? What's the delivery cost? Is it in my size? Other fundamental questions.
  • What happens if I buy and it's not the what I want?

Example business goals

  • Sell associated products
  • Use reviews to encourage sales
  • Make it easy to buy

Top tips for product pages

1. Plan for the most complicated products

Identify all the different types of products that you'll need to cope with and ensure you plan/quote for all the variants.

2. List all the customer's questions and answer them

Unanswered questions are one of the main reasons people don't buy. You can draw on user research and task models to find the questions.

3. Think about your photos

Images have a huge influence on behaviour so focus on product photos in use research and make sure you're involved with image selection for the final design.

James has a blog looking further into this topic at photoux.co.uk.

Shopping basket UX

Example user tasks

  • Make final decisions
  • Understand costs
  • Feel comfortable with charges
  • Feel safe

Example business goals

  • Reduce abandonment
  • Encourage choice of the most business-friendly delivery option
  • Inspire return visits
  • Reduce customer services contacts

Top tips for shopping baskets

1. Be trustworthy

If the user trusts you, they will more happily spend money. You can enhance trust by displaying phone/address details (customers often look for these to prove you exist in the real world), keeping bug-free, using clear language, and showing your costs/charges clearly.

2. Shopping baskets are used as shortlists

Even when dedicated shortlists are provided! Support this behaviour and show important product details/links in your basket. Perhaps allow the user to convert their basket into a shortlist.

3. Don't instil security fears

Large security logos and talk of security all over the place can scare customers by making them overly aware/wary of online security issues.

Take ownership of your security messaging, make it subtle and trustworthy. Use HTTPS and the user will see the padlock in their address bar. Use familiar URLs during the checkout process.

4. Don't make assumptions about the user's context

The user journey may be on any type of device or may switch between several, so support this wherever possible.

Group discussion

After the presentation there was some excellent discussion on topics including:

  • When to ask for user registration - start vs. end of checkout.
  • Use of Facebook/Twitter logins - do they instil paranoia about the site posting to your wall/status?
  • Displaying pricing - what happens if your products have varying/sensitive prices?
  • Guest checkouts - will more people buy if they don't have to register? Can you convert buyers to registered users after they have bought?

Thank you to Jesmond, James and the UX Oxford team (Cathy Carr, Mariana MotaJames Morris & Al Power) for a really in-depth and practical talk!

UX Components Deconstructed from cxpartners