UI vs UX – L’exemple de la bouteille de Ketchup, debunk

Si vous avez cherché au moins une fois la différence entre UI (User Interface) et UX (User Experience), vous avez dû tomber sur 2 illustrations très connues : la bouteille de Ketchup, et le chemin tracé dans l’herbe. Ces illustrations sont même parfois partagées par des experts du domaine pour aider à comprendre la différence, mais pourquoi ?

Le meme autour de la bouteille de Ketchup

Voici l’image que vous avez certainement toutes et tous vu :

Derrière cette représentation se cache la volonté de représenter deux choses distinctes, l’une serait l’interface utilisateur brute, peu réfléchie avec la bouteille en verre, et l’expérience utilisateur une fois celle-ci « mise en place », et donc réfléchie, avec la bouteille en plastique.

C’est en tout cas l’objet initial du meme, et cela pourrait suffire pour faire comprendre l’expérience utilisateur à des personnes vraiment novices. Mais ça serait également faire passer un message complètement faux, puisque ces deux bouteilles sont des produits, et non des interfaces ou expériences.

La réalité derrière la bouteille de Ketchup UI vs UX

Je ne suis pas le premier à debunk cette image et cette explication. Bien que sur la volonté d’expliquer à des débutants la différence entre les deux pratique (UI et UX), je peux concevoir que l’illustration soit simple et agréable, elle a le défaut de faire circuler une vision restreinte du design et de sa complexité. Voire de manquer d’inclusivité. (au sens large)

Voici une tentative d’expliquer ce qui ne va pas dans cette représentation initiale, en distinguant un peu mieux les deux produits, les deux UI, et les deux UX possibles.

Hélas, une fois n’est pas coutume, cette représentation est biaisée, et nous fait rentrer dans ce que j’appelle personnellement « la beauté de l’UX ».

« Il n’y a pas de bonne ou de mauvaise » UX… avec le Ketchup

L’UX est un domaine qui inclut une phase de recherche afin de comprendre les individus, leurs usages, le contexte social et les interactions que ces individus ont entre eux ou avec le produit.

L’objectif de cette phase de recherche est de se débarrasser de ses propres biais cognitifs, et de se forcer à retourner à un stade où « on ne sait pas ce qu’on pensait savoir ».

Pour reprendre l’exemple de la bouteille de Ketchup, deux UX sont représentées, l’une semblant représentée un utilisateur énervé sur sa bouteille, et l’autre heureux de se servir. Cette représentation est biaisée puisqu’elle part du postulat que l’une est meilleure, ou moins frustrante que l’autre.

Un bon designer irait observer les usages dans différents contextes, ferait des tests avec les différents produits, ou UIs, pour vérifier que cette vision des usages n’est pas biaisée, voire il tenterait de prouver l’inverse du postulat initial, comme la méthode scientifique invite à le faire.

Lors d’une étude, nous relevons généralement plusieurs aspects, comme : le ressenti, les attentes, les objectifs, et l’accomplissement de la tâche. Il nous arrive aussi de faire des comparaisons et de collecter un feedback associé au souvenir de l’expérience quelques semaines/mois plus tard, mais plus rarement.

L’UI et l’UX de la bouteille de Ketchup en verre

À défaut d’aller embêter des utilisateurs en direct pour ce sujet, j’ai pris le temps de faire des recherches sur les cibles, les objectifs, les accomplissements et attentes, ainsi que sur le ressenti des personnes qui pourraient utiliser une bouteille de Ketchup en verre.

Cibles de la bouteille en verre

• Personnes qui versent une grande quantité de Ketchup sans trop de difficultés.
• Personnes qui cuisinent avec du Ketchup
• Personnes à la recherche d’un ambiance (style Dinner américain)

Objectifs de la bouteille en verre

• Éviter les pertes
• Verser rapidement

Accomplissement avec la bouteille en verre

• Verser du Ketchup (de manière imprécise)
• Verser beaucoup de Ketchup (de manière rapide)
• Récupérer l’ensemble du Ketchup en versant un peu d’eau dans la bouteille. (cuisine)
• Capacité à voir ce qui reste dans la bouteille.

Ressenti

• Old school.
• Souvenirs d’autres années.
• Plus économique.

Risques

• Fragile et risque de casser.
• Moisit plus facilement.
• Maîtrise faible du débit.
• Demande de la force à l’ouverture.
• Demande de la force pour secouer/extraire le contenu

Tout ceci représente des artefacts de l’expérience utilisateur que pourraient trouver ces cibles avec ce produit et cet « UI » sous forme de bouteille de verre.

L’UI et l’UX de la bouteille de Ketchup en plastique

Idem ici, j’ai pris le temps de faire des recherches sur les mêmes aspects que précédemment, mais en observant les usages et les arguments présentés à droite et à gauche.

Cibles de la bouteille en plastique

• Personnes qui ont des enfants.
• Personnes qui ont des difficultés à tenir les objets en main.
• Personnes qui utilisent le Ketchup comme condiment.
• Personnes qui cherchent un côté pratique.

Objectifs de la bouteille en plastique

• Verser précisément la bonne quantité.
• Conserver relativement longtemps la bouteille.
• Avoir un objet plus facile à ouvrir.

Accomplissement avec la bouteille en plastique

• Verser du Ketchup (de manière précise)
• Verser au bon endroit dans l’assiette.
• Fermeture/ouverture aisée.

Ressenti avec la bouteille en plastique

• Sécurisant
• Écologique

Risques de la bouteille en plastique

• Longueurs pour verser du Ketchup en grande quantité,
• Fragile, le bouchon casse en cas de chute et ne se ferme plus, mais moins de risque de perte du contenu.
• Verser trop de contenu en appuyant trop fort.
• Maîtrise relative du débit.
• Demande parfois trop de force de pression.
• Difficulté à connaître le restant du conteneur.
• Suivant les modèles, difficulté à vider l’ensemble du Ketchup.

Tout ceci représente des artefacts de l’expérience utilisateur que pourraient avoir ces cibles avec ce produit et cet « UI » sous forme de bouteille en plastique.

Alors, qui gagne le combat ?

Comme vous le voyez, certains items de ces listes vont à l’opposé l’un de l’autre, et certains ne sont juste pas comparables. Lorsque cela arrive, il s’agit probablement d’un positionnement pour les produits, notamment pour répondre à deux usages différents.

Les expériences utilisateurs sont donc différentes et adressent des problématiques distinctes. Il n’y a donc pas de gagnante à moins de vous positionner sur un usage plutôt qu’un autre.

Ce qui se dessine c’est que la bouteille en verre serait davantage utilisée par des restaurateurs, soit pour créer une ambiance (« dinner« ), soit pour cuisiner. Là où la bouteille en plastique serait plutôt utilisée par des particuliers.

Cela rejoint les discussions que j’ai souvent avec des confrères et consœurs sur l’UX « grand public » VS l’UX « Entreprise ». Les usages et les réponses à un problème donné ne seront pas nécessairement les mêmes en fonction du contexte. Les designers qui n’ont jamais connu l’Enterprise UX ont souvent du mal à considérer les solutions proposées à des utilisateurs experts comme de bonnes solutions, car ils sont biaisés par le besoin de tout simplifier et rendre opaque les interfaces. Un utilisateur expert aura à l’inverse besoin de plus d’information à l’écran, en même temps, pour prendre des décisions en un coup d’œil avec le moins d’opacité possible.

S’il y avait une chose à retenir sur ce Ketchup

Les expériences avec des produits peuvent être multiples, et la multiplication des User Interfaces (UI) permettent parfois de répondre au besoin de multiplicité des expériences (UX).

D’ailleurs, créer plusieurs versions d’une UI pour tester les avantages et inconvénients de chacune permet d’évaluer les usages et parfois trancher sur une interface plus concluante. C’est une petite partie du processus de design.

Dans notre cas, si les deux produits (verre et plastique) sont encore en vente, c’est qu’ils répondent bien à des cibles et usages différents.