UI vs UX

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.

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.

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

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.

1. 01Write the task, not the screen"Send a client an invoice" — not "invoice page". The task is the unit of UX.
2. 02List 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.
3. 03Sketch it flat, with no stylingBoxes and real words. If it doesn't make sense in grey boxes, colour won't save it.
4. 04Then style it — onceType scale, spacing, one accent. Now the polish sits on a flow that will survive.