What is a user interface?
The user interface is where a person and a machine meet. On a website or an app it is everything on the screen: the navigation, the buttons, the forms, the icons, the type and the images, and the way each of them responds to a tap, a click or a keystroke. In a broader sense voice assistants, car dashboards and the buttons on a camera are interfaces too, but in design work the term almost always means the graphical interface on a screen.
The graphical user interface grew out of research at Xerox PARC in the 1970s and reached a mass audience with the Apple Macintosh in 1984, bringing windows, icons, menus and a pointer to people who had never typed a command. Most of that vocabulary still holds. Touchscreens added gestures, and responsive design taught interfaces to reshape themselves for every screen.
Why it matters
Why a user interface matters
The interface is the product, as far as most people are concerned. They never see the database or the code, only what is on the screen, and they judge the whole thing by it within seconds. A clear interface makes a product feel easy and trustworthy; a cluttered or inconsistent one makes even a powerful product feel broken. It is also where a brand's identity becomes behavior: the type, color and tone of a brand system are lived out in buttons, menus and error messages, many times a day, by people who may never see an advertisement.
In practice
How a user interface works in practice
- 01
UI design starts from a structure that has already been worked out, usually wireframes that settle what goes on each screen. The designer builds the visual system on top: a grid, a type scale, a palette in which each color has a job, spacing rules, an icon set and a library of components. Each component is designed in every state, default, hover, focus, pressed, disabled, loading and error, because an interface spends much of its life in states other than the default.
- 02
Then it is built and checked against reality. Contrast is measured, tap targets are sized for thumbs, keyboard focus is visible, text is tested at larger sizes, and the screens are reviewed on real devices with real content, which is always longer, shorter or messier than the placeholder. The interface is refined from there through testing and use.
Watch out
What people get wrong about user interfaces
Designing the screenshot instead of the interface: a perfect static mockup with ideal content and no thought for loading, errors, empty lists or very long names. Second, inventing new controls for the sake of novelty, so people have to learn what a familiar pattern would have told them instantly. Third, sacrificing legibility for style, with pale type, tiny labels and icons without words, which looks refined in a presentation and fails in the hand. And leaving the small text, the error messages and empty states, to whoever happens to be writing the code.
