Les 7 péchés capitaux du design produit (et comment les éviter)
À ce stade de l’évolution, il n’y a absolument aucune excuse pour un mauvais design produit. Dans le monde ultra-compétitif des logiciels, réussir le design d’interface utilisateur (UI) et l’expérience utilisateur (UX) est non négociable. Même si vous disposez d’une technologie capable de résoudre les problèmes de vos utilisateurs, une mauvaise UX les fera fuir—soit parce qu’ils n’ont pas compris comment l’utiliser, soit, tout simplement, parce qu’ils la détestent.
Préparez-vous ; je vais donner quelques vérités difficiles sur ce qu’il ne faut pas faire en UX, en listant les sept péchés capitaux du design produit et en pointant du doigt certains des pires exemples.
Péché n°1 : « Le sapin de Noël »
L’un de mes plus beaux souvenirs d’enfance est lorsque ma sœur et moi décorions le sapin de Noël. Une fois le travail terminé, on le contemplait, émerveillées, car à nos yeux, il était absolument splendide. Enfin, c’est comme ça que nous le voyions. À quoi ressemblait-il vraiment ? À cela.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Je suppose que vous devinez où je veux en venir. Contrairement au sapin de Noël que vous pouvez laisser vos enfants décorer comme ils l’entendent, votre UI et votre UX ne devraient pas ressembler à un amoncellement d’éléments et de couleurs dispersés dans tous les sens.
Voyons maintenant un produit réel qui ressemble à un « sapin de Noël ».
Regardez cette interface et essayez de m’expliquer de quoi il s’agit. Je parie que vous vous êtes perdu dans l’UI et que vous avez, vous aussi, mis un certain temps à comprendre. Il y a beaucoup trop d’éléments affichés ; il devient quasiment impossible de savoir où l’on se trouve et quoi faire.
Voici les problèmes que je constate sur cette interface :
- Surutilisation des couleurs : La couleur est un outil puissant entre les mains d’un bon designer produit, car elle permet d’orienter les utilisateurs dans la bonne direction. Cependant, si votre interface comporte trop de couleurs, cet atout est dilué et chaque élément coloré essaie d’attirer toute l’attention.
- Surcharge de boutons d’action : Quelle est la chose la plus importante sur laquelle je dois cliquer maintenant ? Franchement, impossible de le savoir avec tous ces boutons partout.
- Disposition confuse : L’écran est divisé en trois colonnes, dont celle du centre propose deux onglets et une grande section chronologique en bas. Les designers ont voulu intégrer un maximum de choses sur une seule page.
Faites plutôt cela
On a ici tenté de structurer une quantité énorme d’informations en pensant à l’UX. Mais au lieu de cela, considérez votre UX comme une carte qui va guider le comportement attendu de vos utilisateurs. C’est la base du design produit : couleurs, boutons d’action et organisation doivent fonctionner ensemble pour guider subtilement l’utilisateur vers la bonne action.
Péché n°2 : Mauvaise hiérarchie visuelle
La hiérarchie visuelle désigne la disposition des éléments de l’interface de façon à exprimer clairement la relation hiérarchique entre eux.
L’article que vous lisez à l’instant, par exemple, possède une hiérarchie visuelle claire : le titre apparaît en gros en haut de page, les sous-titres sont en police plus petite que le titre mais plus gras que les paragraphes, etc.
Dans les deux cas, on distingue les titres soit par leur taille, soit par leur graisse—ce qui crée un lien évident avec les paragraphes qui développent les thèmes des sous-titres correspondants.
La hiérarchie visuelle est un excellent moyen d’organiser son interface et de la rendre facile à parcourir. Son absence, par contre, complique sacrément la vie de vos utilisateurs, qui peineront à s’y retrouver.
L’un des échecs de hiérarchie visuelle qui m’agace quotidiennement se trouve dans la section réponses de Quora.
Pour inciter les gens à consulter d’autres questions et les faire rester plus longtemps sur le site, Quora intègre aussi, à côté de la question consultée, d’autres questions et réponses en lien avec celle-ci.
Cela ne me dérange pas. C’est un comportement utilisateur déjà présent, et Quora a su en tirer naturellement profit.
En revanche, la manière dont ces questions/réponses associées sont présentées me dérange. Elles ressemblent beaucoup trop aux vraies réponses de la page et n’intègrent aucune hiérarchie visuelle. Regardez la capture d’écran ci-dessus : pouvez-vous distinguer d’un coup d’œil ce qui est une réponse de ce qui est une question liée ? Il faut lire attentivement pour le deviner.
Faites ceci à la place
Idéalement, les questions connexes devraient être moins mises en avant dans l’interface utilisateur et apparaître après les réponses principales dans la hiérarchie visuelle (par exemple, avec un fond grisâtre au lieu d’un fond blanc).
Péché n°3 : Une interface tout droit sortie des années 2000
Je sais, je sais, Craigslist a une interface affreusement dépassée et fonctionne pourtant très bien. Mais c’est une exception à la règle, et vous ne devez pas penser qu’il est encore acceptable d’avoir quelque chose de ce genre en 2023.
Le problème, c’est que, contrairement à Craigslist, votre produit ne sera pas hyper populaire et ne bénéficiera pas d’une marque reconnue universellement. Ainsi, si les gens voient quelque chose de dépassé en visitant votre site ou en utilisant votre application, ils ne vous prendront tout simplement pas au sérieux. Toutefois, vous avez toujours la possibilité de vous distinguer grâce à votre création de logo et à votre identité visuelle.
Malheureusement, ce sont parfois les organisations les plus « sérieuses » qui commettent ce péché.
J’ai eu l’occasion de collaborer avec la Banque centrale d’Arménie il y a quelques années. Elle compte parmi les analystes financiers et les experts en politiques monétaires les plus talentueux du secteur. De plus, le président de cette institution (diplômé de Harvard) était mon professeur et il est probablement la personne la plus brillante que j’aie rencontrée dans ma vie.
Cependant, le site web de la Banque centrale est tellement désuet qu'il vous sera difficile de croire qu'il s'agit d'une organisation aussi réputée avec un personnel si talentueux.
Péché n°4 : Les « dark patterns » (ou utiliser l’UX contre vos utilisateurs)
Dans le monde de l’UX, les « dark patterns » sont des parcours utilisateur et des éléments d’interface qui désinforment l’utilisateur et l’incitent à effectuer une action dont il n’a pas conscience.
Il existe une boutique e-commerce avec un logo en forme de flèche orange particulièrement « célèbre » pour l’utilisation des dark patterns. Elle en abuse au point qu’il existe des plaintes et enquêtes en cours à son encontre pour non-respect des règles de la FCC.
Une des expériences utilisateur les plus connues de cette catégorie est la manière dont on doit résilier un abonnement Prime.
Pour être honnête, je pense qu’il est toujours intéressant de demander un retour aux utilisateurs lorsqu’ils annulent leur abonnement payant, ou même de leur proposer une remise « ne partez pas ». Mais il faut respecter le temps et la patience de vos utilisateurs.
Gardez à l’esprit que les personnes qui souhaitent annuler leur abonnement sont sans doute déjà agacées ou insatisfaites. Rendre la démarche difficile risque donc de les énerver davantage (et vous pouvez oublier l’idée de les reconquérir un jour).
Si vous essayez, par exemple, de résilier votre abonnement Prime, Amazon vous demande de reconsidérer votre choix.
Cette page ne me gêne pas, tout le monde le fait.
En revanche, ce qui me dérange, c’est qu’il faudra confirmer votre choix deux(!) fois supplémentaires pour annuler (sérieusement ?). De plus, les libellés et couleurs utilisés pour les boutons d’action sont faits pour qu’il soit difficile de trouver celui qui annulera vraiment l’adhésion au lieu de la conserver.
Faites ceci à la place
N’essayez pas de tromper vos utilisateurs pour qu’ils effectuent une action contraire à leur intention, ou de les « user à l’usure » en rendant l’annulation excessivement difficile. Les gens sont assez malins pour comprendre que c’est fait exprès, et cela ne fera qu’avantager la concurrence. Préférez un bref sondage pour connaître la raison de leur départ et rendez la démarche efficace tout en laissant la porte ouverte à un éventuel retour.
Péché n°5 : Ne pas suivre les bonnes pratiques des formulaires
Les formulaires sont l’un des éléments fondamentaux des sites web, et l’une des premières choses que les développeurs apprennent à créer et que les designers apprennent à… designer.
Offrir une excellente expérience utilisateur sur les formulaires est probablement l’un des sujets les plus débattus parmi les designers, et on trouve partout des bonnes pratiques, des guides et des conseils à ce sujet.
Compte tenu de la quantité de ressources pédagogiques sur les formulaires et de l'importance de bien les concevoir (cela affectera directement votre acquisition et d'autres indicateurs clés après tout), je dirais que ne pas respecter les meilleures pratiques UX établies pour les formulaires est un péché.
Permettez-moi maintenant de vous donner un exemple de mauvais design produit pour les formulaires.
Je ne peux même pas regarder cette page sans avoir les yeux qui piquent. Il y a tant de choses qui ne vont pas ici. Pour n'en citer que quelques-unes :
Mauvaise utilisation de l’espace blanc : Pourquoi les noms de champs doivent-ils être aussi éloignés des champs eux-mêmes ? Pourquoi utilisez-vous tout un bloc simplement pour placer deux petits commutateurs pour retrait et livraison ? Vous pouvez créer un formulaire comprenant toutes les informations présentes ici qui soit au moins 4 fois plus petit et bien plus facile à parcourir.
Mauvais formatage des champs : Il y a un champ téléphone où les chiffres saisis n’apparaissent pas au format d’un numéro de téléphone (par ex. +1 (555) 123-1234) pour faciliter la lecture. C’est tellement courant que la plupart des outils de design proposent même des composants prêts à l’emploi pour ce cas.
Absence d’un placeholder : On distingue à peine la présence d’un champ texte dans la section « Instructions de livraison supplémentaires ». De plus, je ne sais même pas ce que l’on est censé y écrire. Un bon UX de formulaire implique toujours la présence d’un placeholder qui donne un indice, comme « Veuillez laisser le colis sur le porche d'entrée ».
À faire plutôt
Les solutions à chacun de ces problèmes semblent plutôt évidentes, mais c’est un cas où on dirait que seuls ceux qui ont construit ce formulaire l’ont testé. Les concepteurs auraient eu tout à gagner à récupérer de vrais retours utilisateurs sur cette expérience avant de la lancer.
Péché n°6 : Utiliser les mauvais éléments d’interface utilisateur
Le prochain péché dont je souhaite parler est une suite logique du précédent. Les formulaires ne sont pas les seuls éléments d’interface utilisateur de votre produit qui doivent suivre des conventions et meilleures pratiques éprouvées. Il existe aussi d’autres éléments courants comme les commutateurs, cases à cocher, etc.
En fait, les utilisateurs ont déjà des schémas mentaux pour la façon dont chacun de ces éléments fonctionne et il est essentiel de les utiliser correctement.
Voici quelques exemples de la raison d’être de ces éléments et de la façon de ne pas les utiliser :
Commutateurs : Cet élément indique un état « booléen » (par exemple, quelque chose d’actif/inactif, activé/désactivé). Ils sont parfaits pour afficher à l’utilisateur l’état de l’antenne Bluetooth sur son smartphone et lui permettre de l’activer ou de la désactiver.
Dans le formulaire précédent, cependant, il y a deux commutateurs qui permettent à l’utilisateur de choisir entre retrait et livraison.
Si vous y réfléchissez un instant, vous y aurez réfléchi plus longtemps que le designer. Ces commutateurs signifient qu’il faut mettre « retrait » sur OFF et « livraison » sur ON pour sélectionner la livraison ! Ils auraient pu utiliser des boutons radio. Je me demande ce qui se passe si un utilisateur active les deux en même temps.
Menus déroulants sans filtre : Étant l’un des plus anciens éléments du Web, les menus déroulants restent populaires et très conviviaux s’ils sont bien utilisés.
À faire plutôt
La bonne pratique veut que l’on utilise un menu déroulant lorsque l’utilisateur doit choisir une seule option parmi une liste de 5 à 15 choix. S’il y a moins de 5 options, il vaut alors mieux recourir à des boutons radio.
Si la liste des choix est très longue (par exemple, 50 états américains ou environ 200 pays), il faut alors ajouter un filtre au menu. Sinon, l’utilisateur devra faire défiler toute la liste pour trouver l’élément voulu.
Péché n°7 : Négliger qui sont vos utilisateurs et ce qu’ils veulent
Enfin, le pire péché : créer un nouveau produit dont l’UX ne correspond pas aux besoins ni aux intérêts de vos utilisateurs. C’est simplement la recette de l’échec.
À faire plutôt
Un bon processus de conception de produit commence toujours par la recherche utilisateur. À moins de savoir qui sont vos utilisateurs et ce dont ils ont besoin, peu importe à quel point votre interface utilisateur est esthétique, vous risquez fort de finir avec un produit mal conçu.
Je sais que la recherche utilisateur n'est pas une tâche facile. Après tout, il a fallu des années de tests utilisateurs à Apple pour atteindre un niveau d’utilisabilité exceptionnel tant dans la conception industrielle que dans l’expérience utilisateur de l’iPhone. Cependant, croyez-moi, c’est l’action la plus impactante que vous puissiez entreprendre pour garantir le succès de votre produit.
Il est vraiment facile d’éviter de commettre des péchés de conception
Si vous travaillez dans la création de sites web, vous partez déjà avec un avantage. Pourquoi ? Parce que les outils de conception de sites web proposent généralement des modèles qui évitent déjà certains des défauts évoqués ici. Cependant, que vous soyez une startup développant des produits digitaux ou une entreprise qui conçoit des objets physiques (comme des claviers ou des capteurs de mouvement), il est en réalité assez facile d'éviter les mauvaises conceptions.
Tant que votre processus de développement de produit se concentre sur les besoins et les difficultés de vos utilisateurs et que vous utilisez le bon logiciel de conception de produit, vous pourrez éviter des défauts majeurs de conception et de finir avec un produit mal conçu (c’est aussi l’un des nombreux avantages des logiciels de design dopés à l’IA).
J’espère que ces exemples vous ont rassuré quant à vos propres produits, ou au moins qu’ils vous ont fait sourire. Pour plus d’astuces UX et d’autres articles à destination des acteurs du produit, pensez à vous abonner à notre newsletter !
