UX, UI et ketchup

Si vous vous intéressez au Web, vous avez forcément déjà vu passer des images plus ou moins pertinentes sur les différences entre expérience utilisateur (UX) et interface utilisateur (UI).

Parmi celles-ci, l’image de la bouteille de ketchup est fréquemment utilisée. Voici l’image en question, je n’en connais pas l’auteur. Si je le connaissais, je le féliciterais sans doute pour sa contribution à la vulgarisation des notions d’UI et d’UX. Ce serait mon seul compliment car je lui reprocherais aussi d’avoir induit en erreur des millions de personnes sur ce que sont réellement ces concepts d’UX et d‘UI. Sous vos yeux ébahis, voici l’image en question.

Cette image très répandue et déjà largement critiquée dans de nombreux articles induit des idées fausses sur l’UX, sur l’UI et sur la différence entre ces deux concepts. Dans la suite de cet article je ne vais pas faire exception et je vais moi aussi en réfuter le sens, mais vous verrez, ce sera pour d’autres raisons que celles qui sont généralement évoquées par mes consoeurs et confrères.

Quelques éléments de contexte

Les concepts d’UX et d’UI existent depuis des années, ils sont utiles, ils servent à décrire des métiers, des méthodes, des approches. Il est donc absolument fondamental que les professionnels du secteur web connaissent ces concepts et les comprennent. Pour ceci, rien de tel que des métaphores et des images simples. Encore faut t-il que celles-ci soit pertinentes et comme on va le voir ce n’est pas le cas de cette image, qui continue pourtant à être très répandue et partagée.

Pour commencer partons de l’article fondateur The Definition of User Experience (UX) de Jakob Nielsen et Don Norman. Son résumé explique :

« User experience » encompasses all aspects of the end-user’s interaction with the company, its services, and its products. »

Traduction : L’expérience utilisateur regroupe tous les aspects des interactions de l’utilisateur avec l’organisation, ses services et ses produits »

Plus loin dans le même article, les auteurs précisent :

« It’s important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. »

Traduction : Il est important de distinguer l’expérience utilisateur globale de l’interface utilisateur, même si l’interface est évidemment une partie essentielle de la conception.

Comme on le voit, l’UX inclut l’ensemble des interactions avec le produit ou le service. L’interface (UI) est en jeu dans une partie de l’UX seulement.

Je travaille depuis 1999 sur l’assurance qualité pour le web. En 2001, j’ai conçu avec Eric Gateau le modèle VPTCS (Visibilité, Perception, Technique, Contenu, Services).

Le modèle se lit dans l’ordre chronologique de la visite de l’utilisateur sur le site, en trois grandes phases : avant, pendant et après.

• La visibilité, c’est ce qui se passe avant que vous ne soyez en contact réel avec l’interface,
• La perception, la technique, le contenu, c’est TOUT ce qui se passe pendant que vous êtes en contact avec l’interface,
• les services, c’est ce qui se passe quand vous n’êtes plus en contact avec l’interface.

Nous utilisons ce modèle VPTCS notamment pour distinguer l’expérience utilisateur totale (UX) de l’interface utilisateur (UI). L’UI est couverte par les trois sections centrales du modèle : Perception, Technique et Contenu, et bien entendu, ce n’est qu’une partie du voyage.

Quand on se penche sur la différence entre UX et UI avec le modèle VPTCS, ça donne ceci :

VPTCS appliqué à la sauce tomate

Je vous propose d’utiliser le modèle VPTCS pour analyser l’UX et l’UI de la consommation de ketchup par un utilisateur. Nous allons lister les interactions avec le produit en question. Préparez-vous donc à un user journey (un voyage utilisateur) au pays de la sauce tomate. Bien entendu, certaines interactions sont facultatives. C’est parti pour une aventure dont vous êtes le héros.

Avant l’interface (Visibilité)

Cette phase concerne ce qui se passe avant d’être en contact avec le produit – avant l’UI.

Voici quelques exemples :

• J’ai vu une pub pour du ketchup, ça me donne bien envie
• Je mangerais bien des pâtes au ketchup, est-ce qu’il m’en reste ?
• Papa, tu pourras prendre du ketchup ?
• Chérie, tu peux ajouter ketchup dans la liste de courses ?
• Je suis dans le magasin, dans quel rayons ont-ils bien pu ranger le ketchup ?
• Je suis devant le rayon ketchup. Lequel vais-je choisir ?

Pendant l’interface (Perception, Technique, Contenus)

Cette phase concerne ce qui se passe pendant que je suis en contact direct avec le produit – UI

• Quel est le prix des ketchups qui sont proposés ?
• Je suis allergique à certains ingrédients, la composition est-elle indiquée (pfiouuu que c’est écrit petit) ?
• Ma sœur aveugle vient me rendre visite, l’étiquette est t-elle en braille ?
• Mon fils vient de jeter le ketchup dans le caddie, j’espère qu’il ne s’est pas cassé
• Je le ramène à la maison, je le sors du sac de courses
• Je le range où ? dans l’armoire, dans le frigo (tiens je vais regarder l’étiquette)
• Je me fais des pâtes, et j’ai envie de mettre du ketchup
• Je me verse du ketchup
  • Interface 1 : je secoue et le ketchup ne tombe pas dans l’assiette (houlala ça m’énerve)
  • Interface 2 : il me suffit de presser pour que le ketchup coule (c’est génial leur truc mais c’est du plastique dommage)

Après l’interface (Services)

• Le ketchup est fini, comment et où puis-je jeter l’emballage ?
• J’ai des maux d’estomac mais j’ai déjà jeté l’emballage, je vais fouiller dans la poubelle pour voir si la date limite de consommation du ketchup est dépassée
• Est-ce un numéro surtaxé, disponible depuis l’étranger ?
• Je vais appeler le service consommateurs, le numéro est-il sur la bouteille ?
• C’était super bon, j’ai furieusement envie de laisser un avis sur le ketchup, comment dois-je procéder ?
• Alternativement (et plus probable en ce qui me concerne) : c’était pas bon, j’ai envie de twitter pour dire que je n’aime pas le ketchup
• J’amène mon fils à une compétition sportive, la compétition est sponsorisée par une marque de ketchup, ça me fait penser que je mangerais bien des pâtes au ketchup mais je n’en ai plus, où puis-je en acheter ? (retour à la phase 1, visibilité)

Voilà, vous avez là l’histoire partielle de la relation d’une humaine ou d’un humain avec une bouteille de ketchup. Et comme vous le voyez, il se passe des tas de choses avant qu’ils ou elles soient en relation avec la bouteille et donc l’interface. Le moment où le ketchup est versé dans l’assiette n’est qu’un tout petit bout de l‘histoire.

Refaisons cette belle image : ce sont deux interfaces

Ces deux emballages et leur ergonomie induisent des différences sur la façon dont l’utilisateur verse du ketchup dans son assiette. Les deux images de la bouteille décrivent uniquement deux toutes petites parties de l’interaction directe avec l’interface, à savoir le moment où on verse le ketchup. Les deux images représentent des interfaces différentes et donc des variations dans l’expérience utilisateur.

Mais pour bien comprendre ce qui se passe et représenter plus fidèlement l’UX et l’UI, nous avons besoin d’une autre image, qui prend en compte quelques exemples d’interactions tout au long du voyage.

Conclusions

Par nature – et tout particulièrement dans le cadre de la création de sites web – nous avons tendance :

• à exagérer l’importance du moment où nous interagissons avec l’interface
• à oublier des pans entiers de l’expérience utilisateur (avant l’interface, après l’interface)
• à commencer par l’interface alors que les utilisateurs attendent de nous que nous analysions et que nous améliorions son expérience dans sa globalité
• à sous-estimer l’importance des services (oui, un service consommateur et des humains derrière, c’est souvent très important)
• à considérer que notre façon d’interagir avec une interface est la façon standard d’interagir avec cette interface, ce qui invisibilise tous les utilisateurs qui interagissent différemment, par choix ou par nécessité.

Il existe beaucoup d’articles qui critiquent le schéma initial, mais en général c’est pour arriver à la conclusion que l’expérience utilisateur n‘est pas correctement représentée par la bouteille mais par ce qui arrive à l’utilisateur qui se sert effectivement de manière un peu différente.

Une analyse avec le modèle VPTCS nous montre beaucoup d’autres interactions avec le produit et un voyage utilisateur qui va bien au-delà du simple fait de se verser du ketchup.

En fait, le chemin de l’utilisateur va d’un point où il a besoin de quelque chose à un autre point où son besoin est satisfait. Pour ceci il va utiliser différentes interfaces dans le cadre de différentes expériences.

Avec le modèle VPTCS, vous pouvez expliquer simplement des tas de choses. Le plus important est la notion avant, pendant, après :

• Il se passe des tas de choses avant d’être en contact avec les interfaces ou produits. C’est la phase de visibilité.
• Les produits sont aussi des interfaces qui n’ont pas que des enjeux ergonomiques (ou gustatifs), mais aussi des enjeux techniques (verre, plastique, fragilité) et des enjeux de contenus (composition, poids, caractéristiques..)
• Les produis sont associés à des services (N° du service consommateur, recyclage, avis clients)

En conclusion de cet article sachez que je déteste le ketchup.

Liens

https://www.smashingmagazine.com/2021/09/journey-into-web-quality-assurance/
https://www.farouknasri.com/blog/ux-vs-ui-design-bouteille-ketchup-confusion-prejuge/
https://www.opquast.com/en/vptcs-a-ux-and-qa-model-2001/
https://uxplanet.org/ok-boomer-it-depends-that-ux-ketchup-meme-e89372053077