UI vs UX: What’s the Difference From a Practical Point of View

📚 Table of contents:

• What is UX?
• What is UI?
• UI vs UX: what’s the real difference?
• The key to UX thinking: The “G” word
• Should you think UX-first or UI-first?
• Common misconceptions with UI vs UX
• UX / UI FAQ
• The tools to use when working on better UX

The first thing we need to set straight, although it does sound kind of obvious and predictable, is that UI and UX are not the same.

Granted, they are not totally different either once we get to the essence, but they’re certainly not the same!

In this post, we’re going to talk about some core differences between UI vs UX, what those mean in practice, how to build a good UI and craft proper UX, and more.

But first, let’s define what both of them mean, starting with what does UX stand for.

What is UX? 🚗

UX stands for User eXperience. It refers to the overall experience that users have while interacting with a product, system, or service. It encompasses every aspect of the user’s interaction, including their perceptions, emotions, and responses throughout the entire journey. UX design is the process of intentionally crafting and optimizing these experiences to ensure that they are enjoyable, intuitive, and satisfying for the users.

At its core, UX design aims to understand and address users’ needs, goals, and pain points. It involves a deep understanding of human psychology, cognitive processes, and behavior, as well as a range of design principles and techniques. A successful UX design goes beyond simply making a product visually appealing; it focuses on creating meaningful and seamless interactions that align with user expectations.

What is UI? ⚙️

Let’s begin by first answering:

What does UI stand for?

UI stands for User Interface. It refers to the visual and interactive elements of a product, system, or service that users interact with. It includes all the on-screen elements such as buttons, menus, forms, and icons, as well as the layout, typography, and color scheme. The primary goal of UI design is to create an aesthetically pleasing and visually coherent interface that enables users to effectively and efficiently interact with the product.

UI design is closely related to UX design, but it focuses specifically on the presentation and layout of the user interface. While UX design encompasses the entire user experience, UI design deals with the tangible elements that users see and interact with on the screen. UI designers work in collaboration with UX designers to ensure that the visual design aligns with the overall user experience strategy.

UI vs UX: what’s the real difference? 🚗 🆚 ⚙️

This is the most pressing question.

The easiest thing to do on my part would be to simply tell you to figure it out on your own, based on the previous two sections, but this wouldn’t really do the topic justice.

Let’s recap the basics:

• UI stands for User Interface 💻
• UX stands for User eXperience 🤩

In practice this translates to:

• UI is what you can see in front of you – the interface that you use to interact with a thing (a product/app/car).
• UX describes the whole experience you get as a result of interacting with a thing.

To use an analogy, the UI of your car is the steering wheel, the pedals, the gear shifter. It’s every element of the car that you can interact with. On the other hand, UX is the experience you have while driving.

So while the steering wheel, the pedals, and the gear shifter will all undoubtedly affect your experience as the driver, they won’t do anything about the quality of the road, the outside weather, or the general ambiance of the driving location.

In that sense, you can understand that UI’s role is significant, but it’s still just one of the elements of UX.

To pinpoint the relationship between UI vs UX, we can think of it like so:

The key to UX thinking: The “G” word 🎯

The “G” word as in Goals 🥅.

It’s hard – or more like impossible – to think about UX when you don’t know what you really want to achieve.

This is where goals come into play.

Goals come in two flavors:

• 🏦 your goals – the business goals
• 👋 user goals – what the users want to achieve with the tool + why

Understanding how these two areas intersect is key to good UX design.

First, working on user interfaces, the interaction a person has with your tool, or even the exact features that you want to deliver can only be done once you’ve decided what sort of user you want to reach in the first place.

“You need to pick your target” might sound like a cliche marketingy thing to say, but there really is no other way to start designing the UX of your product.

UX always traces back to the user and the thing *they* want to achieve with a given tool. It’s about the kind of experience that *they* have on the way to *their* goal. But without knowing what that goal really is, you won’t be able to make good UX decisions to take the user there.

So, start by defining your ideal target users, their characteristics, what problem they want solved – that your tool can solve for them, and so on. 👪

With that, define your business goals on top of user goals. How solving your users’ goals can bring you towards your own goals? How can you generate revenue while giving your users the best tool you’re able to? And so on.

Having these answers sorted out, you start getting an idea of the direction your UX design should follow. And this, in return, makes building your UI easier and involving a lot less guessing work.

This “going back to goals” model is also something that can be seen in Don Norman’s and Jakob Nielsen’s original publication on UX and the topic of UI vs UX:

Also, take a look at this case study of the New York Times app redesign. It goes above and beyond just a simple, “make things look better” mentality. It starts with asking fundamental questions like, “How do people check news currently?” It looks at potential user interviews; even uses an empathy map. All that in an effort to make the UX better, and make the UI the primary weapon of doing so.

You may also be interested in:

• Best Drag and Drop Website Builders: For Beginners and Pros Alike
• What’s the Best Cloud IDE in 2024? Here Are 8 of the Top Options
• Web Development on iPad Pro: Beginner’s Guide for 2024

Should you think UX-first or UI-first? 🤔

This is a tricky question. It’s like comparing 🍎s to 🍊s. So let’s start somewhere else:

One of the reasons why many people think about UX and UI together – even when they know the difference – is because UI is the low-hanging fruit and the most obvious thing to work on when you aim to improve the UX of your product.

UI, more than anything else, has a huge influence on UX. And since it’s also the easiest to work on, UI is often treated like the only thing you need to worry about if you want good UX.

And it’s hard to argue with this reasoning, actually. After all, if your car has a steering wheel that’s only 2 inches in diameter then the whole car is unusable, and the whole UX goes down the drain – no matter what else has been done to improve the driving experience.

What this means is that catastrophic mistakes in UI effectively kill UX. ⚔️ There’s no way around that.

When you think about it, we don’t really “work on UX.” UX is a sum of many smaller parts, so every decision should be looked at through the UX lens. But UX itself isn’t a thing that gets worked on or can be sprayed on.

What it all comes down to is that you will, indeed, probably work on your UI first. And that’s okay, but the crucial thing to remember is that UI is always part of a bigger UX picture and every UI decision needs to be traced back to UX.

Here’s a great case study on how Lyft redesigned their app based on UX-based principles and decision making. While most of what we see is on the surface – in the UI, the core of the changes happened as a result of rethinking the UX and redesigning the different aspects of the user’s journey with the app based on first principles plus key business and user goals. The UI changes, when we look at them in a vacuum, are not even that significant, but they help the user get to their goals more effectively, at least according to Lyft.

Common misconceptions with UI vs UX 😕

Let’s tackle some of the common misconceptions of the UI vs UX world and try to find a better way to think about these things.

“Was UI vs UX even a thing in the past?”

I bet you that software developers 20 years ago didn’t spend too much time thinking about UI vs UX. Or, rather, they did, but they just didn’t use those terms to describe it.

Xerox introduced the original graphical user interface in the Alto personal computer, which dates back to the 1980s.

Surprisingly, it has aged remarkably well. You can still clearly see all the elements, and the main task at hand seems to be straightforward. There are no distractions, no unnecessary elements. Effectively, this UI is all business!

Granted, the tasks of earlier software were easier to define as well, and looking for target groups was more intuitive. For example, for someone who worked on the original word processors, the target group was probably, “office people with hands“.

Figuring out the goals wasn’t too difficult either. “A better typewriter. On your computer“.

But when we look into the actual process involved in building software tools, it wasn’t much different. UX was still key to figure out.

We also had market leaders out there – or rather thought leaders – who helped us pick a general direction to follow and pointed out good UI solutions that were likely to work in other scenarios as well.

And we don’t have to look far for examples in the online world either, WordPress has been at the UI forefront, defining how the modern CMS should deliver its key features in an easy to grasp way.

UX / UI FAQ 🙋

The tools to use when working on better UX 🔧

There are three primary tools to help you evaluate your UX design direction and help make the right decisions:

• A/B tests
• user surveys and polls
• analytics and data

The order is not accidental. A/B tests are the prime weapon in your arsenal. With A/B tests, you can put two different versions of part of your interface against each other and see which delivers better results in terms of your crucial UX indicators and goals.

The important detail with A/B tests is to stick with just A and B – two variables – and not change around more elements since it clouds the results and makes it impossible to single out the individual changes that make a mark.

User surveys and polls can also tell you a lot. Asking users simple questions can be a goldmine of information. If it’s a custom app that you’re building then gathering feedback can be tougher, but on a website, you can use a simple polling tool like the ones listed here.

Lastly, raw data and analytics give you the quantitive side of the coin. With them, you can see how your UX or UI changes translate into actual usage scenarios/conversions/whatever else your metrics are.

All of these tools allow you to effectively improve your processes and evaluate if your perception of goals has been correct.

Adapt and repeat!

UI vs UX, the endgame 🏁

Some designers get angry when the topic of UI vs UX is raised. They say that the two are completely unrelated and that they shouldn’t be discussed together. Honestly, though, we won’t avoid thinking about one without the other.

UI is simply the first thing we can work on as part of UX design. It’s the lowest hanging fruit and the easiest element to comprehend, the easiest one to tune up, and the easiest one to measure the effectiveness of.

So let’s keep calm and carry on. UI and UX are different, but part of the same story.

Or maybe I’m wrong? What’s your take on UI vs UX? Share in the comments.