Mauvais design contre bon design : 5 exemples dont nous pouvons tirer des leçons

Regarder des exemples de mauvais design aux côtés de contre-exemples de bon design n’est pas seulement amusant, mais permet aussi de tirer des leçons importantes pour les designers. Ils mettent en évidence les pièges que les concepteurs doivent éviter et nous permettent de comprendre comment traduire les théories de conception en solutions qui fonctionnent dans le monde réel. Jared Spool, écrivain, chercheur et expert en utilisabilité américain, a dit un jour : « Un bon design, lorsqu’il est bien fait, devient invisible. Ce n’est que lorsqu’il est mal fait que nous le remarquons ». Alors, examinons cinq exemples de conceptions manifestement mauvaises, mettons en lumière la façon dont une bonne conception permet de les faire fonctionner, et distillons quelques leçons afin que nous puissions tous créer des expériences formidables et invisibles pour nos utilisateurs.

Surcharge d’informations

Le mauvais : Panneaux de stationnement à Los Angeles

Les panneaux de stationnement à Los Angeles (LA) ont été l’incarnation de la surcharge d’informations pendant des décennies. Ils ont toujours été notoirement difficiles à comprendre, parce que les règles de circulation sont complexes, ce qui entraîne la nécessité de transmettre beaucoup d’informations dans un petit espace.

À quel point ces panneaux sont-ils déroutants ? Traditionnellement, très – regardez cet exemple des années 2010 :

Auteur/titulaire du droit d’auteur : Jorge Gonzalez. Conditions de droit d’auteur et licence : CC BY-SA 2.0

Comme les panneaux de stationnement de LA, cet exemple est déjà assez simple.

Imaginez que vous êtes un conducteur le long de cette route un mardi matin à 9 heures. Pouvez-vous vous garer à cet endroit ? Ce qui semble être une question simple demande beaucoup de traitement mental pour y répondre.

En tant que concepteurs, nous sommes souvent confrontés à des situations où nous devons concevoir pour que beaucoup d’informations soient affichées dans un petit espace. Les panneaux de stationnement à Los Angeles sont peut-être un cas extrême, mais bien souvent, la conception d’applications mobiles nous confronte aux mêmes problèmes. Existe-t-il un moyen de s’en sortir – à la fois pour les panneaux de stationnement et pour les concepteurs en général ?

Le bon : Le panneau de stationnement de Nikki Sylianteng

Concevoir un panneau pour afficher toutes les informations, tout en étant facile à comprendre, semble être une tâche impossible. Mais c’est exactement ce qu’a fait la designer de Brooklyn, Nikki Sylianteng.

Auteur/titulaire du droit d’auteur : Nikki Sylianteng. Conditions de droit d’auteur et licence : CC BY-NC-SA 4.0

Le panneau de stationnement proposé par Nikki a finalement été utilisé à LA dans le cadre d’un essai.

La raison pour laquelle le design1 de Nikki fonctionne bien est en partie qu’il est centré sur l’utilisateur : Nikki a compris que les conducteurs veulent simplement savoir s’ils peuvent se garer sur une place. Oui ou non, c’est tout ce dont les conducteurs ont besoin, et c’est tout ce que le panneau de stationnement indique.

Son design a également fait appel à des visuels, plutôt qu’à du texte, pour transmettre l’information. Le résultat est incroyablement intuitif : vert pour OK, rouge pour No Parking. Il est même conçu pour les daltoniens, avec des bandes pour No Parking.

Maintenant, lorsque vous regardez le panneau, vous savez que le mardi à 9 heures, le stationnement est interdit. Les barres montrent ce qui est quoi en un coup d’œil – simple.

Les leçons apprises : Meilleure pratique

• Comprenez ce dont vos utilisateurs ont besoin, puis concevez en fonction de cela. Cela permet de réduire la surcharge d’informations.
• Vous avez beaucoup d’informations à transmettre à vos utilisateurs ? Essayez d’utiliser des éléments visuels plutôt que du texte. Apprenez-en plus sur la visualisation de données ici.

Navigation en viande de mystère

Le mauvais : LazorOffice.com

Coincé en 1998 par Vincent Flanders de Web Pages That Suck2, la Mystery Meat Navigation (MMN) fait référence aux cas où la destination d’un lien n’est pas visible jusqu’à ce que l’utilisateur clique dessus ou y pointe le curseur. Le terme « mystery meat » était une référence aux viandes servies dans les cafétérias des écoles publiques américaines qui sont tellement transformées que leur type exact n’est plus discernable.

La MMN est mauvaise car elle réduit la découvrabilité des éléments de navigation. Cela ajoute une charge cognitive aux utilisateurs, car ils doivent maintenant deviner comment naviguer ou ce que cliquer sur quelque chose fait.

Bien que la plupart des MMN se trouvent dans des sites Web plus anciens, ils sont étonnamment répandus dans les sites Web modernes. Prenez par exemple Lazor Office, une entreprise de design qui crée des maisons préfabriquées.

Auteur/Détenteur du droit d’auteur:Lazor Office, LLC. Conditions de droit d’auteur et licence : Fair Use

LazorOffice.com présente une grille d’images MMN sur sa page d’accueil. Comme vous pouvez le voir, ce tableau donne peu d’indications sur la direction à prendre. Au lieu de cela, neuf images restent simplement assises, laissant certains d’entre nous réfléchir à une énigme plutôt que d’interagir avec une page.

Sous le pli de leur page d’accueil, une grille de vignettes d’images attend. Sont-elles cliquables ? Eh bien, oui – si vous déplacez le curseur de votre souris sur une image, il se transforme en pointeur. Mais que se passe-t-il lorsque vous cliquez sur une image ?

« Cliquez pour le découvrir ! » n’est jamais une bonne solution en matière d’expérience utilisateur (UX). Il y a de fortes chances que vos utilisateurs abandonnent leur navigation et trouvent une solution alternative dans le site d’un concurrent.

Le bon : Fiches de cours sur le site de l’Interaction Design Foundation

Heureusement, les problèmes de MMN sont faciles à résoudre. La clé est d’être conscient que vous devez clairement étiqueter les liens. Le simple ajout de « View project » qui apparaît au survol de la souris améliorera la convivialité de la page de Lazor Office ci-dessus.

Auteur/Détenteur du droit d’auteur : Interaction Design Foundation ApS. Conditions de droit d’auteur et licence : Fair Use

Nos cartes de cours sont aussi peu mystérieuses que les liens le sont.

Pour les cartes de cours de l’Interaction Design Foundation, nous avons non seulement « Voir le cours » au bas de chaque carte pour indiquer l’action qui va se produire, mais nous avons également un état de survol avec le texte « Aller au cours ». De nombreux sites Web suivent une convention similaire, et vous devriez le faire aussi, pour maximiser la convivialité de votre site Web.

La leçon apprise : Meilleures pratiques

Toujours étiqueter vos liens ! Vous n’aimeriez pas manger de la viande mystère – et de la même manière, vos utilisateurs n’aimeraient pas cliquer sur des liens mystère.

Ajouter de la friction aux actions des utilisateurs

Le mauvais : iFly50.com

En tant que concepteurs, nous devrions ajouter de la friction aux actions des utilisateurs avec une extrême prudence, à moins que le but soit de dissuader les utilisateurs d’effectuer cette action. Parfois, cependant, nous pourrions même ajouter involontairement de la friction aux actions des utilisateurs (principalement pour des raisons esthétiques ou de nouveauté), ce qui entraîne une UX préjudiciable.

Un exemple est iFly50.com, créé pour l’anniversaire du magazine iFly par KLM. iFly 50 est un site Web à défilement vertical présentant 50 destinations de voyage, et dans certaines destinations (comme celle ci-dessous), un bouton près du bas demande aux utilisateurs de cliquer et de maintenir pendant quelques secondes pour voir plus de photos.

Auteur/Détenteur du droit d’auteur : Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Conditions de droit d’auteur et licence : Fair Use

iFly 50 s’attend à ce que ses utilisateurs cliquent et tiennent pendant quelques secondes chaque fois qu’ils veulent voir plus de photos.

Le fait d’ajouter quelques secondes de friction à chaque action peut entraîner une UX énormément moins bonne. Imaginez si, au lieu de cliquer pour charger une page instantanément, vous devez maintenant cliquer et maintenir pendant deux secondes pour chaque lien sur lequel vous avez cliqué dans votre navigateur. Vous abandonnerez complètement l’exploration d’Internet après quelques clics et maintiens.

Plusieurs fois, nous, les concepteurs, avons tendance à nous laisser emporter par les nouveaux styles d’interaction ou les nouvelles actions, mais il est essentiel de toujours faire preuve de prudence lorsque votre conception pourrait ajouter de la friction aux actions des utilisateurs. La plupart du temps, les conventions éprouvées (par exemple, de simples clics ou glissements) fonctionnent parfaitement.

Le bon : Le défilement élastique sur iOS

Il est intéressant de constater que le fait d’ajouter consciemment de la friction aux actions de l’utilisateur peut donner lieu à un excellent design. L’une des inventions les plus populaires d’Apple dans son système d’exploitation mobile, iOS, est la création du défilement élastique, où dans certaines situations (comme à la fin d’une page web) le défilement devient de plus en plus difficile.

Auteur/Détenteur du droit d’auteur : Interaction Design Foundation ApS. Conditions de droit d’auteur et licence : Fair Use

Dans le défilement élastique d’iOS, la friction est délibérément ajoutée dans certaines situations.

Vous pouvez le voir en action ci-dessus, où une friction accrue se produit lorsque l’utilisateur fait défiler jusqu’à la fin de la page Web. La friction a été ajoutée pour indiquer les situations où le défilement n’est plus autorisé : et l’effet est une expérience intuitive.

La leçon apprise : Meilleure pratique

Évitez d’ajouter toute forme de friction aux actions de l’utilisateur autant que possible – et mettez-la soigneusement en œuvre lorsque vous n’avez pas d’alternative.

Un design « intelligent » qui ignore l’utilisabilité

Le mauvais : Bolden.nl

Parfois, les conceptions intelligentes peuvent être préjudiciables à l’UX. Ce qui rend cette erreur plus dangereuse, c’est que nous, les designers, adorons les designs astucieux. Ce sont de petites merveilles graphiques qui font naître un sourire sur nos visages. Malheureusement, la majorité des humains ne sont pas des concepteurs. Plus triste encore, tous les designs intelligents ne sont pas de bons designs, surtout lorsqu’ils créent des problèmes d’accessibilité, de découvrabilité ou d’utilisabilité.

Prenez par exemple le site web du studio néerlandais de conception stratégique et de développement Bolden :

Auteur/Détenteur du droit d’auteur : Bolden. Conditions de droit d’auteur et licence : Fair Use

Pouvez-vous dire ce que leur page d’accueil essaie de dire ? Non ? Eh bien, c’est parce que vous devrez déplacer votre souris vers le coin de la page afin de voir les messages correctement.

Auteur/Détenteur du droit d’auteur : Bolden. Conditions et licence de droit d’auteur : Fair Use

C’est un design intelligent ? Oui, sans aucun doute. Mais est-ce un mauvais design ? Absolument !

C’est un excellent exemple de conception pour le concepteur, plutôt que pour l’utilisateur : le site web a sérieusement réduit la lisibilité de ses titres dans la détermination de ses créateurs à offrir un design novateur. L’auteur du site a également omis de préciser aux utilisateurs qu’ils devaient déplacer leur souris dans les coins, ce qui signifie que la découverte des titres dépend du hasard. En outre, même lorsque le titre est révélé, le contraste entre le texte et l’arrière-plan est faible, au point que l’on peut toujours voir le texte se chevaucher. Tout cela s’ajoute pour créer un site web peu convivial.

Le bon : CultivatedWit.com

Le site Web de Cultivated Wit est un excellent contre-exemple de la façon dont un design intelligent ne doit pas nécessairement mettre à mal la convivialité.

Auteur/Détenteur du droit d’auteur : Cultivated Wit. Conditions de droit d’auteur et licence : Fair Use

La page d’accueil de Cultivated Wit affiche une chouette illustrée.

Dans la page d’accueil de Cultivated Wit, l’illustration de la chouette clignote lorsque votre souris passe dessus :

Auteur/Détenteur du droit d’auteur : Cultivated Wit. Conditions de droit d’auteur et licence : Utilisation équitable

Surprise ! La chouette vous fait un clin d’œil lorsque vous pointez le curseur sur elle. Notez l’allocation judicieuse de l’espace blanc, aussi.

La différence clé ici est que cela ne constitue pas une partie essentielle du site Web, donc cela ne diminue pas la convivialité même si l’utilisateur ne découvre pas cet élément de conception intelligent.

De plus, ils ont une flèche claire pointant vers le bas pour suggérer que quelque chose se trouve sous le pli. Et lorsque vous faites défiler vers le bas, vous verrez ceci :

Auteur/titulaire du droit d’auteur : Cultivated Wit. Conditions de droit d’auteur et licence : Fair Use

Et les sites Web peuvent être intelligents sans sacrifier l’UX.

La copie (qui est lisible et présente un bon contraste) crée un sentiment d’esprit – pas très différent de ce que Bolden essayait d’obtenir – sans diminuer l’UX du site Web. Le seul petit problème est que le texte « Rejoignez notre club de messagerie » devrait être plus visible, mais pris dans son ensemble, le site Web de Cultivated Wit est un excellent exemple de livraison d’un design intelligent sans créer une mauvaise UX.

La leçon apprise : Meilleures pratiques

Les conceptions intelligentes devraient toujours être rendues aussi infaillibles que possible, et/ou testées sur des utilisateurs réels. Parfois, les designs intelligents peuvent se retourner contre eux et nuire à l’utilisabilité.

Des animations superflues

Le mauvais : Concept de reçu PayPal sur Dribbble

Les animations sont un élément crucial du design d’interaction, mais elles doivent toujours servir un objectif. Elles ne devraient jamais être faites pour le plaisir de l’animation. Malheureusement, les concepteurs ont tendance à avoir une histoire d’amour avec les animations, en partie parce que les animations sont si amusantes à créer que nous ne savons peut-être pas quand nous devons nous arrêter.

Le concept d’animation de Vladyslav Tyzun pour un reçu de courriel PayPal, posté sur Dribbble, est un exemple d’animation mal faite :

Auteur/Détenteur du droit d’auteur : Vladyslav Tyzun. Conditions de droit d’auteur et licence : Fair Use.

L’animation est jolie, mais superflue. Au total, il faut un temps énorme de 3,5 secondes pour voir les détails de la transaction. Un simple fondu enchaîné du reçu serait plus élégant, et parce qu’il prend moins de temps, meilleur pour l’utilisateur également.

Ce problème devient dangereux lorsque les concepteurs ne semblent pas pouvoir se passer d’animations. En 2016, l’animation de Vladyslav recevrait plus de 500 likes et 8 000 vues. Cela montre une appréciation erronée que les concepteurs ont envers l’animation pour le plaisir de l’animation. Avoir un aperçu de la tendance du concepteur à préférer les épopées en piqué aux représentations plus directes et se rattraper avant de céder aux animations vous fera gagner beaucoup de temps et vous évitera bien des maux de tête. Rappelez-vous, les utilisateurs viennent sur les sites pour un but – nous voulons leur montrer ce qu’ils recherchent en un espace et un temps courts, et non les retenir dans un grand tour de la galerie.

Le bon : L’animation de Stripe Checkout

Lorsque nous faisons de l’animation de manière ciblée, cependant, les résultats peuvent être formidables. Regardez l’animation de Stripe Checkout lorsque l’utilisateur reçoit un code de vérification :

Auteur/Détenteur du droit d’auteur : Stripe, Inc. Conditions de droit d’auteur et licence : Fair Use.

Stripe utilise des animations pour faire paraître les choses plus rapides qu’elles ne le sont : il fournit aux utilisateurs des mises à jour (comme « Envoyé ») même s’ils n’ont peut-être pas encore reçu le SMS. Cela évite aux utilisateurs de se sentir frustrés de devoir attendre, et leur donne l’assurance qu’un SMS est en route en ce moment même.

Rachel Nabors, experte invitée en animations web au W3C, suggère cinq principes à garder à l’esprit lors de la conception d’animations3 :

1. Animer délibérément : pensez à chaque animation avant de la créer.
2. Il faut plus que 12 principes : Les 12 principes d’animation de Disney fonctionnent pour les films, mais pas nécessairement pour les sites Web et les apps.
3. Utile et nécessaire, puis beau : l’esthétique doit passer au second plan par rapport à l’UX.
4. Allez quatre fois plus vite : les bonnes animations sont discrètes, ce qui signifie qu’elles s’exécutent rapidement.
5. Installez un bouton d’arrêt : pour les grandes animations telles que les effets de parallex, créez un bouton d’arrêt.

La leçon apprise : Meilleures pratiques

Toujours faire en sorte que votre animation ait un but : trop en faire peut tuer l’UX d’un produit. La beauté doit tirer son épingle du jeu et être fonctionnelle.

The Take Away

N’est-ce pas amusant de regarder des exemples de mauvais design ? Heureusement, c’est aussi éducatif. Voici les principales leçons et les meilleures pratiques tirées des cinq exemples de bons et mauvais designs :

1. Comprenez ce dont vos utilisateurs ont besoin, puis fournissez cette information.
2. Si vous avez beaucoup d’informations à transmettre, essayez d’utiliser des visuels plutôt que du texte.
3. Étiquetez toujours vos liens ! Les utilisateurs n’aiment pas les liens mystérieux.
4. Évitez d’ajouter toute forme de friction aux actions de l’utilisateur, à moins qu’elles ne soient destinées à dissuader l’action.
5. Testez vos conceptions intelligentes et incluez-les avec prudence.
6. L’animation est comme les jurons. Si vous en abusez, elle perd tout son impact.4

La prochaine fois que vous froncerez les sourcils devant un cas de mauvais design, arrêtez-vous pour réfléchir : comprenez pourquoi le design a échoué, trouvez des exemples de designs qui ont fait les choses correctement, et notez mentalement la leçon que vous avez apprise. Et puis partagez l’amour : partagez votre leçon avec d’autres concepteurs dans notre forum de discussion !

.