Understanding the difference between UX and UI can get confusing — the roles work closely together, and sometimes the terms are used too ambiguously to firmly understand either one.
To understand the difference between UX and UI, let’s start with an example: YouTube.
Take a look at the YouTube home screen. Everything you’re seeing — the search bar at the top, the “Trending” and “Subscriptions” and “History” categories on the left, the “Recommended” videos below — is all the work of a UI designer.
At its most basic level, UI is the presentation and interactivity of a product — where’s the sign-up button, is it easy to navigate, where’s the logo and if I click the logo where does it take me?
Now, imagine every YouTube video you click loads slowly. Imagine you search “cats” and nothing comes up. Imagine you can’t search account user’s by their username, so it’s hard for you to find that girl who sang an acoustic rendition of that Ed Sheeran song.
With those actions, you’re having a less-than-ideal user experience. You don’t enjoy engaging with the product, and it isn’t offering you what you want. Those problems are the responsibility of a UX designer.
Cognitive scientist Don Norman, who first coined the term UX in the 1990s, and Jakob Nielsen, co-founder of the Nielsen Norman Group, explain the difference of UX versus UI this way:
“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.”
In this example, both UX and UI are critical components for the user to enjoy the product, but a user can’t appreciate the interface of a product if the product itself doesn’t deliver what the user wants.
Let’s define UX and UI in more detail now, to further clarify the difference between the two.
What’s UX?
UX, which stands for user experience, is the process of researching, developing, and refining all aspects of a user’s interaction with a company to ensure the company is meeting the user’s needs. A UX designer must ensure people find value when they interact with a company’s products or services.
A UX designer is responsible for all aspects of a user’s interaction — this means a UX designer is not solely responsible for the technology behind a product. They’re responsible for how a user interacts with a company both on and offline, including customer service and other facets.
Essentially, a UX designer must answer the question: “How can my company’s product best meet our user’s needs?”
Now, what’s left for a UI designer to do?
What’s UI?
A UI designer’s responsibilities are more cosmetic than a UX designer’s — a UI designer is responsible for the presentation of a product. But that doesn’t mean a UI designer just picks some pictures and a logo and calls it a day.
A UI designer is responsible for how everything on a page aligns in relation to each other. The visual elements you see on a page, such as buttons and icons, and the interactivity of a product, falls on the UI designer.
Have you ever visited a website and thought, “Wow, this company is really cool and has a great product, but what really sold me was their website’s intuitive and sleek layout?”
That’s largely due to their UI designer.
How do UX and UI work together?
Now that we’ve explored UX and UI separately, let’s see how they function collaboratively.
Let’s say your company wants to develop a running app, so your CEO hires a UX designer. The UX designer is first going to do some research into competitor’s apps and your user’s pain points.
With this information, she will decide the core features of the app (“must monitor heart rate and mileage”), and explore user personas in-depth to create a site map and initial prototype.
From there, a UX designer will create wireframes, test and refine them, and convert those wireframes into mockups. Then, the UX designer will conduct research and refine the product for the market. Throughout all stages, the UX designer is focused on the structure and value of the product and how that product is or isn’t meeting user’s needs.
Towards the end of development, a UI designer will then take control over the app’s appearance, including on-screen forms, images, buttons, links, and icons.
As you can see, the primary difference between UX and UI is goals: a UX designer is focused on the users’ experience, including anything that might motivate or frustrate them, why they would or wouldn’t enjoy the product, and what the product needs to include to delight the user.
A UI designer is given those constraints — she’s told what the app must include and exclude, and how it’s going to work. Using those constraints as a guideline, she works on the design and interactivity to ensure the user understands the product and enjoys the presentation of it.
You can’t create an exceptional product without both UX and UI. Without a UX designer, YouTube would appear beautiful and appealing but completely unusable. And, without a UI designer, YouTube would be a great idea in theory but would be difficult and confusing to navigate on the screen.
