27 Feb 2024
|11 min
UX vs UI
UX vs UI design – these terms are often used interchangeably, but what's the difference? In this article we explain what UX and UI design is, what UX and UI designers do, and how the two disciplines interact.
User experience (UX) and user interface (UI) design are two of the most commonly confused design specializations.
With these terms being so similar, the question is: what’s the difference between UX and UI design?
In practice, UX and UI design work closely together. Each function is crucial to how we interact with a product or website. But both disciplines have different focus, roles, and purposes.
In this article, we dive into what UX and UI design is. We look at the similarities and differences between them. We also explore what UX and UI designers do and how they work together.
What is UX design?
We often describe UX as the way we feel about our experience with a physical or digital product or service.
The term "user experience" was popularized in the 1990s. It’s credited to Nielsen Norman Group co-founder Don Norman when he was a user experience architect at Apple. Norman defined UX as the entire experience a user has with a company, its products, and its services.
Since the nineties, UX design has grown significantly as a field. But at its core remains a human-centered approach to design that aims to meet the needs of users.
The UX design process leverages research to understand users. It defines problems and comes up with ideas for solutions, mapping out every interaction in a product or service. And this human-centered approach creates the foundations for UI design.
What is UI design?
UI design is responsible for designing the interfaces required to meet user needs. It leverages things like typography, images, and visual hierarchy to create interfaces that are easy to use.
Where UX is concerned about a user’s journey, UI is concerned with each interface along that journey. This includes details like buttons, scrolling, and animation.
What does this mean in practice? A UI designer might pick up where a UX designer left off, or there’s some crossover between the two roles. For example, once a customer journey is mapped, a UI designer will step in to design how each screen or stage will look.
UI also uses research such as usability testing to refine and create interactions between each step of the customer journey.
What’s the difference between UX and UI design?
Generally, the focus of UX design is the discovery of how we interact with a product or service. UI is concerned with designing the functional end product.
Put another way, UX ensures a product is useful and UI focuses on ensuring it is usable.
UX defines problems and solutions, and develops wireframes, prototypes, and other design artifacts that represent the overall user journey. UI refines those into a final, functional interface. UX is always looking at the big picture, ensuring consistent flow, while UI is immersed in the details.
But as we’ll see, there’s a lot of overlap. The line between the two disciplines is not always clear cut. Depending on your business or team, a UX designer might cross over into UI, and vice versa.
UX and UI rely on each other. Great products depend on both!
Let’s look at the roles and responsibilities of UX and UI designers, and how these two disciplines interact.
Your go-to user research platform
The best teams use Lyssna so they can deeply understand their audience and move in the right direction — faster.
What are the goals and responsibilities of UX designers and UI designers?
There is some overlap between what a UI designer does and what a UX designer does, but the two roles aren’t quite interchangeable. The skill sets are complementary and both roles work together to build products.
We’ll go into more de below, but here are the top level responsibilities of each role.
Remember, these aren’t exhaustive or prescriptive lists, but are the focus areas and responsibilities. In some businesses, these responsibilities may cross over more than others.
What does a UX designer do?
Product strategy
User research
Information architecture
Interaction design
What does a UI designer do?
Visual design
Information architecture
Interaction design
UI engineering
Let’s break this down some more by taking a deeper look at the tasks that UX and UI designers handle.
User research
With a focus on problem solving and solutions, user research is an essential tool for both UX and UI designers.
There are various types of user research. A common difference between how UX and UI designers perform that research is whether it’s generative or evaluative.
Generative research
UX designers and UX researchers usually use generative research in the early stages of a project. Also known as discovery or exploratory research, the purpose is to help identify user needs and opportunities for new solutions.
This type of research uses interviews, observational studies, and surveys to draw out the issues that users face. It gives insights into pain points, challenges, needs, and lives. It also helps provide insights into why users behave or think in a certain way.
This information helps UX designers define problems and propose solutions so they can develop useful products for their end users.
Generative research methods include:
User interviews
An example of an open card sort test built in Lyssna.
Evaluative research
An essential but different approach is evaluative research. It helps to measure whether the solution is on the right track. While conducted by both UX and UI designers, it’s often the domain of UI.
Evaluative research methods include:
Usability testing
Tree testing
An example of a preference test built in Lyssna.
Information architecture
Information architecture (IA) is a common area of crossover between UX and UI design. It refers to how to organize information.
IA is the backbone for product and site design. Good IA allows us to find what we’re looking for quickly and easily.
To present content well, IA needs to intuitively understand a user’s mental model and how they would look for something. For example, when designing a travel booking site, it would be helpful to know if users search by destination, activities, or price first.
Successful IA will consider things like:
All the content and information included in a product or on a website. It can present this in a sitemap, showing the site’s structure and accommodating for its growth.
Users’ intuitions on how to group content. This might entail card sorting or tree testing. Card sorting helps to refine content, menus, and sitemaps. Tree testing determines if key information can be found via the site and if terms and names are understandable.
The specific words that will resonate most with users. This is often the domain of specialized UX writers, whose job it is to write copy that users interact with.
Interaction design
Interaction design (IxD) is a broad term. Jon Kolko, author of Thoughts on Interaction Design, describes IxD as "the creation of a dialogue between a person and a product, system, or service."
IxD involves words, visual representations, physical objects/space, time, and behavior (e.g. how users perform actions on a website or with a physical product).
This is another area of crossover between UX and UI design, but is often the focus of UI designers.
If you already have a customer journey map, IxD is the glue between each step. It’s how a system responds to what the user does and ensures progression to the next step.
For example, to create a new online bank account, you’ll have to go through several steps. At each step, you’ll interact with the system. IxD determines what each of those interactions looks and feels like.
Interactions can also relate to how we feel. For example, a UX designer may identify that the successful completion of an action should feel celebratory. A UI designer may turn that into confetti when you click the last button.
Both prototyping and usability testing are crucial components of interaction design.
Visual design
Visual design helps support information architecture and interaction design. Drawing our eyes to the most important information is a critical role of UI designers. Visual design aims to make interfaces usable and aesthetically pleasing.
There are two key components of visual design:
Visual elements and hierarchy: The text, color, images, and layout that enhance a design. For example, underlined blue website links are a product of visual design. If links weren’t blue and underlined, navigation between pages would be difficult.
Design systems: An important aspect of visual design is consistency. As products become more complex and need updating more frequently, we have developed design systems to make this task easier. A design system is a set of standards intended to manage design at scale using reusable components and patterns. It results in visual consistency and designs that can be replicated. This frees up UI designers to work on larger, more complex projects.
How do UX designers and UI designers work together?
As we’ve seen, UX designers and UI designers often collaborate and have crossover. A good understanding of both roles, their responsibilities, and their goals is key to creating a more transparent and successful design process. And, ultimately, great products.
If you only have a UX designer on your team, they’ll invariably need to do some UI design work. And vice versa.
For example, a beautiful website (UI) would be ineffective if we couldn’t find the info we’re looking for (UX). On the flip side, poor aesthetics, visual hierarchy, or unreadable fonts may impact excellent site functionality.
The key areas where UX and UI work together are:
UX and UI designers often collaborate on usability testing.
Visual hierarchy supports information architecture.
Interaction design is the glue that connects different steps in a customer journey.
Which is better: UX or UI?
Many conversations about UX vs UI relate to choosing a profession or staffing a team. Which career path should you take? Do you need both roles, or one? And if one, which role do you choose?
Ultimately, it comes down to what your preferences and priorities are. As we've seen, the lines between UX vs UI are not hard and fast. Both disciplines are essential for creating products that are not only usable, but also useful. Ready to get started with UX research? Sign up for a free Lyssna plan today.
Elevate your research practice
Join over 320,000+ marketers, designers, researchers, and product leaders who use Lyssna to make data-driven decisions.
UX vs UI design: Frequently asked questions
You may also like these articles
Sign up to our newsletter
We'll keep you updated with the latest UX insights and more.
