Options de menu Hamburger pour la navigation mobile

Si vous travaillez sur des produits numériques, vous avez déjà lu des dizaines d’articles décrivant comment et pourquoi la navigation dans les hamburgers sur les mobiles (et les ordinateurs de bureau!) Nuit aux métriques UX en raison de sa faible possibilité de découverte et de son efficacité. (Vous pouvez lire certains des meilleurs articles sur le sujet ici, ici, ici et ici.)

Heureusement, de plus en plus de sites et d'applications expérimentent des solutions alternatives plus efficaces pour résoudre ce problème. Aucune des idées énumérées ici n'est meilleure que les autres, leur viabilité et leurs performances dépendent évidemment du contenu et du contexte.

1. Onglets

Si votre site Web ou votre application comporte un nombre limité de sections et que les utilisateurs doivent pouvoir basculer rapidement entre ces sections, une solution de navigation par onglets pourrait être la solution.

Les onglets semblent être le modèle de navigation le plus simple. Cependant, vous devez tenir compte de quelques points lors de leur conception:

  • Vous ne devriez pas avoir plus de cinq sections à afficher.
  • L'un des onglets doit toujours être actif et doit être mis en évidence visuellement
  • Le premier onglet doit être la page d'accueil ou l'écran d'accueil et l'ordre des onglets doit correspondre à leur priorité ou à leur ordre logique dans le flux d'utilisateur.
  • Les onglets peuvent être affichés en haut ou en bas de l'écran, en fonction du contexte ou de la plate-forme (toutefois, les onglets du bas constituent désormais un motif dans Android).
  • Les icônes sans étiquettes ne fonctionnent que pour les actions courantes avec des icônes vraiment bien connues et pour les interfaces que les utilisateurs utilisent fréquemment (par exemple, les applications de médias sociaux).
  • Plus de conseils sur la conception de la navigation par onglets

Exemples: LinkedIn et Google Photos

Onglets de type icône uniquement sur LinkedIn et onglets icône + libellé de Google Photos

2. Onglets avec une option «plus»

Quand il y a plus de 5 sections principales, une solution pratique pourrait être de montrer les quatre sections les plus prioritaires et d’avoir une cinquième liste «tout le reste»:

Les principes de conception de cette solution sont fondamentalement les mêmes que pour les onglets simples. L’élément «plus» peut être lié à une page de navigation ou fonctionne comme un menu déroulant avec les sections restantes:

Vous pourriez dire que l'élément 'plus' n'est pas meilleur que le menu hamburger (c'est en quelque sorte caché et son étiquette ne fait pas référence à son contenu), cependant, si vous avez défini correctement la hiérarchisation, la plupart des utilisateurs rechercheront de toute façon pour l’un des quatre éléments visibles, de sorte que l’expérience de navigation de la majorité sera encore améliorée.

Exemple: Facebook

Les flux d'actualités, les demandes d'amis, les notifications et la recherche sont toujours disponibles dans l'en-tête, toutes les fonctionnalités restantes sont disponibles dans le menu

3. Menu de réduction progressive

Une version plus sophistiquée de la navigation ‘tabs + more’ consiste à concevoir un menu qui s’adapte à la largeur de l’écran, affiche autant de navigation que possible et place le reste sous un élément Plus si nécessaire:

Cela signifie que le menu Plus contient plus d’éléments avec une résolution inférieure - les éléments sont «sautés» sous Plus lorsque l’espace disponible est insuffisant pour les afficher. La flexibilité de cette solution offre une meilleure expérience que les ‘onglets + plus’, en particulier pour les tailles d’écran intermédiaires.

Exemple: BBC

Le menu principal de la BBC est rendu en fonction de la taille réelle de l’écran pour toujours montrer le plus d’éléments possible.

4. Navigation à défilement

Si vous avez un certain nombre d’articles de navigation sans grande distinction de priorités et qu’une catégorie «plus» constituerait un mauvais compromis, une autre stratégie consiste à répertorier tous les éléments dans une vue à défilement:

L'inconvénient de cette solution est que seuls les quelques éléments les plus importants sont visibles sans défilement et que tous les éléments restants ne figurent pas dans le canevas. Il s’agit toutefois d’une solution acceptable lorsque les utilisateurs doivent explorer le contenu, par ex. dans une boutique en ligne ou des catégories d'actualités.

En ce qui concerne la conception visuelle, vous devez vous assurer de fournir suffisamment de conseils visuels pour suggérer qu’il existe davantage d’éléments disponibles lors du défilement horizontal (par exemple, en atténuant et / ou en positionnant le dernier élément visible).

Exemples: Medium et Google

Il est possible de faire défiler les principales catégories sur des tailles d'écran plus petites sur Medium.comLes catégories de la page de résultats de recherche Google sont disponibles dans une vue déroulante

5. Menus déroulants

Un modèle peu commun mais intéressant consiste à utiliser des menus déroulants lorsque la visibilité et l'accessibilité des autres sections ne sont pas essentielles:

Dans ce cas, le menu déroulant a un double rôle: d’abord, il sert de titre de page et la flèche dirigée vers le bas suggère qu’il est possible de passer rapidement à des sections similaires. Bien que les options soient masquées dans ce cas, la conception de la liste déroulante suggère que la liste contiendrait des options correspondant aux frères ou soeurs ou aux enfants de la page en cours (et qu'elle devrait principalement être utilisée à cette fin).

Exemple: Barnes & Noble et Duolingo

Lorsque vous parcourez des livres, la catégorie actuelle et les options de navigation / filtrage sont toujours disponibles dans un menu déroulant sur bn.com.Duolingo n’est pas une interaction courante pour la plupart des utilisateurs, mais il permet de basculer rapidement d’une langue à l’autre via un menu déroulant.

Et parfois, étonnamment, le menu hamburger peut être un bon choix

Le principal inconvénient du menu de hamburgers étant sa faible possibilité de détection, il est recommandé d’envisager l’une des solutions de rechange lors de la conception du menu de navigation principal. Toutefois, lors de la conception des options de navigation secondaires, ce modèle pourrait constituer une solution appropriée.

Si les options principales sont disponibles sous forme d'appels aux boutons d'action bien visibles à l'écran, le menu hamburger semble un bon endroit pour toute la navigation secondaire:

Ce modèle peut être utilisé lorsque la navigation principale est conçue autour d'un flux d'utilisateur et que les options associées sont clairement disponibles à l'écran. Uber pourrait être un bon exemple:

Étant donné que tout dans cet écran est conçu pour demander une voiture, les options secondaires telles que l'historique et les paramètres ne doivent pas être disponibles de manière plus visible que dans un menu hamburger.

Google Translate ressemble vraiment à ceci:

Étant donné que la fonctionnalité principale (changement de langue et saisie de texte à traduire) est la partie la plus importante de l'écran, le menu masqué est un endroit idéal pour héberger des sections telles que Aide et Communauté.

Conclusion

Il n’existe pas de solution unique pour la navigation mobile, elle dépend toujours de votre produit, de vos utilisateurs et du contexte. Ce qui fonctionne bien pour les autres peut ne pas fonctionner pour vous et vice versa. Cependant, la base de toute navigation bien conçue est l’architecture de l’information: structure, priorités et libellés clairs en fonction des besoins de vos utilisateurs. Alors, pourquoi ne pas chercher dès aujourd'hui la navigation mobile la plus efficace pour votre produit?

Je suis sûr qu’il existe de nombreuses autres idées et modèles pour une navigation mobile efficace. Lesquels dois-je ajouter à cette collection? Envoyez-les moi dans la section des commentaires. (Btw, nous embauchons aussi!)