Des icônes éparpillées un peu partout dans les menus — à l’aide
(blog.jim-nielsen.com)- La pratique de concevoir les interfaces en ajoutant une icône par défaut à chaque élément de menu se propage, et cela provoque un bruit visuel inutile
- Le système de menus de Google Sheets et du Tahoe de macOS en sont des exemples représentatifs, avec des icônes ajoutées à presque toutes les entrées de menu
- Pour certains menus, le critère de présence d’icônes est flou, et cela provoque une confusion d’alignement lorsqu’elles se chevauchent avec les indicateurs de bascule
- En revanche, des icônes facilitant la compréhension visuelle, comme dans le menu de disposition des fenêtres du Finder, sont utiles, d’où l’importance d’un choix contextuel
- Le problème est qu’Apple a renoncé au principe de ses propres lignes directrices d’interface qui recommandait d’éviter l’usage arbitraire d’icônes
Critique de l’abus d’icônes dans les menus
- L’approche consistant à joindre une icône à chaque élément de menu se diffuse comme réglage par défaut, avec pour effet une interface trop complexe
- De même que les menus “File”, “Edit”, “View” de Google Sheets, où toutes les entrées disposent d’icônes
- Cette approche mène à une habitude de créer des icônes pour combler l’espace
- Il ne s’agit que d’une banalisation mécanique qui ne prend pas en compte le contexte propre à chaque menu ni la charge cognitive
- L’utilisation d’icônes doit être choisie avec prudence selon le contexte
- Il faut se demander si l’icône améliore réellement l’utilisabilité ou ajoute de la confusion
- L’approche “mettons des icônes dans tous les menus” traduit un manque d’analyse
Les changements de macOS Tahoe
- macOS est resté longtemps éloigné de cette pratique, mais les icônes ont été introduites dans l’ensemble des menus avec macOS Tahoe
- Sur le menu Apple, ainsi que sur les menus “Safari”, “File” et “View” de Safari, seules quelques entrées affichent des icônes
- “Settings” en dispose, mais pas “Privacy Report”, ce qui montre un manque de cohérence
- Dans le menu File de Safari, seules certaines sections reçoivent des icônes et un retrait, et les autres non
- Dans le menu “View”, un marqueur de coche (toggle) et des icônes coexistent, ce qui perturbe l’alignement
- Le menu “View” de l’app Mail mélange également texte, bascule et icônes, créant une structure visuelle complexe
- Le motif de présence des icônes et la raison de leur choix ne sont pas clairs
Cas d’exception où les icônes sont utiles
- Quand les icônes permettent de comprendre immédiatement un arrangement spatial, comme dans le menu de tri des fenêtres du Finder, elles apportent un gain de clarté important
- Par rapport à des textes comme “Top Left”, “Bottom & Top”, “Quarters”, des icônes de disposition visuelle fournissent une compréhension immédiate
- Dans ces cas, les icônes constituent un cas d’usage positif qui augmente l’efficacité cognitive
- Autrement dit, les icônes devraient être un choix contextuel et non la valeur par défaut
Contradiction avec les guidelines Apple
- Les Human Interface Guidelines de 1992, 2005 et 2020 d’Apple précisent qu’il ne faut pas utiliser d’icônes arbitraires dans les menus
- Elles avertissent que cela peut induire une confusion visuelle et désorienter l’utilisateur
- Les “exemples à éviter” de ces guidelines ressemblent à ceux des menus actuels de macOS Tahoe
- Apple a ainsi méprisé ses propres principes
Conclusion
- Les icônes excessives qui apparaissent aux quatre coins des menus engendrent du bruit visuel
- Depuis qu’Apple a basculé vers une orientation “mettre des icônes dans tous les menus”, il devient plus difficile de défendre une réduction des icônes
- “S’il n’y a pas de raison valable, la valeur par défaut devrait être l’absence d’icône”
- On peut dire qu’on est à une époque où les menus sont envahis d’icônes et que cela est résumé de façon satirique par “À l’aide”
3 commentaires
J’ai l’impression que c’est bien parce que c’est une information non verbale, mais en même temps…
ça donne aussi l’impression d’une phrase générée par une IA…
Pour les applications qu’on utilise souvent, on a plutôt tendance à repérer des pictogrammes ou des couleurs que du texte. Selon la taille de l’écran, on peut choisir de les afficher en parallèle ou de n’utiliser que les icônes, mais en règle générale, je pense qu’il vaut mieux qu’il y en ait.
Avis Hacker News
Du point de vue de l’accessibilité et de la localisation, la combinaison icône + texte est idéale.
Utiliser des icônes simplement pour occuper de l’espace est problématique, mais si l’icône et le texte ne correspondent pas, cela augmente au contraire la charge cognitive.
Même dans des expériences où le texte était masqué, la combinaison icône + texte s’est révélée la plus efficace.
Utiliser les icônes de manière cohérente profite à la fois aux utilisateurs visuels et linguistiques, et aide aussi dans les environnements où le viewport est étroit.
Au fond, la vraie question est de savoir si l’on est prêt à investir dans le coût du design.
Quand lire du texte devient difficile, les icônes sont d’une grande aide.
Environ 20 % de la population américaine est analphabète, et ces personnes utilisent la technologie en mémorisant les icônes et la position des boutons.
Avec des icônes seules, il est difficile d’en saisir le sens, mais avec les deux, on a l’impression que tout le cerveau se met au travail.
Je pense que la présence d’icônes dans les menus sert à faire un appairage visuel avec les mêmes fonctions de la barre d’outils.
S’il n’y a pas d’icônes dans le menu, cela envoie le signal qu’il n’y en a pas non plus dans la barre d’outils.
Le menu et la barre d’outils étaient tous deux personnalisables, et chaque élément se composait d’une icône et d’un libellé.
De nos jours, il y a tellement de packs d’icônes (Font Awesome, Material Icons, etc.) que les développeurs ont tendance à choisir celle qui “ressemble à peu près”.
Notre équipe crée parfois des icônes sur mesure, mais comme cela coûte cher, la plupart du temps on se contente de chercher quelque chose d’acceptable dans l’immense bibliothèque de Google.
À l’argument “s’il n’y a pas de raison d’ajouter une icône, n’en mettons pas par défaut”, je répondrais que les utilisateurs à forte mémoire visuelle peuvent mémoriser les icônes des menus qu’ils utilisent souvent et les retrouver plus vite.
Personnellement, j’ai plutôt tendance à retenir les raccourcis clavier, donc je fais plus attention aux conflits de touches de raccourci qu’aux icônes.
Dans l’ancien Gmail, les icônes de lien et de pièce jointe étaient presque identiques, ce qui me trompait souvent, mais depuis le passage à une forme de trombone, c’est bien mieux.
Dans l’exemple, ce qui m’a le plus dérangé, c’est l’incohérence des retraits entre les sections du menu.
Si seules certaines entrées ont une icône, seules ces lignes sont indentées, alors que celles qui n’en ont pas ne le sont pas ; en revanche, quand il y a une coche, tout est indenté, ce qui crée un déséquilibre.
J’aurais espéré qu’Apple traite ce genre de détail avec plus d’élégance, donc c’est décevant.
Un dessinateur que je suivais autrefois insistait sur l’importance du design en silhouette, et les icônes actuelles souffrent du même problème.
Le tableau de bord AWS est rempli de bruit visuel, car les icônes s’y distinguent à peine les unes des autres.
À l’inverse, les designs qui distinguent à la fois les couleurs et les formes, comme dans les jeux de cartes, sont excellents car ils restent reconnaissables même pour les personnes daltoniennes.
Google Sheets s’en sort bien sur ce point, mais ce n’est pas le cas des autres exemples.
Voir cet article, l’effondrement des guidelines de design, comment restaurer les icônes.
J’ai l’impression que cela a fortement dégradé l’ergonomie de macOS.
Tous les onglets du navigateur se ressemblent tellement qu’on ne peut plus distinguer quelle tâche correspond à quel onglet.
J’aime bien l’exemple des icônes de Google Docs.
Même sans lire le texte, on peut repérer rapidement les types d’action comme ajouter/supprimer.
Je trouve d’abord grossièrement la zone grâce à l’icône, puis je vérifie la fonction précise avec le texte.
Cela réduit le temps de navigation dans le menu et diminue la charge cognitive.
Il doit sûrement y avoir quelque part un ticket “améliorer les icônes” enterré dans le backlog.
Dans l’exemple de Google Docs, trouver l’icône de lien est bien plus rapide que chercher “Insert Link”.
Des fonctions comme le retrait ou l’alignement sont aussi faciles à trouver grâce à des icônes standardisées.
Cela aide également les utilisateurs non anglophones.
Par exemple, quelqu’un qui maîtrise mal le japonais peut plus facilement trouver la fonction souhaitée grâce aux icônes.
Moi, j’ai tendance à mettre des icônes sur presque toutes les entrées de menu.
Résultat : moins de fatigue mentale et une sélection plus rapide.
Plus le menu est complexe, plus il peut être utile d’ajouter de la couleur pour mobiliser plusieurs canaux perceptifs.
Cela dit, les icônes doivent impérativement avoir une forme porteuse de sens.
Même si elles n’ont aucun sens, trouver le “deuxième élément” dans un même jeu d’icônes est bien plus rapide que lire le texte.
Quand seules certaines entrées ont une icône, elles donnent l’impression d’être spéciales ou d’être des fonctions plus fréquemment utilisées.
Je trouve cela bien plus utile que lorsque toutes les entrées ont une icône.
Cela fonctionne un peu comme un tooltip inversé.
Mais si l’on veut mettre en avant uniquement certains éléments, je pense qu’une différenciation visuelle cohérente ou un ordre d’alignement est plus efficace que des icônes.
Pour les éléments moins fréquents, on peut très bien accepter de les parcourir plus lentement.