HCD - A/B testing

Dans le cadre de notre cours de Human Centred Design à l’HEAJ, il nous a été demandé de faire un A/B testing sur le site internet de notre choix.

Qu’est-ce que l’A/B testing ?

Le A/B testing est test qui permet d’évaluer la clarté et la lisibilité d’une version d’un site web en la comparant à sa version d’originale. Le test consiste à mettre les deux versions à la disposition de deux groupes d’individus et de voir l’évolution du taux de rebond, selon chacune des versions.

illustration du A/B testing

Qu’est-ce que le Taux de Rebond ?

Le taux de rebond correspond aux nombres d’utilisateurs qui ont consulté la première page du site et qui l’ont quitter sans consulter d’autres pages.


Version A - Version Originale - Version B

Problème du Site

Dans la version originale de ce site, le principal problème vient de sa mise en page et son manque de titre. Les informations sont entassées les unes sur les autres. On peut rapidement arriver à se demander : A quoi correspond ce que l’on regarde ?

Version A

Pour la version A, j’ai opéré plusieurs changements aux niveaux de la grille, des titres et du footer.

Pour la grille, j’ai décidé de faire une colonne centrale sur laquelle j’alignerais les différentes sections. J’ai réduit le nombre d’affiches présentes sur la page et j’ai regroupé les différents éléments de l’agenda pour rendre la lecture plus claire.

J’ai ajouté des titres avec une taille plus élevée que l’original pour bien délimiter les différentes sections (Agenda, Coup de Coeur, Film en salle). J’ai ajouté des boutons pour amener l’utilisateur vers son objectif plus facilement et qu’il n’est plus à scroll à l’infini pour trouver le film qu’il cherche par exemple.

Enfin, pour le footer, j’ai réorganisé les contacts en colonne pour les rendre plus lisible et j’ai ajouté une newsletter.

Version B

J’ai opéré des changements assez similaires sur la version A, mais en m’orientant sur une colonne centrale beaucoup plus large.

Pour la section “En salle”, j’ai décidé de faire défiler les affiches horizontalement en ajoutant un bouton pour amener l’utilisateur à la liste des films en salle en ce moment.

Pour la section “Agenda”, j’ai voulu créer une hiérarchie dans les informations avec un des éléments en grand et les autres en plus petit sur le côté. Toujours en ajoutant un bouton pour amener l’utilisateur vers la page consacrée à l’agenda.

Et pour la section “Coup de coeur”, je l’ai agrandi pour harmoniser l’ensemble.


Like what you read? Give Juliette Martin-Cocher a round of applause.

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