Un bouton mal nommé, une case cochée au mauvais endroit, une refonte trop brutale : en design d’interface, les petits détails peuvent coûter très cher. Parfois des millions. Parfois une belle frayeur à tout un archipel.
Voici sept histoires vraies, toutes sourcées : cinq ratés mémorables et deux réussites qui ont rapporté gros. À chaque fois, une leçon simple à retenir pour vos propres projets, que vous conceviez un site, une application ou un simple formulaire.
En bref
- Un bouton « Continuer » a rapporté 300 millions de dollars en un an à un site marchand.
- Une interface bancaire confuse a fait partir plus de 900 millions de dollars par erreur chez Citibank.
- Une refonte mal acceptée a coûté jusqu’à 1,3 milliard de dollars de valeur boursière à Snapchat en une journée.
- Le point commun : on a conçu sans assez observer les vrais utilisateurs.
1. Le bouton à 300 millions de dollars
C’est l’histoire la plus célèbre de l’UX. Elle a été racontée en 2009 par Jared Spool, spécialiste de l’expérience utilisateur. Un grand site marchand, resté anonyme, affichait avant le paiement une page avec deux boutons : « Se connecter » et « S’inscrire ». Les responsables pensaient que l’inscription ferait revenir les clients.
Les tests ont montré l’inverse. Les nouveaux clients refusaient de créer un compte, et les anciens ne se souvenaient plus de leur mot de passe. Le site recevait environ 160 000 demandes de réinitialisation par jour, et 75 % de ces personnes n’allaient jamais au bout de leur achat. Pire : 45 % des clients avaient plusieurs comptes, parfois jusqu’à dix.
La solution tenait en un mot. Le bouton « S’inscrire » est devenu « Continuer », avec une phrase : pas besoin de créer un compte pour acheter. Résultat : 45 % d’acheteurs en plus, 15 millions de dollars de ventes supplémentaires le premier mois et 300 millions la première année.
La leçon : ne faites pas passer vos objectifs (récupérer des comptes) avant celui de l’utilisateur (acheter). Chaque étape imposée a un prix.
2. La bonne nuance de bleu : 200 millions de dollars
Chez Google, on ne choisit pas une couleur au feeling. En 2014, Dan Cobley, alors directeur général de Google au Royaume-Uni, a raconté au Guardian comment l’entreprise avait choisi la couleur des liens publicitaires dans Gmail et dans le moteur de recherche : des dizaines de tests, chacun montrant un bleu différent à une petite partie des utilisateurs.
Le gagnant ? Un bleu très légèrement plus violet, sur lequel les gens cliquaient davantage. Selon Google, ce simple réglage a rapporté 200 millions de dollars de revenus publicitaires supplémentaires.
La leçon : quand on hésite, on teste au lieu de deviner. Vous n’avez pas les volumes de Google, mais demander à cinq vrais utilisateurs d’essayer votre maquette donne déjà beaucoup d’informations.
3. Citibank et le virement à 900 millions de dollars
Août 2020. Citibank doit verser à des prêteurs les intérêts d’un prêt de l’entreprise de cosmétiques Revlon, soit quelques millions de dollars. Dans le logiciel bancaire utilisé, Flexcube, la seule façon de faire l’opération était de la saisir comme un remboursement complet du prêt, en envoyant le capital vers un compte interne de la banque. Il fallait pour cela renseigner correctement plusieurs champs peu explicites.
Deux employés d’un sous-traitant ont préparé l’opération, puis un responsable de Citibank l’a validée avec ce message : « Ça me paraît bon, vous pouvez y aller. » Trois personnes ont vérifié, et pourtant plus de 900 millions de dollars sont partis vers les prêteurs.
La banque a récupéré près de la moitié. Pour le reste, environ 500 millions, plusieurs prêteurs ont refusé de rendre l’argent. En 2021, un premier jugement leur a donné raison. Il a fallu attendre l’appel, en septembre 2022, pour que la justice leur ordonne de rembourser.
La leçon : si trois professionnels se trompent sur le même écran, ce n’est pas un problème d’attention, c’est un problème d’interface. Une action à 900 millions mérite un récapitulatif clair avant l’envoi : « Vous allez virer 900 millions de dollars. Confirmer ? »
4. Hawaï, 2018 : « Ceci n’est pas un exercice »
Le 13 janvier 2018 au matin, tous les téléphones de Hawaï reçoivent ce message : une menace de missile balistique arrive, cherchez immédiatement un abri, ceci n’est pas un exercice. Il faudra près de quarante minutes pour annoncer qu’il s’agissait d’une erreur.
Dans les jours qui suivent, l’histoire fait le tour du monde : un employé aurait simplement choisi la mauvaise ligne dans un menu déroulant mal conçu. Le rapport de l’autorité américaine des télécommunications (FCC) a nuancé cette version. Un exercice improvisé, un message enregistré qui mêlait le mot « exercice » et le texte d’une vraie alerte, un employé qui a cru à une attaque réelle… et surtout aucune procédure prévue pour annuler rapidement une fausse alerte.
La leçon : l’erreur humaine arrive toujours. Un bon système prévoit le bouton « Annuler » et le message de correction avant d’en avoir besoin. Et une histoire trop simple (« la faute au menu déroulant ») cache souvent un problème de conception plus large.
5. Snapchat, 2018 : la refonte que personne n’avait demandée
Début 2018, Snapchat change en profondeur l’organisation de son application. Les utilisateurs perdent leurs repères, et une pétition demandant le retour à l’ancienne version dépasse 1,2 million de signatures.
Le 21 février, la star Kylie Jenner écrit sur Twitter qu’elle n’ouvre plus vraiment Snapchat, et que c’est triste. Le lendemain, l’action de l’entreprise baisse d’environ 6 %, soit une perte de valeur boursière qui pourrait atteindre 1,3 milliard de dollars, selon Bloomberg. Snapchat finit par reconnaître que la nouvelle version a mis beaucoup d’utilisateurs mal à l’aise.
La leçon : une refonte bouscule des habitudes. Testez-la avec de vrais utilisateurs, déployez-la progressivement et expliquez ce qui change.
6. Marks & Spencer : un beau site à 150 millions de livres… et des ventes en baisse
En février 2014, l’enseigne britannique Marks & Spencer lance son nouveau site, fruit d’un investissement de 150 millions de livres. Il met en avant les collections, les idées de tenues, l’inspiration. Sur les trois mois suivants, les ventes en ligne baissent de 8,1 %.
L’entreprise évoque des problèmes techniques et le temps d’adaptation des clients. Un analyste résume autrement : le site est plus beau, mais acheter y est devenu plus compliqué.
La leçon : l’UI (ce qui se voit) ne remplace pas l’UX (ce qui se vit). Un site d’achat doit d’abord permettre d’acheter facilement.
7. Le bulletin de vote qui a peut-être changé une élection
Novembre 2000, élection présidentielle américaine. Dans le comté de Palm Beach, en Floride, les noms des candidats sont répartis sur deux pages face à face, avec une colonne de trous au milieu : c’est le fameux bulletin « papillon ». Le deuxième nom à gauche est Al Gore, mais le deuxième trou correspond à Pat Buchanan.
Une étude publiée en 2001 dans l’American Political Science Review estime que plus de 2 000 électeurs démocrates ont voté pour Pat Buchanan par erreur. C’est plus que l’écart officiel, de quelques centaines de voix seulement, qui a donné la Floride, et la présidence, à George W. Bush.
La leçon : la mise en page n’est jamais neutre. Quand un choix compte, chaque élément doit être aligné avec ce qu’il déclenche.
Ce que ces histoires ont en commun
- On a conçu pour l’organisation, pas pour l’utilisateur : créer des comptes, montrer de belles collections, suivre une procédure interne.
- On n’a pas assez testé : quelques séances avec de vrais utilisateurs auraient révélé la plupart de ces problèmes.
- On n’a pas prévu l’erreur : pas de récapitulatif, pas de confirmation, pas de bouton pour revenir en arrière.
- À l’inverse, les réussites viennent de petits changements testés : un mot sur un bouton, une nuance de couleur.
Et dans votre quotidien ?
Pas besoin d’un virement à 900 millions pour vivre une mauvaise expérience utilisateur. Vous avez sûrement déjà poussé une porte qui se tirait. Les designers appellent cela une « porte Norman », du nom de Don Norman, l’un des pères de l’UX. La chaîne Vox l’explique avec humour dans une courte vidéo en anglais : It’s not you. Bad doors are everywhere.
Si le sujet vous parle, notre article sur le coût caché d’une mauvaise UX/UI détaille ce que perd une entreprise au quotidien, et celui sur la formation UX/UI courte et certifiante, en 4 jours explique comment se former sans quitter son poste.
Apprendre à éviter ces erreurs
Observer les utilisateurs, tester une maquette, concevoir un parcours simple : c’est le cœur de la formation UX/UI Designer, courte et certifiante, en 4 jours, à distance en visioconférence avec un formateur et éligible au CPF.
Pour passer vite de l’idée à la maquette : Figma et IA →
Sources
- Jared Spool, « The $300 Million Button », Center Centre (14 janvier 2009)
- Fortune, test des couleurs de liens chez Google et les 200 millions de dollars rapportés par The Guardian (9 mai 2016)
- TechSpot, l’interface confuse qui a coûté 500 millions à Citibank (février 2021)
- American Banker, décision d’appel dans l’affaire Citibank-Revlon (septembre 2022)
- Gizmodo, le rapport préliminaire de la FCC sur la fausse alerte de Hawaï (30 janvier 2018)
- ABC News, l’action Snapchat après le tweet de Kylie Jenner (22 février 2018)
- Marketing Week, les problèmes du site de Marks & Spencer (juillet 2014)
- Wand et al., « The Butterfly Did It », American Political Science Review (décembre 2001)
Se former avec SIELI
Passer de la lecture à la pratiqueFormations courtes au numérique et à l’IA, à distance ou en entreprise, avec une formatrice en direct.
