Mis à jour le mercredi 19 juillet 2017
  • 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Différenciez le bon design du mauvais design

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons voir qu'il existe des bons et des mauvais designs, et comment apprendre, tirer une leçon des erreurs de design. 

Avez-vous déjà :

  • poussé une porte qu'il fallait tirer ? et inversement ?

  • bougé bizarrement devant des portes vitrées automatiques parce qu'elles ne s'ouvraient pas ?

  • remué les mains sous un sèche-main de façon frénétique pour qu'il reste allumé ? ou dû les garder trop près du sèche-main au point que cela vous brûle pour qu'il reste allumé ?

  • cherché quel bouton gérait quelle plaque de cuisson ? 

  • été perdu dans un bâtiment (hôpital, musée…) parce que vous ne trouviez pas la sortie ?

  • appuyé plusieurs fois sur le bouton de l'ascenseur pour qu'il arrive plus vite ?

  • essayé de changer l'heure sur votre four ou votre micro-ondes, en vain ?

  • lancé un programme au hasard sur votre machine à laver parce que vous ne saviez pas à quoi servaient tous les boutons ? 

  • appuyé sur des boutons de la télécommande pour voir ce qu’ils contrôlaient ?

  • quitté une application mobile car vous n'arriviez pas à comprendre comment elle fonctionnait ?

  • fermé un site web parce que vous deviez sans arrêt revenir à l'accueil pour accéder au menu ?

Oui ? Alors vous avez été victimes de mauvais design ! 😯

Quand ce genre de choses arrive, on a tendance à s'en prendre à soi-même, et on se dit :

"Ah oui mince, y avait marqué "tirer" sur la porte, j'avais pas lu…"

"Le bouton de l'ascenseur ne s'est pas allumé, j'ai dû mal appuyer, je recommence (plusieurs fois, et bien fort, juste pour être sûr…)"

"Pourquoi je n'arrive pas à faire marcher le four, les autres doivent bien y arriver…"

"J'ai pas compris comment fonctionne cette application, peut-être que ce n'est pas de ma génération…"

Mais on a tort. 

Ce n'est pas nous qui nous trompons… C'est l'interface qui est mal faite, et qui nous amène à l'erreur.

Trouvez l'erreur

Si vous ne comprenez pas, ou mal, une interface, c'est que vous vous trouvez devant un mauvais design (une mauvaise conception, une mauvaise ergonomie). En effet, les erreurs de design sont souvent des erreurs d'interface.

Pour résumer… si c'est compliqué, c'est mauvais. 🤓

Mais "compliqué" ça veut dire quoi ?

Un produit est compliqué quand les éléments d'interface qui le constituent – censés nous permettre d'interagir avec (boutons, commandes) – empêchent de comprendre simplement, rapidement comment fonctionne ce produit.

Un signifiant apporte une information, fait passer un message (de préférence universel) qui désigne une utilité, une fonction. 🤔

Exemples de signifiants :

  • En voiture, si nous voyons ce panneau ⛔️, nous savons que nous ne pouvons pas passer.

  • Au sein d'un lieu public, nous cherchons ce symbole 🚻  pour aller aux toilettes.

  • Sur un lecteur média, nous savons les effets que chacun de ces boutons a ⏪▶️⏸⏹⏩.

  • Dans une application mobile, nous savons que le symbole des trois traits horizontaux (communément appelé "menu hamburger") sert à dérouler un menu : nous savons ce qu'il va se passer si nous "cliquons" dessus.

  • Nous reconnaissons immédiatement les messages d'erreurs parce qu'ils sont rouges et/ou comportent un point d'exclamation.

Bref, un signifiant c'est une sorte d'indicateur. Il montre ce qu'il faut faire, nous guide dans une interaction : il signifie ce qu'il va se passer si nous l'actionnons, appuyons dessus, etc.

Libre de droits - Domaine public
Libre de droits - Domaine public

Une erreur d'interface dans un design, c'est donc une mauvaise utilisation des signifiants par le designer.

Plusieurs cas possibles :

  1. Il y a trop de signifiants ; en bref… trop d'information. Cela peut être le cas d'une télécommande ou d'un site Internet.

  2. Les signifiants sont mal placés : comme les plaques de cuisson qui ne sont pas en face des boutons, ou une application mobile qui nécessite de "scroller" (glisser vers le bas) trop longtemps avant d'arriver à l'information désirée, ou de "swiper" (glisser sur le côté) sans qu'on le sache.

  3. Les signifiants sont insignifiants… ne veulent rien dire : signes cabalistiques (= symboles non compréhensibles, pictogrammes énigmatiques qui n'évoquent rien ; sur un four ou une machine à laver par exemple, on ne comprend pas à quoi il servent, ce qu'il se passera si on appuie dessus).

  4. Les signifiants sont absents : il n'y a aucune indication sur quoi faire pour utiliser l'objet (par exemple des boutons sans couleur ou symbole inscrit dessus ou encore une porte dans un magasin qui n'indique pas s'il faut pousser ou tirer pour ouvrir).

Anticipez les dangers du mauvais design et apprenez de vos échecs

Dans tous les cas , cela génère de la confusion, de l'incompréhension, voire du stress ou de l'anxiété.

Mais parfois, un mauvais design peut être très dangereux, voire mortel. Parfois, un mauvais design tue… 😱

L'exemple le plus célèbre c'est celui des portes dans des lieux publics (comme les salles de cinéma, de spectacles, les musées…). Cette anecdote tragique a, malgré une issue catastrophique, permis de corriger une grosse erreur de design…

Au siècle dernier, dans une salle de spectacle , des centaines de personnes sont présentes. Un incendie se déclare. Tout le monde se rue vers la sortie. Le problème ? La porte s'ouvre en tirant et non en poussant. En temps normal, ce n'est pas grave, on se rend compte de son erreur et on s'ajuste. Dans un moment de panique, impossible d'ouvrir la porte car tout le monde pousse et personne ne comprend qu'il faut reculer pour ouvrir la porte, sauf ceux tout devant qui prennent toute la mesure de la tragédie en train d'opérer devant eux. Résultat : des centaines de morts.

Ce tragique incident a inspiré le design des portes incendies, et plus largement des portes de secours, dont le but est de faciliter la sortie vers l'extérieur en toute simplicité. Vous savez, ce sont ces portes qui s'ouvrent dès qu'on appuie sur la barre latérale.

Crédit Photo © Pair Srinrat
Crédit Photo © Pair Srinrat

Les conséquences d'un mauvais design ne sont pas toujours aussi extrêmes mais elles peuvent être désastreuses pour un business.

Exemple : vous perdez tous vos utilisateurs parce que l'interface de votre application mobile ne "parle" pas aux gens, ne les aide pas, voire les insupporte.

Mais il y a au moins un bénéfice dans les erreurs de design, c'est que l'on peut apprendre de ses échecs.

Pour revenir sur l'anecdote de l'incendie : désormais, tous les lieux publics dans le monde entier ou presque possèdent ce système de porte. C'est devenu un standard international.

Le design a besoin d’échouer. Échouer, c'est même une étape nécessaire, mais idéalement il faut que cela intervienne avant le lancement d'un produit, il faut que cela intervienne pendant les phases de prototype, et de test utilisateur.

Pensez à tout

Pour faire un bon design, le designer doit penser à tout ! L'interface, les signifiants (leur place et leur rôle).

Mais s'il n'y avait que ça… Un produit c'est bien joli quand tout se passe bien. Les personnes qui font une application mobile pour la première fois se focalisent sur l'aspect beautiful et feel good… Ils se préoccupent exclusivement du résultat graphique. Mais s'ils ne font pas de test utilisateur avant de sortir leur application mobile, ils ne verront pas ce qu'ils ont oublié, ce à quoi ils n'ont pas pensé, ils n'auront pas anticipé les problèmes éventuels que peut rencontrer un utilisateur.

Il faut donc aussi concevoir l'interaction (design d'interaction) qui comprend notamment les chemins de navigation de l'utilisateur et l'analyse de son comportement.

Mais, il faut aussi faire le design de l’erreur !

  • Quand l'application bug, qu'est-ce qui se passe ? Y a t-il un message d'erreur pour rassurer l'utilisateur ?

  • Quand un champ est mal renseigné dans un formulaire, l'utilisateur est-il aidé ?

  • Etc.

C'est aussi tout cela qu'il faut concevoir…

J'ai pris l'exemple d'une application web, mais c'est valable pour tout type de design.

Page erreur du site OpenClassrooms
Page d'erreur du site d'OpenClassrooms

Pour rester dans la thématique de l'erreur, il existe un type de design "anti-erreur" (qui empêche une erreur d'arriver). C'est généralement lié à des machine-outils, ou procédés mécaniques dans les usines d'assemblages où des erreurs peuvent coûter un bras…

Maintenant que vous savez tout ça, je suis sûre que vous allez voir les choses sous un nouvel angle, et être capable de reconnaitre un bon design d'un mauvais design. Vous comprenez désormais à quel point le design est important… Mais vous n'avez encore rien vu… 🤗

Exemple de certificat de réussite
Exemple de certificat de réussite