- Défense appuyée des libellés textuels (text labels)
- Les interfaces modernes abusent des icônes, ce qui pousse les utilisateurs à dépenser trop de ressources cognitives pour en interpréter le sens
- Cela entraîne un ralentissement dans l’exécution des tâches et des expériences inefficaces à répétition
- Il n’est pas facile de transmettre un sens avec les seules icônes, et la plupart des icônes sont incomplètes sans libellé textuel
# Les problèmes posés par les icônes
1. La plupart des icônes ne transmettent pas un sens immédiatement clair
- Certains affirment qu’une « bonne icône » peut suffire à transmettre le sens, mais dans la réalité, interpréter n’importe quelle icône implique une charge cognitive
- Par exemple, l’« icône de corbeille » signifie assez clairement supprimer (Delete), mais l’« icône de crayon » est ambiguë
- Écrire ? Modifier ? Dessiner ? Créer ?
- Le contexte peut compléter le sens, mais cela exige là aussi une charge cognitive supplémentaire
2. Plus il y a d’icônes dans l’interface, plus la navigation devient difficile
- Plus il y a de fonctionnalités, plus il devient difficile de les distinguer uniquement par des icônes.
- Jusqu’à 5 à 7 fonctions, les icônes peuvent rester différenciables, mais à 15 à 20, des icônes similaires pour enregistrer/partager/modifier/créer risquent fortement d’être confondues.
- À mesure que la distinction entre icônes aux fonctions proches s’affaiblit, la lisibilité baisse.
3. Les icônes n’ont de sens qu’à l’intérieur d’une interface donnée
- Les utilisateurs passent d’un environnement d’interface à l’autre (navigateur web, système d’exploitation, application, etc.)
- Une icône utilisée dans une interface peut avoir un sens totalement différent dans un autre contexte
- En particulier lorsqu’on utilise des jeux d’icônes standards (Google Material Design, etc.), la confusion s’aggrave si une même icône sert à des significations différentes
# Les avantages des libellés textuels dans une interface
1. Le texte seul est aussi plus efficace
- Notre cerveau est optimisé pour reconnaître rapidement les mots.
- Les mots familiers peuvent être compris immédiatement sans lire chaque lettre une par une
- À l’inverse, la plupart des icônes demandent davantage d’effort, car elles imposent l’apprentissage d’un nouveau langage visuel
- Une liste de texte se lit de haut en bas, alors qu’avec des icônes seules, il faut scanner alternativement à l’horizontale et à la verticale.
- En particulier sur mobile, l’alignement d’icônes de forme similaire accentue la confusion visuelle.
2. Le texte rend les icônes plus efficaces
- Lorsqu’on ajoute des libellés textuels :
- le sens des icônes devient plus clair et la navigation plus rapide
- les designers sont moins contraints de faire porter toute la signification à la seule icône.
3. Les icônes peuvent devenir un élément visuel important dans une interface centrée sur le texte
- Les icônes jouent un rôle de repère visuel (visual anchor) et, combinées au texte, offrent l’interface la plus efficace
Trouver l’équilibre entre icônes et texte
- Lorsqu’on choisit entre icônes et libellés textuels, il faut tenir compte de la charge cognitive de l’utilisateur.
- Une UI composée uniquement d’icônes peut paraître propre au premier abord, mais se révéler inefficace en imposant à l’utilisateur un effort d’interprétation
- Chercher l’icône parfaite n’est pas la solution.
→ L’important est de combiner icônes et texte pour offrir la meilleure expérience possible.
# Principes clés pour un design UI optimal
- Ne cherchez pas à tout exprimer avec les seules icônes.
- L’ajout de libellés textuels améliore la lisibilité et l’accessibilité.
- Icônes et texte ne sont pas en concurrence : ils sont complémentaires.
- Tenez compte de la façon dont l’application ou le site web s’inscrit dans l’ensemble de l’environnement numérique.
- Concevez une interface que l’utilisateur n’a pas à « interpréter », mais qu’il peut « comprendre immédiatement ».
Conclusion : plus qu’une « belle UI », il faut une « UI facile à comprendre »
- Chaque fois que vous êtes tenté de créer une nouvelle icône ou de supprimer un libellé textuel, prenez un instant pour y réfléchir à nouveau.
- Un design vraiment épuré n’est pas celui qui « semble simple », mais celui qui « est facile à comprendre ».
3 commentaires
Les icônes ne devraient être utilisées que lorsqu’elles sont compréhensibles d’un seul coup d’œil, et il semble indispensable de prévoir aussi une fonction d’appui long pour afficher un texte d’aide.
Nous limitons au maximum les situations où nous n’utilisons que des icônes.
** sauf quand le client le demande lol;
Avis sur Hacker News