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.

Qu'est-ce que l'interface utilisateur ?

L'interface utilisateur (UI) est la « surface de contact » d'une application ou d'un site Web. C'est l'ensemble des éléments visuels du logiciel et la manière dont les parties assorties et collectives de ce dernier sont transmises à l'utilisateur. L'UI est composée de trois catégories principales :

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.

Qu'est-ce que l'expérience utilisateur (UX) ?

Cette pratique consiste à créer des produits intuitifs et faciles à utiliser qui répondent aux besoins des utilisateurs afin de rentabiliser rapidement leur achat. Plus littéralement, c'est aussi la manière dont l'utilisateur appréhende le produit.

Conception de l'interface utilisateur (UI) et de l'expérience utilisateur (UX)

Bien qu'il s'agisse de deux domaines de conception bien distincts, l'UI et l'UX sont souvent considérées comme interchangeables ou regroupées au sein de la conception logicielle d'UI/UX. Cette tendance à associer ou à confondre les deux est davantage due à l'importance donnée à l'utilisateur qu'aux compétences et pratiques propres à chaque type de conception.

Dans le cadre de l'interaction d'un utilisateur avec une application ou un site Web, l'UI et l'UX sont étroitement liées car elles forment un tout : l'une est difficilement possible sans l'autre. Mais les deux disciplines ont, en fin de compte, des objectifs bien distincts. Alors que l'UI est essentiellement artistique, l'UX met l'accent sur les comportements des utilisateurs.

En bref : conception d'UI

Dans le milieu des logiciels, les concepteurs d'UI sont également appelés graphistes. Ils créent et développent l'esthétique d'une application ou d'un site Web par le biais de la disposition, des éléments et des images. Dans une perspective plus large de développement produit, les concepteurs d'UI sont chargés de l'aspect artistique de l'application ou du site Web et de créer un prototype de la fonctionnalité ou du produit.

En bref : conception d'UX

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.

Collaboration entre concepteurs d'UI et d'UX

Une fois l'UI grossièrement définie dans le prototype, le concepteur d'UX aide le concepteur d'UI à apporter des améliorations. La conception est-elle simple d'utilisation ? Permet-elle à l'utilisateur d'interagir et de naviguer efficacement ? Les objectifs de l'utilisateur restent-ils identiques ou changent-ils ? Quels changements sont susceptibles d'apporter plus de fluidité ? Grâce aux données et aux conseils du concepteur d'UX issus des phases de test et d'expérimentation, le concepteur d'UI peut modifier l'interface afin que l'esthétique reflète les intentions du produit.

How do UI and UX differ in practice?

Une fois l'interface du produit ou de la fonctionnalité transmise au département technique, le travail du concepteur d'UI est quasiment terminé. En revanche, lorsque le produit ou la fonctionnalité a passé la phase de développement, des essais et que sa production est lancée, le concepteur d'UX, lui, n'a accompli que la moitié de son objectif. Comme les conditions de l'optimisation de l'application ou du site Web dépendent largement du contexte, l'UX doit prendre en compte les opérations des utilisateurs de manière plus globale.

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.