UX vs UI

Understand how UX & UI skills differ from and complement one another as a part of the design process, and what specializing means for your career

UX vs UI

We’ve all heard conversations about the great ‘UX’ of a product or the poor ‘UI’ or a website.

And if you’re a beginner, chances are you’ve used the two terms, UX and UI interchangeably. But actually, these are different things. So what exactly is the difference? What do UX and UI even mean and what are the roles of UX and UI Designers? If you’re keen to learn all these aspects, you’ve come to the right place. 

What do they mean?

User Experience (UX) Design 

User experience design is a human-first way of designing products. The term was coined by Don Norman, and here’s how he describes it:

“User experience encompasses all aspects of the end-users interaction with the company, its services, and its products.”

UX Design encompasses all interactions between a potential or active user and a company. As a scientific process it could be applied to anything; doors, cars, Ikea Shelvings and so on. However, despite being a scientific term, its use since inception has been almost entirely within digital fields; one reason for this being that the tech industry started blowing up around the time of the term’s invention in the late 1990s.

Essentially, UX applies to anything that can be experienced—be it a website, a coffee machine, or a visit to the supermarket. The “user experience” part refers to the interaction between the user and a product/service. User experience design, therefore, considers all the different elements that shape this experience.

User Interface (UI) Design

While user experience is a conglomeration of tasks focused on the optimization of a product for effective and enjoyable use, user interface design is its complement; the look and feel, the presentation and interactivity of a product.

A user interface is the point of interaction between the user and a digital device or product—like the touchscreen on your smartphone, or the touchpad you use to select what kind of coffee you want from the coffee machine. In relation to websites and apps, UI design considers the look, feel, and interactivity of the product. It’s all about making sure that the user interface of a product is as intuitive as possible, and that means carefully considering each and every visual, interactive element the user might encounter.

The main differences between UI and UX

There’s this analogy I like to use to describe the different parts of a (digital) product:

Imagine a product as a human body, the bones are the code that gives it structure. The organ represents the UC Design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body; its presentation, our skin and hair color and other senses. 

A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.

~Rahul Varshneyh.

It’s important to understand that UX and UI do go hand-in-hand; you can’t have one without the other. However, you don’t need to possess UI design skills to be a UX designer, and vice versa—UX and UI constitute separate roles with separate processes and tasks!

The main difference to bear in mind is this: UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look. 

A UX designer considers the user’s entire journey to solve a particular problem; what steps do they take? What tasks do they need to complete? How straightforward is the experience? Much of their work focuses on finding out what kinds of problems and pain points users come up against, and how a certain product might solve them.

The UI designer considers all the visual aspects of the user’s journey, including all the individual screens and touchpoints that the user might encounter; think tapping a button, scrolling down a page or swiping through an image gallery. UI designers also have a huge impact on whether or not a product is accessible and inclusive.

How do UX and UI work together?

We’ve explored the differences between UX and UI; now let’s take a look at how they work together. You might be wondering if one is more important than the other, but the reality is, they’re both crucial!

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. While something very usable that looks terrible is exemplary of great UX and poor UI.”

~ Helga Moreno

UX and UI go firmly hand in hand. UI design is like the icing on the UX cake.

Imagine you come up with an amazing idea for an app; something that’s clearly missing from the market and could genuinely change people’s lives for the better. You hire a UX designer to conduct user research and help you figure out exactly what features your app should have, and how the entire user journey should be mapped out. Now you need a UI Designer to ensure that all the text is legible on every page of your app, the buttons aren’t too close to each other and all the elements are at a harmony with each other. 

Without good UI, you’ll have a bad UI destroying what would have been good UX. And on the flip side, have you ever come across a really beautiful website only to find that, behind the on-point color scheme, it’s actually a pain to use!

Good UI can never make up for bad UX; it’s like picking up a beautifully decorated cake that actually tastes awful when you bite into it.

UX Design vs UI Design: Which career path is right for you?

While UX and UI design do go hand-in-hand, you don’t need to be a master of both. So which career path is best suited to you, UX or UI?

To figure out which career path is right for you, it’s important to look at the day-to-day tasks of each.

What does a UX Designer do?

So we now know, in abstract terms, what the role of the UX designer entails—but how does this translate into everyday tasks?

Strategy and content

• Empathising and Defining the problem

• User Research

• Competition Analysis

• Product Structure and strategy

• Creating User flows

Wireframing and Prototyping

• Ideation

• Wireframing

• Low fidelity and High fidelity prototyping

• Testing and iteration

Execution

• Coordinating with UI Designer(s)

• Coordinating with Developer(s)

• Tracking goals and integration

• Analysis and iteration

What does a UI Designer do?

If you like the idea of creating awesome user experiences but see yourself as a more visual person, you may be more interested in UI Design. 

Look and Feel

• Customer Analysis

• Design Research

• Branding and graphic development

• User Guides and storylines

Interactivity

• UI prototyping 

• Interactivity and animation

• Adaptation to all screen sizes (responsiveness)

• Implementation with Developer

Now you have a clear idea of what UX and UI Design is, what are tasks and responsibilities of UX and UI Designers, and how these terms differ. Next week, we’ll talk about how you can learn the two, how to learn all the skills required for the two and the best practices for each path.