Human Centered Design — A/B Testing

Dans le cadre de notre cours de HCD, il nous a été demandé de réorganiser le site web de notre choix en fonction de la méthode de l’A/B Testing. Cela consiste à proposer 2 versions d’un design aux utilisateurs. Celle qui obtiendra les meilleurs résultats sera retenue comme version définitive.

Voici un exemple d’A/B Testing

Le site d’origine

J’ai choisi de prendre lesecranstourcoing pour site, c’est le site web d’un cinéma présent dans la ville de Tourcoing (Nord de la France).

Screenshot du site http://www.lesecranstourcoing.com/

On constate, en parcourant cette capture d’écran, des problèmes au niveau de la mise en page.

En effet, dans un premier temps, on remarque que la typographie du 1er titre est rongé par la barre de navigation. Elle même rogner par une barre d’onglet mal disposé à droite du site. Cette barre est un amas de menus mêlés à des publicités pour le site.

Dans un second temps, on observe un problème au niveau de la hiérarchisation du contenu. Les catégories sont mal délimitée au centre du site. La rubrique événements est plus importante de celle des films à l’affiche. Les marges aussi sont trop importantes.

En conclusion, le site est trop confus et il ne parvient pas à captiver les utilisateurs.


Réorganisation n°1 :

Pour cette première réorganisation, j’ai décidé de mieux segmenter le site afin d’apporter une meilleure lisibilité pour les utilisateurs. J’ai enlevé la barre d’onglet de droite (trop confuse) pour la remplacer par un menu hamburger qui va permettre de retrouver les infos pratiques… De plus, la barre de recherche est maintenant la première chose que l’utilisateur va voir. Enfin, comme le site doit disposé d’un listing de films important, j’ai opté pour des scrolls horizontal qui permettent de gagner de la place.

Réorganisation n°2 :

J’ai réalisé ici une deuxième réorganisation. Comme pour le premier, les couleurs respectent l’univers graphique du site, le footer est plus clair(contact, newsletter…)et les marges ont été raccourcis. J’ai décidé d’ajouter un bloc d’annonces de nouveautés juste en dessous de la barre de menu. Cela rend le site plus agréable. L’ancien bloc “Cette semaine” est devenu “Sorties de la semaine” contenant seulement les nouveauté, plus restreint afin d’éviter les redondances. Pour chaque affiche, il y a la possibilité en passant la souris d’obtenir plus d’informations, d’accéder à la séance. Enfin, pour mettre en avant la partie événement, j’ai décidé d’appliquer une “catch phrase” à chacune.

Conclusion

Chaque changement, même le plus minime est susceptible de faire toute la différence au niveau de l’expérience utilisateur. Le test utilisateur est donc primordial car il permet de connaitre la version la plus ergonomique, claire et qui marchera le mieux .

Like what you read? Give Carine De Castro a round of applause.

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