{"id":8533,"date":"2024-11-25T14:51:52","date_gmt":"2024-11-25T13:51:52","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=8533"},"modified":"2024-11-25T14:51:52","modified_gmt":"2024-11-25T13:51:52","slug":"ui-vs-ux-exemple-bouteille-ketchup-verre-debunk","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ux-experience-utilisateur\/ui-vs-ux-exemple-bouteille-ketchup-verre-debunk","title":{"rendered":"UI vs UX – L’exemple de la bouteille de Ketchup, debunk"},"content":{"rendered":"

Si vous avez cherch\u00e9 au moins une fois la diff\u00e9rence entre UI (User Interface) et UX (User Experience), vous avez d\u00fb tomber sur 2 illustrations tr\u00e8s connues : la bouteille de Ketchup, et le chemin trac\u00e9 dans l’herbe. Ces illustrations sont m\u00eame parfois partag\u00e9es par des experts du domaine pour aider \u00e0 comprendre la diff\u00e9rence, mais pourquoi ?<\/p>\n

<\/p>\n

Le meme<\/em><\/span>\u00a0autour de la bouteille de Ketchup<\/h2>\n

Voici l’image que vous avez certainement toutes et tous vu :<\/p>\n

\"Une<\/a><\/p>\n

Derri\u00e8re cette repr\u00e9sentation se cache la volont\u00e9 de repr\u00e9senter deux choses distinctes, l’une serait l’interface utilisateur brute, peu r\u00e9fl\u00e9chie avec la bouteille en verre, et l’exp\u00e9rience utilisateur une fois celle-ci \u00ab\u00a0mise en place\u00a0\u00bb, et donc r\u00e9fl\u00e9chie, avec la bouteille en plastique.<\/p>\n

C’est en tout cas l’objet initial du meme<\/span>, et cela pourrait suffire pour faire comprendre l’exp\u00e9rience utilisateur \u00e0 des personnes vraiment novices. Mais \u00e7a serait \u00e9galement faire passer un message compl\u00e8tement faux, puisque ces deux bouteilles sont des produits, et non des interfaces ou exp\u00e9riences.<\/p>\n

\"La<\/a>
Image de Farouk Nasri<\/figcaption><\/figure>\n

La r\u00e9alit\u00e9 derri\u00e8re la bouteille de Ketchup UI vs UX<\/h2>\n

Je ne suis pas le premier \u00e0 debunk<\/em> cette image et cette explication. Bien que sur la volont\u00e9 d’expliquer \u00e0 des d\u00e9butants la diff\u00e9rence entre les deux pratique (UI et UX), je peux concevoir que l’illustration soit simple et agr\u00e9able, elle a le d\u00e9faut de faire circuler une vision restreinte du design et de sa complexit\u00e9. Voire de manquer d’inclusivit\u00e9. (au sens large)<\/p>\n

Voici une tentative d’expliquer ce qui ne va pas dans cette repr\u00e9sentation initiale, en distinguant un peu mieux les deux produits, les deux UI, et les deux UX possibles.<\/p>\n

\"La<\/a><\/p>\n

H\u00e9las, une fois n’est pas coutume, cette repr\u00e9sentation est biais\u00e9e, et nous fait rentrer dans ce que j’appelle personnellement \u00ab\u00a0la beaut\u00e9 de l’UX\u00a0\u00bb.<\/p>\n

\u00ab\u00a0Il n’y a pas de bonne ou de mauvaise\u00a0\u00bb UX… avec le Ketchup<\/h2>\n

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.<\/p>\n

L’objectif de cette phase de recherche est de se d\u00e9barrasser de ses propres biais cognitifs, et de se forcer \u00e0 retourner \u00e0 un stade o\u00f9 \u00ab\u00a0on ne sait pas ce qu’on pensait savoir\u00a0\u00bb.<\/p>\n

Pour reprendre l’exemple de la bouteille de Ketchup, deux UX sont repr\u00e9sent\u00e9es, l’une semblant repr\u00e9sent\u00e9e un utilisateur \u00e9nerv\u00e9 sur sa bouteille, et l’autre heureux de se servir. Cette repr\u00e9sentation est biais\u00e9e puisqu’elle part du postulat que l’une est meilleure, ou moins frustrante que l’autre.<\/p>\n

Un bon designer irait observer les usages dans diff\u00e9rents contextes, ferait des tests avec les diff\u00e9rents produits, ou UIs, pour v\u00e9rifier que cette vision des usages n’est pas biais\u00e9e, voire il tenterait de prouver l’inverse du postulat initial, comme la m\u00e9thode scientifique<\/a> invite \u00e0 le faire.<\/p>\n

Lors d’une \u00e9tude, nous relevons g\u00e9n\u00e9ralement plusieurs aspects, comme : le ressenti, les attentes, les objectifs, et l’accomplissement de la t\u00e2che. Il nous arrive aussi de faire des comparaisons et de collecter un feedback associ\u00e9 au souvenir de l’exp\u00e9rience quelques semaines\/mois plus tard, mais plus rarement.<\/p>\n

L’UI et l’UX de la bouteille de Ketchup en verre<\/h3>\n

\u00c0 d\u00e9faut d’aller emb\u00eater 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.<\/p>\n

Cibles de la bouteille en verre<\/p>\n

    \n
  • Personnes qui versent une grande quantit\u00e9 de Ketchup sans trop de difficult\u00e9s.<\/li>\n
  • Personnes qui cuisinent avec du Ketchup<\/li>\n
  • Personnes \u00e0 la recherche d’un ambiance (style Dinner am\u00e9ricain)<\/li>\n<\/ul>\n

    Objectifs de la bouteille en verre<\/p>\n

      \n
    • \u00c9viter les pertes<\/li>\n
    • Verser rapidement<\/li>\n<\/ul>\n

      Accomplissement avec la bouteille en verre<\/p>\n

        \n
      • Verser du Ketchup (de mani\u00e8re impr\u00e9cise)<\/li>\n
      • Verser beaucoup de Ketchup (de mani\u00e8re rapide)<\/li>\n
      • R\u00e9cup\u00e9rer l’ensemble du Ketchup en versant un peu d’eau dans la bouteille. (cuisine)<\/li>\n
      • Capacit\u00e9 \u00e0 voir ce qui reste dans la bouteille.<\/li>\n<\/ul>\n

        Ressenti<\/p>\n

          \n
        • Old school.<\/li>\n
        • Souvenirs d’autres ann\u00e9es.<\/li>\n
        • Plus \u00e9conomique.<\/li>\n<\/ul>\n

          Risques<\/p>\n

            \n
          • Fragile et risque de casser.<\/li>\n
          • Moisit plus facilement.<\/li>\n
          • Ma\u00eetrise faible du d\u00e9bit.<\/li>\n
          • Demande de la force \u00e0 l’ouverture.<\/li>\n
          • Demande de la force pour secouer\/extraire le contenu<\/li>\n<\/ul>\n

            Tout ceci repr\u00e9sente des artefacts de l’exp\u00e9rience utilisateur que pourraient trouver ces cibles avec ce produit et cet \u00ab\u00a0UI\u00a0\u00bb sous forme de bouteille de verre.<\/p>\n

            L’UI et l’UX de la bouteille de Ketchup en plastique<\/h3>\n

            Idem ici, j’ai pris le temps de faire des recherches sur les m\u00eames aspects que pr\u00e9c\u00e9demment, mais en observant les usages et les arguments pr\u00e9sent\u00e9s \u00e0 droite et \u00e0 gauche.<\/p>\n

            Cibles de la bouteille en plastique<\/p>\n

              \n
            • Personnes qui ont des enfants.<\/li>\n
            • Personnes qui ont des difficult\u00e9s \u00e0 tenir les objets en main.<\/li>\n
            • Personnes qui utilisent le Ketchup comme condiment.<\/li>\n
            • Personnes qui cherchent un c\u00f4t\u00e9 pratique.<\/li>\n<\/ul>\n

              Objectifs de la bouteille en plastique<\/p>\n

                \n
              • Verser pr\u00e9cis\u00e9ment la bonne quantit\u00e9.<\/li>\n
              • Conserver relativement longtemps la bouteille.<\/li>\n
              • Avoir un objet plus facile \u00e0 ouvrir.<\/li>\n<\/ul>\n

                Accomplissement avec la bouteille en plastique<\/p>\n

                  \n
                • Verser du Ketchup (de mani\u00e8re pr\u00e9cise)<\/li>\n
                • Verser au bon endroit dans l’assiette.<\/li>\n
                • Fermeture\/ouverture ais\u00e9e.<\/li>\n<\/ul>\n

                  Ressenti avec la bouteille en plastique<\/p>\n

                    \n
                  • S\u00e9curisant<\/li>\n
                  • \u00c9cologique<\/li>\n<\/ul>\n

                    Risques de la bouteille en plastique<\/p>\n

                      \n
                    • Longueurs pour verser du Ketchup en grande quantit\u00e9,<\/li>\n
                    • Fragile, le bouchon casse en cas de chute et ne se ferme plus, mais moins de risque de perte du contenu.<\/li>\n
                    • Verser trop de contenu en appuyant trop fort.<\/li>\n
                    • Ma\u00eetrise relative du d\u00e9bit.<\/li>\n
                    • Demande parfois trop de force de pression.<\/li>\n
                    • Difficult\u00e9 \u00e0 conna\u00eetre le restant du conteneur.<\/li>\n
                    • Suivant les mod\u00e8les, difficult\u00e9 \u00e0 vider l’ensemble du Ketchup.<\/li>\n<\/ul>\n

                      Tout ceci repr\u00e9sente des artefacts de l’exp\u00e9rience utilisateur que pourraient avoir ces cibles avec ce produit et cet \u00ab\u00a0UI\u00a0\u00bb sous forme de bouteille en plastique.<\/p>\n

                      Alors, qui gagne le combat ?<\/h2>\n

                      Comme vous le voyez, certains items de ces listes vont \u00e0 l’oppos\u00e9 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\u00e9pondre \u00e0 deux usages diff\u00e9rents.<\/p>\n

                      Les exp\u00e9riences utilisateurs sont donc diff\u00e9rentes et adressent des probl\u00e9matiques distinctes. Il n’y a donc pas de gagnante \u00e0 moins de vous positionner sur un usage plut\u00f4t qu’un autre.<\/p>\n

                      Ce qui se dessine c’est que la bouteille en verre serait davantage utilis\u00e9e par des restaurateurs, soit pour cr\u00e9er une ambiance (\u00ab\u00a0dinner<\/em><\/span>\u00ab\u00a0), soit pour cuisiner. L\u00e0 o\u00f9 la bouteille en plastique serait plut\u00f4t utilis\u00e9e par des particuliers.<\/p>\n

                      Cela rejoint les discussions que j’ai souvent avec des confr\u00e8res et cons\u0153urs sur l’UX \u00ab\u00a0grand public\u00a0\u00bb VS l’UX \u00ab\u00a0Entreprise\u00a0\u00bb. Les usages et les r\u00e9ponses \u00e0 un probl\u00e8me donn\u00e9 ne seront pas n\u00e9cessairement les m\u00eames en fonction du contexte. Les designers qui n’ont jamais connu l’Enterprise UX<\/em> ont souvent du mal \u00e0 consid\u00e9rer les solutions propos\u00e9es \u00e0 des utilisateurs experts comme de bonnes solutions, car ils sont biais\u00e9s par le besoin de tout simplifier et rendre opaque les interfaces. Un utilisateur expert aura \u00e0 l’inverse besoin de plus d’information \u00e0 l’\u00e9cran, en m\u00eame temps, pour prendre des d\u00e9cisions en un coup d\u2019\u0153il avec le moins d’opacit\u00e9 possible.<\/p>\n

                      S’il y avait une chose \u00e0 retenir sur ce Ketchup<\/h2>\n

                      Les exp\u00e9riences avec des produits peuvent \u00eatre multiples, et la multiplication des User Interfaces (UI) permettent parfois de r\u00e9pondre au besoin de multiplicit\u00e9 des exp\u00e9riences (UX).<\/p>\n

                      D’ailleurs, cr\u00e9er plusieurs versions d’une UI pour tester les avantages et inconv\u00e9nients de chacune permet d’\u00e9valuer les usages et parfois trancher sur une interface plus concluante. C’est une petite partie du processus de design.<\/p>\n

                      Dans notre cas, si les deux produits (verre et plastique) sont encore en vente, c’est qu’ils r\u00e9pondent bien \u00e0 des cibles et usages diff\u00e9rents.<\/p>\n","protected":false},"excerpt":{"rendered":"

                      Si vous avez cherch\u00e9 au moins une fois la diff\u00e9rence entre UI (User Interface) et UX (User Experience), vous avez d\u00fb tomber sur 2 illustrations tr\u00e8s connues : la bouteille de Ketchup, et le chemin trac\u00e9 dans l’herbe. Ces illustrations sont m\u00eame parfois partag\u00e9es par des experts du domaine pour aider \u00e0 comprendre la diff\u00e9rence, […]<\/p>\n","protected":false},"author":4,"featured_media":8651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875],"tags":[954,919,578],"coauthors":[597],"class_list":["post-8533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","tag-debunk","tag-ui-design","tag-ux"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=8533"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8533\/revisions"}],"predecessor-version":[{"id":8653,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/8533\/revisions\/8653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/8651"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=8533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=8533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=8533"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=8533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}