The Difference Between UX And UI Design

1. What’s the difference between UX and UI design?

First things first: What do UX and UI actually mean? The people you have eavesdropped on are actually discussing two professions that, despite having been around for decades, and in theory for centuries, have been defined by the tech industry as UX and UI design.
UX design refers to the term “user experience design”, while UI stands for “user interface design”. Both elements are crucial to a product and work closely together. But despite their professional relationship, the roles themselves are quite different, referring to very different aspects of the product development process and the design discipline. Before we consider the key differences between UX and UI, let’s first define what each term means individually.

What is user experience (UX) design?

User experience design is a human-first way of designing products. Don Norman, a cognitive scientist and co-founder of the Nielsen Norman Group Design Consultancy, is credited with coining the term “user experience” in the late 1990s. Here’s how he describes it:
“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

– Don Norman, Cognitive Scientist & User Experience Architect

Clear, right? Well you might note immediately that despite what I implied in the introduction, the definition has no reference to tech, no mention of digital, and doesn’t tell us all that much about what a UX designer actually does. But like all professions, it’s impossible to distill the process from just a few words.

Still, Don Norman’s definition tells us that, regardless of its medium, UX Design encompasses any and all interactions between a potential or active customer and a company. As a scientific process it could be applied to anything; street lamps, cars, Ikea shelving 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.

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 or service. User experience design, then, considers all the different elements that shape this experience. A UX designer thinks about how the experience makes the user feel, and how easy it is for the user to accomplish their desired tasks. For example: How easy is the checkout process when shopping online? How easy is it for you to grip that vegetable peeler?

Does your online banking app make it easy for you to manage your money? The ultimate purpose of UX design is to create easy, efficient, relevant, and all-round pleasant experiences for the user.

We’ll answer the question “What does a UX designer do?” in section four. For now, here’s what you need to know about UX design in a nutshell:

•    User experience design is the process of developing and improving the quality of interaction between a user and all facets of a company.
•    User experience design is, in theory, a non-digital (cognitive science) practice, but used and defined predominantly by digital industries.
•    UX design is NOT about visuals; it focuses on the overall feel of the experience.

What is user interface (UI) design?

Despite it being an older and more practiced field, the question of “What is user interface design?” is difficult to answer because of its broad variety of misinterpretations. While user experience is an accumulation 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. But like UX, it is easily and often confused by the industries that employ UI designers—to the extent that different job posts will often refer to the profession as completely different things.

Unlike UX, user interface design is a strictly digital term. 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. A UI designer will think about icons and buttons, typography and color schemes, spacing, imagery, and responsive design.

Like user experience design, user interface design is a multi-faceted and challenging role. It is responsible for the transference of a product’s development, research, content and layout into an attractive, guiding and responsive experience for users.
We’ll look at the UI design process and specific tasks that a UI designer can expect in section four. Before we consider the main differences between UX and UI, let’s quickly recap on what user interface (UI) design is all about:

•    User interface design is a purely digital practice. It considers all the visual, interactive elements of a product interface—including buttons, icons, spacing, typography, color schemes, and responsive design.
•    The goal of UI design is to visually guide the user through a product’s interface. It’s all about creating an intuitive experience that doesn’t require the user to think too much!
•    UI design transfers the brand’s strengths and visual assets to a product’s interface, making sure the design is consistent, coherent, and aesthetically pleasing. 

Now we have a clear-cut definition of both UX and UI, let’s consider the key differences between the two.

The main differences between UX and UI

There is an analogy I like to use to describe the different parts of a (digital) product:

If you imagine a product as the human body, the bones represent the code which give it structure. The organs represent the UX design: measuring and optimizing against input for supporting life functions. And UI design represents the cosmetics of the body; its presentation, its senses and reactions.

But don’t worry if you’re still confused! You’re not the only one!

As Rahul Varshney, co-creator of Foster.fm puts it:

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. 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.”

If you’ve got room for one more analogy, Dain Miller sums up the relationship between UX and UI design perfectly:

“UI is the saddle, the stirrups, and the reins. UX is the feeling you get being able to ride the horse.”
— Dain Miller, Web Developer

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 viceversa—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 and function.

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. They’ll conduct extensive user research in order to find out who the target users are and what their needs are in relation to a certain product. They’ll then map out the user’s journey across a product, considering things like information architecture—i.e. How the content is organized and labelled across a product—and what kinds of features the user might need. Eventually, they’ll create wireframes which set out the bare-bones blueprints for the product.
With the skeleton of the product mapped out, the UI designer steps in to bring it to life. 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. While the UX designer maps out the journey, the UI designer focuses on all the details that make this journey possible. That’s not to say that UI design is all about looks; UI designers have a huge impact on whether or not a product is accessible and inclusive. They’ll ask questions like “How can different color combinations be used to create contrast and enhance readability?”or “What color pairings cater to color blindness?” You can learn more about UI design for accessibility here.

Hopefully you’re now starting to see how UX and UI design are indeed two very different things. To summarize:

•    UX design is all about identifying and solving user problems; UI design is all about creating intuitive, aesthetically-pleasing, interactive interfaces.
•    UX design usually comes first in the product development process, followed by UI. The UX designer maps out the bare bones of the user journey; the UI designer then fills it in with visual and interactive elements.
•    UX can apply to any kind of product, service, or experience; UI is specific to digital products and experiences.

2. How do UX design and UI design 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! Allow me to quote designer and expert Helga Moreno, who put it rather eloquently in her article The Gap Between UX And UI Design:

“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.”

As you can see, UX and UI go firmly hand in hand, and while there are millions of examples of great products with one and not the other, imagine how much more successful they might have been when strong in both fields.

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. Your app offers something that your target audience needs and wants; however, when they download it, they find that the text on each screen is barely legible (think yellow text on a white background). What’s more, the buttons are too close together; they keep hitting the wrong button by mistake! This is a classic case of bad UI destroying what would have been good UX.

On the flip side, have you ever come across a really beautiful website only to find that, beyond the mind-blowing animations and on-point color scheme, it’s actually a real 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.