What is User Interface Design?

Tap something on a screen and a chain of events fires off that you never see. The interface is the part you do see. It takes what you did, hands it to the system, and brings back an answer in a form you can read, hear, or feel.

Operating systems have one. Mobile apps and voice assistants too. Designers tend to judge them against usability and accessibility standards rather than how nice the screen looks, which surprises people who assume this is a visual discipline.

ISO 9241-161, the International Organization for Standardization’s specification for visual interface elements, catalogs generic parts such as buttons, sliders, and drop-down lists so different platforms implement them in comparable ways (ISO, 2016).

What Is a User Interface?

Most of a system runs fine without you. A database schema doesn’t need anyone looking at it. A background job finishes whether or not you’re awake. The interface is the exception, the single layer built so a person can push something in and get something back.

Whether a thing qualifies comes down to one test. Can a person interact with it directly?

Some that pass:

• A touchscreen on a phone, tablet, or kiosk
• A keyboard and mouse paired with a monitor
• A voice assistant that listens and answers out loud

The shape changes enormously. A 1970s command prompt and the touch panel on a hotel elevator look nothing alike. Both do the same work anyway: take input, show output in a form the brain can process without extra translation.

What Is the Difference Between User Interface and User Experience?

User interface means the specific screen, button, or voice prompt a person touches or speaks to right then. User experience is the wider thing wrapped around it, covering how the product felt from the first tap through to whatever happened at the end.

An example makes the line clearer.

• Button color, icon shape and menu placement are interface decisions
• Whether checkout left someone confused, stalled, or annoyed is experience

Don Norman coined the phrase while working at Apple in 1993. He took the title “User Experience Architect” deliberately, because “interface” on its own felt too narrow for what he wanted to study.

Airbnb gets cited constantly here, and for good reason. The founders started photographing listings themselves once they worked out that grainy amateur photos were killing bookings. Not one button changed.

What Are the Core Components of a User Interface?

The same parts keep reappearing regardless of platform. Some collect input, some display information, a few manage both at once.

• Buttons, which fire one action when pressed or clicked
• Form fields for typed or selected input
• Menus that tuck a group of related options behind a single trigger
• Icons, standing in for an action or object with a picture instead of a word
• Windows and modals, holding content inside a bounded area you can often drag around
• Cursors and pointers showing where the next input will land

Studied as a set, this inventory is what practitioners mean by user interface components. The same handful turns up in almost every application built for a screen.

Navigation deserves its own mention. Breadcrumbs near the top of a page tell a visitor where they sit inside a site’s structure without stacking a second full menu on top of the first one.

IBM built its Carbon Design System to keep parts like these consistent across dozens of products, so a button behaves the same whether it sits in a cloud dashboard or a phone app.

How Does a User Interface Work?

It runs on a loop. Input arrives, the system processes it, a result shows up, and something confirms the action actually happened.

Speed is what decides how that loop feels. Designers still lean on the three response time thresholds Jakob Nielsen set out at the Nielsen Norman Group: 0.1 seconds feels instantaneous, 1 second keeps a person’s train of thought intact even though they notice the wait, and 10 seconds is roughly the limit before attention wanders off (Nielsen Norman Group, 1993).

Broken into stages, the loop looks like this:

• A tap, click, keystroke, or spoken command goes in
• The system reads it and works out what to do
• Something comes back as text, an image, sound, or motion
• A visual or audio cue confirms it registered

A single button click might fire a request through an API that fetches or updates data on a server, with no full page reload in sight. The interface then repaints only the part that changed, which is what most web applications handle through Ajax.

What Design Principles Guide User Interface Design?

A short list of principles separates an interface that feels obvious from one that argues with you.

• Affordance, where a control’s shape or styling signals what it does (a button that looks pressable)
• Visibility, meaning the system’s current state stays on screen rather than hidden
• Consistency, so the same action produces the same result everywhere in the product
• Feedback on every action, immediate and noticeable
• Error prevention, which means blocking the mistake rather than explaining it afterward

Jakob Nielsen published his 10 usability heuristics in 1994. Heuristic evaluations against that same list are still standard practice three decades on, which says something about how little the fundamentals move.

Target sizing follows a related rule. Apple’s Human Interface Guidelines currently set a 44 by 44 point minimum for a tappable control, and Google’s Material Design asks for 48 by 48 density-independent pixels. Both trace back to Fitts’s Law, the finding that smaller and more distant targets take longer and more effort to hit accurately.

Gestalt principles cover a related piece. Group related controls together instead of scattering them, and the layout gets easier to scan at a glance. That grouping is also what produces a clear visual hierarchy, pulling the eye toward the most important control before anyone reads a word of copy.

None of this exists to make a screen look a particular way. It exists to protect usability.

Jared Spool’s well documented account of an unnamed major retailer puts a number on error prevention. Swapping a mandatory Register button for a Continue button during checkout raised completed purchases by 45 percent and added an estimated 300 million dollars in revenue over the following year.

What Standards Govern User Interface Design?

Taste is not the governing force here. Several formal standards define what counts as accessible and usable, and regulators now treat them as a floor rather than a recommendation.

A few numbers worth knowing.

• WCAG 2.2 became a World Wide Web Consortium Recommendation on October 5, 2023, and organizes 86 success criteria across three conformance levels, with Level AA requiring 56 of them (World Wide Web Consortium, 2023)
• 94.8 percent of the top one million home pages tested in 2025 still carried at least one detectable WCAG 2 failure (WebAIM, 2025)
• ISO 9241-11 defines usability through effectiveness, efficiency, and satisfaction

Level AA is the tier most regulation points at, including the European Accessibility Act and Section 508 in the United States.

Accessibility standards exist so a product stays usable for people on screen readers, switch devices, or keyboard-only navigation. Mouse users were never the constraint.

Low color contrast between text and background is still one of the most common failures on the open web. It is also one of the easiest to fix, which makes its persistence a bit embarrassing for the industry.

Platform guidelines sit on top of the formal standards. Apple’s Human Interface Guidelines and Google’s Material Design both codify spacing, color, and component behavior inside their own ecosystems.

Target Corporation learned this expensively. In 2008 the retailer settled with the National Federation of the Blind for 6 million dollars after Target.com was found inaccessible to screen reader users, and the case dragged accessibility out of design circles and into mainstream legal territory.

What Are the Types of User Interface?

Interfaces sort into a handful of recognizable types, each defined by how input goes in and how the system answers back.

The graphical type traces back to the Xerox Alto, built at Xerox PARC in 1973, and reached a mass audience a decade later through the Apple Macintosh.

Command line came first and never went away. Developers and system administrators still live in it daily for work that would be slower through menus and clicks. Anyone who has tried to rename 400 files through a file manager understands why.

Which Interface Type Fits Which Platform

Platform shapes which type dominates, though most products blend several rather than committing to one.

• Web leans graphical, built with HTML, CSS, and JavaScript, increasingly paired with voice search
• Mobile is touch first, voice second on most phones
• Desktop stays graphical, with command line tools still common among developers
• Wearables combine touch and voice, mostly because there is almost no screen to work with
• Embedded systems often get a minimal touch or button interface, sometimes no screen at all

On a phone, a full navigation menu usually collapses behind a hamburger to save space. The same layout then has to stretch and shrink across every screen size in between, which is what responsive design handles instead of maintaining a separate site per device.

Alexa and Siri pushed voice into ordinary daily use and proved a screen is not a requirement.

How Do You Design a User Interface?

Designing one follows a rough sequence, and teams skip steps or double back constantly.

Most professional workflows move through research, structure, prototyping, and polish, more or less in that order.

1. Gather requirements and research how people currently complete the task
2. Sketch out structure and content placement before any visual styling begins
3. Build an interactive prototype so stakeholders can click through the flow
4. Apply the visual layer, meaning color, typography, spacing, and imagery
5. Hand the finished design to developers with specs and assets attached

Step two usually takes the form of a wireframe, kept deliberately plain so early feedback lands on layout, not aesthetics. Once that skeleton holds up, it becomes a mockup, the higher fidelity version showing what the finished screen will actually look like.

Plenty of teams ignore this order. Basecamp has been open for years about skipping heavy wireframing and designing directly in working code, on the argument that a clickable draft exposes problems a static picture never will. They have a point, though it only works if your designers can write the code.

Which Tools Are Used to Design a User Interface?

The tooling splits into a few camps. There are the design tools themselves, then prototyping and handoff, then the code frameworks that turn a finished file into something that runs.

Figma leads the first camp by a wide margin, capturing 82.3 percent of surveyed designers for interface design work, according to the UX Tools Design Tools Survey of over 2,200 respondents collected between November 2024 and January 2025 (UX Tools, 2025).

What makes it stick is real time multiplayer editing and one file that stays in sync for everyone, plus a free tier that comfortably covers solo work. The catch is that everything runs through a browser or a wrapped browser app, so a flaky connection ruins your afternoon and very large files can crawl.

Adobe XD is the other name people still bring up. Its selling point was tight integration with Photoshop and Illustrator for teams already paying Adobe. Then Adobe put it into maintenance mode in 2023 during its planned 20 billion dollar acquisition of Figma, and when that deal collapsed under regulatory pressure that December, the company confirmed in early 2024 that it would not resume investing in XD. Bug fixes only now. No new features.

Figma’s prototype mode links frames together to simulate real navigation, so stakeholders can click through a design before a line of code exists.

On the code side, a lot of teams move from a finished design straight into Tailwind CSS, since its utility classes map closely to the spacing and sizing decisions already made in the design file.

InVision, once the default for clickable handoff and design specs, shut down its design collaboration services entirely on December 31, 2024, after losing ground to Figma’s all in one approach.

How Is a User Interface Tested and Evaluated?

Five users will surface roughly 85 percent of the usability problems in a typical interface, a finding from Jakob Nielsen and Tom Landauer’s research at the Nielsen Norman Group. Fifteen users, run in three separate rounds of five, gets you close to 100 percent, since each extra person mostly repeats what earlier sessions already caught.

Most testing needs are covered by a few methods. Usability testing means watching real people attempt real tasks and noting where they hesitate or give up. Heuristic evaluation has an expert review the interface against a known checklist, Nielsen’s principles usually, with no outside users involved. A/B testing runs two live versions at once and lets actual behavior settle the argument.

Heuristic evaluation is the fastest and cheapest of them, no recruiting and no scheduling. It also rests entirely on the reviewer’s judgment, which is the exact thing testing with real people exists to check.

When Does a User Interface Fail?

An interface fails the moment it starts working against the person using it. Polish is irrelevant at that point.

The usual culprits.

• Consistency breaks, so the same icon or gesture suddenly means something different elsewhere in the product
• A required action gets buried and the person cannot find the one control they need
• Assistive technology gets locked out, with screen readers, switch devices, or keyboard navigation unable to reach part of the screen
• Overdesign piles on controls, animations, and steps that solve nothing and add friction

Checkout flows make the cost concrete. Baymard Institute’s ongoing research puts the average cart abandonment rate at 70.22 percent, and estimates that better checkout design alone could lift conversion by 35.26 percent at a typical large ecommerce site (Baymard Institute, 2025).

Microsoft learned the consistency lesson with Windows 8. The company sold more than 100 million licenses in the first seven months on the market, and the missing Start button still stayed the single most complained about change (Al Jazeera, 2013). A Start button came back in Windows 8.1 the following year, and the full Start Menu returned in Windows 10.

A structured web accessibility checklist catches a good number of these before launch, well before a real person hits the wall in production.

Something as small as burying the actual call-to-action under five competing buttons can quietly tank conversion. The surrounding visuals will not save it.

None of which means an interface has to be simple to succeed. It means every control on the screen has to earn its place.

How Has User Interface Design Changed Over Time?

The history runs further back than the graphical systems most people credit.

Douglas Engelbart demonstrated the computer mouse, on-screen windows, and real time collaborative editing in one 90 minute session on December 9, 1968, five years before a graphical interface reached a shippable machine.

Alan Kay’s work at Xerox PARC pushed the idea further, shaping the Smalltalk programming environment and the Dynabook concept, a tablet-like personal computer imagined decades before hardware could build one.

Visual style kept shifting long after the graphical model itself settled. Apple’s iOS 7 dropped the leather textures, wood grain, and drop shadows that had defined its earlier apps and replaced them with flat design and plain typography. Google answered a year later. Material Design, introduced at Google I/O in June 2014, applied consistent shadows, motion, and grid based layout across Android, Chrome OS, and the web at once.

The British Design Council’s Double Diamond framework, published in 2005, gave the process behind these shifts a name: discover, define, develop, deliver, a repeating cycle of exploring broadly and then narrowing down.

Shapes keep changing. The underlying goal has not moved since Engelbart’s demo, which is to shorten the distance between what a person wants and what the system does.

FAQ on What Is A User Interface

What Is a User Interface Also Called, and Is GUI the Same Thing?

UI is the common short form, and some people call it the front end of a system. GUI covers only the graphical variety, one category among several types of user interface, so the two terms are not swappable.

Is a Command Line Interface Still Used Today?

Yes, heavily. Software development, server administration, and cloud infrastructure work all still run on it.

Git, npm, and AWS CLI are typed commands end to end, valued for scripting and automation that a graphical tool handles far more slowly.

What Is the Best User Interface Design Tool for Beginners?

Figma, for most people. It runs in a browser, needs no install, and the free tier covers a first project.

Its usage lead also means more tutorials and community files to learn from than anything else out there.

What Are Common User Interface Design Mistakes?

Relying on color alone to carry meaning tops the list. Leaving empty and error states undesigned is close behind, along with shipping without real user testing.

Each one looks minor by itself and then compounds, turning small friction into a reason people quit.

Does Every Piece of Software Need a Graphical Interface?

No. A background service, a script, or an API has none, because nothing renders it for a person to act on.

One becomes necessary the moment a human needs to trigger, monitor, or read output from the software.

What Should You Fix First in a User Interface?

Order matters more than effort here. Accessibility and consistency get fixed first, because a broken screen reader path or a mislabeled control blocks task completion no matter how refined the layout is. Interaction feedback comes next. Visual refinement waits until the structure holds.

• Screen reader paths, keyboard traps, and icon meaning first
• A visible or audible response to every input second
• Color, spacing, and typography once the structure is sound

Google’s Interaction to Next Paint metric sets the working threshold at 200 milliseconds for a page’s response to any click, tap, or keystroke, a benchmark that joined Core Web Vitals in March 2024 (Google, 2024).

From here, the natural next step is UI design as a practice, the discipline that turns these interface fundamentals into a repeatable process.