Product Management 101: User Interface (UI) and User Experience (UX)

User interface (UI) and user experience (UX) are two related (but not identical) concepts that every product person needs to have a working knowledge of. Below, we’ll go through the basics of each and discuss the differences between the two.

What is the user interface?

The user interface (UI) is the “surface” of any application or website. It is the entire visual makeup of the software and how all the assorted and collective parts of the software are conveyed to a user. The UI consists of three primary categories:

Layout

The UI layout is the overall look and feel of an app or website, including the structure and spacing of each screen and relationship between components on the screen, the general placement of core components to create and define the frame within the screen, the overall design language that is used to lend the software an identity, transitions between pages and components, and the colors, shapes, fonts, and perspectives that contribute to a cohesive brand.

Elements

UI elements are the parts of the app or website that make it interactive. Common elements include buttons, sliders, dropdown lists, and text fields. More recently, physical gestures have become core elements of the UI, especially for mobile apps.

Graphics

Within the UI, graphics are visuals that narrate the frame, screen, or element. Examples of graphics are illustrations, images, animations, videos, and photographs.

What is user experience (UX)?

User experience (UX) is the practice of creating products that address the needs of users, and which users can navigate easily and intuitively so that they can get value quickly. User experience is also literally that, how the user experiences the product.

User interface (UI) vs. user experience (UX) design

Although they are different fields of design, UI and UX are often used interchangeably or grouped together as the single discipline of software UI/UX design. The tendency to combine or conflate the two is largely the result of the emphasis on the user, less so on the skills and practices within each type of design.

In the context of the user’s interaction with an application or website, UI and UX are inherently linked, since they’re a package deal: one is hardly possible without the other. But the two disciplines are ultimately focused on separate goals. Where UI is primarily an artistic craft, UX emphasizes user behaviors.

In brief: UI design

In the world of software, user interface designers are also known as graphic designers. They conceive and execute the aesthetics of an app or website as layouts, elements, and images. In the broader workflow of product development, UI designers focus on the art that goes into the app or website and building the prototype of the feature or product.

In brief: UX design

User experience designers set out to optimize the interactions of the user against the backdrop of the UI. They test, experiment with, and gather insights and feedback on the user’s behaviors with the layout, elements, and images of the app or website, both in the context of the prototype and in the live software. UX designers focus on the user’s operational approach to the interface and how well or poorly those interactions generate a low-friction, high-engagement experience for the user.

How UI and UX designers collaborate

Once the user interface is roughly defined in the prototype, the UX designer sets out to find ways to guide the UI designer towards improvements. Is the design easy to use? Does it enable the user to interact and navigate efficiently? Do the user’s objectives stay consistent or change? What changes might generate better flow? With the insights and recommendations the UX designer generates from testing and experimentation, the UI designer can meaningfully update the interface so that the art reflects the intentions of the product.

How do UI and UX differ in practice?

After the product or feature interface has been passed to engineering, the UI designer’s job is mostly complete. However, once the product or feature has been developed, further tested, and launched in production, the UX designer is only halfway to the goal. Because the conditions for app or website optimization are largely dependent on context, UX must take a more holistic approach to user operations.

By gathering product and user analytics data, designing experiments, and conducting research, the UX designer’s process remains iterative based on considerations like device type, user segment, geography, and demographics. UX takes its insights back to UI for interface design changes that are meant to improve the art relative to key user behavior metrics. Although the UI designer must remain a steward for the consistency of look and feel as part of product’s brand continuity, the UX designer is constantly looking for iterations that may lead to better interactions and greater usability.

Recommended reading

Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)by Steve Krug

Think all must-read UX resources are dry and technical? Think again. This comprehensive yet wry book explains the basics of UX and user research and offers practical strategies for making your UI/UX so intuitive, your users don’t even have to think.

Quantifying the User Experience: Practical Statistics for User Research (2nd Edition) byJeff Sauro and James Lewis

Now we’re moving into the real nitty-gritty: math. Learn how to quantify where your user experience is working and where it’s not and how to back up your decisions with data.

“The PB&J of UX and Product” by Amanda Varney

UX and product can be a dream team. This article discusses just a few of the many benefits a strong relationship between UX and product can provide.

“The Ultimate Guide to UX Research Strategy” by Carrie Boyd

This step-by-step breakdown of the what, why, and who of UX research is an easy-to-read reference for both novice and seasoned UI/UX professionals.

“Delivering Better Products Using a Design Thinking Framework” by Leo Frishberg

It’s no secret that product, UX, and engineering sometimes struggle to communicate and collaborate effectively. This post explores one theory on why that is.

“Digging Into a Design Thinking Playbook” by Leo Frishberg

Running into roadblocks between PM and UX? Meet the four Mega-plays: problem validation, concept visioning, epic definition, and feature delivery. A companion piece to the article above.

“Usability Mistakes: Six Honest and Valuable Tips From a UX Designer” by Sándor Zelenka

Building a great user experience isn’t easy, and the process is full of pitfalls, including these six common UX mistakes.