UI vs UX: What is the Difference?

Key Takeaways

• UI (User Interface) refers to the direct interface users interact with in a software or website, including visual elements and controls. It’s a subset of UX (User Experience), which is a broader term that encompasses all touchpoints a user has with a product, including customer service, branding, pricing, and more.
• The terms UI and UX should not be used interchangeably as they have distinct meanings. A UI designer is inherently a UX designer, but a UX designer without a more specific field of work is rare. Using “UX” without specifics can render a conversation meaningless.
• UI is not just GUI (Graphical User Interface). Although most users interact with a visual set of paradigms, designing the developer-facing interface layer of a design system is also part of UI design, making UI more than just GUI.
• While being specific about titles and semantics in the design industry is generally positive, taking the “UI vs UX” discussion too far can have adverse effects. Everyone can contribute valuable ideas, regardless of their title within an organization.

As a full-stack/generalist product designer, I’ve watched the industry’s obsession with titles for many years. Sure, we can keep being snarky about it, and continue throwing around funny tweets, but when did this help anyone?

Just like “Should designers code?”, the “UX vs UI” question has turned into an inside joke.

I label increasingly nonsensical images with ‘UI’ and ‘UX’ and hope they get used in serious presentations pic.twitter.com/tDJgRp6CO5

— Sebastiaan de With (@sdw) March 15, 2016

I got your shit projected 30 feet high at #kikk16. Felt appropriate. pic.twitter.com/S5jZT7IKb3

— Jules Ehrhardt (@ezyjules) November 11, 2016

On one hand, this trend might help a more seasoned designer vent. In fact, there’s a Tumblr entirely dedicated to it.

However, there is a danger that it makes the industry look frustrating and inaccessible to a beginner. And that’s a shame because the barrier to entry for a new designer has never been so low (and I mean this in a completely positive way).

TL;DR

UI stands for User Interface. It’s what users interact with directly, everything they see, touch and hear within a piece of software or a website. It’s the outermost layer of an app – the controls.

In its current state – due to the types of devices we are using – UI design is mostly a visual discipline, although voice and written word are gaining more and more traction thanks to voice assistants and conversational interfaces.

UX stands for User eXperience. It’s a holistic term encapsulating each and every different kind of touchpoint a user has with a product.

In the context of a digital product, this includes not only the software’s front-end itself, but the whole technical stack, customer service, branding, public image of the company, availability, pricing, and communication, and that’s certainly not all.

UI is a subset of UX. Both terms have different meanings and, whenever possible, should not be used interchangeably. The title “UX/UI designer” makes little sense in terms of semantics. Every UI designer is a UX designer by definition, and being a UX designer without a more specific field of work is quite rare. Talking about “UX” without specifics can quickly render any conversation meaningless.

So, what’s the problem with “UI/UX designer”?

As I see it, there are three major issues:

1. It’s misleading for everyone: designers, developers, recruiters, founders, etc. More and more junior designers put it in their titles – and I can’t blame them. Everyone is doing it and being honest about your skill-set can sometimes make you feel like you’re letting yourself fall behind the title trends.
2. It introduces a false career path where being just a “UI designer” is not enough. If digital product design was like Pokemon, “UX/UI designer” wouldn’t be the cooler, ‘levelled-up’ version of ‘UI designer”.
3. It greatly undermines and almost tokenizes the importance of “UX design”, which is actually the sum of everyone’s work.

UI is a part of UX

In a nutshell, a user interface is the layer where human-computer interaction happens. Although an important one, it’s just one layer of the whole user experience stack, which encapsulates multiple disciplines.

Let’s use a real-world example: watching TV.

The UX of watching TV includes the content quality, specifications of the TV set, location, furniture, your current state of mind and a lot more. On the other hand, the UI of watching TV is just a small part of that: the design and build quality of the remote and the on-screen menus.

About those images

Yes, those images. I don’t want to sound like an old man yelling at clouds, but most of the side-by-side pictures comparing UI and UX are just missing the point. Designer Sebastian de With expressed the same sentiment about a year ago with this tweet.

Many of the recurring images (like the one with the two ketchup bottles and the one with the shortcut through a grass lane) not only lack meaning but are often counter-productive. They pit UI and UX against each other, implying that UI designers’ work is useless because people already use the product in another way.

Let’s take the ketchup bottle example and fix it. We’ll only need one bottle because comparing two different designs and labeling that “UI vs UX” just doesn’t make sense:

• the UI layer is the bottle, including the cap and the label. This means ANY bottle – not just the upright version¹.
• the UX layer is a combination of the company’s branding and marketing efforts, the nutritional and sensory qualities of the ketchup itself, the act of discovering and buying it in a store or online, the company’s interactions with customers on social media and literally every other touch point between the company and its existing and potential customers.

Where did the term UX come from?

UI is a much older term than UX. It’s been used since the earliest days of computing, as it’s a generic science term. UX, on the other hand, got popular much later.

The term UX was popularized in the mid-’90s by Don Norman, one of the co-founders of the Nielsen Norman Group and author of best-selling book “The Design of Everyday Things”. From the very beginning, the meaning has been quite clear, Don Norman even has a whole video addressing the modern specifics of the problem.

UI is not just GUI: designing an API

When we think about interfaces, we’re normally referring to Graphical User Interfaces or GUIs. Almost all of the devices and systems we’re using today are interacted with within a visual set of paradigms: windows, icons, buttons, navigation bars, sliders, inputs, etc.

UI and GUI (graphical user interface) have become almost synonymous and for a good reason: most users don’t have to interact with a code-based tool in their day to day. Still, UI is not just GUI.

In my day-to-day work, I’m focused on front-end design systems, so designing the developer-facing interface layer of a design system is part of my job. In that sense, a component’s API surface is its interface layer for people who work in code. Designing and documenting an API’s surface area is among the hardest tasks I’ve tackled over the years.

Even if you don’t code, I can’t recommend spending some time on this sort of task, even as a personal challenge. Modern frameworks like React are doing a really great job suggesting and even enforcing the practice of designers and developers working together in a more meaningful way than sharing a Sketch file and calling it a day.

Saying no to false dichotomies

While being specific about titles and semantics in the design industry is generally a positive thing, taking the “UI vs UX” discussion too far may well be having adverse effects. It’s a heated topic, but I completely agree with Jared Spool: Everyone is a designer.

I can’t count the times I’ve been gifted fantastic UI ideas from developers or taken valuable user flow improvements from visual designers. Being aware of your title within an organization is important – but only to the point where it’s not stopping you from contributing in areas outside of it.

Frequently Asked Questions (FAQs) about UI and UX Design