process & strategy
UX vs UI
What's the difference between UX and UI?
UI is the surface - the visible, interactive layer you look at and touch: colours, type, buttons, layout. UX is the whole experience of using the thing, screens and everything around them: finding it, the flow, the wait, the recovery when it goes wrong. UI is part of UX, not a synonym for it.
Also known as: UI vs UX, difference between UX and UI
The demo
The same coffee-order screen, seen two ways. Switch the lens and watch what each discipline is actually responsible for - and notice how much of UX never appears on the screen at all.
Switch lenses to see what UI owns and what UX owns.
What this demo shows (text version)
A mock coffee-ordering screen (a "Flat white", a price, size options, an "Add to order" button and a wait time). The UI lens annotates the visible surface: the colours and type, the button's shape and states, the spacing and alignment, the icons - the look and feel.
The UX lens annotates the whole experience instead: can you find and reorder your usual quickly, how many taps the order takes, whether the wait time is honest and clear, and what happens when an item is sold out. Most of these never show on this one screen. The point is that UI is the surface layer and UX is the entire experience around it - a beautiful UI can still wrap a poor UX.
Switching lenses on the same screen, you could see it: UI owns how the order button looks; UX owns whether you could reorder your usual in two taps and what happens when it's sold out. A gorgeous UI sat right on top of a journey that could still be a misery. That's why "make it pretty" and "make it work" are not the same job.
The cleanest way to hold it: UI is what it looks like; UX is how it works, across the whole journey. You can have a beautiful UI with a terrible UX (stunning screens, nine taps to do anything) and a plain UI with a great UX (no-frills, but it just works). One is a subset of the other - all UI is part of the UX, but most of UX happens in flows, content, performance and edge cases the UI never shows.
Why it matters beyond pedantry: confusing them leads teams to polish pixels while the journey stays broken, and to hire for one when they need the other. Judge a product by the whole experience - the [information architecture](/entries/information-architecture/), the [affordances](/entries/affordance/), the recovery from error - not just the prettiness of the surface.