UX Design: In e-commerce, excellence is not an option

When someone cannot finish an order on your store, they do not think "the information architecture could be clearer". They think the site is broken.

That is not a metaphor. In the Baymard Institute survey of why people abandon a cart (leaving window shoppers aside), 17% say they left because the website had errors or crashed. Some of those were real outages. A lot of them were not: a form that wiped the card number after a typo, an error message pinned to the top of the page while the faulty field sat below the fold, a search that returned nothing for a product you actually sell, a modal they could not close with their thumb.

You see a design decision. They see a bug. And unlike a real bug, this one never shows up in your error monitoring. It only shows up as a silent drop in conversion.

First things first: UX is not UI

One clarification before we go any further, because the two words are constantly mixed up. UI, user interface, is what your customer sees: colors, buttons, typography, spacing. UX, user experience, is what happens to them: whether they find the product, understand the delivery date, recover from a typo, and manage to pay without having to think about it. A store can have a beautiful UI and a broken UX: a gorgeous checkout that wipes your card number is still a broken checkout. Everything in this article is about UX: not how your store looks, but how it behaves when a real customer uses it, one-handed, in a hurry.

The error that never happens is the only good error

Jakob Nielsen's usability heuristics are 30 years old and still the most honest checklist in digital commerce. Two of them matter more than the rest the moment money is on the table:

• Prevent the error (heuristic #5). Constraints, sensible defaults, the right keyboard, a confirmation before anything destructive.
• If it still happens, help people recover (heuristic #9). Plain language, the exact problem, an obvious next step.

A red border with no text fails both. So does a message that says Invalid input. So does a checkout that shouts "email is required" the millisecond someone taps the field: NN/g compares that to grading the exam before the student has answered a single question.

Baymard's 2025 checkout benchmark is uncomfortable reading if you assumed "the big sites have this figured out": 64% of desktop checkouts and 63% of mobile checkouts at leading US and EU stores rate mediocre or worse. Two percent rate good. None perfect (Baymard).

What a useful error actually looks like

Take a French postcode that does not match the city. The lazy version is a red banner: "Invalid address". The useful version sits under the field, in the customer's language, and offers a fix: "This postcode does not match Lyon. Did you mean 69001 (Lyon 1er)?"

That is not polish. It is NN/g's efficiency rule plus WCAG 3.3.3 (suggest a correction when the system knows one). In practice:

• Put the message next to the field, not in a toast twelve hundred pixels away.
• Use icon + border + text. Color alone is invisible to a significant share of your customers, and it fails accessibility by design.
• Do not blame them. "Invalid", "illegal", "incorrect" all sound like the customer did something wrong. The system failed to accept an input; the sentence should own that.
• Never erase what they already typed, including the card number after a CVV typo. Wiping the form means asking them to decide the purchase a second time.
• Validate when they leave the field (or when a postcode, phone or card number is complete), not while they are still typing, and never on first focus.

Baymard found that 31% of sites still have no inline validation at all, and a slice of the rest implement it so aggressively that testers thought they had broken the page. Three details decide which side you are on: no premature warnings, the error disappears the moment the value is fixed, and a small green check on valid fields so anxious customers stop re-reading the whole form.

If you can only rewrite five messages this month, measure first. Which validation errors occur most often, and which of them precede an abandonment? Those are the ones that deserve a human sentence. Baymard calls this adaptive error messaging. You can call it "stop writing copy for errors nobody ever hits".

A declined payment is a different species. The customer needs to know whether they were charged, whether the stock is still reserved for them, and what to try instead. "Payment failed" plus a retry button that loops is the shortest path from a UX error to a chargeback.

If the store says nothing, they assume it froze

"Visibility of system status" is heuristic #1, and it is really a trust rule. Predictable feedback is what makes the next tap feel safe.

A few patterns that read as breakage even when the backend is perfectly healthy:

• "Add to cart" with no badge, no drawer, no toast, so they tap twice and order two.
• A Pay button that stays clickable while the bank is thinking, so they tap twice and you create a double authorization.
• A spinner with no timeout on a 3-D Secure redirect. After a few seconds, as far as a thumb on a tram is concerned, that is a freeze.
• "Step 2 of 4" that then springs a surprise account creation or SMS step.

Match the indicator to the stakes: a quiet confirmation for "added to cart", a blocker only when the user genuinely has to stop. And when the layout is already known, a skeleton screen beats an infinite spinner.

Your menu is in the wrong corner of their hand

Steven Hoober watched 1,333 people use their phones in public. Almost half were operating one-handed; most of the rest were cradling the phone and still tapping with a thumb. They change grip every few seconds depending on the task. They are not sitting at a desk with a mouse.

So a hamburger menu in the top-left corner, a microscopic "X" in the top-right of a full-screen popup, or a primary button trapped under a cookie banner are not "the mobile version of the desktop site". They are reach errors. Primary actions belong where the thumb already is: bottom navigation, a sticky "Add to cart" that is actually tappable, a menu in the thumb zone rather than wedged against the status bar.

The desktop cousin of that idea is accent color. One color should mean "this is the action that matters". If filters, chips, secondary links and "Pay now" all share the same red, people have to read the interface instead of recognizing it. That is not branding. That is camouflage.

Phones have only grown taller since 2013. The top of the screen did not get easier to reach.

Stop drawing fake inputs

The operating system already knows how to collect a phone number. type="tel" opens a keypad, type="email" offers the @, and a native date picker will always beat a custom calendar that breaks autofill. Blocking paste on card fields does not make you more PCI-compliant; it manufactures typos.

The same logic applies to how fields are named. The HTML autocomplete attribute is a contract with the browser: shipping street-address, shipping postal-code, email, tel. Fill it in correctly and Safari, Chrome and the password manager type the address for your customer. Leave it empty, or worse, force autocomplete="off" "for security", and you have invented a forty-second tax on every returning customer. This is also an accessibility requirement (WCAG 1.3.5), not a developer trick.

One level up, address lookup as they type (the BAN or La Poste in France, or any serious provider) is the grown-up version of autocomplete. Just keep a manual fallback for the days the API is slow: a widget that spins forever is, once again, "the site is broken".

Give them an exit and a way back

People tap the wrong thing constantly. Heuristic #3 is the clearly marked emergency exit: undo, cancel, click outside, the Escape key, a close button large enough to actually hit.

NN/g's rule on modals is blunt. Use them to prevent irreversible damage, or to ask for information without which the flow cannot continue. Not for a newsletter, not for a cookie upsell, and not for anything in the middle of checkout. A modal in checkout is the surest way to send a customer who was ready to pay down a password-reset rabbit hole.

On mobile, watch for the opposite bug too: a slightly wide finger that dismisses a dialog they actually needed. Destructive confirmations should never close on an outside tap; non-critical modals should close three ways (button, Esc, click outside). If your desktop "non-modal" becomes a full-screen trap on an iPhone, you do not have a responsive overlay. You have a hostage situation.

Resumability is the same heuristic stretched over time. A cart should survive a closed tab. A twelve-field checkout should not reset because the postcode was rejected. If the flow is long, send a magic link to resume. In European e-commerce, the customer interrupted mid-purchase on their phone is not an edge case: it is the default.

And guest checkout is not a nice-to-have: 18% of shoppers have abandoned because the site demanded an account, and 62% of sites still hide "Continue as guest" under a "New customer" label (Baymard 2025). If they have to hunt for it, you do not offer it. Collect the account after the order, with a magic link, not as a toll booth before the sale.

Speak like someone waiting for a parcel, not like an ERP

"2–3 business days" is a sentence written by logistics. "Arrives Thursday" is a sentence written for a human. According to Baymard, nearly half of leading stores still make the customer do the calendar math, public holidays included. A countdown to the cutoff ("order in the next 43 minutes for delivery on Thursday") beats a static "order by 11:00 PST" that nobody will convert from a time zone they do not live in.

Other vocabulary errors that look trivial and behave like bugs:

• Marking only optional fields, or only required ones: 61% of sites get this wrong, and in user tests 32% of participants skipped at least one required field (often the phone number) before hitting a wall.
• Password rules worthy of a central bank on a store account. Overly strict rules drove up to 19% abandonment among people who already had an account, and then failed the reset email. A 6–8 character minimum plus a magic link is plenty to sell shoes.
• Back-office leaks: SKU, 3PL, "fulfillment", "pre-authorization", "3-D Secure challenge". Translate them. "We check your card now, you are charged when we ship" is a status message. "RUM" is not.

Minimalism is the same respect applied to structure. Baymard counts 23.48 form elements on the average US checkout against an ideal of 12–14 (7–8 actual fields). Nearly one in five abandoners said the checkout felt too long. Most of those extra fields were never needed to ship a parcel.

If they cannot find it, you do not sell it

Search is not a widget. For a catalog that cannot be browsed in fifteen seconds, it is the store. A "no results" page that shrugs is a closed shutter, and about half of sites still offer no way out. "Check your spelling" is not a way out; nobody reads that sentence. Related categories, a broadened query with five product previews, recently viewed items, a phone number, best sellers: that is a way out.

The same goes for navigation built on your warehouse names instead of the customer's words, and for recommendations that are either random or slightly unsettling. "Recently viewed" and "bought together" earn their place; "we noticed you were looking at wedding rings" does not.

Lists, finally, respect the fact that the cart already serves as external memory. NN/g observed that people avoid anything labeled "Wishlist" (it sounds like a gift registry, and it sounds like work) and refuse anything that demands an account to save an item. "Save for later": visible, no login. The operational bonus is real: a list is a legitimate reason to email "this is going out of stock", but in the EU that email still requires proper opt-in consent. The UX error and the GDPR error are often the same field.

One last unglamorous error: your articles are unreadable

If you publish a blog, the browser's reader mode is a test your markup either passes or fails. Real hierarchical headings, a real page title, text that is actually text. A marketing page made of images and divs fails reader mode, fails assistive technology, and fails the readers who simply wanted to save the article for later. It is a small thing next to checkout. It is also a credibility leak.

Frequently asked questions

Audit it like a customer: on a phone, with a typo

You will not see these errors from the office desktop, logged in as admin. You will see them on a tram, on 4G, with one letter too many in the postcode and a cookie banner covering the Pay button.

Start there this week: error text next to the fields, inputs that keep their values, guest checkout in plain sight, the right type and autocomplete on every field, a working close control on every overlay, a delivery date instead of "business days", a no-results page that offers a next step. None of that requires a replatform. Most of it does not even require a full sprint.

The stores that leak the fewest customers are not the ones with the most animations. They are the ones whose errors read like sentences, whose buttons sit where the thumb already is, and whose customers never have to wonder whether the site just crashed.

At Saphes IT-Systems, we audit that journey exactly the way a first-time visitor lives it: errors, empty states, search, checkout, right down to the unclosable modal you have stopped noticing, and we fix the failures that already look like bugs. If you want to know which of your "design choices" your customers have already filed under "broken", let's talk.