UX and UI — what they really are, how to judge them, and where “9,400% ROI” came from

Two letters side by side in every proposal, and almost always used as though they meant the same thing. They do not, and the difference is not academic: it decides what you get for your money, and at which point in the project you are still allowed to change your mind.

This text is written for the person buying, not the person designing. It also carries a section most such texts do not: where the figure "every dollar spent on UX returns a hundred" actually came from — a figure half the industry repeats, this article's own previous version included.

UX and UI are not synonyms

The simplest distinction that holds up in a conversation with an agency:

UX is the decisions about what, and in what order. How many steps separate landing on the site from sending an enquiry. What is visible without scrolling. Which pieces of information are needed for a decision and which merely take up room. What will not be on the site at all. The output of UX work is a structure and a rationale — not a picture.

UI is the decisions about how it looks and responds. Colour, type, spacing, button states, hover behaviour, error messages. The output is a visual design that can be handed over for coding.

There is one practical consequence, and it is worth knowing before you sign: UI is built on an approved UX, not instead of one. If a proposal says "UX/UI design", prices it as a single line and delivers it as one file full of colour, you are buying UI, and the UX layer has either been skipped or done by assumption. Where that boundary runs technically, and why the sketch is deliberately ugly, we set out in the wireframe text.

And the thing that disappears from proposals most often: UX is not the aesthetic layer. A site can be handsome and unusable, and it can be plain and effective. If the conversation about UX comes down to whether you like the shade, you are talking about UI.

What human-centred design is — by the standard, not by the agency

There is an international standard for this, and it is worth knowing, because it gives you a language in which you can ask for something specific.

ISO 9241-210, "Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems", defines human-centred design as "an approach to systems design and development that aims to make interactive systems more usable by focusing on the use of the system and applying human factors/ergonomics and usability knowledge and techniques". We quote from the publicly available first edition of 15 March 2010; the edition in force is 2019 and is paid.

The standard lists six principles. Below, each one translated into what it means for your budget and your risk.

The design is based upon an explicit understanding of users, tasks and environments. Meaning: somebody established who arrives here and why, before drawing the first screen. Without it you get a layout fitted to somebody else's habits — usually to that agency's last project.

Users are involved throughout design and development. This is the most frequently skipped principle and the most expensive to skip. If nobody tests the design on people along the way, the mistakes surface after launch — and then the same fix costs many times more. For us that multiplier runs at roughly 1:30, calculated on our own rates, and we set the arithmetic out in the wireframe text.

The design is driven and refined by user-centred evaluation. Not by the team's opinion and not by the board's. The difference is measurable: an opinion gives you a preference, an observation gives you a behaviour.

The process is iterative. This is the principle that vanishes from contracts first, because it reads as a cost. Approving a design blind, on the strength of one mock-up and with no revision round planned, is cheaper to quote and dearer to deliver — because the revisions happen anyway, only at the stage where they are called a rebuild.

The design addresses the whole user experience. Not just the screen. The confirmation message, the phone route, what happens after the form is sent, and whether anyone answers it.

The design team includes multidisciplinary skills and perspectives. The standard says outright that human-centred design is not one person's job. If the proposal has a single designer doing everything from research to code, you know what you are not buying.

Nielsen's ten heuristics as a checklist for the buyer

The most useful set of principles in this field is thirty-six years old and still works. Jakob Nielsen developed it with Rolf Molich in 1990, and narrowed the present version in 1994 — and that is the most interesting thing about it: the list came out of a factor analysis of 249 real usability problems, selected so that as few principles as possible would explain as many failures as possible. This is not somebody's opinion about good design.

Below is the full ten, and then three of them written out as questions you can ask while looking at your own site.

Error prevention (heuristic 5). Control question: does the form check what is typed as it is typed, or does it let you click "send" and only then show what is wrong? And after an error, do the fields keep what was already entered?

We checked our own contact form against this and it does not fully pass. Our form library is called without a validation mode, which by default means "check on submit" — exactly the behaviour described above as the worse one. We do keep the entered values after an error, so nobody fills the form in twice. We record this here because an article that grades other people's sites without checking its own is worth what an advertisement is worth.

Visibility of system status (heuristic 1). Control question: after clicking "send", does the user know what is happening? Our loading indicator appears after a one-second delay — deliberately, so that it does not flicker when the response is fast — but that is a trade-off, not compliance, and we treat it as one.

Match between the system and the real world (heuristic 2). Control question: does the interface speak your customer's language or your supplier's? "Configure your instance", "select an SKU variant" and "entity management panel" are sentences written by somebody describing their own work rather than your sales.

The other seven are equally useful and all of them can be checked without technical knowledge — that is where their value lies. Heuristics do not replace a test with real people; they catch about half the problems before that test happens.

What research shows about how people read a page

Two findings matter more than the rest here, because both state their sample and both translate directly into layout.

The first ten seconds decide whether anyone stays. A Microsoft Research study covered 205,873 pages with 10,000 visits each — over two billion dwell times — and fitted a Weibull distribution to them. The result: the average visit lasts under a minute, the probability of leaving is highest in the first ten seconds and stays high for the next twenty. After about thirty seconds the rate of leaving drops markedly — whoever has stayed half a minute usually stays longer.

It is worth knowing the number behind that, because it settles the shape of the whole curve: the shape parameter came out below one on 98.5% of pages. In this distribution a value below one means "negative ageing" — the longer somebody has been on the page, the less likely they are to leave. The authors called the pattern "screen-and-glean": a fast sift first, in which the risk of abandonment is high, and reading after it, in which the risk falls.

The design consequence is specific and does not amount to "make it nice": the first screen has to carry the answer to why this page exists and what the reader gets from it. Not a promise of the answer, not a slogan about comprehensive solutions — the answer.

People do not read, they scan, and they do it in a repeatable way. An eye-tracking study with 232 participants looking at thousands of pages found an F-shaped pattern: a horizontal sweep across the top of the content, a second, shorter horizontal sweep below it, and a vertical run down the left edge.

The authors attach a caveat worth repeating, because it drops out of the citations: this is an "approximate, general shape, not uniform pixel-perfect behaviour". Sometimes it is an E, sometimes an inverted L, and the layout itself can change the pattern — a product photograph or a long heading pulls attention elsewhere.

The practical conclusion from both studies together: the most important sentence on the page should be the first sentence, not the punchline, and the information that settles a decision cannot sit in the right-hand column or below the third scroll. This is not a matter of taste and you can check it without a study — cover everything below the first screen and ask somebody from outside what this company does.

Where “9,400% return on UX” came from

If you have been collecting proposals, you have certainly seen this figure or one of its cousins: "every dollar invested in UX returns a hundred", "UX ROI is 9,900%". The previous version of this article gave 9,400%.

We followed the citation chain, and its ending is worth knowing.

Every trail leads to one report: "The Six Steps For Justifying Better UX", by Andrew Hogan and Deanna Laufer, published by the research firm Forrester on 28 December 2016. And this is where the problems start.

The report costs 1,495 dollars. It is not publicly available, so almost nobody citing the figure has seen it at source.

The report's public summary contains no ROI figure. We checked — it says that many firms still expect proof of return on investment, and gives no number.

The citations run in a circle. Each article cites the next article, that one cites another, and the chain never ends at data. That is the definition of an unsupported figure, however serious the firm's name in the footnote sounds.

On top of that, the circulating version is 9,900% and ours said 9,400%. We were repeating a number nobody had seen, and getting it wrong as well — which is precisely the mechanism by which such figures stay alive.

What the real return on UX is, given that it is not a multiplier. It is not a single number and cannot be promised in advance, but three places where it shows up can be named:

Prevented cost. A mistake found on a sketch costs a rectangle being moved; the same mistake found after launch costs a component rebuilt, fields changed in the system, queries adjusted and tests run. That is the 1:30 arithmetic on our rates.

Less support. Every question the site does not answer comes back as a phone call or an email. That cost does not appear in the project quote and does appear every month, in your team's time.

A higher baseline conversion rate — but measured at home, not copied from somebody else's case study. Why other people's results do not transfer to your site, and how to calculate this honestly, we set out in the text on conversion rate.

What is different when you sell to businesses

Most UX guides describe a shop. In B2B selling, three things work differently, and they are worth naming before you commission a design built for e-commerce.

More than one person decides. The person who arrives is searching; the person who approves is somebody else — often after being sent a link. So the site has to be readable in two ways: quickly, by the searcher, and selectively, by the approver, who will spend three minutes on it and want to find scope, references and how to make contact.

The conversion is a conversation, not a purchase. The goal is earlier and cheaper for the visitor, which shifts the whole design: instead of removing friction from a basket, you are removing uncertainty before a first email. The most effective element is often the simplest — saying outright what happens after the form is sent and how soon somebody replies.

The cycle is long, so the site gets read more than once. The same person comes back a week later to compare. A layout that works well the first time but makes nothing easy to find the third time costs you at exactly that moment — and that is the argument for navigation rather than one long page.

All three follow from the same thing as the dwell-time research: attention is short and it returns. The first ten seconds decide whether somebody stays today; being able to find a specific fact quickly decides whether they come back with somebody else.

What it costs and what you are paying for

We will not give a bracket, because any bracket we gave would be either our own price list or an invention. What we will give is what the price is made of, so that you can read somebody else's proposal.

The number of unique screens, not of pages. Ten service pages built the same way are one screen to design and nine to fill. A proposal counting each one separately is describing something other than it appears to be.

Whether research is included. User interviews, a task-based test, an analysis of the current site — these are separate line items and the ones most likely to fall out during price negotiation. They fall out because they are not visible in the file at the end.

How many revision rounds. Two rounds in the contract and three in reality is the most common cause of a scope dispute. Agree the number, and agree what a round is.

Whether what emerges is a system or a set of pictures. A design handed over as a coherent set of components can be extended; a design handed over as five independent screens needs a designer for every new page. That settles costs for years, not the price today.

What you own at the end. Source files or a preview? A font licence, or only its use in this project? That can be the difference between changing supplier and redrawing the design from nothing.

How to judge a UX/UI proposal

Five questions, all of which can be asked without design knowledge.

"What will the person who lands on this page do?" If the answer is "familiarise themselves with the offer", the agency has no goal, only a scope.

"How do you know this layout will work?" A good answer is "we do not, we will check" or "from the study we will run in week two". A bad answer is "we have experience".

"What happens when our copy is twice as long?" The question sounds trivial and settles whether the design is a system or a picture.

"Which elements will we be able to change ourselves?" The last moment at which this answer is cheap.

"What are you not doing in this project?" The most important sentences in any proposal begin with "does not include". Their absence does not mean everything is in the price.

What this text does not settle

How to run a test with users. The five-participant method, tasks instead of questions and what follows from it are in the wireframe text.

How to measure whether the site works. The conversion rate, its denominator, and why benchmarks are not a target, have their own text.

Accessibility and WCAG. A separate field with its own legal requirements and its own text, not a subsection of UX.

What to settle before designing. Goals, audience and scope are decided in the brief — separately.

Where these figures come from

• The ten usability heuristics — Jakob Nielsen and Rolf Molich, first published 1990, present set narrowed in 1994 on the basis of a factor analysis of 249 usability problems: "10 Usability Heuristics for User Interface Design", Nielsen Norman Group, page updated 30 January 2024.
• The definition and six principles of human-centred design — ISO 9241-210, "Ergonomics of human-system interaction — Part 210: Human-centred design for interactive systems". We quote from the publicly available first edition of 15 March 2010; the edition in force is 2019 and is paid, so we cannot quote its wording.
• The first ten seconds, the thirty-second threshold and the shape parameter below one on 98.5% of pages — source study: Chao Liu, Ryen W. White, Susan Dumais, "Understanding Web Browsing Behaviors through Weibull Analysis of Dwell Time", Microsoft Research, SIGIR 2010; 205,873 pages with 10,000 dwell-time observations each. A practitioner's summary: Jakob Nielsen, "How Long Do Users Stay on Web Pages?", Nielsen Norman Group, 11 September 2011.
• The survival curve in the figure — computed from the Weibull formula, not drawn by hand. The paper reports distributions of both parameters rather than one pair fitted to the whole web, so the k = 0.5 and λ = 35 s used in the chart are illustrative values taken from the ranges the authors give: a shape parameter below one on 98.5% of pages, and dwell times up to 70 seconds on 80% of pages. The study's finding is the direction of the curve, not its exact position, and that is how we caption it.
• The F-shaped reading pattern — Jakob Nielsen, "F-Shaped Pattern For Reading Web Content", Nielsen Norman Group, 2006. An eye-tracking study with 232 participants. We carry the authors' caveat along with the finding: it is an approximate shape, not pixel-perfect behaviour.
• The 1:30 ratio between a fix on the sketch and a fix in code — our own rates and our own working calculation, set out in the wireframe text. It is not a market benchmark.
• Our form's validation and the delayed loading indicator — checked in this service's code on 16 September 2026, not asserted.
• The report that "9,400% ROI" leads to — Andrew Hogan, Deanna Laufer, "The Six Steps For Justifying Better UX", Forrester, 28 December 2016, price 1,495 dollars. The public summary contains no return-on-investment figure.
• What is not here: the previous version of this text gave 9,400% ROI from UX, a 200% conversion lift from a good interface, the claim that 75% of users judge a company's credibility by its site's looks, lifts of 25%, 30% and 35%, and the 2.7 billion dollars Amazon supposedly gained from a checkout redesign. None of those figures had a source; they were removed, not corrected.