Si tu as regardé mes vidéos Le défi UX de Nathalie, je préconise toujours d’afficher un libellé à droite de chaque picto au sein de la barre d’outils. Certains considèrent que ce n’est pas nécessaire, car tout le monde connaît ces pictos. Je t’explique pourquoi je maintiens cette préconisation.
La barre d’outils est une barre de navigation secondaire composée, comme son nom l’indique, de liens secondaires. Elle permet par exemple d’accéder aux fonctions ou pages suivantes :
Panier ;
Favoris ;
Contact ;
Recherche ;
Langue/pays ;
Réseaux sociaux ;
Connexion/Inscription ;
Modifier la taille de police ;
Etc.
Cette barre d’outils doit être positionnée en haut à droite. En fonction de la largeur de la barre de navigation principale, la barre d’outils peut être affichée au même niveau ou au-dessus de la barre de navigation principale.
Les pictos sont appréciés des concepteurs de sites parce que :
ils apportent un peu de vie sur une page avec beaucoup de texte ;
ils permettent de gagner de la place quand chaque pixel compte.
Sur les smartphones, la taille de l’écran est tellement réduite qu’afficher les libellés dans la barre d’outils réduirait la lisibilité des informations.
Dans les pages avec des tableaux affichant beaucoup de colonnes, les actions de type Voir, Modifier ou Supprimer sont très souvent représentées par un œil, un crayon et une poubelle.
L’absence de libellé dans ce cas précis peut être acceptée pour plusieurs raisons.
1. Le manque de place
Les scrolls horizontaux sont à bannir. Réduire le nombre de colonnes parce que la colonne d’actions est trop large n’aurait pas de sens.
2. La redondance de ces pictos
Répéter les mots Voir, Modifier ou Supprimer sur plusieurs lignes serait néfaste pour la lecture des données du tableau.
3. La fréquence d’utilisation
La régularité d’utilisation n’augmente pas la charge cognitive des utilisateurs.
4. La simplicité des pictos
Un œil, un crayon et une poubelle sont aussi explicites dans le monde physique que dans le digital.
Attention à bien dessiner les pictos pour respecter l’heuristique n°2 de Nielsen : adéquation entre le système et le monde réel.
Découvre mon article sur les 10 heuristiques d'utilisabilité de Nielsen.
Mais si je te préconise de toujours afficher les libellés dans les autres cas, et pas uniquement dans la barre d'outils, c’est pour plusieurs raisons.
1. Baisse de la charge cognitive
Souviens-toi de l’heuristique n°6 de Nielsen : reconnaissance plutôt que rappel. Ce critère universel indique que l'utilisateur ne devrait pas avoir à mémoriser les informations tout au long de son parcours.
Pour réduire sa charge cognitive, les informations importantes doivent être visibles ou facilement accessibles.
Mon conseil : en affichant un libellé après ton picto, ton utilisateur n’a pas besoin de réfléchir.
2. Inclusion des débutants
Les habitués du Web finissent par apprendre la signification des pictos utilisés sur de nombreux sites. Mais on ne naît pas avec cette connaissance.
On est tous débutants un jour.
Mon conseil : en affichant un libellé après ton picto, tu facilites l’apprentissage des conventions à chaque nouvelle génération.
3. Inclusion des personnes avec des problèmes de mémoire
En 2024, 1,3 million de Français seraient atteints de maladies neurodégénératives, dont celle d’Alzheimer. 225 000 nouveaux cas sont détectés chaque année et le nombre de malades devrait doubler d’ici 2050.
Je pense qu’il n’est pas raisonnable d’exclure autant d’utilisateurs.
Mon conseil : en affichant un libellé après ton picto, tu inclus les utilisateurs ayant ce type de maladie.
4. Inclusion des personnes avec des problèmes de motricité
La maladie de Parkinson touche près de 200 000 Français. Et contrairement aux idées reçues, elle ne concerne pas que les personnes âgées puisque 17% des patients ont moins de 50 ans.
Et les problèmes de motricité peuvent aussi concerner une personne en bonne santé qui s’est tout simplement cassée un doigt ou le poignet !
Un picto seul cliquable est très difficile à atteindre du premier coup, contrairement à une zone cliquable composée d'un picto et d'un libellé.
Mon conseil : en affichant un libellé après ton picto, tu inclus les utilisateurs ayant des problèmes de motricité au niveau de la main.
Quand il y a suffisamment de place, il convient d'afficher le picto, puis le libellé à droite.
Dans certains cas, si la place en largeur est réduite, il convient d'afficher le picto, puis le libellé en dessous.
Tu peux continuer de copier les mauvaises pratiques que l’on voit sur les sites de grandes marques.
Tu peux continuer de croire que les pictos d’une barre d’outils sont connus de tous.
Mais tu peux aussi appliquer mes recommandations.
Car suivre les conventions est un moyen ultra-simple d'améliorer la convivialité et l’efficacité d’une interface pour augmenter ton taux de conversion.
Cet article est issu d'une ressource publiée sur le site du Nielsen Norman Group, la référence mondiale en ergonomie digitale et en UX design.
Accès à l'article rédigé par Susan Farrell sur le site du Nielsen Norman Group
Accès à l'étude sur la maladie d'Alzheimer sur le site de La Fondation Recherche Alzheimer
Accès aux informations sur la maladie de Parkinson sur le site de l'Institut Pasteur
Les FAQ (Frequently Asked Questions) : un outil stratégique et incontournable pour améliorer l’expérience utilisateur.
Découvre cette astuce UX
Comment se fait-il que de nos jours, les 10 heuristiques de Nielsen créées en 1994 soient toujours aussi efficaces ?
Découvre cette astuce UX
Et si je te disais que pour créer un site ou une application mobile, tu avais juste besoin d'un papier et d'un crayon ?
Découvre cette astuce UX