Comment indiquer au mieux le menu de navigation sur mobile
Quelle est la meilleure façon d'indiquer le menu de navigation sur les appareils mobiles?
Je vois que cette icône à trois barres est beaucoup utilisée, mais les utilisateurs comprennent-ils vraiment ce que cela signifie?
Un bouton disant simplement "Navigation" ou "Menu" ne serait-il pas beaucoup plus efficace?
Les trois lignes représentent un menu sous forme de plusieurs liens empilés les uns sur les autres. Si ce n'est pas déjà une convention - il est très proche de devenir une convention de plateforme croisée représentant un menu. Jetez un œil à cette recherche d'image sur Google: bouton de menu mobile , et voyez que c'est la représentation la plus utilisée pour un menu sur un appareil mobile.
Et en regardant de près, voici comment différents appareils gèrent le bouton de menu ...
Android
iPhone - Application Facebook
Windows Phone - est différent. Il y a une vue panoramique bien connue où l'utilisateur glisse vers la gauche et/ou la droite pour accéder à un autre contexte de l'application, est le plus proche d'un menu de navigation:
Le téléphone Windows utilise également trois points [...] pour le menu "plus", mais ce n'est pas la même chose que l'iPhone et le bouton de menu Android Android.
Pour conclure: les trois lignes représentent le bouton de menu sur les appareils mobiles.
Référence
Un guide d'implémentation agréable et fonctionnel: Comment créer un menu déroulant "trois lignes" pour un site Web réactif dans jQuery .
La majorité des sites Web réactifs (tels que Starbucks, Facebook ou Path) utilisent l'icône à trois bandes horizontales. Une alternative pourrait être l'icône de la grille (selon la façon dont vous décidez de visualiser vos éléments de menu) ou les trois bandes horizontales de différentes longueurs avec un point, représentant la "table des matières".
Cet article répertorie quelques solutions intéressantes: des icônes ou des boutons étiquetés, illustrant les avantages et les inconvénients et montrant un site Web réactif de haut niveau qui les utilise.
http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/
Même si Facebook et d'autres sites populaires utilisent l'icône 3 lignes, cela devrait suffire à penser que les gens comprendront sa signification.
Je dirais que si l'accès à votre menu est important, vous devez utiliser un lien intitulé quelque chose comme "menu".
Dans Facebook par exemple, le menu est secondaire car la chose la plus importante dans son utilisation mobile est le post-flux.
Je trouve cette icône déroutante car elle est très proche du visuel utilisé sur le lien d'interaction "aveugle" lorsque vous déroulez le centre de notification ios. Je ne l'ai cependant pas "testé par l'utilisateur" pour voir si certains utilisateurs avaient le même malentendu sur l'icône.
Un bouton est toujours un bouton.
Les options, les paramètres, le rechargement et tous les autres boutons permuteront toujours le contenu de la page ou précéderont en action immédiate. Dans une ancienne métaphore n bouton change immédiatement l'état d'une machine (Allumer/éteindre le téléviseur, démarrer l'enregistrement, faire retentir le klaxon, augmenter la pression, etc.)
Si vous appuyez sur un bouton de menu, un menu s'ouvrira qui augmentera, améliorera mais modifiera la structure de navigation et peut-être masquera le contenu (état du système) dont l'utilisateur est conscient:
Où et comment cela se produira-t-il? Où montrera-t-il son contenu et de quelle manière? Quel contenu je regarde sera mis hors de vue?
Un menu est une forme de pré-état affichant littéralement plus de boutons, un état dans lequel le système (votre application) réside avant que l'utilisateur ne souhaite le modifier.
Ma suggestion serait d'indiquer symboliquement comment ou où le contenu de navigation sera affiché. De cette façon, votre bouton dit: "C'est ce que je vais faire."
ou
Edit: D'une certaine manière, les trois lignes résument les "boutons supplémentaires". Cela justifie son existence de l'icône, je suppose.
Je pense que cette nouvelle icône de 3 lignes, si elle tend vers une signification universelle en tant que "menu", doit encore inclure le texte de l'étiquette "menu" pour l'instant. Jusqu'à ce qu'il soit universel, vraiment universel comme une flèche, un point d'interrogation ou une icône de liste non ordonnée, l'icône de 3 lignes que quelqu'un appelle ici hamburger, ailleurs `` neticon '' ou en Asie comme symbole porte-bonheur `` qian '', ou par chrome comme "le hot-dog", sont toujours méconnaissables par le public habituel comme quoi que ce soit de plus standard que les minuscules 2 ou trois lignes au centre d'une barre de bordure qui dénote universellement "glisser" (bien qu'aucune des 3 appliquées) les icônes de ligne dans les applications gmail, youtube ou téléphone dénotent "glisser". Alors, qu'est-ce que c'est et comment attendons-nous que nos utilisateurs le sachent, surtout quand personne n'a encore de nom standard pour cela?
Quelque chose de similaire à la réponse de Benny
Cependant, cette icône à trois lignes (comme suggéré par Benny) est plus populaire et intuitive