UI vs. UX: What’s the difference between user interface and user experience?

At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that enable a person to interact with a product or service.

User experience (UX), on the other hand, is the internal experience that a person has as they interact with every aspect of a company’s products and services.

It’s common for folks to use these terms interchangeably, or sometimes incorrectly. If you’ve ever wondered, “What is UX and UI and what’s the difference between them?” in today’s post we’ll dig a bit deeper into UI and UX to get a better understanding of the differences between them.

Contents

• What is UI?
• What is UX?
• What’s the difference between UI and UX?
• UI/UX experts weigh in

What is UI?

Simply put, user interface (UI) is anything a user may interact with to use a digital product or service. This includes everything from screens and touchscreens, keyboards, sounds, and even lights. To understand the evolution of UI, however, it’s helpful to learn a bit more about its history and how it has evolved into best practices and a profession.

A brief history of the user interface

Back in the 1970’s, if you wanted to use a computer, you had to use the command line interface. The graphical interfaces used today didn’t yet exist commercially. For a computer to work, users needed to communicate via programming language, requiring seemingly infinite lines of code to complete a simple task.

By the 1980’s the first graphical user interface (GUI) was developed by computer scientists at Xerox PARC. With this groundbreaking innovation, users could now interact with their personal computers by visually submitting commands through icons, buttons, menus, and checkboxes.

This shift in technology meant that anyone could use a computer, no coding required, and the personal computer revolution began.

By 1984 Apple Computer released the Macintosh personal computer which included a point and click mouse. The Macintosh was the first commercially successful home computer to use this type of interface.

The accessibility and prevalence of personal—and office—computers meant that interfaces needed to be designed with users in mind. If users couldn’t interact with their computers, they wouldn’t sell. As a result, the UI designer was born.

As with any growing technology, the UI designer’s role has evolved as systems, preferences, expectations, and accessibility has demanded more and more from devices. Now UI designers work not just on computer interfaces, but mobile phones, augmented and virtual reality, and even “invisible” or screenless interfaces (also referred to as zero UI) like voice, gesture, and light.

Today’s UI designer has nearly limitless opportunities to work on websites, mobile apps, wearable technology, and smart home devices, just to name a few. As long as computers continue to be a part of daily life, there will be the need to make the interfaces that enable users of all ages, backgrounds, and technical experience can effectively use.

>> Related Reading: Invisible UI, a Hidden Opportunity for Great UX

What is UX?

User experience, or UX, evolved as a result of the improvements to UI. Once there was something for users to interact with, their experience, whether positive, negative, or neutral, changed how users felt about those interactions.

Source: User Experience Rocks

Cognitive scientist Don Norman is credited with coining the term, “user experience” back in the early 1990’s when he worked at Apple and defines it as follows,

‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

That’s a broad definition that could encompass every possible interaction a person could have with a product or service—not just a digital experience. Some UX professionals have opted for calling the field customer experience, and others have gone a step further to simply refer to the field as experience design.

No matter what it’s called, Norman’s original definition of UX is at the core of every thought experience design—it’s all-encompassing and always centered around the human being it's interacting with.

To understand what makes an experience a good one, Peter Moreville developed a great visual to highlight what goes into effective UX design.

Source: Peter Moreville

This ‘usability honeycomb’ has become the foundation for best practices for UX professionals to help guide their efforts across multiple touchpoints with the user, including:

• How they would discover your company’s product
• The sequence of actions they take as they interact with the interface
• The thoughts and feelings that arise as they try to accomplish their task
• The impressions they take away from the interaction as a whole

UX designers are responsible for ensuring that the company delivers a product or service that meets the needs of the customer and allows them to seamlessly achieve their desired outcome.

UX designers work closely with UI designers, UX researchers, marketers, and product teams to understand their users through research and experimentation. They use the insights gained to continually iterate and improve experiences, based on both quantitative and qualitative user research.  

>> Related reading: What is UX Research?

What's the difference between UI and UX?

At the most basic level, UI is made up of all the elements that enable someone to interact with a product or service. UX, on the other hand, is what the individual interacting with that product or service takes away from the entire experience.

Don Norman and Jakob Nielsen summed it up nicely when they said:

It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.

Take Google, for example. Its famously spartan interface highlights how a great experience doesn’t require bells and whistles. By focusing on the user, Google knows that when they come to the site, they’re after one thing: information. And they want it quickly.

The fact that ‘google’ is a widely accepted verb shows how well the company delivers on that experience—and expectation. Just about anything a person has ever wanted to know can be accessed in the blink of an eye and few other search engines survive today.

Now imagine that every time you searched on Google, it took 15 seconds to get a result—you’d no longer be able to instantly get an answer to your question. Even if the interface stayed the same, your experience with Google would be dramatically different.

UI/UX experts weigh in

Not surprisingly, different people have different takes on this topic. So we reached out to some smart and talented folks from the tech industry to get their opinion.

Here’s what they had to say about the difference between UI and UX:

1. UX is focused on the user’s journey to solve a problem, UI is focused on how a product’s surfaces look and function

Ken Norton – Partner at Google Ventures, former Product Manager at Google

“Start with a problem we’d like to solve. UX design is focused on anything that affects the user’s journey to solve that problem, positive or negative, both on-screen and off. UI design is focused on how the product’s surfaces look and function. The user interface is only piece of that journey. I like the restaurant analogy I’ve heard others use: UI is the table, chair, plate, glass, and utensils. UX is everything from the food, to the service, parking, lighting and music.”

2. A UX designer is concerned with the conceptual aspects of the design process, leaving the UI designer to focus on the more tangible elements

Andy Budd – Co-founder of Clearleft, Founder of UX London

“Common logic would suggest that, if you design the UI, and a person experiences a product through the UI, that makes you a User Experience Designer. However, this would also imply that designing your own home makes you an architect, and fixing a tap makes you a plumber.

Often the words used to describe a discipline end up being divorced from their original meanings. For instance architect literally means “head mason” and plumber means “lead worker.” Two names which clearly no longer articulate or explain what that profession does.

In a professional context “User Experience Designer” has a specific meaning and set of skills, based on a community of practice reaching back over 20 years. In this world, a User Experience Designer is concerned with the conceptual aspects of the design process, leaving the UI designer to focus on the more tangible elements.

Jason Mesut best describes the difference (and the overlap) between UX and UI in his “double diamond” model. In this model, the UX designer has deep skills in strategy, research, information architecture, and interaction design.

The UI designer (now fashionably rebranded as a digital product designer in Silicon Valley) also has skills in Interaction design. However, their focus skews towards areas like information design, motion design, and brand.

While some people would claim deep expertise in all those areas, this is quite rare. After all, if you’re an expert in everything you’re probably an expert in nothing.”

3. There is no difference between UX and UI design because they are two things that aren’t comparable to each other

Craig Morrison – Associate Creative Director at Truvani

“I hear this question all the time, and I’ve answered it multiple times. Ultimately I’ve come to this conclusion…

There is no difference between UX and UI design because they are two things that aren’t comparable to each other.

For example, it’s kind of like asking, “What is the difference between red paint and the chemicals the paint is made up of?” There is no difference. Red paint is made up of all sorts of different chemicals that when combined together make red paint.

Just as the user experience is made up of a bunch of different components, user interface design being just one of them, that when combined together make up the user experience.

Here are a few other questions to illustrate my point:

• What is the difference between a MacBook and the shape of the keyboard keys?
• What’s the difference between tea and the type of material the tea bag is made from?
• What’s the difference between a car and the color it’s painted?

If we’re talking about delicious cake (and why wouldn’t we be?), UI is the icing, the plates, the flavour, the utensils, and the presentation. UX is the reason we’re serving cake in the first place, and why people would rather eat it than hamburgers.

(Note: Craig goes into even more detail about the difference between UI and UX designers in his post: Why you shouldn’t hire a UI/UX designer)

4. UI is the bridge that gets us where we want to go, UX is the feeling we get when we arrive.

Jason Ogle – Host and producer of User Defenders podcast, Designer at CACI International

“I think one of the most important things to keep in mind in our artificially-intelligent world we’re flying headlong into, is that UI is no longer just a series of buttons relegated to the four corners of a screen–and UX is not just a screen-based prototype meant to increase conversions on a landing page.

It can also now be considered our voice and intentions powered by whatever the machines think we’re saying or wanting in any given context.

UI is the bridge that gets us to the other side of where we’re wanting to go.

UX is the feeling we get when we get there when the bridge is well-built, or plummet to our death (talk about bad UX!).

It’s also possible to have a good user experience without a user interface. In fact, if it’s really good, oftentimes your users won’t even know it’s there (how many knots do you notice on the wooden bridge on the way across?).

Keep in mind that we’re always creating UX, all the time whether behind a keyboard, in the grocery store line, in our workplace, or on the freeway (God help us).

To sum this up, as I always say to my superguests at the end of every User Defenders podcast episode: Keep fighting on in creating great UX for other humans!

Whether that requires a UI or not.”

5. UI is focused on the product, a series of snapshots in time. UX focuses on the user and their journey through the product

Scott Jenson – former Product Strategist at Google

“I don’t get too wrapped up in this distinction as they frequently are used interchangeably. However, when pressed, I see the UI as focusing on the product, a series of snapshots in time.

The UX focuses on the user and their journey through the product. The UI tends to be the specifics of screens, focusing on labels, visual style, guidelines, and structure.

The UX is the path through a product, escaping the screen and articulating the user’s journey and motivations, justifying why things are in the UI and even more importantly, why things are left out. The UI copes with constraints; the UX challenges them.”

6. UX encompasses all the experiences a person has with a product or service, whereas UI is specific to the means by which people interact with a product or service.

Chinwe Obi – Senior Experience Researcher at WW

“User experience (UX) is the interaction and experience users have with a company’s products and services. To gain UX insights, this might include conducting research to learn about the positive and negatives points of an experience and taking those learnings to make improvements that positively impact a user’s experience.

Think about ordering food online for a pickup delivery. The UX consists of the user’s interactions with placing their order on a company’s website, their in-store experience of picking up their order, and also their satisfaction with their food.

User interface (UI) is the specific asset users interact with. For example, UI can deal with traditional concepts like visual design elements such as colors and typography. It can also look at the functionality of screens or more unconventional systems like those that are voiced-based.

To continue with the online food order example, UI would focus on the visual design of the screens a user interacts with, such as which color to make the order button and where to place it on the page. This can also include any interfaces a user might come in contact with in-store.”

What do you think?

As UX started to become a household term—at least at a corporate level—it wasn’t uncommon to hear folks mix up the terms or use them interchangeably. Although the field of user experience design will no doubt continue to evolve, it’s important to understand the vital role each profession plays in the wider realm of human-centered design.

So, what do you think? What’s the difference between UI and UX? Should they be used interchangeably or do they mean different things? Share your opinion with us on Twitter, Facebook, and Linkedin.