Get ready for some great content coming to your inbox from the team at UserTesting!
If I had to explain it in 30 seconds or less, here would be my elevator pitch.
At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements—like buttons and icons—that you use to interact with a device.
(Source: Fast Co Design)
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.
(Source: User Experience Rocks)
But as much as I love that cartoon, it’s not exactly a comprehensive explanation! Let’s dig a little bit deeper into UI and UX to get a better understanding of the differences between them.
Back in the 1970’s, if you wanted to use a computer you had to use the command line interface, which looked like this:
(Source: Jason Scott)
You couldn’t buy a computer with graphics, icons, buttons, or a mouse. They didn’t exist commercially yet. To get the computer to do what you wanted, you had to speak to it in a computer programming language.
Then in 1981, a group of computer scientists at Xerox PARC developed and launched the Xerox Star—a personal computer with the very first graphical user interface (GUI).
It used windows, icons, drop-down menus, radio buttons, and checkboxes. And it allowed users to open, move, and delete files.
It might not look like much compared to what’s available today. But at the early stages of the personal computing era, the GUI was a revolution.
It meant you no longer had to rely on writing code to use a computer, making it far more accessible to the masses.
The teams at Apple Computer continued to develop and expand on the idea of the GUI. And in 1984 they released the Macintosh, which was the first commercially successful desktop computer to use an interface with multiple windows and a point-and-click mouse.
The advent of the GUI introduced the need for a new breed of designer—one who was focused on the graphical interface of a personal computer. And that’s when the UI designer stepped onto the scene.
This discipline has evolved over the last few decades, and it’s going to continue to evolve in the future.
UI designers today are working on websites, apps, wearables, and other programs. They may be responsible for things like designing the layout of a digital product’s interface and the visual elements on all the pages or screens of the system.
The term UX was coined by cognitive scientist Don Norman in the early 1990’s while he was VP of the Advanced Technology Group at Apple.
Here’s how he formally defines it:
“‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
In an email explaining the origin of the term, Norman wrote:
“I invented the term because I thought Human Interface and usability were too narrow: I wanted to cover all aspects of the person’s experience with a system, including industrial design, graphics, the interface, the physical interaction, and the manual.
Since then, the term has spread widely, so much so that it is starting to lose its meaning.”
By definition, user experience covers a broad range of disciplines, and it can be hard for some to wrap their heads around (like myself when I was first learning about it).
But in a more recent essay, Norman elucidated on the combination of ingredients that go into achieving a high-quality user experience:
“The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.
True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company’s offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.”
UX isn’t limited to the visual interface of your product. It’s a concept that has many dimensions and encompasses the entire journey a person takes, including:
(Source: Peter Moreville)
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.
They may do that by conducting user research to get as much context as possible about the user of the product and then using those learnings to mockup wireframes and prototypes to help the user get from point A to point B.
Don Norman and Jakob Nielsen summed it up perfectly 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.”
Google is another good example. Its interface is simple. There’s barely anything to the UI—just a logo, a search bar, a few buttons, and a search results page.
But when you type something into that search box, you get access to nearly the entirety of digitized human knowledge in less than one second.
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.
But like most things in life, 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:
“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.”
“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.”
“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)
“User Experience Design is the complete experience, and it may not be even about the screen. User Interface Design is generally visual design and information design around screens. UX goes back to the Nielsen Norman Group’s definition of UX — any touch point a user or customer has with a system, digital or not.”
“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.”
“There’s a lot of confusion around what UI and UX are, what the main differences are, or if there are any differences at all. They are definitely different things, but they must go hand in hand to create a beautiful and intuitive experience.
The way that I’ve always explained it is to think about building a house. When you’re building a house, you need to think of the broad structure and layout.
To me, UX is the overall experience of your house (or product). Do things make sense? How does it make your user feel?
The next level of the user’s journey is the interface they actually interact with. Continuing with the house example, the UI is the visual theme throughout the house. What type of wallpaper will you use? Do you have the same flower vases around the house? Or different ones?
The UI is, like its name implies, the things the user will actually interact with and see. This includes buttons, forms, pictures, etc.
UX without UI means you’ve got a frame and structure to your house, but it’s not beautiful and cohesive. UI without UX is like splashing awesome colors and details throughout the house, but having your front door lead straight into a bathroom. You need both to create an awesome end to end experience.
Typically, UX design goes ahead of UI design, because you want to do research, broad sketches, and general workflows first. Then once you’ve got the broad strokes nailed down, you work on the UI design to bring it all together so it feels like a beautiful, well-designed product.”
A lot of folks mix up these terms and use them interchangeably. Like Don Norman said, “they just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what it’s about.”
P.S. Huge thanks to all the amazing folks who contributed to this article! If you know anyone who’d find it useful, please share it with them.
If you’d like to learn more about the difference between UI and UX, check out these resources:
Join 120,000 subscribers and get articles like this every week.
Get ready for some great content coming to your inbox from the team at UserTesting!