We've created Zuko, our next-generation form analytics platform. Explore Zuko

5 lessons to learn from Tesco’s online forms

Big Brand Teardown

Today I’m doing my online shopping – not really but let’s imagine. Let’s also imagine it’s my first time. As someone who lives and works in the city I find myself visiting Tesco a lot, they have a shop on every corner after all. I know the products they stock and so this will be my go-to choice for my first ever online shop.

Tesco’s homepage is made up of tabs for the businesses various online services and current campaigns. Although Groceries is the first tab, Tesco are running a Summer campaign and so the first thing I see is an ad for Clubcard Days Out.

Tesco website homepage

Not a problem, I can see the tab I want, in the top left. As I move my mouse over the Groceries tab I can now see content relevant to grocery shopping. The first link, in bold is a call to action ‘Shop Groceries’, the second allows registered users to visit their account.

Tesco homepage Groceries tab
I don’t have to rely on the small ‘Shop Groceries’ link, clicking on the Groceries tab also takes me to the Groceries sub site. That’s a positive, the fewer clicks I have to perform the better. Although the 3-click rule has been dismissed as myth, the ease of navigation here has been pretty good.

When I reach the Groceries landing page Tesco immediately prompt me to Sign in or Register.

Tesco Sign in and Register buttons

From here until I checkout with my groceries there are a series of forms to complete (three in fact). I’ve identified five lessons you can learn, in both how to and how not to do forms.

  1. Prime users for additional costs

  2. The delivery options that I’ll have available are shown directly below the call to action to sign in. There are cheap and free options for delivery. These prepare me for additional costs of delivery but also act to make those options seem low cost and convenient.

    Unexpected delivery charges are the greatest cause of shopping cart abandonment online, accounting for 28% of dropoffs. Tesco address this even before I start shopping.

    Later in the checkout, Tesco continue to put the delivery cost at the forefront of the transaction, asking users to choose a delivery slot as their first task in the checkout.

    Table of delivery times and cost

    Times and associated costs are laid out in an easy to understand way.

    How you replicate this?

    Tesco have ensured that shoppers are prepared for a delivery cost to be added. This is likely to reduce dropoffs from the checkout later.

    Dropoffs relating to delivery costs are due to shoppers not expecting the cost. ComScore’s study of cart abandonment in different countries found some users proceeded into the checkout before they were ready to buy in order to find out the cost of delivery. Others abandoned their cart despite being ready to buy because the delivery costs were higher than expected.

    Table of countries and reasons for cart abandonment

    Data source:eMarketer

    Advertise your delivery charges prominently around your site, promoting lower cost options if you have them.

  3. Have a good reason for requiring log in

  4. I’m not sure yet if I want to register for an account. I’d like to see if Tesco have everything I want before I place an order. Having to register for an account before buying is the second greatest reason for cart abandonment, coming in at 23%.

    As such, I ignore the call to action to Register and try to find what I want first. Unfortunately, it isn’t possible to shop on Tesco without first creating an account. Try to add any item and Tesco present a message letting you know you have to sign in.

    Pop up message prompting registration

    Usually I would say that this is an unnecessary barrier to sale. However, Tesco give a reason for requiring shoppers to log in. They say “We need to check if your store has this product.” So, although some other online grocery stores don’t require you to create an account immediately, at least Tesco provide a clear reason, that also seems reasonable.

    How could users shop without registering?

    Tesco home delivery items are taken straight from the shop floor of local supermarkets. Cross referencing stock is therefore very important. What Tesco really need to know is, where are you? This will tell them what store they need to take the stock from.

    This is backed up by the fact that the registration form includes a required field for Postcode.

    Tesco sign in and new user registration forms

    Instead of asking shoppers to register for an account they could ask for the postcode of the address the shoppers wants to deliver to. As Tesco also offer Click and Collect, this could include the ability to select Tesco stores around the UK.

  5. Don’t create extra work for users

  6. The registration form is short but it hit a bit of a bum note with me. It could be shorter and it could be easier.

    Form fields for email address

    Asking users to retype their email address has little effect in reducing errors. It simply creates extra work for users that they’ll try to avoid doing. Form expert, Luke Wroblewski, has noted from his research that users are likely to copy and paste information from the first field into the second field if they’re asked to retype information. Any errors will also be duplicated.

    In addition, users are asked, in a non mandatory field, what their clubcard number is. Below is a checkbox that allows users to say they don’t have a clubcard. This means that if you have a clubcard you must find it and register with it, or lie and say you don’t have one. You can’t proceed with registration without completing one or the other.

    Clubcard number form field and error

    If users assume they can go ahead without putting a clubcard number the form throws up an error. The effort of finding your clubcard might cause some clubcard members to say they don’t have one thus creating false data. Tesco should look at form analytics to determine if this is also a common drop off point for users.

    How could Tesco reduce data errors while making the form shorter?

    The problem may not be as serious as assumed. Wroblewski says errors in email addresses happen in “2% of successful form completions”. Still, that’s 2% you don’t want to lose.

    He proposes two different solutions:

    1. Validate the email address as it’s entered, like so:
    2. Email form field with inline validation
    3. Feedback the email address in an obvious way so users can check it and change it if there’s an error, e.g. in a message underneath the form field.
    4. Email address field with email address redisplayed below

    Tesco could allow users to enter their clubcard number later, if they have one. User without a clubcard should be able to proceed without having to tick a box declaring they don’t have one.

    With these two simple changes the registration form could be reduced to a required email address field, a required postcode field and an optional clubcard number field.

  7. Postpone unnecessary questions

  8. Tesco continue to make account registration more hard work than it has to be. Once submitting basic information on my email address and postcode I then have to fill out another, very daunting form.
    Tesco four step registration form
    The form looks long but this is most likely due to the layout. The design of the form adds to the impression of lengthiness. Rather than a single column form there are form fields over two columns at one point. There’s also a lot of information to read.

    The primary purpose of this form seems to be to gather marketing information. None of the information it seeks is vital to the shopping process.

    How Tesco could make registration faster and easier

    New Tesco users could be registered after providing an email address and postcode. These two basic bits of information would allow them to start shopping straight away. Information such as name, address and contact details could be gathered in the checkout.

  9. Make checkout as fast as possible

  10. Tesco’s checkout is fairly fast. By gathering address information at the registration stage, all you have to do at the checkout is provide payment information. Choosing your delivery slot is not counted as part of the checkout process.

    My progress through the checkout was displayed in three steps; ‘Just checking’ (which confirmed an extra charge), ‘Order Summary’ (where I could check and change my details) and ‘Payment’.
    Progress indicator
    If Tesco allowed users to start shopping without filling in their personal details, users would only have to give these details once anyway, the first time they shopped. After that, returning shoppers would enjoy the same speedy checkout.

    The Payment stage includes tricks to help users complete their details as quickly and easily as possible.
    Payment details form
    The copy for field labels is carefully chosen. The first question ‘Name on Card’, is short but clear that this field needs to be exactly the name that is on the payment card you’re using. If the field label only said ‘Name’ there would be room for confusion and errors could occur.

    This form also removes a step that many card payment forms usually include, the card type question. Tesco have relieved users of the task of telling what the card type is and instead show the card types they accept.

    How can I make my payment form better?

    Tesco do two good things in their payment form:

    1. The field labels are as clear as possible.
    2. They skip asking for card type – which is an unnecessary question as it can be deduced from the card number.

    Get more advice on our blog about creating user friendly payment forms

Room to improve

Tesco have room to improve their online forms. At key conversions points they get it right with upfront delivery costs and a short checkout process. However, forcing new users through a lengthy registration process could cause some shoppers to go elsewhere to find a faster onboarding process.