Menu du site Web mobile. Le menu hamburger doit-il être à gauche ou à droite?
Il y a un certain temps, nous avons décidé de déplacer notre menu de hamburgers (je sais qu'ils sont mauvais mais nous avons eu une quantité stupide de sous-catégories) vers la droite. Le raisonnement derrière cela était basé sur l'accessibilité et dans les laboratoires intérieurs, il a prouvé que les gens le préféraient de cette façon.
Maintenant, nous effectuons quelques retouches concernant la bannière supérieure et la recherche sur mobile. En faisant des recherches, j'ai remarqué que littéralement tous nos concurrents ont leurs menus de hamburgers sur la gauche.
Est-ce que cela vaut la peine de sacrifier la convivialité (beaucoup plus facile d'accéder au menu) pour la cohérence (tout le monde a son menu de hamburger sur la gauche).
Il convient de noter que notre clientèle utilise fortement les appareils mobiles, en particulier les iPhones.
Il existe un sujet similaire, mais je ne pense pas qu'il couvre l'utilisation particulière de l'emplacement du menu hamburger sur les sites Web et non sur les applications. Le champ de recherche doit-il être à gauche ou à droite
Merci pour toutes les réponses, ce sujet a généré beaucoup d'informations précieuses et à la fin j'ai décidé de faire un test A/B concernant la position du hamburger et jusqu'à présent, je ne l'ai exécuté que pour une petite partie de mes clients et le hamburger à gauche a augmenté ajouter au taux de panier, le temps moyen sur le site et les pages vues par rapport au hamburger à droite.
Donc, ma conclusion est qu'à l'heure actuelle, les hamburgers de gauche surpassent les mêmes hamburgers de droite. Je crois toujours fermement que cela devrait varier d'une industrie à l'autre et de différentes sociétés.
J'espère que cela aidera les autres à rencontrer des questions similaires.
Remplacez menu hamburger par menu de navigation inférieur
Je sais que je ne réponds pas spécifiquement à votre question, mais j'ai décidé de partager les dernières recherches sur les menus de hamburgers et une alternative possible.
Dernièrement, il y a eu beaucoup de recherches sur la navigation mobile. Il s'avère que le menu de navigation inférieur créait plus engagement des utilisateurs pour Facebook par rapport au menu hamburger. Regardez une vidéo de Luke Wreblowski expliquant pourquoi la plupart des applications Google remplacent le menu hamburger par une navigation en bas.
Oui, la navigation Hamburger économise beaucoup d'espace précieux sur l'écran, mais:
Problèmes avec le menu Hamburger:
Découvrabilité réduite
Les actions disponibles de l'application sont cachées derrière le menu hamburger. Ils ne sont pas explicites et l'utilisateur doit effectuer une action pour découvrir que la certaine activité est disponible.
Coût d'interaction plus élevé
Même si vous savez qu'une certaine action est disponible, vous devez d'abord appuyer sur le menu hamburger, puis appuyer sur l'action tandis que la navigation du bas vous permet de sélectionner une action en un seul clic.
Les notifications concernant différentes activités ne peuvent pas être affichées en même temps
La spécificité des notifications est faible, voir les images ci-dessous pour l'explication:
![bottom navigation menu picture]()
vs ![hamburger menu picture]()
Pourquoi le menu de navigation inférieur?
Les utilisateurs peuvent se concentrer davantage sur les principales fonctionnalités de l'application car elles sont explicitement disponibles
Il stimule l'engagement des utilisateurs , selon les études décrites ici
C'est plus ergonomique car il est plus facile d'atteindre le bas que le haut d'un téléphone mobile (regardez les illustrations @Tarek).
Cas d'utilisation:
Cas d'utilisation de Redbooth :
- Les clients ont utilisé l'application plus fréquemment: le nombre de sessions a plus que doublé!
- Ils ont passé plus de temps dans l'application: le temps de session a augmenté de 70%
- Nous avons finalement vu plus de clients revenir, avec une augmentation de 65% des utilisateurs actifs quotidiens presque du jour au lendemain.
Spotify a supprimé la navigation pour les hamburgers
La société a testé la barre d'onglets sur iOS pour voir comment elle a eu un impact sur l'engagement des utilisateurs. Il a révélé que les utilisateurs avec la barre d'onglets ont fini par cliquer sur 9% de plus en général et 30% de plus sur les éléments de menu réels. Les tests ont également révélé que la réduction du nombre d'options dans la barre d'onglets à cinq augmentait la portée du contenu programmé de Spotify, selon la société.
Avant de la déployer plus largement, Spotify a testé la barre d'onglets avec des utilisateurs nouveaux et existants pour s'assurer qu'il n'y avait pas d'effets négatifs. Il a constaté que la nouvelle barre encourageait les utilisateurs à explorer davantage de types de contenu (par exemple, programmés par Spotify, auto-programmés, etc.) sans impact sur les métriques de rétention, d'engagement ou de consommation.
Conclusion
Lorsque Google et Facebook ont supprimé le menu hamburger (ils fondent leur décision sur des tonnes de données), il est logique de tester la navigation inférieure sur votre application. De plus, ce ne sont pas seulement Google et Facebook - d'autres recherches citées ici ont donné d'excellents résultats en remplacement de la navigation.
Lorsque les icônes de hamburger ont commencé à devenir omniprésentes, elles ont été placées sur le côté gauche.
Mais au fur et à mesure que les applications ont commencé à itérer, comme vous, l'icône a changé de côté, car il est plus facile de cliquer (étant donné que la majorité des gens sont droitiers et que le coin supérieur droit est légèrement plus accessible que celui de gauche).
Je dirais donc de le garder sur le côté droit si vous utilisez l'icône du hamburger.
Ma conclusion après avoir lu sur la structure de l'interface utilisateur dans Google Material Guidelines est à gauche :
Les icônes sur le côté droit de la barre d'application sont des actions liées à l'application. L'icône de menu ouvre le menu de débordement, qui contient des actions secondaires et des éléments de menu tels que l'aide, les paramètres et les commentaires.
Les actions principales doivent être affichées à droite et secondaires à gauche (probablement en raison de droitier ).
Donc ne l'affichez à droite que si le menu hamburger est l'action principale ou s'il est tout seul .
Si vous développez une application pour les langues de droite à gauche , inversez l'ordre.
Les applications sur les iPhones semblent avoir des hamburgers à gauche ou à droite - je pense que les utilisateurs sont habitués à l'un ou l'autre, donc le choix entre les deux dépend des autres éléments que vous avez en haut de l'écran.
L'application MSN News a une barre de recherche en haut et un hamburger à droite.
L'application Amazon possède une barre de recherche avec le hamburger à gauche.
Tant qu'il est en haut de l'écran d'un côté ou de l'autre, c'est la chose la plus importante.
Sur les iPhones, la navigation "Retour" se produit généralement dans le coin supérieur gauche.
Vous êtes fortement encouragé à prendre également en charge le balayage à partir du bord gauche (car le coin supérieur gauche est très difficile à atteindre pour un droitier utilisant une seule main sur un écran plus grand), mais vous devez toujours conserver le "Retour". la navigation dans cette position (comme indice visuel, comme moyen de revenir en arrière pour les personnes qui ne connaissent pas Swipe-from-left-Edge, et comme moyen de naviguer pour les personnes utilisant un écran plus petit, sont pour gauchers, ou utilisez le téléphone à deux mains).
Alors maintenant, vous avez un conflit entre la navigation "Retour" et le menu, ce qui signifie qu'il est plus logique de le mettre à droite. Si vous le gardez à gauche, vous pourriez:
- basculer entre le menu (si vous êtes sur la page "haut" de chaque catégorie) et le bouton Retour (si vous êtes sur une page secondaire), mais cela est incohérent et complique la navigation lorsque vous êtes dans un "intérieur" page (faire "Retour" en premier, puis menu).
- avoir les deux boutons l'un à côté de l'autre, mais uniquement lorsqu'il y a réellement une navigation "Retour" (pages intérieures), ce qui signifie que la mise en page est peut-être incohérente (selon l'ordre des boutons), et que vous ajoutez deux boutons très proches l'un à un autre lorsqu'ils sont déjà très difficiles à atteindre, même sur des téléphones à écran plus petit.
Maintenant, cela peut être différent si:
- vous n'avez jamais de navigation arrière (bien que ce ne soit vraiment pas si fréquent),
- ou vous savez en quelque sorte que vos utilisateurs utilisent uniquement/la plupart du temps l'application dans un contexte "stable" où ils peuvent utiliser les deux mains, par opposition à se déplacer, où l'utilisation à une main est répandue.
Bien sûr, la meilleure option pour votre cas spécifique serait d'effectuer des tests A/B!