Aller au contenu

UX et UI : ce que c'est et en quoi ils diffèrent

| Article: 9 min de lecture | Ergonomie, UX du catalogue

L'UX (expérience utilisateur) recouvre tous les aspects de l'interaction d'une personne avec une entreprise, ses services et ses produits. L'UI (interface utilisateur) est la partie avec laquelle la personne interagit directement à l'écran : boutons, menus, formulaires, polices, couleurs, disposition des éléments. L'UI est une partie importante mais plus étroite de l'UX.

En clair

Imaginez une boutique de chaussures en ligne.

  • L'UI, c'est l'apparence et le comportement de la fiche produit : la photo, le bouton « Acheter », le sélecteur de pointure, le bloc du prix.
  • L'UX, c'est tout le parcours : comment la personne a trouvé la boutique, si elle a compris quelle pointure lui convient, combien coûte la livraison du transporteur, si le colis est arrivé à temps, comment s'est passé le retour, ce que le support a répondu sur la messagerie.

On peut avoir une UI irréprochable et une UX médiocre. Don Norman et Jakob Nielsen donnent un exemple : un site de critiques de films peut avoir une recherche parfaite, mais si la base ne contient que des films des grands studios et que la personne cherche du cinéma indépendant, l'expérience est un échec (NN/g). L'équivalent pour une boutique est un catalogue pratique qui n'a pas la bonne pointure, ou un beau paiement après lequel la commande met une semaine à arriver.

Ce qu'est l'UX : la définition de Norman et Nielsen

Le terme « expérience utilisateur » a été inventé par Don Norman (IxDF). Dans un article de Nielsen Norman Group, Norman et Nielsen décrivent l'UX comme tout ce qui concerne l'interaction de l'utilisateur final avec l'entreprise, ses services et ses produits. Leurs exigences pour une bonne UX (NN/g) :

  1. Répondre exactement aux besoins du client, sans tracas ni complications.
  2. Une simplicité et une élégance qui font de la possession et de l'usage du produit un plaisir.
  3. Plus que donner aux gens ce qu'ils disent vouloir, ou cocher une liste de fonctionnalités.
  4. Un travail sans couture de plusieurs disciplines : ingénierie, marketing, design graphique et industriel, conception d'interface.

La norme ISO 9241-210 définit l'UX comme les perceptions et réactions d'une personne résultant de l'utilisation et/ou de l'utilisation anticipée d'un produit, d'un système ou d'un service (cité d'après IxDF).

Ce qu'est l'UI

L'Interaction Design Foundation définit la conception d'UI comme le travail sur le style visuel et la mise en page des interfaces de programmes ou d'appareils, afin que les gens les trouvent faciles et agréables à utiliser (IxDF, UI Design). Les interfaces peuvent être :

  • graphiques (GUI) : écrans de sites et d'applications ;
  • vocales (VUI) : Siri, Alexa ;
  • gestuelles : par exemple en réalité virtuelle.

Pour une boutique en ligne, l'UI est presque toujours une interface graphique : la grille du catalogue, les filtres, la fiche produit, le panier, le formulaire de paiement.

La différence entre UX et UI


UX

UI

Ce que cela couvre

Toute l'expérience d'interaction avec l'entreprise et le produit

Ce que la personne voit et touche à l'écran

Question principale

Le produit résout-il le problème de la personne, et tout le parcours est-il agréable ?

Un écran précis est-il clair, pratique et attrayant ?

Exemple dans une boutique

La personne trouvera-t-elle sa pointure, comprendra-t-elle les conditions de livraison et de retour

L'apparence du sélecteur de pointure, du bouton « Acheter » et du formulaire d'adresse

Résultat du travail

Recherche, scénarios, parcours clients, prototypes

Maquettes, UI kit, design system, états des éléments

L'IxDF compare l'UX à une voiture et l'UI à son tableau de bord (IxDF). Il y a aussi l'ergonomie entre les deux : NN/g la décrit comme une qualité de l'interface, c'est-à-dire si elle est facile à apprendre, efficace et agréable (NN/g).

Comment les différentes sources voient la question

  • NN/g (Norman et Nielsen) comprennent l'UX de la façon la plus large : ce n'est pas seulement le site mais toute l'interaction avec l'entreprise, le service, la livraison, le support. L'UI et l'ergonomie font partie de l'UX.
  • ISO 9241-210 met l'accent sur la perception de la personne, y compris l'utilisation anticipée : l'expérience commence avant le premier clic, avec les attentes.
  • L'IxDF voit la conception d'UX comme le processus de création de produits offrant une expérience porteuse de sens, et considère l'UX et l'UI comme des disciplines distinctes qui se recoupent. L'ergonomie et la conception d'UI sont des sous-ensembles de l'UX (IxDF).

Sur le marché du travail, « designer UX/UI » désigne souvent une seule personne qui fait à la fois la recherche et les maquettes. C'est une question de répartition des rôles dans une équipe, pas de définitions : les disciplines elles-mêmes sont différentes.

Qui est designer UX et designer UI

Un designer UX, selon l'IxDF (source) : - mène des recherches auprès des utilisateurs et crée des personas ; - réalise des wireframes et des prototypes interactifs ; - teste les solutions avec des utilisateurs ; - défend l'utilisateur face à l'entreprise et au développement.

Un designer UI, selon l'IxDF (source) : - conçoit la mise en page, le visuel et les éléments interactifs des sites et des applications ; - rend l'interface intuitive, claire et attrayante ; - crée des wireframes, des maquettes, des prototypes ; - n'a généralement pas besoin de coder, mais connaître HTML/CSS/JavaScript aide à dialoguer avec les développeurs.

Un designer UX/UI est une personne qui cumule les deux rôles. Dans les petites équipes, c'est le cas le plus courant : l'IxDF note que dans les petites équipes, un designer UX peut aussi s'occuper des éléments visuels, alors que dans les grandes entreprises les rôles sont répartis entre chercheurs, concepteurs d'interface et rédacteurs UX.

Le processus de conception UX/UI

Il n'existe pas de processus standard unique, mais la plupart des équipes suivent une variante du design thinking en cinq étapes (IxDF) :

  1. Comprendre (empathie) : recherche utilisateur, entretiens, observation, analyse des données.
  2. Définir : analyser les données, formuler le problème. Un parcours client est souvent construit à ce stade.
  3. Imaginer : réfléchir à des solutions.
  4. Prototyper : des croquis sur papier aux prototypes cliquables ; l'UI intervient à cette étape.
  5. Tester : avec de vrais utilisateurs (tests d'utilisabilité) et une évaluation heuristique.

Le processus est itératif : les résultats des tests renvoient l'équipe aux étapes précédentes.

Exemples dans une boutique en ligne

Problème d'UX : la personne a peur de choisir la mauvaise pointure. La solution UX est un guide des tailles sur la fiche produit, des avis « taille petit / taille grand », des conditions d'échange claires. La solution UI est l'endroit et la manière d'afficher le guide (une fenêtre modale, un onglet) et l'apparence de l'indication à côté du sélecteur de pointure.

Problème d'UX : les acheteurs abandonnent leur panier à cause de coûts inattendus. Selon Baymard (mise à jour du 22 septembre 2025), 40 % des acheteurs qui ont abandonné leur paiement sont partis à cause de frais supplémentaires trop élevés (livraison, taxes, frais), et 12 % de plus parce qu'ils ne pouvaient pas voir le coût total dès le départ (Baymard). La solution UX est d'afficher le coût de livraison du transporteur ou le seuil de livraison gratuite dès la fiche produit. La solution UI est la manière exacte de présenter cette ligne pour qu'elle soit remarquée et non confondue avec le prix.

Problème d'UX : un formulaire de paiement long. Selon l'analyse de Baymard de 2024, un paiement compte en moyenne 11,3 champs (11,8 en 2021, 12,7 en 2019), alors que la plupart des sites n'en ont besoin que de 8 (Baymard, juin 2024). Il n'existe pas de mesure plus récente. L'UX décide quels champs supprimer (par exemple, ne pas exiger d'inscription, fusionner le nom et le prénom). L'UI décide de l'apparence des champs, de la mise en évidence des erreurs et du clavier qui s'ouvre sur smartphone pour le champ du téléphone.

Ce qui a changé en 2026

  • Les interfaces ne sont plus lues seulement par des personnes. En avril 2026, NN/g écrit que des agents IA effectuent déjà des achats au nom d'un utilisateur : ils naviguent sur les sites, remplissent des formulaires, comparent des options et passent des commandes, mais « grossièrement, souvent de manière peu fiable ». D'où le conseil : étiqueter les boutons avec du texte, pas seulement une icône, construire le balisage selon le sens (où est le prix, où sont les options), et garder le panier et le paiement prévisibles. Cela rejoint l'accessibilité pour les personnes qui utilisent des lecteurs d'écran (NN/g, 2026).
  • Un bel écran ne suffit plus à se démarquer. Selon NN/g (janvier 2026), le travail visuel sur les interfaces devient moins coûteux grâce à la standardisation, de sorte que l'avantage vient de la profondeur : le fonctionnement de tout le système, le contenu et les fonctions, pas seulement l'écran (NN/g, State of UX 2026).

Erreurs fréquentes

  • Considérer l'UX comme de « jolies images ». Un bel écran sans recherche résout souvent le mauvais problème.
  • Commencer par l'UI. S'il n'est pas clair ce dont l'acheteur a besoin, il faudra refaire les maquettes.
  • Limiter l'UX au site. La livraison, l'appel d'un conseiller, un SMS d'expédition font aussi partie de l'expérience.
  • Ne pas tester avec des personnes. L'avis de l'équipe et du propriétaire ne remplace pas l'observation des acheteurs.
  • Ignorer les habitudes du public. Les acheteurs sont habitués aux schémas des grandes marketplaces ; des solutions inattendues pour les choses de base (panier, filtres) augmentent la charge pour l'utilisateur.

FAQ

Qu'est-ce que l'UX/UI, en clair ? L'UX est toute l'expérience d'une personne avec votre produit et votre entreprise. L'UI est l'interface par laquelle la personne interagit avec le produit : écrans, boutons, formulaires.

UI et UX : quelle différence ? L'UX répond à « le produit résout-il le problème et tout le parcours est-il agréable », l'UI répond à « un écran précis est-il clair et pratique ». L'UI fait partie de l'UX.

Que fait un designer UX/UI ? Il étudie les utilisateurs, conçoit des scénarios et des prototypes (UX), dessine des maquettes et des éléments d'interface (UI) et vérifie les solutions avec des personnes.

Quelles bases d'UX/UI le propriétaire d'une boutique doit-il connaître ? La définition de l'UX de NN/g, les principes d'ergonomie, les 10 heuristiques de Nielsen et la recherche de base de Baymard sur le panier et le paiement.

Termes associés

Sources

Vous voulez le vérifier sur votre boutique ?

Design UX/UI

Des interfaces pratiques et reconnaissables, qui renforcent la satisfaction des clients et les ventes.

À propos du service →

Partager

À lire aussi

  • Utilisabilité

    | Article: 9 min de lecture

    L'utilisabilité (usability) mesure la facilité et le confort avec lesquels des personnes utilisent un site, une application ou toute interface pour atteindre leur objectif. La norme ISO 9241-11 la définit comme le degré selon lequel un produit peut être…

  • Évaluation heuristique (revue d'expert)

    | Article: 3 min de lecture

    L'évaluation heuristique est une méthode de détection des problèmes d'une interface, dans laquelle plusieurs experts évaluent indépendamment un site ou une application à partir d'un ensemble de principes (heuristiques), le plus souvent les 10 heuristiques de…

  • Google Merchant Center et fiches produits gratuites

    | Article: 5 min de lecture

    Google Merchant Center est le compte dans lequel une boutique téléverse les données de ses produits (nom, prix, disponibilité, photos, lien) pour que Google puisse les afficher dans Shopping, la recherche, les images et d'autres services. Les fiches produits…

  • Photos produit, vidéo et génération par IA

    | Article: 3 min de lecture

    La photo produit est le principal moyen de montrer à un acheteur ce qu'il ne peut pas tenir dans ses mains. La génération par IA aide à créer un arrière-plan, un angle ou une illustration, mais elle s'accompagne de règles claires : dans Google Merchant…