What Is UX Design and Why Does It Matter for Ecommerce?
User experience is not visual design, though the two are routinely sold as one thing. It is whether the site works for somebody who has never seen it before and is not paying full attention, which describes almost everybody who arrives.
What UX Means
User experience is whether a site works for somebody who has never seen it before and is not paying full attention. Visual design is how it looks. They are related and frequently produced by the same people. They are not the same thing.
The second half of that definition does most of the work. Not paying full attention is the actual condition of nearly everybody who uses a shop. They are on a train, half watching something else, with several tabs open, doing this between two other tasks. Nobody studies a website.
Which explains why a site can be beautiful and unusable. It also explains why that combination is so common rather than a rare accident. The design is judged by people looking at it carefully, on a large screen, in a meeting called for the purpose. The experience is judged by somebody distracted, on a phone, who did not choose to be there and will not persevere.
The review conditions and the use conditions are opposites. Everything about how sites get approved encourages attention to appearance and discourages attention to experience, which is why the failure is so persistent among businesses that care a great deal about their site.
A useful shorthand: the interface is what a shopper looks at. The experience is what happens to them. A shop can be praised for the first and lose money on the second all year.
Why It Is Different On A Shop
Three differences separate a shop from a brochure site. Together they make experience failures considerably more expensive.
Money changes hands. Anxiety rises as somebody approaches payment. Anxiety amplifies every small confusion. A minor ambiguity that would be shrugged off while reading an article becomes a reason to stop when card details are on screen.
The journey is much longer. A brochure site asks somebody to arrive, read and possibly make contact. A shop asks them to find a category, compare items, choose a variant, check delivery, add to a basket, enter an address, choose a delivery option, pay and receive confirmation. More steps means more places to fail. The failures also compound.
An alternative is one search away. Somebody confused by a brochure site frequently works a little harder, because they came for that particular business. Somebody confused by a shop leaves, because four competitors sell the same product and one of them will be easier.
There is a consequence worth stating in commercial terms. On a brochure site, an experience failure costs an enquiry that might never have arrived anyway. On a shop it costs a specific order, from somebody who had already decided to buy, with a value you could calculate. That is why this work pays for itself faster on a shop than anywhere else.
Navigation And On-Site Search
People do not read a shop. They scan it for something resembling what they came for, build a rough picture of where things must be within a few seconds and then act on that picture, which is frequently wrong.
That produces two distinct behaviours a shop has to serve at once. Browsers do not know exactly what they want and expect to be led through the catalogue. Searchers know what they want and prefer to type it rather than learn your structure. Most shops are built for one and tolerate the other.
Why the search box gets used more than designers expect. Because typing four words is faster than understanding somebody else's idea of how a catalogue divides. Navigating a menu on a phone is also genuinely tedious. Searching is not a fallback for people who failed at navigation. For a large proportion of shoppers it is the first choice.
What your search logs reveal about the catalogue. This is where the behaviour becomes actionable. The words customers use, which are almost never your product names. Things they expect you to stock. Spellings you should accommodate. And, most usefully, the distance between how your catalogue is organised and how customers think it should be, which shows up as searches for terms that do not correspond to any category you have.
Almost no shop reads them. It is free research into your own customers, generated continuously. It sits in a report nobody opens.
The Decision Journey
At every stage of a purchase the shopper has exactly one question in mind. The site either answers it or loses them, which makes this the most practical way to review a shop.
Orienting. Am I in the right kind of shop? Owed: an immediate, plain statement of what you sell.
Narrowing. Which of these? Owed: filters that work and enough information in the grid to compare without opening every item.
Evaluating. Is this the one? Owed: the facts that decide it, covered in the product pages guide.
Reassuring. Can I trust these people? Owed: delivery, returns and evidence that others have bought successfully.
Committing. Let me pay. Owed: no surprises and no obstacles.
Waiting. Where is it? Owed: confirmation, dispatch and tracking.
The exercise this produces is genuinely useful and takes an afternoon. Write the question for each stage on your own shop, then find where it is answered. The stages with no answer are your priorities. They are usually reassuring and waiting, because those two have no obvious page owner and get missed by everybody. The wider picture sits in how website design affects ecommerce conversion rates.
Forms And Inputs
Forms are where a shop stops offering and starts asking, which is why every friction here is charged directly against a decision somebody has already made.
Field order. Following how somebody thinks rather than how a database is arranged. Postcode before street, because that is the order a lookup makes sensible.
Keyboards on a phone. A numeric field should summon a numeric keyboard and an email field should summon one with an at symbol. Getting this wrong taxes every single entry.
Autofill. Let it work. Forms built in ways that defeat a browser's stored details make somebody type an address they have typed a hundred times, which is a self inflicted wound.
Address entry. A postcode lookup helps most people and there must always be a way to enter an address manually, because lookups do not contain every address and somebody living in one is not going to argue with your form.
Labels that stay visible. Placeholder text inside a field disappears the moment somebody types, leaving them unable to check what a box was asking for.
Validation. Say what is wrong, say where, say it in words, then keep everything they had already entered. Clearing a form because one field failed is the single most reliable way to lose a completed order.
When Things Go Wrong
Four moments matter more than any of the pleasant ones, because a shopper who has hit a problem is already reconsidering. What happens next either recovers them or confirms their suspicion.
Out of stock. Give a return date, offer to notify them or show the nearest alternative. Somebody who arrived wanting that specific item is among your most valuable visitors. A dead end wastes a visit you paid to acquire.
Payment declined. Say what might help, keep the basket exactly as it was and never phrase it in a way that implies the customer has done something suspicious. Most declines are ordinary bank behaviour.
Invalid input. Covered above and worth repeating here, because it is the error shoppers meet most often.
No search results. Never a dead end. Suggest alternative spellings, show related categories, offer the popular items, give a way to ask. An empty results page is a customer telling you what they wanted and being told nothing.
The reason shops neglect all four is structural rather than careless. Error states are not in the design brief, because a brief describes what should happen. They are also difficult to reach deliberately, so they are rarely seen during approval. Most businesses have never looked at their own error pages, which is worth an hour of somebody's time this week.
Accessibility
Accessibility is the same discipline applied to more people. It is not a separate project bolted on at the end. Treating it as one is why it never happens.
What it means in practice. Everything reachable and operable with a keyboard. Text with enough contrast to be read comfortably. Form labels that stay visible. Meaningful descriptions on images. Information never conveyed by colour alone, which matters for stock status and error messages. Visible focus, so somebody navigating without a mouse can see where they are. A sensible heading structure. Captions on video.
Who it affects. A far larger group than people assume, because it is not only permanent impairment. It includes temporary situations, such as somebody with a broken arm using one hand. It includes situational ones too, such as bright sunlight, a noisy train or holding a child. It includes everybody whose eyesight changes with age, which is eventually all of us.
Why it improves the site for everybody. Clear labels, sufficient contrast, keyboard operability and descriptive text all help the distracted person in a hurry from block one. Accessibility work and general usability work overlap almost entirely.
Accessibility also carries obligations under UK law. This page is general information rather than legal advice. Anybody wanting to know where their business stands should take proper advice on their own position.
Testing With Real People
Analytics tells you where people stopped. It never tells you why. Five people watching a screen tell you why in an afternoon, which is why this remains the highest value activity available to a small business.
How to do it without spending anything. Find five people who resemble your customers and do not work for you. Give each one a realistic task, such as buying a particular kind of item within a budget. Then say nothing at all and watch.
What to record. Not opinions, which are unreliable. Record where they hesitate, where they backtrack, where they scroll looking for something, where they read the same thing twice and where they ask you a question. Every hesitation is a finding, whether or not the person could explain it.
The hardest part. Not helping. The instinct to say it is just there on the right is overwhelming. Giving in destroys the only information the exercise produces. Silence is the method.
Why five is enough. You are looking for broken things rather than measuring a difference. Broken things repeat immediately. If three people in a row cannot find the delivery information, you do not need a fourth to establish it. This is also why the exercise does not need the order volumes that split testing requires.
Common Mistakes
Each of these comes from designing for somebody who is not your customer.
Designing for the person who built it. Everything is findable to somebody who already knows where it is, which describes everybody in the approval meeting and nobody arriving from a search result.
Novelty navigation. Hidden menus, unusual scrolling and interfaces that have to be learned. Every one asks a stranger to invest effort before receiving anything.
Removing labels from icons. A cleaner appearance bought by making people guess. Almost no icon is universally understood. A word beside it costs a few pixels and removes the guessing entirely.
Hiding the basket. Making somebody hunt for what they have already chosen, at the exact moment they were ready to pay for it.
Redesigning on opinion. Somebody senior dislikes something, so it changes. Nothing measurable was identified, so nothing measurable improves. The exercise then repeats in two years.
The connecting theme is that all five feel like improvements to the people making them. That is precisely why the five people in block eight are worth more than any internal discussion. What a stranger can achieve is the only test that settles it, as set out in what makes a good ecommerce website.
Designed for people
who are not concentrating.
We design against what a distracted stranger can achieve rather than against how a page looks in a meeting. We will happily sit with you while five people try to buy something from your existing shop.
What a build covers:
Ongoing management afterwards sits inside our fixed monthly fee. Build work is quoted per project.
Twenty guides.
One subject.
This page covers experience. The rest of the series covers where conversion is lost, how category and product pages should work, what a build costs and why the search ceiling is set during the build.
