HCD — A/B Testing

Projet Iolce

L’A/B Testing est une méthode consistant à créer plusieurs variantes d’un design, pour voir ce qui fonctionne le mieux auprès de l’utilisateur. Le but final est de répondre au mieux à ses attentes et obtenir un taux de conversion conforme aux attentes clients.

Pour ce test, j’ai choisi de reprendre le design d’un de mes projets: Iolce, réalisé à la Haute École Albert Jacquard de Namur en option Web et Mobile. Ce projet consistait à retranscrire la conférence “Evaluating Technology” de Jeremy Keith (web designer), au travers d’une page web au design pertinent.

Introduction: le design de base

Cette version est celle que j’ai rendu aux enseignants. Je me suis concentré sur la demande: apporter du rythme dans la lecture des paragraphes. J’ai alors proposer un design simple, permettant de mettre en valeur le contenu textuel.

Première version du design. Lien: http://juliendebrauwer.fr/projets/iolce/

Première version: suivre les conseils

Suite au rendu de la version de base, les enseignants m’ont apporté quelques conseils de mise forme, pour me permettre d’améliorer mes futurs travaux. Voici donc la première version, ou version A, créée pour le test.

Modifications apportées:

  • Photo du conférencier centrée par rapport au bloc d’introduction;
  • Les deux encadrés [“Une nouvelle couche: le software”] et [“Service workers” et “Web components”] ont été revus pour qu’il y ait le même écart entre l’encadré et son contenu;
  • Les chiffres relatifs aux quatre grandes questions de la conférence ont été changé de couleur pour créer un rappel. Cela pour répondre à la loi de similarité des principes de la Gestalt;
  • L’alignement des listes d’outils de développement et de bibliothèques web a été revu pour faciliter la lecture;
  • Enfin, les guillemets de ce projet ont été adapté à leur contexte typographique, pour satisfaire les utilisateurs les plus intransigeants.

Deuxième version: plus de visuels

Pour cette deuxième version, la version B, le but est d’apporter plus de visuel dans le projet, en essayant de conserver la mise en avant du contenu de texte. Il m’a été conseillé d’ajouter du visuel dans les blocs gris, qui permettent de séparer les grandes sections du projet et laisser de la respiration au lecteur. J’ai voulu aller un peu plus loin, afin de voir si mes choix sont pertinents.

Modifications apportées:

  • Ajout d’une légère ombre portée sur les blocs, pour créer une impression de profondeur dans le document;
  • Ajout de visuels dans les différentes sections du documents, en rapport au sujet concerné. J’ai ajouté ces mêmes visuels dans les blocs verts, pour renforcer l’idée de plans;
  • Photo du conférencier changée, avec un dégradé aux couleurs du projet (loi de similarité). Cette photo semble plus adaptée au sujet et à l’univers graphique document;
  • Ces visuels ont été placé à la suite selon un schéma “gauche/droite”, pour tenter de garder le rythme apporté au contenu de texte.

Conclusion: les chiffres

L’utilité de ce test est de connaître la version qui sera la plus appréciée par les utilisateurs. Voici donc le résultat d’un sondage réalisé sur un énorme panel de dix personnes:

Sur dix personnes, huit préfèrent la version B contre seulement deux pour la A.

Néanmoins, ce test est une amélioration successive du design. J’ai gardé pour la version B, ce que j’avais apporté pour la A. Il n’aurait peut être fallu garder que les améliorations de l’une ou de l’autre. C’est une chose à retenir pour mes tests futurs. Pour finir, sur les huit personnes qui ont apprécié la version B, certains n’auraient pas tout garder, comme la suggestion d’avant et arrière plans, obtenu à l’aide d’ombre portée.

Ces remarques nous apportent la preuve de l’efficacité de ce test. En proposant plusieurs versions d’un design, on bénéficie de divers retours qui nous permettent d’adapter nos choix pour mieux répondre aux besoins utilisateurs. Il faut créer, tester, itérer, tester à nouveau, c’est une boucle d’amélioration successive.

Beyond Tellerand — Düsseldorf, Mai 2017

Vous souhaitez regarder la conférence de Jeremy Keith?

Conférence (en Anglais) sur laquelle j’ai basé mon projet. Jeremy Keith s’interroge sur la technologie et les outils adaptés au monde du web design.

Merci d’avoir lu cet article et joyeuses fêtes à toutes et à tous!

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Human Centered Design — Haute école Albert Jacquard