UI and UX design: what they mean and what to ask for
The difference between user interface and user experience design, what each delivers in an app or website project, and the accessibility rules worth designing to.
“UI/UX” often appears on a development quote as a single line item. It is two related jobs, and knowing which one you are paying for makes the quote easier to judge.
UX: how the product works for the person using it
User experience design decides what the product does and in what order. It starts from who the users are and what they are trying to get done, and produces things like user flows, a map of screens, wireframes and a prototype that people can try before anything is built. Good UX work includes testing that prototype with a handful of real users and changing it based on what they get stuck on.
UI: what each screen looks like and how it responds
User interface design turns the wireframes into finished screens: layout, type, colour, icons, buttons and their states, motion and error messages. Its output is a set of screen designs and, for anything larger than a few screens, a small design system of reusable components so that the developers build each element once.
What to expect as deliverables
- A short research summary: who the users are and what they need.
- User flows and wireframes for the first release.
- A clickable prototype, tested with users, with notes on what changed.
- Final screen designs for every state the developers need, including empty, loading and error states.
- A component library or style guide the developers can build from.
If a quote lists “UI/UX” with no deliverables, ask which of these it includes.
Design for accessibility from the start
Accessibility is easier to plan in than to retrofit, and it helps every user, not only people with disabilities. Two concrete standards are worth writing into the brief:
- The W3C’s WCAG 2.2 is the reference for web accessibility. One of its newer criteria, 2.5.8 (level AA), asks for pointer targets of at least 24 by 24 CSS pixels, with listed exceptions.
- For Android apps, Google recommends that anything a person can tap be at least 48dp wide and high.
Beyond sizes, ask for sufficient colour contrast, text that still works when users enlarge it, labels for screen readers, and flows that can be completed without relying on colour or gestures alone.
Design and app review
Design also affects whether an app is accepted. Apple’s App Review Guidelines expect an app to offer features, content and UI beyond a repackaged website (guideline 4.2). A thin wrapper around an existing site tends to fail that test, however polished it looks.
For how design fits into the rest of an app project, see the overview guide and the article on what UI and UX design have to do with app development.