Human Centered Design — A/B Testing

Dans le cadre du cours d’HCD, il m’a été demandé de choisir un site et de le réorganiser de deux manières différentes.

L’A/B testing c’est quoi ?

C’est une méthode qui consiste à réaliser plusieurs variantes d’un site web. Ces variantes sont testées par les utilisateurs pour les utilisateurs. C’est-à-dire ? Et bien ces différentes versions sont mises en ligne afin que 50% des gens utilisent la version A et 50% la version B. Ensuite on mesure le taux de conversion et c’est le meilleure résultat qui sera proposé aux utilisateurs.

Oui mais, le taux de conversion c’est quoi ?

Sur chaque site nous mettons en place des étapes afin que l’utilisateur réalise une tâche. Par exemple pour les e-shop la tâche principale est d’acheter, de ce faite le designer va mettre en place des étapes afin que vous achetiez facilement. Le taux de conversion c’est la proportion de visiteurs du site qui vont réaliser cette tâche.


Trouver un site

La première chose à faire était de trouver un site. J’ai tout de suite pensé au site de ma ville, Chimay. Il est un peu fouillis, beaucoup d’informations, au centre, à droite, à gauche, partout !

home page du site de Chimay

Points négatif que j’ai souhaité optimiser :

  • la police d’écriture, c’est la première chose qui m’a marqué ! “ Oh mon dieu, pas la comic sans ms !!! ”
  • beaucoup de menus
  • liste d’actualités et d’évènements, beaucoup trop long
  • beaucoup d’informations de tout les côté

Réorganisation A

  • J’ai modifié la police en premier lieu !
  • J’ai supprimé le menu du dessus qui n’était pas très utile comme le “plan du site”, “contact” et “accessibilité” était présent dans le menu et “se connecter” se trouvait ailleurs sur la page.
  • J’ai utilisé différents vert avec la base du logo pour rendre le site plus vif, plus attrayant.
  • J’ai essayé de moderniser le site
  • J’ai gardé une colonne à gauche mais sous forme de menu: la recherche, le menu, le calendrier ainsi que la connexion.
  • J’ai regroupé dans un panneau les actualités et évènements afin d’avoir une page moins longue ou les utilisateurs peuvent passer d’une fenêtre à l’autre.
  • Même chose pour les deux menus “infos communales” et “infos pratiques” qui eux étaient précédemment sur la colonne de gauche.
  • J’ai gardé le rappel du menu dans le footer mais en plus petit et mieux aligné ainsi que le copyright.

Réorganisation B

Pour la deuxième réorganisation je n’ai fais que quelques modifications, ce site aillant aussi des utilisateurs plus âgés j’ai favoriser un design plus classique:

  • j’ai mis en avant le rouge du logo
  • j’ai changé l’image de la bannière
  • une simple barre de menu avec la recherche en plus (qui n’est pas dans le site de base)
  • toujours avec le même système de panneau, j’en ai ajouté une avec toutes les infos principalement de la colonne de droite sur le site d’origine: calendrier, se connecter, météo et tec.
  • Pour le footer j’ai simplement remis droit les onglets du menu pour une meilleure compréhension.

Sondage

J’ai réalisé un sondage où j’ai eu une trentaine de réponses, principalement des gens de Chimay. Pour celui-ci j’ai proposé 3 versions afin de voir la couleur qu’ils préféraient.

Version 1 (gauche) / Version 2 (centre) / Version 3 (droite)

Comme vous le constatez, 50% des gens préfèrent la version 2, celle en vert.

Mais pourquoi la version 2 ?

Parmi les réponses que j’ai eu, en voilà quelques unes:

“Le couleur me plaît beaucoup, ça illumine le site”
“L’arrière plan vert fonctionne très bien !”
“ Mise en page attrayante simple et efficace”
“ Le vert c’est cool car la région est verte, c’est rare en Belgique.”
“ Version un peu plus moderne et différente par rapport à d’autres site.”
“ Je trouve que les couleurs vont bien avec l’image, ça nous montre en même temps que le vert peut être synonymes de la couleur de la nature, ce qui reflète parfaitement l’image de Chimay. Le site est claire, les informations peuvent être nombreuse et ça a l’air facile de s’y retrouver”
“ La couleur est plus agréable à regarder. Le rouge est un peu agressif.”

Conclusion

C’est dommage pour le site de la ville qu’il ne soit pas clair pour ces utilisateurs, tant pour ceux de la région que pour ceux qui souhaitent visiter la ville. Il ne représente pas assez bien la ville, un design plus clair, plus simple et avec plus de couleurs plaît visiblement plus aux utilisateurs.


Like what you read? Give Aline Gillard a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.