Why you’ve got UX and UI all mixed up

We’re halfway into 2019 and you would think we were past the UX/UI conundrum, but some people still can’t tell the difference between the User Experience and the User Interface.

Cristian Bosch
Jun 20 · 13 min read

There’s an ocean of content out there attempting to explain the User Interface and the User Experience, but most do a poor job by using very simple language that falls short of the real thing. In most explanations UX and UI design are presented as separate disciplines altogether, and although they are different concepts, in the practice of design they are more connected than most people think. So for those readers still trying to make sense of this, here goes my attempt at demystifying UX and UI.

To get past the confusion we must first understand the multidimensionality of UX and UI. In most cases when we refer to UX or UI we are talking from the perspective of the USER who’s using an interface and having an experience. That’s all fine and good, but that’s just one angle. It just so happens that there’s another perspective that get’s shuffled into the conversation when referring to UX/UI, and that’s the perspective of the DESIGNER. In the following paragraphs I’ll deconstruct these concepts in both dimensions, with the hope of clearing up the murky water around this topic.

The Dual Perspective of UX and UI

As stated above, we can describe these concepts from the user’s point of view, or from the designer’s point of view.

Let’s start with the USER’s perspective. This one is pretty simple and most people understand this well.

User Interface = What a user interacts with in a product

User Experience = How a user interacts with a product and feels as a result of that interaction

The user interface is what a user is tapping and looking at, and the user experience is what a user is doing and feeling. The user experience is completely localized in the user’s physical body and you can tell by the user’s body language and expression if it’s good or bad UX. The interface however, is external to the user and localized in some type of device like a mobile phone or computer. Pretty straight forward right?

Users having experiences with digital products

Now let’s consider how a DESIGNER views UX and UI, which is an extension of the design work involved. This one’s a bit more convoluted so bear with me.

To illustrate, let’s begin with a simple analogy. Imagine an iceberg floating on the water. This huge block of ice is visible from a distance, but you can only see the tip that’s above the surface of the water. The rest of this massive icicle lies hidden from sight. This perfectly describes the relationship between UI design and UX design. Consider User Interface Design the tip of the iceberg (what you can see and interact with) and User Experience Design the whole iceberg (what you can see, along with what you can’t see, and that which holds everything together and will sink your Titanic if you collide with it!).

UI Design is the surface layer. UX Design is the complete logic.

To put it simply UI design comprises the surface layer of the product and UX design encompasses the combination of logic and behaviors baked into the product, including the surface layer. But just as the two portions of one iceberg (one part you see and one part you don’t), in essence they are the same thing, just different levels of expression in design.


As a user the concepts of UX and UI are quite distinct, but when you consider UX design and UI design as disciplines, they are sometimes indistinguishable. Now that we have the two perspectives established, let’s dive deep into what each concept means and what the practice entails. We’ll define each term from the user’s point of view (concept), and from the designer’s point of view (practice).

What is UX, really?

In reality User Experience is just an abstract term that covers a broad range of factors mainly concerned with the level of ease and satisfaction a person experiences when using a product. From a user’s perspective the User Experience can be defined as the subjective and objective experience a product generates.

It can be subjective…

  • Does the user connect emotionally with the microcopy of the app by cracking a smile?
  • Are the icons and illustrations understandable and aesthetically pleasing to the eye?
  • Is the user pleasantly surprised by the animated micro-interaction as a feedback mechanism?

And objective…

  • Does the user actually accomplish what he/she wants/needs?
  • Is the speed of response from the app satisfactory?
  • Is a swiping gesture or a tap more convenient for the mobile user?

The answer to questions like these will tell you about the UX of a product: the overall usefulness and satisfaction derived from interacting with a product.

Great UX is hard to come by

Why is UX important?

Imagine using a ride sharing app that doesn’t indicate where your driver is located while you’re waiting… or doesn’t allow you to make multiple stops when you’re with friends… or simply doesn’t allow you to save your favorite destinations for quick access. Now imagine a different app. A beautifully crafted ride sharing app that’s personalized to your riding habits and allows you to get a ride seamlessly with two taps on your mobile phone, shows you the location of your ride on a map in real time, and allows multiple stops so you can ride with friends. Which app would you use? The first app or the second app? These two examples are quite a contrast, but they highlight the value of good user experience over poor user experience.

At its core UX is about putting people before technology. The focus is always on creating positive experiences for users by serving them in the best way possible. After all, products are created to facilitate human lives, not the other way around. By applying scientific methods and practices to the design process, the experience can be measured, controlled, tested, and refined, with the main goal of improving the satisfaction of users. And with improved usefulness and satisfaction comes increased engagement with the product. Which generally translates to more sales and a robust bottom line. So it’s a win-win scenario for the users of the product and the business.

What does a UX designer do? (The practice of UX)

First a quick history lesson. User centered design originated in the late 1980’s with Apple engineer Don Norman. He complemented his background in electrical engineering with a degree in psychology to make machines communicate better with human beings. He pioneered the field by analyzing what people think and feel when using a product or technology. He actually cared about what real users thought of products and most importantly, he observed how users interacted with them. Later he applied the learned insights to new product designs and the Apple graphical user interface(GUI) made history. Before this time programmers designed technological systems that were logical, but difficult to use, and downright ugly! This ancient approach to product design had no bearing on the user and created a lot of dissatisfaction. A change in paradigm was needed and User Experience Design was born.

UX solves real problems for people

The discipline of User Experience Design lays the foundation and strategy of a digital product. It is the facilitator that brings everyone to the table(not just programmers or business owners) to define purpose and functionality, and it all begins with knowing the users and solving real problems that users face.

  • Who are the users and what do they want?
  • What are the main features the users need?
  • What are their current behaviors and how will the product connect with them?
  • What type of content resonates with the users best?
  • What user data and metrics can be used to support design decisions?
  • What does the product look like?

These are all questions that a UX designer must answer and it usually means asking a lot of deep questions to all parties involved, starting with the end users and stakeholders, but in a wider context the developers, business people, marketers, competitors, and so on. This is why UX designers never design in a vacuum. UX design employs collaborative methodologies that allow the designer to test assumptions with real user feedback and data, making the whole process of UX design more of a science than an art. It combines knowledge of business, psychology, technology and design with the goal of creating a solution that improves people’s lives.

The many facets of UX Design

UX design is still evolving as a professional discipline and currently covers a broad spectrum of processes and methods to get the job done. You can’t narrow down UX design to one singular task. Research & Analysis, Information Architecture, Interaction Design, Visual Design, and Content Strategy, are all tools of the trade. Each of these areas require different skillsets but they all point to a singular result: increased product usability and user satisfaction.

The UX Design Pyramid

User Research & Analysis

UX designers are constantly striving to improve the user experience of a product. By gathering information from users UX designers can make better design choices. The goal is to get a glimpse of the user’s mind and understand the context of the product on a deep level to gain powerful insights. To do this UX designers employ methods such as user interviews, user behavior studies, focus groups, and surveys. With the newfound information from user research a UX designer can create user personas, user stories, empathy maps, and customer journeys, in order to solidify understanding of users and document all data points for further use in the design process.

Content Strategy

Language shapes everything we come in contact with. It’s no different with digital products. Communicating effectively with the user is key in fostering the right connection. Writing product copy and microcopy, selecting the right wording and tone for your target users, writing email messaging, and designing emails, are all key tasks of the UX designer’s role in the content strategy of a product.

Information Architecture

Information is the lifeblood of digital systems and products. How this data is organized and presented heavily influences how it is consumed and used. To improve architecture a UX designer uses card sorting exercises for defining taxonomies and simplifying navigation, designs sitemaps to view relational information structures, designs wireframes to layout information on a screen, and designs user flows that cover multi-step information processes.

Interaction Design

A digital system is a dynamic space where user behavior influences system response, and vice versa. Nothing is static, everything has an effect, and it requires an understanding of human psychology and cognition to make this interplay between the user and the system run smoothly. The tasks in this area include designing user interfaces that are easy to navigate, designing micro-interactions that enhance feedback, designing screen states for relaying system status, and creating interactive prototypes for user testing.

Visual Design

In today’s hyper-competitive digital economy, it’s not enough for a product to do it’s job, it must be pleasing to the eyes as well. In this facet UX design applies visual aesthetics to enhance a product’s appeal by using design principles to combine colors effectively, use typography with sophistication, and designs icons to speed up recognition. All while following business brand guidelines.


So far we’ve covered UX. But what about UI? Let’s switch gears and dive headfirst into the User Interface.

What is UI? (Hint: it’s not just how it looks)

A general definition of User Interface is a dynamic system that facilitates communication between a user and a machine (backend/database), through the flow (input/output) of information, which ultimately lets the users achieve their desired outcome (interaction).

Having said this I’d like to debunk the widespread myth that states that a User Interface is only about the visual look and feel of a digital product. This is an overly simplistic definition I have found all over the web. Sure, the user interface can be about colors, typography, iconography, and general visual aesthetics, but it is not limited to that because a user interface can take many forms.

It can be visual, but it can also be audible and textual. Take for instance voice interfaces like Amazon’s Alexa or Apple’s SIRI. Voice recognition software is developing a whole new category of voice user interfaces. By shouting a command you can turn the lights on at home or play your favorite song. Another example of a non-visual interface is the good ole’ fashioned command line interface. This is the most primitive form of digital UI. Just type a textual command in a blank screen and press enter. This line of text communicates with the system and executes a given task. No pretty buttons or icons, just text. These are all valid examples of User Interfaces, and something to keep in mind when describing UI’s.

The classy Command Line Interface

But let’s not forget we live in a visually driven society. Since digital screens pervade our life in the form mobile phones and displays, visual UI’s comprise the vast majority of interfaces we interact with on a daily basis. In this way, a visual interface can have hundreds of screens, states, feedback loops and micro interactions that communicate with the user and respond to user behavior. And from here on we’ll refer to visual UI’s for all intents and purposes.

Why is the UI important?

The User Interface is the first point of contact with a digital product and its purpose is to facilitate communication between the system and the users. A poorly designed UI is like communicating with users in a foreign language, with no way of understanding or navigating the system. This results in user frustration and confusion. The formula for a bad user experience and major product abandon rates.

In contrast, a well designed UI adds value to a product because it creates a friendly environment that users can understand. It establishes a strong and clear (visual) language that enables users to navigate the system and get things done with ease. It creates frictionless interaction and an enriching experience. One that the users will likely repeat again and again.

What does a UI designer do? (The practice of UI)

All the analysis and insight gained from the work of user research, information architecture, and content strategy is synthesized in a User Interface. Which makes UI design an elemental part of UX design, all be it one that requires a very specific skillset, and generally encompasses visual design and interaction design. The UI designer role has evolved to think holistically about the complete interaction and flow of a system, balancing that dynamic with the users, the business brand, and the aesthetics.

UI Design is a subset of UX Design

Firstly, UI design focuses on the surface details like buttons, colors, and typography, tailored to the specific users and brand, thus giving the finishing touches to the whole product experience. Visual design skills are essential to the UI designer and include typography, color theory, iconography, illustration, visual hierarchy, alignment, layout, spacing, readability, and contrast. All these elements work in conjunction to define a particular UI’s look and feel.

Sketching out a UI with pen and paper

Furthermore, a UI designer also thinks of all the possible variations of a screen and how it will respond to user input (…need I say interaction design?). A system’s UI can be broken down into different screens, which can then be broken down into components and states. Thus component design is an integral part of UI design as well. Applying design patterns effectively, creating component libraries and eventually establishing complete design systems are all parts of the UI designer’s craft.

Components in UI Design

And let’s not forget device context. Designing an interface for a mobile phone has different requirements than designing for a desktop or tablet or virtual reality. So a UI designer must be well versed in limitations and differences amongst devices to design effective interfaces.

Conclusion

There is a dual perspective when discussing UX and UI. Defining which viewpoint we’re referencing clears up the confusion. From a USER’s perspective the UI is the main touchpoint with a digital product and UX is the intangible result stemming from that interaction. One exists in the external world (UI), the other in the user’s internal perception and sensory experience (UX).

But from a design professional’s point of view, UI design is inextricably a hefty portion of UX design, because you can’t design an experience without designing the interaction, and all interactions happen with some sort of interface. You can’t divorce UI design from UX design. If you are a UI designer you are effectively impacting the user experience. The interaction design is common to both. So let’s get past the dichotomy in this arena and let’s call UI design what it is: a subset of UX design. They are not disparate and opposing professional fields. In this regard UI is UX.

Hopefully I can finally clarify what most people have been misled to believe by simplistic definitions on the web. UX and UI are not completely separate entities. To the end user of a product they are separate concepts, but to the designer they generally overlap in practice. So in one sense they’re different, but in another sense they’re the same. It all depends on how you look at it.

The Startup

Medium's largest active publication, followed by +504K people. Follow to join our community.

Cristian Bosch

Written by

Business. Design. Tech. I think visually & laterally. www.cristianbosch.com

The Startup

Medium's largest active publication, followed by +504K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade