Les enjeux du design d'expérience utilisateur

1. Objectifs

   • Citer les huit enjeux du design d'expérience utilisateur et dire à qui ils profitent : l'utilisateur, l'organisation, la société
   • Définir l'utilisabilité avec ses trois composantes : efficacité, efficience, satisfaction
   • Expliquer, sur des cas réels, comment un détail d'interface peut avoir des conséquences humaines, économiques ou légales
   • Reconnaître les dark patterns et les obligations d'accessibilité
   • Chiffrer un enjeu (gain de ventes, économie de support) et choisir les indicateurs qui le mesurent

1. Présentation

   • Dans les leçons précédentes, vous avez défini l'UX et l'avez distinguée de l'UI. Reste une question que toute direction pose : pourquoi investir dans l'expérience utilisateur ? Qu'y gagne-t-on, et que risque-t-on à la négliger ?
   • Un « enjeu », c'est ce qu'on peut gagner ou perdre. Un bouton mal placé peut faire perdre des ventes, provoquer une erreur grave, exclure des personnes handicapées ou exposer l'organisation à une sanction. À l'inverse, une interface bien conçue fait gagner du temps, de l'argent et de la confiance.
   • Chaque enjeu de cette leçon est illustré par un cas réel et par un exemple avant / après, mesuré dans le navigateur.

• Les exemples avant / après de cette leçon sont de petites interfaces fictives, fournies dans l'archive (dossier exemples/) : ouvrez-les dans un navigateur pour les essayer vous-même. Les mesures (nombre de champs, de frappes, poids des pages, contrastes) ont été relevées automatiquement dans le navigateur.

1. Enjeu 1 : l'utilisabilité

   • Le premier enjeu concerne directement l'utilisateur : réussir ce qu'il est venu faire, vite et sans erreur. La norme ISO 9241-11 définit l'utilisabilité par trois composantes :
     • l'efficacité: l'utilisateur atteint-il son but ?
     • l'efficience: avec quel effort (temps, actions, erreurs) ?
     • la satisfaction: qu'en pense-t-il ?

• Exemple : deux formulaires d'inscription au même service. L'utilisateur simulé saisit le mot de passe Campus2026. Dans la version « avant », une règle cachée exige aussi un caractère spécial : la validation échoue, le message ne dit pas pourquoi et les deux mots de passe sont effacés. Dans la version « après », les règles sont affichées et se cochent pendant la saisie.

• Les deux versions atteignent le même but (efficacité égale), mais l'effort est divisé par plus de quatre (efficience). Et l'utilisateur à qui l'on a effacé son mot de passe sans explication ne sera pas satisfait.

1. Enjeu 2 : la confiance et la sécurité

   • Certaines erreurs d'interface ont des conséquences graves. Le 13 janvier 2018, à Hawaï, un agent de l'agence de gestion des urgences a envoyé à toute la population une fausse alerte aux missiles balistiques. L'option d'exercice et l'option réelle se trouvaient dans le même menu, avec des libellés presque identiques, et une simple confirmation ne suffisait pas à arrêter l'erreur. La fausse alerte a duré 38 minutes.

• Le même principe, appliqué à un système d'alerte fictif : séparer clairement le mode exercice du mode réel, exiger une vraie confirmation pour l'envoi réel, et préparer la réparation.

• Plus près de vous, l'application Resto'Campus du TP 1 montre le même enjeu à petite échelle : une interface qui ne dit pas ce qu'elle fait fait perdre de l'argent… et la confiance.

1. Enjeu 3 : l'économie

   • Pour une organisation, l'UX se traduit en chiffres : taux de conversion (part des visiteurs qui achètent ou s'inscrivent), taux d'abandon, fidélité. Le Baymard Institute calcule un taux moyen d'abandon de panier de 70,22 % (moyenne de 50 études) : sept paniers sur dix ne se transforment pas en commande.
   • Plusieurs raisons d'abandon relèvent directement de la conception du parcours : création de compte obligatoire, paiement trop long, total impossible à connaître à l'avance.

• Le cas le plus célèbre est raconté par Jared Spool : un grand site de vente en ligne a remplacé, au moment de payer, le bouton « S'inscrire » par « Continuer », en précisant qu'on pouvait acheter sans compte. Le nombre de clients qui achetaient a augmenté de 45 %, soit environ 300 millions de dollars de ventes en plus la première année.

1. Enjeu 4 : les coûts internes

   • Une mauvaise UX coûte aussi à l'intérieur de l'organisation : appels au service client (mot de passe oublié, commande en double), formation des utilisateurs, corrections en urgence, remboursements.
   • Plus un problème est découvert tard, plus il est cher à corriger. Déplacer un bouton sur une maquette prend quelques minutes ; le corriger une fois l'application publiée demande de modifier le code, de le tester, de le redéployer, de répondre aux réclamations et de regagner la confiance des utilisateurs.

• C'est la raison d'être des méthodes vues dans le TP 1 (évaluation heuristique, test utilisateur) : trouver les problèmes avant qu'ils coûtent cher. L'activité 3 vous fait chiffrer un coût de support.

1. Enjeu 5 : l'accessibilité et l'inclusion

   • Selon l'Organisation mondiale de la santé, environ 1,3 milliard de personnes, soit 16 % de la population mondiale, vivent avec un handicap important. Une interface inaccessible les exclut : texte trop pâle, boutons minuscules, information donnée par la seule couleur, icônes sans libellé.
   • Les règles de référence sont les WCAG (règles pour l'accessibilité des contenus web, version 2.2). Exemple : un texte courant doit avoir un rapport de contraste d'au moins 4,5:1 avec son fond, 3:1 pour un grand texte.
   • C'est aussi une obligation légale : dans l'Union européenne, l'Acte européen sur l'accessibilité (directive (UE) 2019/882) s'applique depuis le 28 juin 2025 à de nombreux services, dont le commerce en ligne et les services bancaires.

• Le rapport de contraste se calcule à partir de la luminance relative des deux couleurs : (L_claire + 0,05) / (L_foncée + 0,05). Il va de 1:1 (même couleur) à 21:1 (noir sur blanc). L'activité 5 vous fait faire le calcul.
• Penser accessibilité profite à tous : un bon contraste se lit aussi en plein soleil, un grand bouton se touche aussi d'une main, dans le bus.

1. Enjeu 6 : l'éthique

   • Le designer a du pouvoir : il peut aider l'utilisateur… ou le pousser à agir contre son intérêt. On appelle dark patterns (ou « interfaces trompeuses ») les choix de conception qui manipulent : fausse urgence, case précochée, option ajoutée en douce, refus culpabilisant, résiliation volontairement difficile.
   • Le règlement européen sur les services numériques (DSA), article 25, interdit aux plateformes en ligne de concevoir leurs interfaces « de façon à tromper ou à manipuler » leurs utilisateurs. Il cite par exemple le fait de rendre la désinscription plus compliquée que l'inscription.

• À court terme, une case précochée augmente un chiffre. À long terme, l'utilisateur se sent trompé, se désabonne, laisse un mauvais avis… et l'organisation s'expose à des sanctions. L'éthique rejoint ici l'enjeu d'image.

1. Enjeu 7 : l'environnement

   • Chaque page chargée consomme de l'énergie (serveurs, réseaux, appareils) et les services trop lourds poussent à renouveler des téléphones encore fonctionnels. L'écoconception vise des services numériques plus sobres.
   • En France, le référentiel général d'écoconception de services numériques (RGESN) a été publié en mai 2024 par l'Arcep, l'Arcom, l'ADEME et la CNIL. Plusieurs de ses critères relèvent directement de l'UX : parcours courts, contenus utiles, médias adaptés à l'écran.

• Même information, même bouton : 6,69 Mo d'un côté, 2,07 Ko de l'autre. Un carrousel de photos que personne ne regarde est à la fois une mauvaise UX (heuristique H8, design minimaliste) et un gaspillage.

1. Enjeu 8 : l'image de marque et la fidélité

   • L'expérience vécue façonne la réputation : notes sur les magasins d'applications, avis, bouche-à-oreille. Un utilisateur satisfait revient et recommande ; un utilisateur piégé ou humilié par une interface le raconte.
   • Les enjeux se renforcent les uns les autres : une interface plus simple réduit les erreurs, satisfait les utilisateurs, augmente l'usage et les ventes, diminue les appels au support… et libère du budget pour améliorer encore.

1. Mesurer les enjeux

   • Un enjeu qui n'est pas mesuré reste une opinion. Pour convaincre et pour vérifier qu'une amélioration fonctionne, on choisit des indicateurs, on les mesure avant, puis après la modification.

• Méthode de chiffrage d'un enjeu économique : partir du nombre d'utilisateurs, appliquer les taux du parcours (ajout au panier, abandon), multiplier par le montant moyen, puis comparer avant et après. Les activités 2 et 3 appliquent cette méthode.

1. Activité 1 : reconnaître les enjeux

   • Pour chaque situation, indiquez le ou les enjeux concernés et l'acteur principalement touché :
     • Un site de billetterie de train affiche le bouton « Payer » en texte blanc sur un vert clair, difficile à lire.
     • Une banque reçoit 2 000 appels par mois pour débloquer des comptes après trois erreurs de mot de passe.
     • Une application de livraison ajoute d'office un pourboire de 2 DT, qu'il faut penser à retirer.
     • Le formulaire d'inscription d'une université perd toutes les saisies quand la session expire.
     • Dans un logiciel de pharmacie, deux médicaments aux noms proches se suivent dans une liste déroulante.
     • Un site marchand passe de cinq à trois étapes de paiement ; ses ventes augmentent.
     • Un site d'actualité charge 12 Mo de vidéos publicitaires sur chaque article.
     • Une application de covoiturage reçoit des avis « 1 étoile : impossible de se désinscrire ».

• Vérifier : chaque situation est reliée à au moins un enjeu et un acteur ; deux situations relèvent de l'éthique.

1. Activité 2 : chiffrer un gain de ventes

   • La boutique en ligne fictive d'un campus reçoit 20 000 visites par mois. 12 % des visiteurs ajoutent un article au panier, et 75 % de ces paniers sont abandonnés. Le panier moyen est de 45 DT.
   • Une refonte du parcours de commande (commande sans compte, total affiché dès le panier) coûte 30 000 DT et fait passer l'abandon à 65 %.
     • Calculez le nombre de commandes et le chiffre d'affaires mensuel, avant et après.
     • Calculez le gain mensuel et annuel.
     • En combien de mois la refonte est-elle remboursée ?

• Vérifier : le gain mensuel est un nombre entier de dinars ; la refonte est remboursée en moins de trois mois.

1. Activité 3 : chiffrer un coût de support

   • Le service informatique d'une université reçoit 3 000 appels par mois pour des mots de passe oubliés. Chaque appel dure en moyenne 6 minutes; une heure de travail d'un agent coûte 18 DT.
   • Une page de réinitialisation en ligne, simple et accessible, réduirait ces appels de 60 %.
     • Quel est le coût mensuel et annuel de ces appels ?
     • Quelle économie annuelle la nouvelle page permettrait-elle ?
     • Citez deux autres gains, non financiers, de cette amélioration.

• Vérifier : le coût annuel actuel dépasse 60 000 DT.

1. Activité 4 : repérer les dark patterns

   • Ouvrez exemples/ex5-avant.html (ou observez la capture). Pour chacun des cinq éléments numérotés : nommez le type de dark pattern, expliquez en une phrase en quoi il manipule l'utilisateur, et proposez une version honnête.
   • Rechargez la page plusieurs fois en observant le minuteur : que constatez-vous ?

• Vérifier : cinq types différents ; au moins un élément correspond à l'exemple cité par l'article 25 du DSA.

1. Activité 5 : vérifier des contrastes

   • Pour chacune des six paires de couleurs, calculez le rapport de contraste et indiquez si elle convient à un texte courant (4,5:1), seulement à un grand texte (3:1), ou à aucun des deux.
     • Convertissez chaque composante (rouge, vert, bleu) de 0–255 en 0–1 : c = valeur / 255.
     • Linéarisez : c / 12,92 si c ≤ 0,03928, sinon ((c + 0,055) / 1,055)^2,4.
     • Luminance : L = 0,2126 R + 0,7152 G + 0,0722 B.
     • Contraste : (L claire + 0,05) / (L foncée + 0,05).
   • Vous pouvez faire le calcul dans un tableur, puis le vérifier avec un outil en ligne (WebAIM Contrast Checker).

• Vérifier : le noir sur blanc donne 21:1 et une couleur sur elle-même 1:1 ; si votre formule ne retrouve pas ces deux valeurs, elle est fausse.

1. Activité 6 : choisir les indicateurs

   • Pour chaque objectif, proposez deux indicateurs, la façon de les mesurer et le résultat attendu :
     • « Réduire les appels au service client. »
     • « Les étudiants trouvent notre application compliquée. »
     • « Vendre plus d'abonnements sans tromper personne. »
     • « Rendre notre site accessible avant l'audit de l'an prochain. »

• Vérifier : chaque indicateur est mesurable par un chiffre, avant et après.

1. Activité 7 : convaincre une direction

   • La direction du restaurant universitaire hésite à financer la correction de Resto'Campus (TP 1). Rédigez une note de 10 à 12 lignes qui s'appuie sur au moins quatre enjeux différents, avec un fait ou un chiffre pour chacun, et qui se termine par une proposition concrète.

• Vérifier : la note parle le langage de la direction (risques, coûts, image) plutôt que celui du designer (couleurs, polices).

• Les corrigés des sept activités sont fournis dans l'archive de la leçon (dossier corriges/) : un document PDF et un classeur de calcul (activités 2, 3 et 5).

1. Idées reçues et erreurs fréquentes

1. À retenir

   • Le design d'expérience utilisateur a huit enjeux : utilisabilité, confiance et sécurité, économie, coûts internes, accessibilité, éthique, environnement, image de marque.
   • Ces enjeux concernent trois acteurs : l'utilisateur, l'organisation et la société.
   • L'utilisabilité se définit par l'efficacité, l'efficience et la satisfaction (ISO 9241-11).
   • Un détail d'interface peut coûter très cher (fausse alerte d'Hawaï) ou rapporter beaucoup (le bouton à 300 millions de dollars).
   • L'accessibilité (WCAG, Acte européen sur l'accessibilité) et l'éthique (pas de dark patterns, DSA article 25) sont aussi des obligations légales.
   • Un enjeu se mesure : on choisit des indicateurs, on les relève avant et après.

Investir dans l'expérience utilisateur, ce n'est pas embellir une interface : c'est éviter des erreurs, gagner la confiance, n'exclure personne… et le prouver par des chiffres.