eguide - bumper ecommerce usability guide - usability 247

Click here to load reader

Post on 13-Apr-2017




0 download

Embed Size (px)


  • How to create better user

    experiences and increase sales

    The Bumper


    Usability Guide


    Usability24/7 is an international

    user experience research and

    insight agency. We are a senior

    team of experts that deliver

    services, advice and guidance

    to organisations all over the


    Were changing the world, one interface at

    a time. So that everything is usable, every-

    where, for everyone, all the time.

    It would be better for consumers and better

    for business.

    Come and change the world with us.

    call us FREE on +44(0)8000 246247


    Share this guide



    Section 1: Introduction 4

    Section 2: Finding you online 6

    Section 3: Homepage usability 9

    Section 4: Product category and landing pages 14

    Section 5: Checkout Usability 20

    Section 6: Get usability right, increase income 26

  • Section 1



    The bumper eCommerce usability guide

    How to create better user experiences and increase sales

    For the latest entry in our series of usability and user experience eGuides, Usability24/7 takes

    a comprehensive look at eCommerce websites, and how usability affects each phase of

    the customer journey from initial discovery through to making a purchase.

    The eGuide is broken down into the following four sections, each representing a different


    Finding you online

    Homepage usability

    Product category and landing pages

    Checkout usability

    We aim to show you why good eCommerce usability is so important to your business, and

    how it will increase customer retention and, ultimately, conversion rates.

    If you like this guide, why not sign up to our monthly newsletter? Each month we read liter-

    ally hundreds of items to bring the most interesting UX items from around the world.

    Sign up now

    If you see a box like this it contains observations from

    actual usability testing.

  • Section 2

    Finding you online


    Finding you online

    The first step on any user journey is finding your eCommerce site. There are a number of

    ways this can be achieved, including:

    Search engine

    Social media

    Word of mouth

    User review

    Advertisement (online or elsewhere)

    A combination of search engines and social media will drive the lion's share of your traffic,

    with search engines remaining the primary source of first time visitors.

    In the same way that there's an assortment of methods by which users can discover your

    website, there is also a variety of platforms upon which they can perform this task. With

    consumers no longer tied to the PC for everyday web-based interactions, the proliferation

    of smartphones and tablets has dramatically altered both the context and environments in

    which they access the internet. This greater freedom means that your website should be

    usable, regardless of platform.

    Finding your eCommerce site on the move

    When engaging with a mobile device, the user is often on the move, which means a po-

    tential customer may well arrive at your eCommerce website while doing something else,

    such as walking to the shops, waiting for a bus, travelling on the train etc.

    In this multiplatform environment, it's essential that your website is usable for both the desk-

    top and mobile audience. Obviously, trying to squeeze the full eCommerce experience of

    the main site onto a smaller screen isn't going to work (because of size, load times, fingers,

    context etc), so there are solutions available to ensure great usability while safeguarding

    the user experience:

    This is crucial. Participants regularly and increasingly tell us they use multiple

    devices to access the same website.


    Responsive Web Design (RWD) Adapts the layout to suit the device, using fluid

    grids, flexible images and media queries

    Adaptive Web Design (AWD) Alters the site's layout to fit a pre-defined array of

    screen sizes, using CSS, styling and client-side scripts

    Mobile website A mobile-specific version of the website hosted separately to the

    desktop one

    The following resources will give you a more in-depth look at these options, along with the

    pros and cons of each:

    Bad usability = negative feedback

    As mentioned, social media is also a popular way by which a customer can find your

    eCommerce website. This can be a two-edged sword, in that it can be a healthy source of

    traffic, as well as a medium via which the smallest failings are suddenly thrust into the spot-

    light. With a platform like social media, upon which your users can voice an opinion about

    your business and share it among their peers, all aspects of your service, including the usa-

    bility of your website, are under scrutiny.

    If your brand is active in social media, and has, for instance, a Facebook page, a bad user

    experience might lead to poor feedback right where everyone including new prospects

    checking you out can see it.

    As social media is a valuable tool in any marketing strategy, the best way to avoid nega-

    tive feedback of this type is to ensure your eCommerce website offers fantastic usability,

    across all devices.

    Responsive Web Design vs. Mobile Website vs. Native App: Which

    is best?

    Responsive vs. Adaptive Web Design

  • Section 3

    Homepage Usability


    Homepage Usability

    Once a user has landed on your site, the real work begins.

    Being the most popular first point of contact, the homepage is like a shop window that lays

    out your offering, while giving the visitor a feel for the site. Therefore the usability of the

    homepage is a key factor in ensuring your prospect doesn't click back and seek solace in

    the arms of a competitor.

    First impressions last Product display

    Never assume the user has previous knowledge of your brand. New visitors to your eCom-

    merce website will arrive pretty much cold, so it's up to you to warm them up. Your duty, in

    the time it takes to scan your homepage, is to

    give them a greater understanding of what

    you're about.

    Therefore, it's a good idea to display a range of

    your products, representing what you offer, so

    that the user can gain an insight into your brand

    and make the decision whether to explore fur-

    ther. It's doubtful the consumer will search deeper for a product they want if given the im-

    pression, due to a lack of variety, your website doesn't stock it. Don't narrow the consumer's

    choice at this early stage of the user journey.


    Categorising your products, and visually displaying these categories on the homepage, of-

    fers the user a clear indicator as to the range of items you sell.

    For instance, if a clothing brand stocks casual, smart, indoor, outdoor wear etc, this would

    be reflected on the homepage, allowing the user to click through to a more detailed

    breakdown of items on a second-tier page.

    An example of this style of homepage categorisation can be seen in the screenshot on the

    following page:

    Users judge we website very quickly from the homepage. Even in test situations users will ask to click away if they dont trust what they see.


    The outdoor clothing and equipment retailer, Blacks, has used categories to prioritise and

    present clearly what customers look for on its eCommerce website, leaving the user in little

    doubt as to where they should be looking. This is in an addition to a navigation bar that of-

    fers a more conventional but equally comprehensive set of categorised options:

    Navigation is further augmented by a carousel of images at the top of the homepage,

    which provides access to the latest deals, reductions, new lines of clothing and category-

    based sale items.


    Parent categories and sub-categories

    The user wants an easy route to their purchase. If they can't find what they're after, they

    can't buy it.

    Parent categories are the starting point of the product hier