UI stands for user interface. It is the point of contact between a person and a digital product: the screens, buttons, menus, forms and visual details you tap, click, swipe or speak to when you use an app or a website. Put simply, UI is everything a user sees and interacts with on the surface of a product.
Good UI often goes unnoticed. When a checkout flows without a hitch or a menu sits exactly where you expect it, that is UI doing its job quietly. Poor UI is the opposite: the button you cannot find, the form that rejects your phone number for no clear reason, the text you have to squint to read. This guide covers what UI actually is, the parts it is built from, the main types of interfaces, the principles behind strong design, and why any of it matters for a business.
UI in one sentence
A user interface is the space where interaction between a person and a machine happens, including every visual element, control and piece of feedback that lets the two communicate.
For most websites and apps, that means the visual layer: the layout, colours, typography, imagery, and the interactive controls a person uses to get something done. UI is a discipline of its own, but it sits alongside UX (user experience), which is the broader feeling of using the whole product. We cover that difference further down, and in more depth in our guides to what UX is and UI versus UX.
A short history: from typed commands to touch and voice
The interface has changed shape every time the technology behind it shifted.
- Command line (1960s to 1980s). Early computers were driven by typed text commands. You had to know the exact syntax, and there were no icons or menus to guide you. Command line interfaces still exist today in tools like Terminal and PowerShell, mostly used by developers and system administrators.
- Graphical user interface (1980s onward). Work at Xerox PARC, later popularised by Apple and Microsoft, introduced windows, icons, pointers and menus. Suddenly people could point and click instead of memorising commands. The GUI opened computing to a general audience and remains the dominant interface today.
- Touch (late 2000s). Smartphones and tablets replaced the mouse with the finger. Tapping, swiping and pinching became the default way most people now interact with software.
- Voice, gesture and beyond (2010s to now). Voice assistants, motion sensors and, more recently, conversational AI interfaces have pushed interaction past the screen. Some of these use no traditional visual controls at all.
Each stage did not fully replace the one before it. A modern product often blends several: a website you click, a phone you touch, and a smart speaker you talk to.
The building blocks: UI elements
Every interface is assembled from a set of standard components. Designers group them by the job they do. Understanding these categories makes it easier to audit a screen and choose the right control for each task.
|
Category |
What it does |
Common examples |
|
Input controls |
Let users enter data or trigger an action |
Buttons, text fields, checkboxes, radio buttons, dropdown menus, toggle switches, sliders, date pickers |
|
Navigation components |
Help users move around the product |
Navigation bars, breadcrumbs, tabs, pagination, search bars, hyperlinks, steppers |
|
Informational components |
Communicate status or feedback back to the user |
Tooltips, progress bars, notifications, loading indicators, alerts, badges, modal messages |
|
Containers |
Group and organise related content |
Cards, accordions, tables, sidebars, drawers, dividers |
A few practical notes on choosing controls:
- Use radio buttons when there are two to five options and the user can pick only one. Switch to a dropdown once you have six or more options, to save space.
- Use checkboxes when a user can select several options at once, not just one.
- A toggle suits an on or off setting that takes effect immediately, such as turning notifications on.
- Reserve prominent buttons for the main action on a screen. If everything looks equally important, nothing stands out.
Getting these small decisions right is a large part of what makes an interface feel obvious rather than fiddly.
Types of user interfaces
“UI” usually means the graphical interface of a website or app, but it is worth knowing the full family. Each type suits a different context.
- Graphical user interface (GUI). The most common type by far. Users interact with visual elements such as windows, icons, buttons and menus, using a mouse, trackpad or touchscreen. Nearly every website, mobile app and desktop program is a GUI. When people say “UI design”, they almost always mean this.
- Touch interface. A variety of GUI built for direct finger input on a screen. Touch targets need to be large enough to tap accurately, and gestures like swipe and pinch replace hover and right click.
- Voice user interface (VUI). Interaction happens through spoken commands rather than a screen. Siri, Alexa and Google Assistant are the familiar examples. VUIs demand clear prompts and short, forgiving conversation flows because there is nothing to look at.
- Gesture and Zero UI. Cameras and sensors read body movement and translate it into commands. Gaming systems such as the Nintendo Wii and Microsoft Kinect popularised this, and the idea of “Zero UI” describes interactions that need no visible screen at all, such as a motion sensor that turns on a light.
- Form-based interface. A structured layout of fields, checkboxes and buttons built to collect and submit information. Booking systems, sign-up flows and application forms fall into this group.
Most real products mix these. A banking app might pair a touch GUI with a voice assistant and a form-based transfer screen.
UI design principles that hold up
Strong interfaces tend to follow the same handful of ideas. None of them are decoration; each one exists to make the product easier to use.
Clarity. The purpose of every screen should be obvious. Users should never have to guess what a control does or where a link leads. Clear labels beat clever ones.
Consistency. Buttons, colours, spacing and wording should behave the same way across the whole product. When patterns repeat, users learn the interface once and carry that knowledge everywhere. Design systems, such as Google’s Material Design, exist largely to enforce this.
Visual hierarchy. Size, colour, contrast and position guide the eye to what matters first. A clear hierarchy tells users where to look and in what order, which is a topic we cover fully in our guide to visual hierarchy principles.
Feedback. The interface should respond to every action. A button that changes state when pressed, a spinner while a page loads, a confirmation after a form submits: these small responses reassure users that the system heard them.
Accessibility and contrast. An interface should work for people with low vision, colour blindness, motor differences and those using screen readers. Meeting the WCAG contrast guidelines, providing text alternatives and supporting keyboard navigation widens your audience and is increasingly a legal expectation in Australia.
Familiarity. Borrow patterns people already know. A magnifying glass means search, a cart icon means checkout, an underlined blue word means a link. Reusing established conventions lowers the effort of learning your product.
For a broader look at how these ideas apply across a whole site, see our rundown of essential web design principles.
UI versus UX in brief
UI and UX are related but not the same.
- UI is the visual and interactive layer: the buttons, screens, colours and controls.
- UX is the overall experience of using the product: how easy, useful and satisfying the whole journey feels, from first click to final outcome.
A helpful way to picture it: UI is the house, UX is whether living in it is comfortable. You can have a beautiful interface that is still frustrating to use, and a plain one that works brilliantly. The two disciplines overlap and depend on each other. If you want the full comparison, read our dedicated pieces on what UX is and UI versus UX.
Why good UI matters for your business
UI is not only an aesthetic concern. It shapes how people behave on your site, and that shows up in the numbers.
- First impressions form fast. Visitors judge a website within seconds, and that judgement is largely visual. A cluttered or dated interface pushes people to hit the back button before they read a word.
- It affects conversions. Clear buttons, readable forms and an obvious path to purchase remove friction at the exact moments where sales are won or lost. Small UI fixes on a checkout can move revenue.
- It builds trust. A tidy, consistent interface signals a business that pays attention to detail. A messy one raises doubt, fairly or not.
- It reduces support load. When an interface explains itself, fewer people email to ask how something works.
- It keeps up with expectations. Interface conventions shift, and users bring habits from the best apps they use to your site. Our overview of current web design trends tracks where those expectations are heading.
Responsive behaviour matters here too. An interface that looks sharp on a laptop but breaks on a phone loses a large share of the audience, since most browsing now happens on mobile. Our guide to responsive web design best practices goes into how to get that right.
Frequently asked questions
What does UI stand for?
UI stands for user interface. It refers to everything a person sees and interacts with on a digital product, including screens, buttons, menus, forms and visual styling.
What is the difference between UI and UX?
UI is the visual and interactive layer of a product, such as the buttons and layout. UX is the overall experience of using it, including how easy and satisfying the whole journey feels. UI is one part of UX.
What are the main types of user interface?
The common types are graphical (GUI), touch, voice (VUI), gesture and Zero UI, and form-based interfaces. The graphical interface used on websites and apps is by far the most widespread.
What are UI elements?
UI elements are the standard components an interface is built from. They fall into four groups: input controls like buttons and text fields, navigation components like menus and tabs, informational components like alerts and progress bars, and containers like cards and accordions.
What makes good UI design?
Good UI is clear, consistent, accessible and quick to respond. It uses a sensible visual hierarchy, familiar patterns and readable contrast so people can complete tasks without stopping to think about the interface itself.
Do I need a UI designer or a web designer?
For most websites the two overlap. A capable web design team handles UI as part of building the site, covering layout, visual design and interactive elements together with the underlying build.
Is UI only about how something looks?
No. Looks matter, but UI is equally about how controls behave, how the interface responds to actions, and how easily people can reach their goal. Aesthetics and usability work together.
Bringing it together
UI is the surface where people meet your product. It is built from a defined set of elements, arranged according to principles that have held up across decades of changing technology: clarity, consistency, hierarchy, feedback, accessibility and familiarity. Get those right and the interface disappears into the background, which is exactly the point.
If your website’s interface feels dated, awkward on mobile, or simply is not converting the way it should, our team can help. Take a look at our web design and development services, or see how we approach interface work in our roundup of the best UI and UX web design services in Australia.
