UX vs. UI: How They’re Different and Why They Need Each Other

I’ll be honest here; when I was first asked to write a piece on user experience (UX) vs. user interface (UI), it gave me pause—mainly because I see this debate quite a bit across social media and the Internet in general. At first, I thought everything that needed to be said had been said. But on closer inspection, I believe there’s a critical part missing from this narrative:

You cannot have great UX without great UI design — and vice versa.

That being said, let’s revisit the essential difference between UX and UI design.

Think of UI as cause and UX as effect: From mobile apps to websites to complex enterprise software, the UI communicates value to a user or customer. Our expectations are formed visually first, so at a glance, what someone sees tells them whether this digital product — this app, website, or system — will be of value to them. 

If the UI does its job and enables that perceived value, the person acts; they sign up, download, try, or buy. Once an action is taken, the user’s experience interacting with the product will determine whether or not this new relationship continues.

So the UI is what we see and what we interact with; the UX is how that interface and interaction makes us feel. Let’s talk a little more about the mechanics of each.

First: good UI design is good graphic design

That statement makes a lot of people uncomfortable…but that doesn’t make it any less true. The principles that informed graphic design I learned some 35 years ago are the very same principles that drive good UI design — for any kind of product. We think of a designer’s work as purely visual — that it’s only concerned with how something looks and producing something aesthetically pleasing. In reality, nothing could be further from the truth. 

“Aesthetically pleasing” is subjective; just because we find something attractive doesn’t automatically make it useful or valuable to us. Visual design, as I learned many years ago, is only good if it communicates appropriately and effectively and it solves a problem. It’s only “good design” when it enables a two-way exchange of information and interaction between the design (or product) and the viewer (or user). Meaning:

• Does it show them what they expect to see? 
• Does it enable them to understand the value and relevance of those things? 
• Does it guide them to act, helping them find their way?
• Does it communicate proof that their interaction is getting them where they want to go?

These principles are not only the backbone of excellent graphic design; they’re also some of the key drivers of positive user experiences. My best-selling Udemy course, DESIGN RULES, teaches these same timeless graphic design principles and shows students how to apply them to the visual design, interaction design, and implementation of digital products.

I created this course because I believe it’s the missing piece in the skill sets of far too many UXers and designers. It fills a significant gap in design education. If you want to be a better web designer — or UX designer — start with this principle: learn how to solve visual communication problems.

Next: good UX focuses on matching interaction with intent

When users come to an app, a website, or a software system, they arrive with intent. This means that they already know what they want from it. They have a very specific set of expectations about how it can or should help them, along with an idea of what they’ll be able to do with it (and how easily).

The selection and arrangement of specific visual elements in the UI design determine how well that user expectation is met. The visual elements on the screen and how they work together to communicate and guide and enable interaction either deliver a great user experience (“WOW that was easy!”), or a bad one (“WHY is this so confusing?”).

What users see determines whether they can make sense of it — and, therefore, accomplish what they’re trying to do.

Again, most information we process comes to us visually. We have all, from an early age, learned to judge and understand things based on what we see — and how it relates to what we’ve seen previously.

So when we play the role of user, we notice things we don’t like, don’t want, don’t understand. 

When a button doesn’t look like a button, for example, we don’t know we can do something with it. We don’t know that we can click or tap it. There’s a disconnect between the visual cue we expect and what we actually get.

That’s why, in hundreds of consults and projects I’ve worked on, the clues to UX issues — what’s sinking a product in the market, preventing people from doing their work, or causing people to abandon the site or the app — are often found by taking a good, hard look at the visual design of the UI.

It may look fantastic, but if problems exist, it’s a good bet something isn’t being presented in a way that people can easily perceive, understand, or act on.

Users don’t design—designers do

I am certainly among the converted when it comes to the value of Usability, User-Centered Software Design, and of course, UX. But I believe firmly that none of these disciplines can succeed without superior Visual UI Design. 

Any UXer, designer, or developer worth the title knows that even the most feature-rich application with dazzling functionality will be ignored, abandoned, or flat-out rejected if the UI design is poor. That’s not because people are superficial; it’s because visual design is a key function of the way the world works. 

I often say that there’s a big difference between design and decoration. Design guides, informs, educates, and enables. Decoration … looks nice. Obviously, one of these things is more valuable than the other.

This know-how is what separates great UI designers — those who create meaningful work and deliver meaningful, valuable user experiences — from their not-so-great decorator counterparts.

Now, I won’t kid you here. Creating a visual vocabulary that communicates with people and blends with their culture, that conveys promise and raises expectations, and that implies a complex set of values created through experience is a damn tall order. Great UI design requires more than simple translation. It requires an interpreter between sender and receiver. And getting that interpretation right means learning as much as you can about the people who will be using what you create.

But while things like user research, information architecture, and interaction design are key components of good UX, a countless number of great ideas have failed solely because of bad UI design. They failed because the UXers and Designers couldn’t translate what they knew about the audience’s culture into visual form.

Doing this well is a matter of understanding what visual signals resonate with people: when and why to use icons and what they communicate (or don’t) to a user, what makes a data-heavy table easier to read, and what the most relevant and meaningful way to display content might be. In other words, they address how to enable and deliver useful, usable, and valuable UX.

So instead of focusing on the differences between UX and UI, I suggest that you instead focus your education and attention toward the near-infinite number of ways in which they inform, influence, and intersect with one another.