What’s the difference between UX and UI design?

User experience (UX) and user interface (UI) design are often used interchangeably, making it difficult to know when one applies over the other. But while they share key principles and both focus on designing for the end-user, are they really that similar? What’s the difference between UX and UI design? To answer that question, let’s first look at them individually.

User experience (UX) design

In the words of Jakob Nielson & Don Norman, “User experience encompasses all aspects of the end-users interaction with the company, its services, and its products.” Therefore user experience (UX) is an umbrella term that encompasses a variety of elements including visual design, information architecture, interaction design, usability, user research, and content strategy. All together, UX involves the following professions:

• UX designer
• Product designer
• Information architect (IA)
• Interaction designer (IDX)
• User interface (UI) or visual designer
• User researcher
• Content specialist
• UX engineer

A person in this field might wear a couple of these hats or specialize in a specific area. However, regardless of someone’s niche, UX is a process of design thinking and is approached with human-centred design.

Design thinking

Design thinking is a freeflow innovation process used to understand users, challenge assumptions, redefine problems and create solutions to prototype and test. It aims to use a designer’s sensibility to create solutions that balance human-centred design with technology constraints and business objectives. It allows UX teams to find a middle ground of feasibility, viability, and desirability while considering users’ actual needs and wants.

Human-centred design

Human-centred design is when something is created based on general natural characteristics and peculiarities of human psychology and perception, and its process includes inspiration, ideation, and implementation.

Inspiration

The inspiration phase starts by first understanding your users, their lives, and the problems they face. From there, UX professionals will conduct interviews, build empathy maps, etc. to learn more about the issues at hand. This is an essential part of creating for the end-user because it stops our natural tendency to design for our clients and for ourselves rather than the target audience.

Ideation

This phase is where you experiment, fail, and try again by building off your research to generate conceptual ideas and opportunities. Using rough sketches, wireframes, user flows, etc. designers test and refine their ideas based on the responses of test audiences. This step is crucial, as testing assumptions early on better ensures a successful user experience while reducing the likelihood of costly rework and extended timelines.

Implementation

Implementation is the final step where ideas and strategies come to life through prototypes, visual design, and final products. By working through the inspiration, ideation, and implementation steps with design thinking, the result is an intuitive experience that addresses user needs while solving their original problem.

User interface (UI) design

A user interface designer comes in at the implementation phase of the process and aims to make the user’s interactions with a device or application (e.g. computers, home appliances, mobile devices, other electronics, etc.) as simple and efficient as possible when working towards their goal. A few UI outputs you might see or interact with daily are:

• Windows that display information independently from the rest of a screen
• Icons or small imagery communicating an action or component on a screen
• Menus for navigating or selecting
• Widgets for input controls or informational and navigational components (e.g. buttons, text fields, toggles, progress bars, etc.)

The list of possible applications is endless and would likely include elements you wouldn’t think twice about–but that’s the goal. A user interface designer leads the eye through an experience by removing any guesswork for the user by creating clean layouts through compositions, grids, visual hierarchy, spacing, typography, colour, whitespace, and more. A UI designer might also work with a style guide, including standards, principles, and rules that should be followed for a product or brand’s presence.

So what’s the difference between UX and UI?

Both terms mean different things but work together and play vital roles in the user’s overall experience with a product or brand. However, the main difference is that user interface (UI) design is one component of the overarching focus and process we call “user experience” (UX) design.

As a guide to help you identify the key difference in the future, we’ve put together this handy downloadable UX vs. UI Design infographic: