Audit d’ergonomie

L’exemple des bibliothèque de la ville de Marseille

Souvent, un client vient me voir, m’envoie le lien vers son site et “voilà! Je dois refaire mon site et je veux que ce soit joli. Tu peux faire quelque chose?”

Tout le monde préfère que ce soit joli mais parlons plutôt fonctionnalité parce que c’est la première chose dont on doit se soucier. Est-ce que le site est intuitif, simple à utiliser? Est-ce que l’utilisateur trouve les informations qu’il recherche facilement? D’ailleurs, d’un point de vue utilisateur, quelle est l’information à mettre en avant? Qu’est ce qu’il cherche en visitant ce site?

Autant de questions essentielles à se poser avant de se lancer dans la création ou la refonte d’un site internet parce que les réponses qui seront apportées vont déterminer la façon de construire le site internet.

Quand il s’agit de refondre un site internet, l’audit d’ergonomie est une étape essentielle qui permet d’avoir des éléments concrets de discussion et des pistes d’amélioration.

Comment ça se passe?

La meilleure façon de tester l’ergonomie d’un site est déjà de définir succinctement le profil de l’utilisateur type avec un persona rapide. Qui est l’utilisateur (un homme, une femme? Où habite-il? Que fait-il comme métier? Pourquoi visite-il ce site? Quel est son but? Comment a-t-il découvert le service? Est-ce qu’il veut acheter quelque chose? Quelle est sa problématique principale?). Cela nous permettra de créer un persona mais aussi un scenario d’utilisation du site internet pour comprendre si le site répond facilement à la demande de l’utilisateur.

Prenons un exemple d’un site à l’ergonomie complexe: celui des bibliothèques de la ville de Marseille. Et définissons rapidement un persona: je suis Cécile, j’habite à 20 minutes à pieds de la bibliothèque principale et je veux savoir combien de livres j’ai le droit d’emprunter avec ma carte de bibliothèque.

Quand ce persona est défini, il est temps de passer aux tests utilisateurs. En règle générale, je demande à de gentils volontaires de mon entourage de tester le scénario d’usage.

Brisons la règle n°1 du design et imaginons que je suis l’utilisatrice. Je me rends sur le site de la bibliothèque pour savoir combien de livres je peux emprunter.

1- l’URL du site: www.bmvr.marseille.fr

C’est assez illisible pour un utilisateur. Qu’est ce que BMVR? (J’imagine que c’est l’acronyme de la bibliothèque principale, l’Alcazar: Bibliothèque municipale à visée régionale). Mais dans ce cas, pourquoi l’utiliser pour toutes les bibliothèques du réseau?

Proposition d’url: www.bibliothèques.marseille.fr

2- le header:

Le header est assez clair avec le logo des bibliothèques, les liens vers les réseaux sociaux, un call-to-action (CTA) principal “s’inscrire” et un call-to-action secondaire “Mon compte”.

Il me semble qu’il y a quelques problèmes d’alignement et de taille de logo. Un petit tour sur Sketch et il n’y a plus de doute possible:

Le logo Bibliothèques de Marseille ne fait pas la même taille que le CTA principal. Les logos sont alignés vers le haut et les écritures sont décalés. L’espace entre les deux logos et le bord de la page ne sont pas les mêmes: 8px pour le logo bibliothèques à gauche et 1px pour le logo “Mon compte”. Je ne suis pas la plus pixel-perfect des designer, mais ces alignements aléatoires nuisent à la cohérence générale du site.

Proposition:

3- Nav bar

C’est là que les ennuis commencent en termes d’architecture de l’information. Revenons à notre scénario d’usage: je veux savoir combien de livres je peux emprunter (qui est tout de même une question légitime quand on se rend à la bibliothèque!). Et là, c’est le drame. Les catégories ne me paraissent pas très claires. Qu’est ce qui différencie “En ligne” de “Prêt numérique”? Que trouve-t-on dans “Sitothèque”?

C’est pour moi la principale difficulté d’ergonomie et de navigation sur ce site. L’architecture de l’information est vraiment complexe et les labels des catégories ne sont pas harmonisés. J’ai du mal à proposer quelque chose sans avoir fait des recherches utilisateurs très poussées, mais d’un point de vue utilisateur, j’aurais besoin de:

• accéder aux informations concernant ma bibliothèque (adresse, horaires d’ouvertures, agenda)
• accéder aux ressources numériques proposées par le réseau de bibliothèques de la ville de Marseille (prêt numérique, presse en ligne, sitothèque et espaces d’autoformation)
• rechercher une ressource dans le catalogue pour vérifier sa disponibilité dans le réseau

Je proposerais donc 4 catégories pour fluidifier la navigation:

• Accueil
• Ma bibliothèque
• Ressources en ligne
• Catalogue en ligne

Cela permettrait de simplifier les labels. Je serais très curieuse de faire un card sorting avec des utilisateurs pour comprendre comment ils utilisent le site et quelle est la façon la plus simple de leur donner de l’information.

A ce stade de l’audit d’ergonomie, je n’ai toujours pas de réponse à ma question: “Combien de livres je peux emprunter avec ma carte de bibliothèque” et la barre de navigation ne m’offre pas de catégorie claire pour accéder aux conditions de prêt.

4- Hero zone

Ma première remarque est que le texte sur l’image est coupé et donc illisible. La barre de recherche est claire et centrée. Je ne suis pas sûre que le contraste soit suffisant, notamment pour les personnes en situation de handicap visuel.

Le menu à gauche me permet d’accéder aux informations que je recherche: quels sont les services que propose la bibliothèque (et notamment les conditions de prêt). Dommage que les catégories FAQ et Nos services ne soient pas disponibles dans la nav bar, parce que ce sont des informations utiles aux usagers des bibliothèques.

5- La page Nos services

Tout de suite, on remarque des problèmes d’ergonomie:

• un rectangle noir d’affiche sous l’image principale. A priori c’est un breadcrumb qui permet de savoir où l’on se trouve sur le site. Dommage qu’il soit recouvert d’un rectangle qui le rend illisible.
• Ce breadcrumb est redondant avec le menu plus haut Accueil > Services
• La couleur de police jaune sur fond blanc est un cauchemar de lisibilité, notamment pour les personnes en situation de handicap visuel, ce qui est problématique pour un site de service public
• L’architecture de l’information n’est pas claire. Que puis-je faire sans carte, avec une carte de consultation, avec une carte d’abonnement? Quel est mon intéret à m’abonner?
• Il n’est jamais mentionné que le service d’abonnement est payant à Marseille et gratuit sous certaines conditions.
• Et je ne sais toujours pas combien de livres j’ai le droit d’emprunter avec une carte de prêt.

Ma proposition serait donc de:

1- expliciter les services gratuits et sans inscription de la bibliothèque

2- de proposer une explication claire des avantages d’une carte de consultation et de prêt à la bibliothèque

3- afficher clairement les conditions de prêt et le prix de l’abonnement annuel

4- proposer un lien vers l’inscription en ligne (un service très efficace des bibliothèques)

5- renvoyer vers une bibliothèque de quartier pour toute question

Conclusion

On le voit assez facilement, un scénario d’usage permet de dégager très rapidement des difficultés d’ergonomie et de proposer des pistes d’amélioration d’un point de vue utilisateur.

Dans le cas du site internet des bibliothèques de Marseille, je crois que personne ne s’est jamais posé la question de savoir si l’info est disponible pour les usagers de la bibliothèque, à quel endroit et si cette information était pertinente.

Spoiler: je n’ai pas réussi à trouver les conditions de prêt sur le site des bibliothèques, ni sur mon compte utilisateur, ni même à la bibliothèque. La borne de prêt m’a tout simplement dit que j’avais trop de documents sur ma carte. L’expérience est souvent la meilleure façon d’apprendre!