Devrions-nous utiliser l'icône 3x3 9 points comme menu d'applications?
Alors que le Web continue d'évoluer et que des applications plus complexes émergent, il est nécessaire de permettre à l'utilisateur de naviguer rapidement entre les applications. Cette action est différente du menu de navigation que nous voyons dans les applications, l'icône controversée du menu hamburger qui est devenue une convention pour la navigation mondiale sur des écrans plus petits. Ici, nous regardons la navigation entre les applications.
Google utilise celui-ci pour permettre aux utilisateurs de naviguer entre les applications Google Maps, Google Play, Google Drive et de nombreuses autres applications Google.
Microsoft utilise également celui-ci pour permettre à leurs utilisateurs de naviguer entre les applications OneDrive, Word Online, Sway et d'autres applications Microsoft.
Mais il existe d'autres façons de transmettre le même message. Certains utilisent l'icône 4x4 16 points, et d'autres 4 points qui ressemble à une extension du menu 3 points plus. La question est de savoir si l'icône du menu des applications 3x3 9 points est celle à utiliser, car il semble que les plus grands joueurs utilisent cette icône comme métaphore pour basculer entre les applications.
Remarque: Cette question ne concerne pas le menu hamburger. Il s'agit de l'utilisation d'un menu d'applications.
BURGER VS GRID - contexte identique ou différent?
Je pense que le burger et la grille ont généralement des significations différentes, bien qu'ils ne soient encore formalisés nulle part (au moins, ils ne sont pas largement connus comme les normes ISO ou W3).
Le menu du burger est généralement plus sur la navigation de contenu dans un contexte. Vous êtes sur un site Web et accédez à différentes sous-sections de la page. Même site, texte/images différents. Ou vous êtes dans une application et vous souhaitez charger/enregistrer un fichier; c'est toujours la même application avec laquelle vous travaillez.
Mais le menu de la grille consiste à changer votre contexte. Vous ne modifiez pas seulement le contenu, vous ouvrez une toute nouvelle application, interface et sorte d'interaction. Dans les images que vous avez fournies, il est lié à d'autres applications dans la même suite, et dans le menu Android, cela va du système d'exploitation à l'application.
La répartition des listes et des grilles n'est pas encore universelle ( par exemple Android share ), mais j'ai remarqué un certain déséquilibre dans la mise en page où, et je pense que les icônes devraient prendre en charge cela. Bien sûr, dans Android partager l'icône <est plus représentative de l'action tan soit = ou #, mais vous avez l'idée.
Icônes 3X3 vs 4X4
Les icônes 3x3 et 4x4 sont interprétées à peu près de la même manière par les utilisateurs, mais l'icône bleue est considérablement différente et se lit comme un `` écran d'accueil '' basé sur ios.
Une grille 3x3 présente certains avantages par rapport au 4x4; c'est plus simple, il peut être plus petit et il correspond mieux aux tailles graphiques/icônes (8x8px vs au moins 18x18): 
et il garde le "trois-ness" du hamburger, il est donc un peu plus cohérent avec toutes les interfaces des mondes. Donc, par défaut, je dirais utiliser 3x3.
Cependant, si votre menu utilise 4 colonnes ou lignes d'éléments (4x5, 6x4, etc.) comme le tiroir d'application par défaut Android Android, alors vous avez une assez bonne raison d'utiliser une grille 4x4 car elle plus ressemble étroitement au menu réel.
Mais personnellement, c'est aussi loin que j'irais (donc pas de 5x5,6x6 etc.)
Éditer
Les gens devraient lire cet article sur le menu hamburger. Le menu hamburger fonctionne, bien qu'il existe souvent de meilleures solutions. De grandes entreprises comme Facebook et NBC ont constaté que c'était vrai et elles sont passées de burger navicon à une TAB BAR , une barre d'onglets avec des icônes + des mots semble donner les meilleurs taux de conversion. Les navigations complexes peuvent être imbriquées.
Version longue:
Discutons de l'icône 3x3 9 points et de l'icône hamburger (navicons) simultanément, car ce sont les deux techniques les plus controversées sur le Web en ce moment. Les icônes sont des implémentations de la conception mobile et donc facilement évolutives, elles nous permettent d'économiser une tonne d'écran et impliquent l'uniformité. Ils sont reconnus par la majorité des internautes. (L'icône a plus de 30 ans!). Jusqu'ici tout va bien.
MAIS
Les tests d'utilisabilité se sont révélés non concluants
Les concepteurs soutiennent que les icônes sont facilement reconnaissables par un groupe démographique plus jeune, d'autres suggèrent qu'un groupe démographique plus âgé le reconnaît, mais uniquement s'il possède des connaissances sur le Web. Les tests parallèles retournent souvent des résultats contradictoires.
Plus de clics. Ew. Il est admis que les utilisateurs ne reconnaissent pas les icônes comme un seul lien, probablement parce qu'il est conçu pour ressembler à un groupe de liens. L'icône hamburger ajoute une action supplémentaire à votre navigation; lorsqu'il faut un clic pour atteindre une page particulière, il en faut maintenant deux. * Astuce: entourer les icônes d'une bordure ou lui donner un arrière-plan, de sorte qu'il ressemble davantage à un bouton (skeuomorphic), entraînera plus de clics.
Mieux vaut inclure le "menu" Word.
Morten Rand-Hendriksen dit que nous devrions remplacer le burger par du texte. Cela se traduira par plus de clics, oui, mais ne résout pas le problème. Aussi, n'utilisez pas d'autres icônes (comme un Paperclip , ew).
- Masquer le contenu . D'un point de vue UX, les utilisateurs ne devraient pas avoir à entreprendre une action pour savoir quelles actions ils peuvent entreprendre. Les utilisateurs n'iront tout simplement pas à la recherche d'un lien dont ils ignorent l'existence.
TL; DR.
NON.
"Vous voulez un site" régulier ", mais pressé sur le téléphone de votre petite-fille."
Les icônes sont un symptôme de notre incapacité collective à embrasser de tout cœur tous les aspects de l'approche mobile-first.
Une solution
OP fait référence aux "plus gros joueurs", examinons comment Facebook a résolu ce problème.
- L'application Facebook a troqué son icône de hamburger contre une barre d'onglets , ce qui a permis d'améliorer les conversions.
- L'application Messenger. Ouais. Donc? Le gros problème à ce sujet est qu'ils avaient déjà une application parfaitement fonctionnelle et populaire avec laquelle ils auraient pu intégrer la messagerie. Facebook a compartimenté leurs fonctions, en concentrant le rôle de chaque application, ils sont arrivés à deux applications simples, au lieu d'une complexe.
La fonctionnalité de compartimentation entraîne un ensemble réduit d'options de menu et moins de besoin d'un menu navicon.
Donc, fondamentalement, vous devez simplifier et compartimenter.
Remarque: La réalité est que la meilleure solution dépendra des besoins de l'entreprise.
Les images elles-mêmes vous indiquent le format du menu. Dans ces cas, la disposition de la grille qui est courante dans les applications Web aujourd'hui, dans le cas de trois lignes, c'est généralement un menu avec un style de liste quelconque. Je pense que 4 points est définitivement exagéré, vous pouvez faire passer le message avec 3.
Cela a peu à voir avec le contenu et plus à voir avec la mise en page.
Je pense que cette icône particulière est connue sous le nom de "icône du tiroir d'application" Si je ne me trompe pas, la tendance a commencé avec le icône de tiroir d'application agissant comme lanceur d'applications sur Android et Blackberry, en particulier sur les téléphones mobiles Nexus et Samsung (au début)) Depuis lors, elle a été adoptée comme icône de lanceur pour une liste de applications.
Modifier (sur la base de mes commentaires et autres suggestions) - Je pense que l'un des principes fondamentaux de l'utilisation des icônes est que la compréhension d'un utilisateur d'une icône est basée sur les précédentes expérience. Au fil des ans, l'icône du tiroir d'application est devenue plus reconnaissable en tant que lanceur d'application. Cependant, je ferais quand même un test de reconnaissance. Et si possible, incluez-y une étiquette de texte.
Je l'éviterais ... pour l'instant
Parce que...
L'icône de la grille est aussi peu communicative que l'icône du hamburger. Le hamburger communique vaguement une liste de menus, tout comme la grille communique vaguement une matrice d'icônes. En termes de conception communautaire, les deux sont problématiques car ils supposent que l'utilisateur connaît la disposition de l'interface utilisateur du menu sous-jacent et peut le relier correctement à la conception de l'icône.
En raison de ces problèmes de communication, vous êtes désormais tributaire de convention et universalité/ubiquité comme principal véhicule pour transmettre le but de l'icône. Mais l'icône n'est pas assez universelle aujourd'hui, donc la convention n'est pas encore un moyen fiable de s'assurer que les utilisateurs comprendront ce que signifie l'icône.
Cela peut changer au fil du temps à mesure que l'utilisation de l'icône de la grille s'élargit, mais seul le temps peut le dire. Pour l'instant, je ne vois aucune différence substantielle entre les avantages/inconvénients de la grille par rapport aux avantages/inconvénients bien documentés de l'icône du hamburger.