UX vs. UI: What's the Difference?

UX and UI are two terms that are often mentioned in the same sentence, but that doesn’t mean they’re interchangeable. UX and UI are so often combined that you might come across a job posting for a UX designer where the job description incorrectly describes the responsibilities of a UI designer and vice versa.

Although UX and UI are different practices, they overlap and complement each other. Because of this, it can be confusing to understand what makes them different and how they work together to create a great product.

UX and UI are two disciplines that work hand in hand to create a product, service or website that is pleasant and intuitive for customers. User interface (UI) relates to the aesthetic properties of a digital product, including the look, feel, and design of all elements that a user can interact with. Meanwhile, user experience (UX) is bigger and more conceptual. UX considers a user’s journey to interact with your product, how it solves their problem, and how it makes them feel. UX without UI is like an engine without the car around it. You need both to get where you want to go.

To better understand the difference between UX and UI, let’s start with an example: YouTube.

Check out the YouTube homepage. All visual elements on the page are the work of a UI designer. This includes the search bar at the top, choice of fonts and colors, spacing between videos, branding, the “Subscriptions” bar on the left, and anything else you might see or interact with on the page The aesthetic options that shape the look and feel of the page and the way information is presented are encompassed by the user interface. However, when we consider what information to display first and how the product works when you interact with the user interface, we begin to enter the realm of UX.

Imagine every YouTube video you click loading slowly. Imagine you search for “cats” and nothing comes up. Imagine you can’t search by username, so you’re having a hard time finding that girl who sang an acoustic rendition of your favorite Lizzo song.

The above results in a poor user experience (UX). If the product doesn’t provide the solution you expect, then there’s a UX designer somewhere with their work cut out for them.

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 between UX and UI this way:

“Think about a website with movie reviews. Even if the user interface for finding a movie is perfect, the UX will be poor for a user who wants information about a small independent release if the base underlying data only contains films from major studios.

In this example (and in all good products), UX and UI come together to create a holistically enjoyable experience. Even the most beautiful user interface imaginable cannot be appreciated if the product does not work the way the user wants it to.

Let’s now define UX and UI in more detail, to further clarify the difference between the two.

While UI is visual, UX is conceptual and focuses on developing and improving a user’s journey to solve a problem.

A UX designer is responsible for all aspects of a user’s interaction; this means that a UX designer is not solely responsible for the technology behind a product. They are responsible for how a user interacts with a business both online and offline, including customer service and other facets.

Essentially, a UX designer must answer the question, “How can my company’s product best meet the needs of our users?”

Now, what’s left for a UI designer to do?

Have you ever visited a website and thought, “Wow, this company is great and has a great product, but what really sold me was the intuitive and elegant design of their website?”
This is largely due to its user interface designer.

Now that we’ve explored UX and UI separately, let’s see how they work collaboratively.

With that information, he’ll decide on the core features of the app (“it should monitor heart rate and mileage”) and dig deep into user personas to create a sitemap and initial prototype.

From there, a UX designer will create wireframes, which they will test, refine, and turn into mockups. The UX designer will then research and refine the product for the market. Throughout all stages, the UX designer focuses on the structure and value of the product and how that product meets or fails to meet user needs.

Towards the end of development, a user interface designer will take control of the application’s appearance, including on-screen forms, images, buttons, links, and icons.

The main difference between UX and UI is their goals: a UX designer focuses on the entire journey of users to use a product to solve their problem or meet their needs. This includes anything that might motivate or frustrate them, why they would or wouldn’t enjoy the product, and what the product must include to make for an enjoyable experience.

A user interface designer has these constraints: they tell him what to include and exclude in the application and how it will work. Using these limitations as a guideline, design an interface that is intuitive to use and materializes all user needs on the screen.

You can’t create an outstanding product without UX and UI. Without a UX designer, YouTube would look beautiful and attractive, but completely unusable. And, without a UI designer, YouTube would be a great idea in theory, but it would be difficult and confusing to navigate the screen.

{{slideInCta(‘4bf6af99-b34d-4c32-bac3-5950cf96059d’)}