HCD A/B Testing

Pour ce nouvel exercice, j’ai décidé de réorganiser le site “Le fanal des animaux”.
Le site est une agression visuelle, pourtant le fanal des animaux est une association et un refuge pour les chats abandonnés où j’ai pu faire du bénévolat il y a plusieurs années.
La plupart des chats qui s’y trouvent appartenaient à des personnes âgées décédées, et personne ne voulait reprendre l’animal. La majorité sont donc adultes et cette asbl fonctionnent uniquement grâce aux dons que font certains bons samaritains.

Vous ne rêvez pas.

Plusieurs choses à changer : La charte graphique, la mise en place, retirer les gifs, créer un footer digne de ce nom. Allez, c’est parti pour l’A/B testing.

Version A

Version B

Les changements généraux

Tout d’abord, j’ai changé le contenu des onglets qui étaient assez mal organisé. J’ai voulu noter les points essentiels : Le logo, l’accueil du site, l’adoption, les contacts et le changement de langue. (Le site est en français et en néerlandais.)

J’ai supprimé également l’évènement mis en avant sur l’accueil du site en pensant le rencentrer dans l’agenda et l’envoyer par mail aux personnes inscrites à la newsletter.

J’ai rajouté un footer et réorganisé certains onglets qui se répetaient dans la direction de page malgré un nom donné différent, et aie rajouté une image de chat. J’ai également renommé les onglets afin qu’on discerne mieux leur contenu.

Je suis resté dans les teintes du logo (mauve) et aie joué sur l’opacité afin de marquer des nuances dans les catégories du site.

Dans la version A : J’ai mis en avant dans les onglets du menu principal l’adoption, car c’est l’objectif principal de cette asbl : faire adopter par des nouvelles familles les chats du refuge. Si l’utilisateur veut en savoir plus, il peut se diriger sur les onglets situé dans le site à sa droite dans une barre latérale.

La présentation du site se fait, accompagné d’une photo de qualité. Je pense que cette version est meilleure que le site de base, car les informations sont classées, rangées, on peut trouver plus facilement l’information que l’on cherche. J’ai rajouté une photographie trouvée sur https://unsplash.com car les photos de la galerie du centre sont de très mauvaises qualité.

L’utilisateur a également accès aux résaux sociaux grâce au footer, j’ai répété le menu “Adoption” et “Contacts” afin d’inciter l’utilisateur à se diriger principalement vers ces deux onglets.

Dans la version B : C’est une variante de la version A mais agancée autrement. Les textes du header sont dans une police plus grande et il n’y a pas de menu plus mis en avant qu’un autre. J’ai supprimé le bouton accueil et placé le logo en haut à gauche afin que l’utilisateur utilise le logo comme bouton d’accueil.

La bare latérale a viré à gauche, le texte a été centré sur sa colone de droite. L’image a été placé en bas afin de faire une plus grande distinction avec le footer.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.