The difference between UX and UI design
How many times have you seen or heard the term “UX/UI” (i.e. UXslashUI) designer? Pretty much always, I bet. The terms are rarely used separately, and sadly, very often used interchangeably by people who aren’t quite sure what either means. It’s mostly our – the designers’ — fault: we don’t do enough to educate people in this regard.
Hell, when people ask me what I do I tell them I design websites and apps: how they look and function. Because I’ve been told I’m “being pretentious” for saying I’m a user experience designer who looks at how people want to interact with systems and design for that. Although that’s what I do, I swear.
In this article, we’re going to look at some of the differences. Not the textbook definitions but the differences in practice, with some examples to boot.
It’s simple, really. User EXPERIENCE (UX) design is focussed on how something (a website/app/software) functions and feels, while user INTERFACE (UI) design is focussed on how the interface looks. Typically, you start a project with UX design — system architecture, site maps, user flows, wireframes, prototypes, perhaps some UX testing — and then design the UI on top of that, utilising colour, typography, spacing, iconography, illustration and photography (among other elements).
You need to know how it works before you can decide what it will look like.
And this is where the UXslashUI design part comes in. Because UX and UI design is already such a niche field, very often the same person creates both the UX and UI for a project as they’re the only designer working on it. It is slowly becoming more common that designers choose to specialise in either UX or UI design — especially among senior designers — but clients sometimes prefer to pay for one person that can do both, instead of two hyper-specialised designers.
While it’s up to you to decide whether you want to do both or specialise in one, I do believe that it’s vital for a designer to have a thorough understanding of both UX and UI design, as well as the basics of front-end development — i.e. how your designs will be implemented. This helps you to have a holistic view of where your work fits in, although you don’t necessarily need to be able to actually DO each of those things (especially development, but that’s a whole other article). Just like a dev needs to understand front-end, middleware and back-end, and may choose to specialise in one of those.
UX and UI influence one another, and need each other. Which is why they go together. Without UX, you might have a beautiful website that’s unusable, and without UI you’ll probably end up with a generic back/white/grey wireframe that’s hideous and nobody wants to interact with.
Let’s look at a few examples:
While this example is technically functional — you can type and you can select options — it’s completely unusable. Who wants to type up a document while only being able to see one line at a time? And searching through 12 rows of icons to find the one you’re looking for, hoping you recognise the icon? It’s a terrible experience that nobody will use more than once — if they even use it once.
Again, this example is technically functional, but completely unintuitive. It’s designed to look like buttons that are clickable, so that’s good UX, but inverting the colours causes confusion. As a society we have been taught that “green” means “start/go” and “red” means “stop”. By reversing the colours you are guaranteed to get unwanted actions either because people don’t read, or from the confusion that arises from the jarring messaging: the colour says “start” but the word says “stop”. This is where UX and UI intersect. A badly designed UI is causing bad UX.
One of my favourite websites is userinyerface.com. It’s intentionally terrible, and I love it for that. I have not been able to even fill in the form on the website yet — I keep rage-quitting: that’s how unintuitive it is. The record time in our team is 7 minutes thus far. It goes against basically every single UX and UI principle, and does a brilliant job of showing why UX and UI designers are important: we try to make websites/apps/people’s lives less hellish.
More great examples of intentionally terrible UX and UI design can be found in this article: it’s what happens when bored devs and designers on reddit try to create the worst volume controllers in the world. Spoiler alert: they succeeded.
There are hundreds more examples of good and bad UX I could go through, but just look up #UXfail or #UIfail on Twitter and you’ll get an idea of how much bad UX and UI there is in the world.
Ideal UX is invisible, you don’t even know you’ve interacted with it: you just manage to get the task done, whether you’re booking a flight, shopping online, or registering for a course. You’re not confused by buttons or input fields or what’s required of you — you can just do it intuitively and seamlessly. Ideal UI is beautiful, and enhances the UX by guiding you through an interface.
Now go forth and confidently teach others the difference between user experience design and user interface design.
