Overview

If you’ve been in the UI/UX design space for any length of time, you’ve probably noticed the absolute litany of pervasive articles, videos, and posts that attempt to break down the differences between various aspects of modern product/service design.

https://blog.thunderquote.com/2016/10/04/ux-business-boost/

…good God almighty…

These articles, well-meaning as they are, quickly degenerate into categorical pissing matches between UX, UI, IXD, product, service, and customer experience designers, but for good reason.

Contrary to popular belief, there ARE legitimately important differences between some of these things, and today we’re gonna talk about it.

Specifically, why the generally accepted relationship of UX and UI is utter BS and how the two actually work together.

UI vs UX in a nutshell

Let’s get down to brass tacks: UX and UI are NOT the same thing, nor is UI somehow a subset of UX, any more than the color red is a subset of paint.

It’s not. The two refer to completely separate things, and we’re going over EXACTLY what those are, and why that separation matters.

The engine metaphor and why it sucks

UI has sometimes been referred to as the engine that powers UX. UX has also been referred to as the engine that powers UI.

Both are garbage metaphors that don’t do justice to either field, and are equally offensive to hybrid professionals that work on both.

https://www.pexels.com/photo/parts-of-engine-of-luxury-automobile-5232618/

In short: UX is reactive, UI is perceptive. UX is intrinsic, UI is extrinsic.

This gets a little wild, so I’m bringing in the charts. Let me explain.

The problem with most models

Typically, out in the world, you’ll see images like the one below attempting to explain the relationship between UI and UX.

They attempt to say that UI is somehow part of UX and imply that all UX designers are also UI designers too.

These are nonsensical and absolutely false, do not pay attention to them.

No, UI is NOT part of UX, or subset thereof, but is another entity entirely that affects UX.

This is factually wrong and a dangerous myth because of one, very important reason: it proclaims that UI somehow a subset of UX.

How do we know this is BS? Because if you take UI away, UX no longer exists in any way that matters.

Back to the engine metaphor

Suppose you have a car with no engine. Do you still have a car?

Answer: yes, you have a car with no engine, but all the other parts are still there, it just lacks the functionality that makes it run/drive.

Makes sense so far? Check this out:

→ If you take away the user interface, does a product still have a user experience?

crickets, because the answer is NO, IT DOESN’T.

Or at the very least, the user experience is dividing by zero into an undefined abyss of complete non-engagement.

It’s the equivalent of a user staring at a concrete wall and garnering their experience from that, but at least there they have cracks and such to look at, and texture to touch, which still constitutes some form of UI.

So even THAT example doesn’t do the question justice.

No matter how you envision it, the user experience CANNOT and DOES NOT exist without a user interface in any way that actually matters.

Which leads me to a much more accurate representation of the matter:

UX informs, UI drives

UX informs UI, UI drives UX

You see what I mean? Much more accurate.

In this model, UI and UX are entirely separate entities that share a reciprocal relationship. UX informs the design of the UI, and UI drives the user’s experience with the product.

→ Two totally different skillsets, two totally different areas of work.

Now you’re probably sitting here at this point like:

“Well yeah, duh Nick, of course this makes sense, why are we here again?”

Because there’s nuance that you need to know about the differences and the interplay of these two entities across the user’s journey, and we’re going over it all in wonderful, gratuitous detail!

The actual, factual differences

So let’s talk differences. What are the actual differences between UI and UX that really, truly matter?

UI is extrinsic, UX is intrinsic. UI is perceptual, UX is reactive.

UX is intrinsic

Contrary to popular belief, as we study UX, UX design is not something that we ever actually see, touch, taste, etc. because UX is an entirely intrinsic reaction to external stimuli.

One person’s experience can be VASTLY different than another person’s experience with nearly identical sensory input because of:

• What the user has experienced in the past, and
• What the user expects moving forward.

UX is a reactive process to external stimuli based on past experiences and expectations the user has about whatever it is that they’re experiencing currently.

One person’s signal is another person’s noise. UX is the study of reaction, not of perception.

UI is extrinsic

By contrast, UI is something that we touch, see, taste, etc. through our conventional (and is some cases non-conventional or augmented) senses which can be represented in a perceptual way, and is extrinsic to the user.

UI is a perceptive process that uses:

• patterns,
• paradigms, and
• methods of access

to create an interface or set of interfaces that a user can use to work with a product or service to achieve their desired results.

The nexus of UI/UX

The overlap here is that UI is informed by UX, and attempts to present information to the user in a way that adheres to their existing mental models, biases, constraints, requirements, and expectations.

UX and UI are both part of a product or service, which is likely where the confusion comes from.

If UX is the theory, UI is the practice. UX is the study of expectations and reactions, UI is the study of senses and perceptions.

Both need each other to exist in any meaningful way, and to my earlier point, the same is true when you attempt to have UI without UX:

https://www.benjamin-schumann.com/blog/2015/11/8/better-models-through-awesome-user-interfaces-vol-1

This is UI without UX properly informing its design.

Can you technically have UI without UX? Yes.

→ Should you? Absolutely not, because the resulting UX will ALWAYS be bad.

And if all of this seems like splitting hairs, it’s not. Why? Because lifecycle, Jimmy, that’s why.

Let’s talk lifecycle

So now that we understand what constitutes the differences between UI and UX, we come to an important question: who cares?

Why do we care if UI isn’t a subset of UX? Why do we care if UX is different than UI? Can’t I just go back to Figma where things make sense, work on my prototypes, and then do some usability testing?

No, Jimmy, you can’t. You’ve seen a part of the matrix, and unlike Morpheus I’m not cruel enough to give you the choice of partial ignorance, because that’s where most of the industry stops.

No, you’re coming with me, you’re seeing how it all fits together, and it will make you more powerful than you could possibly imagine (probably);
let’s go!

The cycle in context

The UI/UX lifecycle in context

This is the UI/UX lifecycle in context, and it represents how a user’s perceptions and reactions inform and dictate both their experiences, and how those experiences shape their expectations.

In short order:

1. A user encounters a product or service for the first time.
2. The user makes an initial assessment of the product or service based on expectations and past experiences.
   (2b. if the user determines that the product/service isn’t going to meet or exceed their expectations through first impressions, they leave).
3. The user works with the product or service to achieve their desired outcomes.
4. The user either garners or does not garner their desired outcomes.
5. The user makes a final assessment of the product or service, and categorizes their experience with it for reference and future comparative assessments with other products/services.

After that, the user moves on the the next product, service, or experience set as a matter of consequence.

Why this actually matters

The reason we care about this at all is because it shows the interplay between UI, UX, and how each affects the other:

The interplay between UI and UX across the user journey

As we can see, across the user journey, there is a distinct interplay between UI and UX, which is that reciprocal relationship we talked about earlier.

The user encounters the product or service for the first time in the form of its extrinsic interface, and makes an intrinsic assessment of it as their initial experience.

• What does it look like?
• What does it feel like?
• Does it seem legit?
• Can this solve my problem?
• How hard is this thing gonna be to work with?
• Is it worth my time and effort?

Moving further along, the user works with the interface to garner their desired outcomes, and their experience is defined by both those interactions and the outcomes that they actually got from the product or service.

What we are seeing is the interplay between perception and reaction.

Perception, reaction, repeat.

This continuous cycle of perception and reaction is what dictates the overall ethos of your product/service, its credibility, and its presence in the market as thought of by your users.

The bottom line

So what does this all mean for you as a designer?

In short, it means that:

• UI is the design of what the user perceives.
• UX is the design of how the user reacts.
• UI is extrinsic, UX is intrinsic.

A UI designer focuses on designing the interface.

A UX designer focuses on designing how the user experiences the product, along with how they think and feel about it.

Both influence each other to a high degree, but are not the same, nor are a subset of one another. UX informs UI, while UI drives UX. You cannot have one without the other in any way that actually matters.

→ If you mostly focus on interface, you’re a UI designer.

→ If you mostly focus on experience, you’re a UX designer.

→ If you do both, you’re a UI/UX designer.

→ If you do both, and you also focus on determining product-market fit, along with product marketing/communications (marcom), you are probably a product designer.

→ And if you do all of that, plus more on a consistent basis, please take a vacation and find a job with better role definitions, because no one person should have to shoulder that much responsibility as a single design professional, no matter how driven you are.

</div