What is UI (user interface)?

What UI means

UI is short for user interface, often just called the interface. Wikipedia defines it as the space where interaction between humans and machines happens.

That space isn't always a screen. The Interaction Design Foundation counts three kinds: graphical interfaces, voice-controlled interfaces and gesture-based interfaces. Talking to Siri or Alexa is using an interface too.

Screen interfaces go back a long way. According to the timeline on Wikipedia, Xerox PARC researchers developed the WIMP paradigm in 1970. The name comes from window, icon, menu and pointer.

I work with graphical interfaces: websites, mobile apps, admin panels. That's why the example on this page is a screen as well.

The parts of a screen

1. Navigation

Shows where you are and where you can go. The selected tab is bold, so the user doesn't lose their place.

2. Form field

Takes information from the user. The label sits above the field and doesn't disappear when you start typing. The short hint below says where the number is on the bill.

3. Button

Starts an action. Its label says what will happen when you press it. Writing the amount and the action instead of "Continue" makes the user's last check easier.

4. Status message

Tells the user what the system did. They don't have to guess whether the payment went through or where the receipt went.

Why it matters

Users get to know a product through its interface. However well the system behind it works, if the button can't be found or the message can't be understood, the user's task stays unfinished.

The first of Jakob Nielsen's 10 usability heuristics says exactly this: the design should keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. The fourth part above is that heuristic on screen. I cover all the heuristics with examples on the Nielsen's 10 heuristics page.

Error messages are part of the interface too. According to Nielsen's ninth heuristic, an error message is written in plain language, contains no error code and suggests a solution. The difference between "Error 500" and "Your account number has 8 digits" decides whether the user succeeds on the second try.

Status messages matter for accessibility as well. Success criterion 4.1.3 in WCAG 2.2 (level AA) asks that these messages reach assistive technologies such as screen readers without moving the focus.

The check is simple: is the "Payment received" text on screen also announced by a screen reader? A UX Audit includes core WCAG 2.2 checks like this one.

How it differs from UX

UI is the surface the user touches. UX (user experience) covers everything the user goes through with the company, its services and its products. Don Norman and Jakob Nielsen explain it with a film site: even if the search screen is excellent, the experience is bad when the film you're looking for isn't in the database. I explain the difference in detail in the UI vs UX guide.

Related terms

An interface usually starts as a rough sketch, called a wireframe. Once the sketch becomes clickable, it's a prototype.

Usability measures how easy the interface is to use. The behaviour a user expects from a screen is explained by their mental model.