The difference in one sentence
UI, user interface, is everything a person can see and touch: buttons, type, colour, spacing, icons, the layout of a screen. UX, user experience, is what it's like to be that person: whether they knew what to do, how long it took, and how they felt at the end.
The useful way to hold this: UI is a noun, UX is a verb. You can point at UI. You can only observe UX by watching someone try.
| Question | Which one |
|---|---|
| Is this button the right size? | UI |
| Should there be a button here at all? | UX |
| Is this label readable at arm's length? | UI |
| Do people understand what the label means? | UX |
| Are these two greys too similar? | UI |
| Did anyone notice the error message? | UX |
How each one fails
Good UI with bad UX is the more common and more expensive failure, because it survives review. It looks finished. A carefully spaced, beautifully typeset checkout that asks for a delivery address before the user has chosen a delivery method is a design that passed every visual check and still loses sales.
Bad UI with good UX is the classic internal tool: ugly, cramped, and used happily every day by people who get their work done in four clicks. It survives because the flow is right, but it costs trust with new users, who read visual carelessness as a signal about everything they can't see.
Diagnosing which one you have
When a screen feels wrong, the fastest diagnostic is to watch one person use it without helping them. Where they pause tells you which problem you have.
- They pause and squint, then continue correctly, UI. They found it, it just cost effort
- They pause and ask "what do I do now?", UX. The path isn't there
- They click the wrong thing confidently, UX. Your labels describe your system, not their task
- They do it right but call it ugly, UI. Real, and fixable in an afternoon
- They finish, then can't say whether it worked, UX. There's no feedback at the end
Which to fix first
UX first, almost always. A polished screen in the wrong place is wasted work; when the flow changes, the polish is thrown away with it. Get the sequence, the labels, and the decisions right in the roughest possible form, boxes and words on paper is enough, then make it look like something.
The exception is when the visual state is so poor that nobody will engage long enough to reach the flow. A landing page that looks abandoned doesn't get a UX problem; it gets no users.
Applying this to your own screen
- Write the task, not the screen"Send a client an invoice", not "invoice page". The task is the unit of UX.
- List every decision the user must make, in orderEach decision is a place to get lost. Remove or defer the ones that aren't needed yet.
- Sketch it flat, with no stylingBoxes and real words. If it doesn't make sense in grey boxes, colour won't save it.
- Then style it, onceType scale, spacing, one accent. Now the polish sits on a flow that will survive.
Common mistakes
- Treating "UI/UX" as one job, then only ever doing the UI half
- Polishing a screen before knowing whether the screen should exist
- Judging UX from your own use, you know where everything is
- Assuming an ugly interface is a UX problem, or that a pretty one isn't
Key takeaways
- UI is what the interface is made of; UX is what happens to the person
- Good UI with bad UX is the expensive failure, because it passes review
- Watching one person in silence diagnoses which you have in five minutes
- Fix the flow first, then style it once
Try it yourself
Ask someone who has never seen your product to do one specific task while you say nothing at all. Write down every place they pause for more than three seconds. Those pauses are your list, in priority order.
CHECK YOUR UNDERSTANDING
Pass the quiz below to unlock this.