What’s the Difference Between UI and UX? What to Tell Your Client if They Ask You This
Whether we like it or not, “what’s the difference between UI and UX” is a very common question. I would even risk saying that it’s among the very first questions people ask when they are introduced to the terms “UX” and “UI.”
“Both start with the letter U, right? So how different can they be?”
Well, very.
But let’s dig deeper:
Read on to find out what the fundamental difference between UI and UX is, and how to talk with your client if they ask you that ever-popular question.
Defining UX and UI
Even though you most likely already know the official meanings of these terms, we should still cover them even if just for the sake of keeping the argument complete.
UX design stands for user experience design. In its current form, the term was introduced by Don Norman of Nielsen Norman Group in 1990. His original main takeaway was this:
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products.
UI design, on the other hand, stands for user interface design. There is no such handy and clear definition of it, I’m afraid. Basically, the only consensus we’ve reached here is the definition at Wikipedia:
User interface design (UI) is the design of user interfaces for machines and software, such as computers […] The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals.
Okay, “in English, please!” right? The above definitions, even though they are quite accurate, don’t do much in terms of helping us understand what the difference between UX and UI truly is. And they surely won’t help your client understand either. I mean, sure, you can quote that to your client, but don’t expect them to not give you weird looks if you do so.
The problem with UX and UI
We really shouldn’t be surprised that UX and UI seem very similar in principle. They both come up in basically the same places and conversations. Both are crucial for every web project, app design, product design, web service, and loads of other related projects.
Add to that, people tend to use these terms interchangeably, not even trying to distinguish them in any way (and especially in job listings).
Kind of like peanut butter and jelly. What you want is both, right? Just like UX and UI.
There’s clearly some overlap between the two, but the key question is where that overlap happens?
Unfortunately, not a black-and-white thing this. Most people have their own definitions of UX vs UI, and it’s impossible to tell anyone that theirs is wrong. Mainly because it isn’t. And, personally, I’m kind of annoyed by some designers being offended by the very nature of the question itself. “Those two are impossible to compare!” – they say – “They are two completely different things!”
Well, sorry, but the sole existence and popularity of the question – “what’s the difference between UX and UI?” – proves that it’s something that’s really on people’s minds. Even worse, it’s us – the designers – who have brought this question onto ourselves. We’ve done so by constantly using “UX” and “UI” in the same sentences next to each other. How can we expect our clients not to be confused?
But okay, I’m getting perhaps a bit too worked up. Let’s clear things out:
The difference between UI and UX in plain English
Quoting Wikipedia when talking with a client? Not great. We can do better.
The simplest definition I am able to come up with is this (you be the judge if it’s good enough):
- UX design deals with the entire interaction that a user has with a company, its products, services, website, app, and so on. UX touches upon the entire journey a user embarks on when they decide to give “something” a chance. It covers the complete overall experience that a user has with that “something.”
- UI design, on the other hand, deals with the specific things that the user will actually interact with while on that journey.
Or, in other words, UX deals with purpose, while UI deals with appearance and functionality.
Where UI starts, and UX ends
To say it simply, and also in a way that your client might appreciate, UX is a much bigger pie than UI.
Somewhat like this:
Whereas UI deals mostly with the appearance of what’s already been thought through during the UX design phase.
Let me give you a perhaps corny example, a metaphor, if you will, but also something that you can use when talking with a client:
Picture yourself in a cafe. Think of the cup, the table, the chair, the coffee beans as the UI of the place. Now, think of the way the coffee is made, the ambience, the service, the music as the UX aspect. UX is literally everything that has impact on your overall experience as a user of “something.”
Setting coffee shops aside, you can find your own way of understanding the core differences and explaining them to your clients. Here’s another perspective, shared by Sabina Ionescu of Revive.Social. Here’s what she said when asked, “What is the difference between UI and UX for you? Also, what to tell your client if they ask you this?”
I am more on the user side of the story here, as I am not a designer myself. But I have worked closely with both brand designers and web designers, and I think this makes a good analogy to what UX and UI stand for.Brand designers are involved with the overall user experience, as they follow every aspect of the brand, from the identity to employee branding, and from packaging design to brand voice. The user experience manifests in every aspect of a brand and contributes to the overall perception of a company.Web designers, if such a parallel is allowed, are closer to the user interface side of the story. They need to polish the elements users interact with, what they click and touch. Their focus here is on the bits and pieces that need to make sense in the overall picture.But they are closely connected. Brand designers need to oversee the online expression of a brand in the same way web designers need to follow brand guidelines when they are building a website or a mobile app.UX and UI go hand in hand.
In this light, UX starts with a problem – the problem that the user wants to have solved and everything they have to do on their way to achieving that goal.
UX is high-level thinking about how I can get the user to where they need to be. I’m doing so by understanding what’s the challenge that the user is really facing, and not necessarily what I – as the product owner – would prefer them to do.
UI design only steps in once the UX part has been ~80% done. And the term itself is often used interchangeably for web design, graphic design, interaction design, and front-end design, even.
Under the hood, UX is a much more data-driven field than UI. Making a UX decision is something that can’t (or at least shouldn’t) be done based on a hunch. UX involves research, testing, and experimenting over a longer period of time to figure out some of the more challenging aspects of the design process. It requires knowledge and skill in other areas outside of design – psychology, marketing, strategic business planning, product design.
Overall, UX is meant to figure out what is likely to work (or not work) based on the project’s goals and what we want the users to achieve/do. It’s only then when you can start wondering exactly how (through the UI) you’re going to convince users to start doing thatspecific thing.
Looking at all this from the client’s perspective, we have to admit that the client doesn’t necessarily care about each individual piece of the puzzle. What they do care the most about is the puzzle itself – having their goals met.
Examples of UX vs UI thinking
In case your client has a lot of follow up questions in relation to UX vs UI, here are three examples of how UX and UI design intertwine and how we can think about the differences based on actual applications:
Next time you’re in a car, pay closer attention to the button/switch that controls the hazard lights. Traditionally, in most cars, it’s the most central, best visible switch on the dashboard.
I argue that the placement of that switch is a result of a UX decision. While the look itself is a UI decision.
Here’s what I mean; the moment when you actually need this switch, you’re probably in a high stress situation and the last thing you want is to wonder where that cursed switch is. It has to be visible immediately, and for that, it needs to be in the most central location possible. Quite interestingly, that switch is there despite the fact that people hardly ever use it. It stands to reason that it could be placed in a less prominent spot, so that a more commonly used switch could take its place. However, this would be catastrophic.
That switch is good UX.
The next example comes from an app – it’s called Adobe Spark Post. And yes, as you would imagine, it’s our own app. I’m biased, perhaps, but I wanted to guide your attention to one specific feature in that app that I consider great UX.
First things first, the app is meant to help you create custom images and graphics that are optimized for social media sharing, blog posts and other web-based purposes. As part of the app, you can add text on top of images. This is where the feature I want to highlight comes into play.
There are four main text alignment options: the classic left, center, right, plus something called “smart align” (I believe).
Smart align is the response to a struggle that many users face when working with text on images. Let me just show you the final effect:
As you can see, the text is evenly spaced across the entire available canvas, yet without being artificially justified or stretched. The effect is achieved by font size and spacing manipulation.
This sort of alignment solution is not a classic formatting option that we know from traditional text processing software. Placing it there – alongside left, right, and center – was a conscious UX decision. The problem that this feature solves is letting users create professional looking images without the need to experiment with typography and pixel-perfect text alignment manually.
The third example comes from a website, or rather two websites. So I’ve been in the market for a VPN lately (Wikipedia def). I kept researching the options but couldn’t find the info that was truly important to me. You can try this yourself, just google “best VPN.” The first result is this page:
Surely a reputable source – PCMag – however, the initial table fails to point out any parameters that are actually important when choosing a VPN.
The main, everyday problem with VPNs, as I’ve found, is that they slow down your internet connection. So to some extent, the VPN that you will actually end up using every day is the one that operates fast.
That PCMag page fails to show me reliable data. It doesn’t understand what I – the user – am really looking for. The table is nice visually, it’s good UI. But it’s been built without truly understanding the UX aspect of the problem.
So I needed to continue digging to find a better resource. Here’s the comparison I found:
Much less fancy when it comes to design, but also much more factual, and gives me the exact data I need. Since I’m in the EU, I can compare the download and upload speeds of different networks, examine the price tags, and make my decision based on that.
This is good UX. This kind of a solution understands the main challenge of a real user, and only then builds the UI around it. A UI that turns out to be really simple, but it’s all warranted by the UX goals.
In summary
Back in the day, there wasn’t much to do in terms of UI- and UX-thinking when it came to software-related products. When personal computers first got popularized back in whatever year it was, all we had was a command line interface. There was very little wiggle room. Nowadays, however, the possibilities are endless. And every project goes through multiple stages of design before we can lay our hands on the final thing. UX and UI are naturally part of that.
Our clients want to be in the know of all that too. Even if not by understanding the concepts of UX and UI in detail, they still want to at least know what’s going on and what they can expect when their designer says they’re “working on the UI.”
This is where we need to step in and explain all the whys and hows.
But what do you think? What do you do when a client asks you about the difference between UX and UI?
