UI vs UX, clearly

In one line: UI is the surface a person touches; UX is whether touching it got them where they were going — and good work designs the surface in service of the goal.

What it is

UI — user interface — is everything a person sees and operates: the fields, buttons, labels, states, copy, and feedback on a screen. UX — user experience — is the whole arc of trying to reach a goal: the steps, the waiting, the doubt, the recovery from a mistake, and how it feels to finally succeed.

They are not rivals and they are not the same job at different zoom levels. UX is the story (a person wants to get back into their locked account); UI is the set of objects that lets the story happen (an email field, a clear button, a confirmation, a success screen). Every UI element exists to serve some UX need — or it shouldn't be there.

Why it matters

Teams that blur the two ship pretty screens that frustrate, or smooth flows that look unfinished. When you can name which layer you're working in, you make better trades: "this button is gorgeous, but the experience breaks because the user can't tell what happens next" is a UX problem no amount of UI polish fixes. Conversely, a well-mapped journey still fails if the UI for one step is ambiguous.

The practical habit: for any element on the screen, you should be able to say the UX need it serves. If you can't, you've found either a missing rationale or a missing feature.

See it

How it works

Walk one ordinary task — "I forgot my password" — and hold both layers in view at once:

1. The journey (UX) has a shape: a goal ("get back in"), a sequence of steps, an emotional curve (anxious → uncertain → relieved), and failure points (the email never arrives). You design this shape before you draw a single box.
2. The interface (UI) is what you place at each step to move the journey forward: a labelled field, a button whose words say what will happen, a confirmation that names what was sent and where, an escape hatch when something goes wrong.
3. The link is the discipline: each UI element is annotated with the UX need it serves. Toggle the demo's layer control to see the same screen as a set of components, then as a lived experience — and notice that the best UI choices are the ones that quiet the anxiety the UX map predicted.

The point of separating them is not bureaucracy; it's so you can improve the right thing. Slow, confusing flow? Fix the journey. Right journey, wrong control? Fix the interface.

Build it

A UI choice serves a UX need only when the markup carries the meaning. Here's the password field from the demo, built so the experience — knowing what to type, what happened, and how to recover — is encoded in the interface itself, not bolted on.

<!-- The label, hint, and status are the UX needs made concrete in the UI. -->
<form class="reset" novalidate>
  <label class="reset__label" for="email">Email address</label>
  <input
    id="email"
    class="reset__input"
    type="email"
    name="email"
    autocomplete="email"
    aria-describedby="email-hint"
    required
  />
  <p id="email-hint" class="reset__hint">
    We'll send a reset link here. It expires in 30 minutes.
  </p>
  <button class="reset__submit" type="submit">Send reset link</button>
</form>

.reset {
  display: grid;
  gap: 0.5rem;
  max-width: 22rem;
}
.reset__label {
  font-weight: 600;
}
.reset__input {
  padding: 0.6rem 0.75rem;
  border: 1px solid #c9ccd4;
  border-radius: 0.5rem;
  font: inherit;
}
/* A visible focus ring is a UX promise: "you are here". */
.reset__input:focus-visible {
  outline: 2px solid #5b6cff;
  outline-offset: 2px;
}
.reset__hint {
  margin: 0;
  font-size: 0.85rem;
  color: #5b606b;
}
.reset__submit {
  /* The verb says what happens — that's UX writing inside the UI. */
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #5b6cff;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

Make it yours

Reproduce it with an LLM

Pitfalls & accessibility

Related

Further reading

• Your platform's accessibility guidance on labels and instructions (for example, WCAG's "Labels or Instructions" success criterion), in its own words.
• A primary text on the difference between usefulness, usability, and desirability, to sharpen what "experience" includes.