UI vs UX: What’s the difference?

Good (and bad) UX and UI guide our decisions every day, often subconsciously. They often determine which websites we read and buy from, which cars we drive, computers we use, and whether we keep using a service.

Okay, so it’s important. But what exactly is the difference between UX and UI? 

UX, or user experience, covers every aspect of a product’s design and its ability to attract and keep a customer. This includes everything from pre-purchase impressions to interactions with the product during its life cycle. 

UI, or user interface, focus on surface or visual elements like colors, graphics, layouts, and buttons. It is often what helps a user receive value out of a product or service. 

Are UI and UX interchangeable terms, competing concepts, or fundamentally tied together? We'll explain the answers in this guide. 

How are UI and UX related?

User Interface (UI) and User Experience (UX) are closely related phrases, often used interchangeably. But they’re in fact quite different.

When people say UI, they’re usually referring to the elements on a tech device, software, or application that allow them to interact with that product. You might also hear about UI for things like vehicles or an appliance like a microwave, though less commonly. 

UX is a more overarching concept, since it’s the overall experience a user has with any product, brand, or service. In fact, a User Interface is actually a part of a user experience, and it’s especially important for digital products.

What's UI?

UI, or a user interface, implies a human will interact with a machine. The concept dates back to at least 1979, when researchers at Xerox PARC developed the first UI. At that time, the UI was called a GUI (graphical user interface), and it had a digital interface, pointing systems, and menus to support commands such as opening, moving, and deleting files. 

To understand modern UI, it helps to know its foundational elements. User interface elements fall into one of four categories: 

1. Input controls: data fields, checkboxes, buttons, drop-downs, toggles, text fields

2. Navigation components: icons, tags, slider, breadcrumb, search field, pagination

3. Informational components: progress bar, notifications, tooltips, message boxes, modal windows

4. Containers: accordions, which let designers hide and reveal elements 

Most user interfaces combine several, or all, of these elements. There's no exact recipe or mixture, though the final goal is always the same: create an optimal user interface to help people use this program or machine as effectively as possible. 

The most advanced UI makes its use so easy that the interface feels invisible. All labels, directions, and messaging are intuitive and clear. Some examples of optimized interfaces in everyday life: smartphones, computers, email login websites, and your coffee machine.

What's UX?

Donald Norman, a cognitive psychologist, designer, and author who's worked with HP, Apple, and the Nielsen Norman Group, is universally considered the pioneer of UX. He coined the phrase "user experience" in 1993 while working at Apple and later wrote "The Design of Everyday Things," which solidified the concept of UX. 

These five elements, or pillars, of user experience have become core to its study and practice: 

1. Information architecture - the arrangement of content elements throughout the experience to facilitate human understanding

2. Interaction design - how users interact with the product and how it behaves in response

3. Usability - putting the user experience design to the test by gaining real user feedback 

4. Prototyping - the next step in furthering the design process and iterating on what was learned from early user feedback 

5. Visual design - providing the user with engaging and informative visuals that help with aesthetics or usability (or both) 

Experiences are notoriously difficult to measure and UX combines many contexts, sensory inputs, and touchpoints. How a person feels about each of these is subjective and hard to control. But UI is a bit easier to judge. When measuring UI, a researcher might simply need to record the effectiveness of things like button clicks, notification triggers, directional messages, completed data fields, etc.

However you’re measuring UX, an optimal experience is usually characterized by: 

• Easy navigation, with users quickly able to get from point A to B

• Product usage that’s consistent and growing

• Positive feedback from users  

• Increased customer loyalty  

Why both UI and UX are essential 

So, which is more important: UI or UX?

It may sound like a cop out, but both are critical. And the reality is that prioritizing one over the other can do more harm than good. Great UI design doesn't guarantee great UX, and a good UX doesn't mean the UI is without fault. 

The good news: utilizing a data-driven approach for your user journey can provide practical next steps for both UI and UX. A user journey entails learning who your user is, understanding their preferences, and anticipating how they’ll interact with your product (and other products).  

Those who drive UI and UX design within organizations are called UI and UX designers. Learning about what each profession does helps shed even more light on the concepts of UI and UX. 

What do UI and UX designers do? 

The huge difference between UI and UX becomes even more apparent when you examine what UI and UX designers do. 

UX designer's role

A UX designer is in charge of visualizing and designing a user’s complete journey with a product. In doing so, they should understand user needs, preferences, and behaviors.  

A UX designer's goal is to ensure that every interaction someone has with a product delivers the value that was promised.

The UX designer's responsibilities may include:

• Creating user personas

• Analyzing data

• Conducting user and market research

• Writing UX copy

• Prototyping

• Validating hypotheses 

Related roles are researchers, analysts, graphic designers, UI designers, and product managers. 

UI designer's role

A UI designer's job is to create tools that help a user interact with a product. By investigating user needs, evaluating user requirements, and incorporating user feedback in collaboration with UX and product managers, UI designers transfer company goals into the interface of a product. 

Ideally, what they design will enhance the customer's experience and contribute to good feelings about the overall brand. 

 The UI designer's responsibilities may include:

• Establishing visual guidelines

• Designing mockups 

• Wire-framing

• Interface layout

• Interface design

• Interaction design

• Visual design

Every product team can accomplish their goals more effectively and elegantly when they have a strong UI designer and UX designer on board. While these are separate functions, one main skill ties them together: user research. 

From the beginning of the product life cycle to the end, UI and UX designers work together to produce and learn from structured user research and many user studies and feedback rounds. In addition, both will typically be involved in, or contribute to:

• Product planning

• Product design

• Product launch

• Digital asset management

• User story mapping

• Product roadmap 

UI and UX: next steps

By now, you’ve learned more about the concepts of UI and UX and how the two are related. 

With this new understanding, you likely won't look at digital products the same way again. 

Want a new view into pulling off great UI and UX? Airtable has a slew of time-saving templates, including many related to product, design, and UX. 

Airtable can help you keep your data in one location. It also helps you communicate with stakeholders and keep teams aligned—two things that are core to UI and UX design.