Skip to content
UI & visualUX lexicon

What is a user interface (UI) in UX?

A user interface (UI) is everything a person sees, touches or hears when using a product, from buttons and text to layout, color and feedback.

also calledUI · interface · front end

When you press a button on a coffee machine, that button is its interface. When you tap Pay on your phone, the screen you tap is the interface of the app. It is the point where a person and a system meet and talk to each other, and almost every digital product you use is mostly interface.

In short
  • A user interface is the point where a person and a product interact, through screens, voice, controls or text.
  • Most interfaces are built from inputs, navigation, information displays and containers.
  • UI is a part of UX: how it looks and responds versus how the whole experience works.
  • A good interface is clear, consistent, gives feedback and works for many kinds of users.
01

What counts as an interface

The word is broader than screens. A user interface is any means by which a person gives instructions to a product and receives something back.

The most familiar type is the graphical user interface, with windows, buttons, menus and icons you click or tap. There are also voice interfaces, where you speak to a smart speaker, and command-line interfaces, where you type instructions into a terminal. Physical controls, like the dial on a car stereo, are interfaces too.

In practice, when designers say UI they mean the visual and interactive layer of a digital product: what appears on screen and how it responds when you use it.

02

The pieces that make one up

Most interfaces are assembled from a familiar set of parts:

  • Input controls: buttons, text fields, checkboxes, toggles, sliders.
  • Navigation: menus, tabs, breadcrumbs and links that move you around.
  • Information display: text, images, icons, tables, notifications.
  • Containers: cards, modals, panels and lists that group things.

Around these sit decisions about layout, spacing, typography, color and motion. A designer's job is to arrange the parts so the interface feels obvious, even though dozens of choices went into making it so.

03

UI versus UX

The two are constantly mixed up. A decent way to remember it: UI is how the product looks and responds, while UX is how the whole experience feels and whether it helps you get something done.

A beautiful interface can still be a poor experience if it hides important features. A plain interface can be a great experience if it makes a task effortless.

UI is one part of UX, not a separate world. Good teams treat them as connected, since you cannot judge an interface without knowing what people are trying to do with it.

04

What makes an interface good

People rarely notice a good interface, which is the point. It tends to share a few qualities: it is clear about what things are and what they do, it is consistent so that learned behavior carries over, it gives feedback so you know your action registered, and it forgives mistakes.

It also respects different users. Text is readable, colors have enough contrast, and controls are big enough to hit with a thumb.

Usability heuristics are a handy checklist for spotting problems. They are not laws, but they catch a lot of common issues.

05

Common ways interfaces fail

Overloaded screens, hidden controls, inconsistent styles and unclear labels are the usual suspects. Another is designing for how the interface looks in a presentation and not how it behaves with real, messy content: a name that is forty characters long, an empty list, a slow connection.

The cure is to test with real people early and often.

Common questions

User interface (UI): your questions, answered

What is a user interface?

A user interface is the means by which a person interacts with a product or system. In digital products it includes the screens, buttons, menus, text, images and responses that people see and use to complete tasks.

What are the main types of user interfaces?

The main types are graphical interfaces with visual elements, command-line interfaces driven by typed text, voice interfaces controlled by speech, and touch or gesture interfaces. Many products combine several of these.

What is the difference between UI and UX?

UI covers the visible, interactive parts of a product, such as layout, color and controls. UX covers the whole experience of using it, including how easy and useful it is. A product needs both to feel good.

What are examples of user interfaces?

A smartphone home screen, a website's checkout form, a car's touchscreen, a smart speaker you talk to, a terminal window and an ATM screen are all user interfaces, even though they look and work quite differently.

What makes a good user interface?

A good interface is clear, consistent and responsive. It tells you what things do, gives feedback when you act, helps you recover from mistakes, and works for people with different abilities, devices and levels of experience.

People also ask

More quick answers

What is a GUI?

GUI stands for graphical user interface, which lets people interact through visual elements such as windows, icons and buttons instead of typing commands.

What does a UI designer do?

A UI designer shapes the look and behavior of an interface, including layout, typography, color, icons and component states, and works closely with UX designers and developers.

What are UI elements?

They are the building blocks of an interface, such as buttons, text fields, menus and cards.

Is UI design the same as visual design?

They overlap heavily. Visual design focuses on aesthetics, while UI design also covers how elements behave and respond to input.

What is a natural user interface?

It is an interface that feels intuitive because it uses everyday actions such as touching, swiping or speaking instead of learned commands.

Keep reading
Free and open source

Found this useful? A GitHub star helps other designers find it.

Star on GitHub