Introduction

Il nous arrive à tous de rencontrer des blocages ou des incompréhensions en naviguant sur des sites ou des applications.

Chez les utilisateurs, cela génère de la frustration, et peut conduire à l’abandon de l'action, ou même de votre service au profit de celui d’un concurrent.

Pourtant, nous avons constaté dans l’équipe design de BAM, qu’il suffit bien souvent, d’améliorer de petits détails UX/UI pour changer l’expérience utilisateur sur une interface desktop ou mobile. 

Dans la série “Quick wins design’, nous allons partir de cas concrets de frustration et re-désigner les écrans avec de petites astuces simples à mettre en place.

Enfin, nous tirerons des apprentissages plus théoriques pour éviter de reproduire l’erreur.

Dans ce premier Quick wins design, je vais vous parler de l’impact de l’affordance d’un composant UX/UI sur la compréhension des utilisateurs. 

‍

Le problème rencontré

Mardi dernier, alors que je m’imagine déjà dévaliser les friperies à Londres pour les week-ends prolongés, je reçois simultanément un SMS et un mail annonçant l’annulation de mon train. Mes quatre amis les reçoivent également. Est-ce qu’on va devoir tout annuler à la dernière minute ? Pic de stress.

L’email est impeccable et clair et nous propose plusieurs options : échange, avoir ou remboursement. Cependant, en cliquant rapidement sur le lien pour régler cette histoire au plus vite, nous tombons sur cette page :

Avant :

Quoi ? Rien n’est disponible !? Panique. Est-ce que nous allons devoir prendre l’avion ? … Oups la planète. Finalement, nous décidons d’attendre un peu.La journée passe. Le soir, plus détendus, nous retournons sur la même page pour réétudier la situation … 

Et finalement :

Le zéro était donc cliquable ! Soulagement. Tout est bien qui finit bien, le service est génial et tous les trains sont disponibles sans frais.

‍

Mes quicks wins pour limiter la panique des utilisateurs

Si nous sommes déjà quatre personnes à ne pas avoir compris que le composant était cliquable, c’est que cela a dû poser problème à de nombreux utilisateurs, et donc par ruissellement au service client !

Alors comment aurait-on pu éviter cette situation en quelques quick wins design ?

En prenant un peu de hauteur, le problème principal à résoudre ici pourrait être énoncé ainsi : “Sur la page d’échange des billets, les utilisateurs ne comprennent pas spontanément comment choisir un nouveau train”

Voici mes hypothèses de causes : 

• Le composant “0€” n’a pas l’air cliquable, il n’est pas affordant.
• Le message “Non disponible” est omniprésent visuellement.
• Le tableau des tarifs est interrompu par le cartouche de message bleu.

En ajustant ces quelques détails, voici une solution alternative que l’on pourrait proposer aux utilisateurs :

Après :

Quelques tips pour améliorer la compréhension de cet écran :

• Ajouter un bouton “choisir ce billet” dans le composant “0€”

• Déplacer le message concernant la date juste sous le choix des jours

• Diminuer la taille du “non disponible” et préciser qu’il s’agit du tarif et non du train
  ‍

Les apprentissages de ce cas

Quels enseignements tirer de ce cas pratique ? Chez BAM, lorsque nous rencontrons ce type de problèmes sur nos designs, nous nous appuyons sur les lois UX de Gestalt et de Nielsen et sur les grands principes d’UX/UI design. Reprenons les hypothèses énoncées plus haut en ajoutant un peu de théorie.

Améliorer l’affordance d’un composant UX/UI

Comme vu précédemment, l’objectif de la page est de permettre aux utilisateurs de choisir leur train de remplacement. Tout dans l’interface devrait être pensé de manière à mettre en évidence cette action. Pourtant, ce n’est pas le cas, puisque le composant “0€”, ne ressort pas visuellement, et ne semble pas cliquable. Les utilisateurs ne comprennent pas spontanément sa fonction. On dit alors que le composant n’est pas affordant.
‍

Alors comment résoudre ce problème ? Nous pouvons nous servir de deux principes :‍

• ‍La loi de Jakob, qui nous rappelle que les utilisateurs passent la majorité de leur temps sur d’autres sites et applications. Ils sont donc habitués à certains signifiants visuels associés à des actions. Par exemple, pour modifier son profil, un utilisateur va spontanément chercher une icône d’avatar dans la navigation haute ou basse de l’App. Autrement dit, pour faciliter la compréhension des utilisateurs, mieux vaut reprendre des codes usuels, comme ajouter un bouton call-to-action pour signifier l’action. C’est ce qui justifie l’ajout du bouton tertiaire “Choisir ce billet” sur l’interface re-designée.
  ‍
• ‍La cohérence des couleurs : généralement les designers vont choisir une couleur signifiant l’action sur un site. Ce code visuel permettra également d’améliorer l’affordance de vos composants d’action. Dans notre cas, c’est le turquoise foncé qui a été choisi, comme on peut le voir sur le choix de la date et le bouton “Plus d’informations” se trouvant dans le message.
  ‍

Hiérarchiser les messages

La vue est le premier sens sollicité sur une interface. En 5 secondes, un utilisateur doit pouvoir vous citer les actions principales à accomplir sur l’écran.

Les choix design auront un impact direct sur cette analyse immédiate : les couleurs, la taille des éléments et leur position sur l’interface vont être déterminants.

Dans l’exemple étudié, le message “Non disponible” apparaît non seulement plus de 10 fois sur l’écran, mais en plus la taille de la police est identique à celle du composant “0€”, qui est l’action principale. La couleur grise indique toutefois que cette information est moins importante que le zéro.

Pour inverser la tendance, vous pouvez jouer sur ces éléments en adaptant les styles de texte à la hiérarchisation des messages. Vous pouvez trouver un exemple dans le design system de BAM.
‍

Respecter la loi de proximité

Pour finir sur notre troisième et dernière hypothèse, nous pouvons utiliser la loi de la proximité, issue des lois de Gestalt, qui nous rappelle l’importance de l’emplacement des composants sur la compréhension des utilisateurs. Les éléments proches entre eux seront perçus comme un groupe cohérent correspondant à une action ou une information. 

Ici par exemple, le tableau des tarifs correspond à une seule information : les trains disponibles. Le message bleu, en éloignant graphiquement le titre et les colonnes de la matrice, perturbe la compréhension générale de l’écran.

Pour la mettre en pratique, vous pouvez définir avec les designers des espacements type dans votre design system :

• 4 ou 8 px pour les éléments d’un seul et même composant
• 16 ou 24 px pour les éléments d’un seul et même bloc
• Plus de 24 px pour séparer des blocs entre eux et distinguer deux informations.
  ‍

Conclusion

Une fois que vous avez mis en pratique ces éléments, l’idéal est de vérifier que vous n’avez pas été biaisé(e) à force de fixer votre écran (c’est fréquent). Vous pouvez mettre en place des quick internal testing (avec vos collègues, votre entourage, mais pas votre chat) ou de guerilla testing pour déceler les plus gros problèmes utilisateurs.

Enfin, tous ces biais sont bien sûr largement amplifiés dans une situation de stress, alors que la capacité d’analyse de notre cerveau est bien diminuée. N’oubliez pas de prendre en compte le contexte de vos utilisateurs, y compris lors de vos tests.