A mobile shop that keeps pace with its competitors is still a mediocre shop
Baymard Institute has benchmarked the full mobile experience of 138 of the largest US and European ecommerce sites, and not one of them earns an overall rating of good. Almost every site ends up in the same narrow range. Of the 138, 62% rate mediocre or lower and the other 38% decent, while sites that are genuinely poor or simply do not work are rare. That pattern is easy to misread. When almost nothing is broken, a team that compares its mobile site with three direct competitors will usually conclude it is doing fine. The benchmark points the other way. The peer group shares the same weaknesses, so keeping pace with it means keeping pace with a mediocre standard.
The cost of that standard lands on the channel that brings in a large share of visits. Baymard notes that mobile now often makes up half of all traffic on many ecommerce sites, and that phones often lag behind desktop on conversion. On some sites the mobile version turns visitors into buyers at less than half the desktop rate. Not all of that gap comes from design, but the part that does is the part a webshop controls.
The weak spots sit on the route to the payment step
Baymard names four areas where many sites carry issues: the main navigation on the homepage and category pages, search autocomplete, mobile forms, and the features and elements that run across the whole site. Only one of them sits inside the checkout, which is why the other three rarely come up in a checkout review. A shopper who cannot find the product through the menu, or gets unhelpful suggestions from the search box, never reaches the cart. In analytics that loss shows up as low mobile conversion, not as a checkout problem, and nobody is asked to fix it.
Forms are the area that lands directly in the checkout. Contact, address and payment details are where a phone is at its weakest: a small screen, a touch keyboard that covers part of the page, and a thumb instead of a mouse. Baymard’s mobile research splits this into form fields, field validation and input optimisation, the last of which includes the choice of touch keyboard for each field. Each of these decides whether a shopper who has already decided to buy gets through the final screens or gives up on them.
What a good mobile form does differently
Start with the keyboard. A phone number and a card number should open a numeric keypad, and an email field should open the keyboard built for email addresses. Baymard’s work on touch keyboards also recommends switching off autocorrect on name, address and email fields, where the phone’s dictionary turns correct input into wrong input, and switching off automatic capitals in the email field. Getting this right is a matter of input types and attributes in the form markup, not a redesign, yet it is exactly the kind of detail that slips through when the form is built and tested on a desktop.
Then make autofill work. A phone usually knows the shopper’s name, address, email and phone number. Fields with the correct autocomplete attributes let the browser fill them in with a single tap. A form that confuses autofill, for instance by splitting the street and house number in a way the browser does not recognise, makes the shopper type a full address on a touch keyboard, which is the slowest and most error-prone route available.
Validation needs the most care. On a phone, an error message that appears at the top of a long form after the shopper taps continue is usually off screen, so the shopper sees nothing happen. Check each field when the shopper leaves it, put the message directly beside the field, say what is wrong and how to put it right, and keep everything the shopper has already typed. A red border with no explanation, or an address that disappears after one mistake in the phone number, gives a shopper on a small screen a reason to stop.
Finally, look at what the rest of the site brings into the checkout. Chat buttons, cookie bars, promotional strips and sticky headers are designed for browsing and travel into the checkout by default. On a phone they take space away from the form and the continue button, and with the keyboard open there is little space left to give. In the checkout, keep only what helps the shopper complete the order.
Measure against the guideline, not the shop next door
A benchmark in which nobody scores good changes what a useful comparison looks like. Matching a competitor tells you that you share its problems. The more useful question is whether each part of your mobile journey meets the guideline for that part: whether the menu leads to the product, whether search suggestions help, whether each form field opens the right keyboard, accepts autofill and explains its errors in place. Where most of the field falls short on the same points, every one you fix is a point on which you are ahead.
The check costs an afternoon. Take a phone without saved details, find a product through the menu and through search, and order it as a guest. Write down which keyboard opens in each field, whether autofill fills the address, what happens when you type a deliberate mistake in the postcode, and how much of the screen is left for the form once the keyboard is open. Fix the items on that list in the order a shopper meets them, starting with the form fields in the checkout, because those losses fall on visitors who had already decided to buy.
Sources: baymard.com, baymard.com
