The terms UI and UX (design) are very often used interchangeably. Even up to a point where many people/designers/clients refer to them as “UI/UX design” – a kind of all-in-one combo.
This is not perfect, and especially if you’re trying to build your website and figure out the UX riddle for your business and product for the first time. The issues of UX and UI are of crucial importance no matter if you’re selling plugins/themes in the WordPress space, building apps, software, or even selling physical products.
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.
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 point you to some definitions and let you decipher those on your own, but this wouldn’t really do the topic justice.
Let’s start with the basics, even though you probably already know them by now:
- UI stands for User Interface 💻
- UX stands for User eXperience 🤩
That’s all fine and dandy, but what those two terms mean in practice?
- 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.
Just to give you an example, the UI of your car is the steering wheel, the pedals, the shifter, it’s every element of the car that you can interact with. UX is the experience you get while driving.#UI vs #UX: What's the difference from a practical point of view 🎭 Click To Tweet
To pinpoint the relationship between UI vs UX, we can think of it like so:
UI’s role is significant, but it’s still just one of the elements of UX.📚 Further reading:
- UX definition; first coined by Don Norman of Nielsen Norman Group in 1990.
- Wikipedia definition of UX; quite a good one! Very modernized and in tune with most of the everyday references people make to UX.
- Wikipedia definition of UI; a nice, broad look into the topic of UIs
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:
“It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.”
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:
- 120+ Great Cheat Sheets for WordPress, Web Developers and Designers
- How to Use GTmetrix Speed Test Tool + Improve Your GTmetrix PageSpeed Score on WordPress
- 15+ Excellent Productivity Tools for Designers and WordPress Users to Make You Super Effective in 2021
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.
Apple, as you’d expect, had a vital role in the progression and importance of GUIs.
The original Macintosh, released in 1984, introduced a mouse-based interface where the highest level of interaction with the machine was based on picking an app with your mouse (point and click) and then interacting with the app itself in different ways.
Shortly after, computer mice became a thing. Other GUIs followed suit.
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.
“How to solve a broken UI?”
Looking at modern apps, tools and software in general, we have to conclude that less is more.
Or, rather, that “less is more” attitude stems from laser-focusing on your ideal users.
Take email tools for example. Back when Outlook was king of the mountain, a good email tool needed to have all the bells and whistles imaginable. The more features there were, the better the tool was.
It’s not like that anymore.
The best email tools are simple, focusing on a small range of features, and targeting a specific type of user.
No matter if you want just to have a simple email tool, or use your email tool as a task manager, or want it to help you with productivity and moving emails around based on your daily agenda, then you have individual apps that will help you do that. They’re laser-focused. There’s just no reason to use have-it-all email tools nowadays since they mostly lead to distraction.
So, need to solve a broken UI? Simplify it. Go back to your user’s primary goal and how you can help them solve it. Remove everything else that doesn’t make that goal easier to achieve.
“Who should do UX on your team?”
Whose job is it to handle UX?
Is it designer’s?
Is it software developer’s?
Or is that what the “full stack developer” title is for?
You’re not going to be happy, but the correct answer is everybody’s.
Take a look at that chart I shared at the beginning – the elements of UX. There are too many things there to be handled by one person alone.
At the same time, UX is not about throwing things over the fence once you’re done with them so that another person can pick up from there. The effort needs to be more interconnected.
Again, start with the definitions of your business and user goals. Work from there. Everybody needs to be involved and always think about things like, “How is what I’m working on now going to impact the user’s experience?”
“How to measure UX?”
UX is hard to quantify or measure. You can only measure the individual goals that you’ve defined on the user’s side and on your business’ side.
It stands to reason that if you’re hitting your marks, and the users are hitting theirs (judging by the installs, number of users, or other metrics you’ve set), then your UX heads in the right direction as well.
“My product’s UX is bad; what can I do now?”
Unfortunately, you can’t spray on some better UX. If you’re not hitting your goals, your product is not getting good feedback from users, and you’re overall not happy with the results, then you can only really go back to the drawing board.
Re-evaluate your goals, your user goals and the way you’re connecting the two together.
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!
💡 There’s a lot more you can do in terms of UX design and then testing the outcomes of your work, but the three methods above are the easiest to get started with. To learn more about UI vs UX testing, read these:Go to top
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.Image credits:
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%: