5 alternatives intelligentes au menu Hamburger
L'espace écran est une ressource précieuse sur mobile. Pour relever le défi du petit écran tout en rendant la navigation accessible, les concepteurs comptent souvent sur la navigation derrière l’icône du hamburger, un exemple parfait de navigation cachée. Dans cet article, nous verrons pourquoi la navigation cachée crée de mauvaises UX et quelles sont les alternatives disponibles pour les concepteurs.
Pourquoi le menu Hamburger est mauvais pour UX
Sur mobile, la navigation visible est utilisée 1,5 fois plus que le hamburger
Si vous travaillez sur des produits numériques, vous avez probablement déjà lu des dizaines d'articles décrivant la façon dont le menu hamburger sur les téléphones mobiles fait mal aux indicateurs UX. L'inconvénient majeur est sa faible facilité de découverte, qui s'appuie sur des chiffres réels. Dans les études qualitatives, NNGroup trouvé cette navigation cachée est moins détectable que la navigation visible ou partiellement visible. Cela signifie que lorsque la navigation est masquée, les utilisateurs sont moins susceptibles d'utiliser la navigation. Les menus Hamburger entraînent l'engagement, ralentissent l'exploration et confondent les gens.
Alors, que devrions-nous utiliser à la place?
Bien qu'il n'existe pas de règle stricte pour les applications mobiles et les sites Web, une recommandation générale est d'utiliser l'une ou l'autre visible : les principales options de navigation s'affichent dans une barre de navigation visible ou certaines options de navigation principales sont visibles. et certains sont cachés sous un élément interactif.
1. Onglet Bar
Si vous avez un nombre limité de destinations de premier niveau sur votre site Web ou votre application, une solution de navigation par onglets pourrait être la solution. Lorsqu'un menu est visible en haut ou en bas, il s'agit essentiellement d'une publicité indiquant qu'une navigation est présente et que les utilisateurs peuvent voir les options de navigation dès le début.
Les onglets semblent être le modèle de navigation le plus simple. Cependant, quelques éléments doivent être pris en compte lors de la conception de ce type de navigation:
- La barre de tabulation permet d'afficher 5 options de navigation ou moins.
- L'une des options doit toujours être active et doit être visuellement mise en évidence, par exemple, en utilisant une couleur contrastante.
- Le premier onglet doit être la page d'accueil et l'ordre des onglets doit correspondre à leur priorité ou à leur ordre logique dans le flux utilisateur.
- Il est préférable d'utiliser des icônes avec des étiquettes pour chaque option de navigation. Les icônes sans étiquettes ne fonctionnent que pour les actions courantes, comme une icône en forme de loupe pour la recherche et pour les interfaces fréquemment utilisées par les utilisateurs (par exemple, Instagram).
Astuce: pour économiser de l'espace sur l'écran, la barre de navigation peut être masquée / révélée lors d'un défilement vers le bas ou vers le haut.
2. Onglet Bar avec l'option "Plus"
Lorsque vous avez plus de 5 destinations de premier niveau, une solution pratique pourrait consister à afficher les 4 sections prioritaires et à inclure un 5ème élément dans la liste des options restantes.
Les principes de conception de cette solution sont essentiellement les mêmes que ceux de la barre d’onglet. Il y a juste une exception: le dernier élément est l'élément «plus».
L'élément 'more' peut fonctionner comme un menu déroulant ou même un lien vers une page de navigation séparée avec les sections restantes. Dès le premier coup d'œil, cette solution n'est guère meilleure que le menu hamburger, car elle cache également le contenu et son label n'en dit pas trop sur ce qui se cache derrière. Si vous hiérarchisez correctement les options de navigation, cependant, la majorité de vos utilisateurs disposent à tout moment de 4 ou 5 options de navigation hautement prioritaires afin d'améliorer leur navigation.
3. Réduire progressivement le menu
Le menu de regroupement progressif, également appelé motif "Priorité +", est un menu qui s’adapte à la largeur de l’écran. Il montre autant de navigation que possible et place tout le reste sous un bouton "plus". Fondamentalement, ce modèle est une version sophistiquée de la barre de navigation, où le nombre d’options de navigation cachées derrière le menu «more» dépend de l’espace disponible. La flexibilité de cette solution offre une meilleure expérience utilisateur qu'une «barre de tabulation statique» + plus.
4. Navigation à défilement
Semblable aux deux modèles précédents, il s'agit d'une autre approche pour les listes plus longues. Si vous avez un certain nombre d'options de navigation sans grande distinction dans les priorités, par exemple les genres musicaux, vous pouvez répertorier tous les éléments d'une vue déroulante. En faisant défiler la liste, vous permettez aux utilisateurs de se déplacer d'un côté à l'autre.
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 autres sont hors de vue. Ceci est cependant une solution acceptable lorsque les utilisateurs sont censés explorer le contenu, par exemple les catégories d'actualités, les catégories de musique ou dans une boutique en ligne.
5. Navigation en plein écran
Tandis qu'avec d'autres modèles mentionnés dans cet article, la lutte consiste à minimiser l'espace occupé par les systèmes de navigation, le modèle plein écran adopte l'approche exactement opposée. Cette approche consacre généralement la page d'accueil exclusivement à la navigation. Les utilisateurs tapotent ou glissent progressivement pour révéler des options de menu supplémentaires lorsqu'ils défilent vers le haut ou vers le bas.
Ce modèle fonctionne bien dans les applications et les sites Web basés sur des tâches et des directions, en particulier lorsque les utilisateurs ont tendance à se limiter à une seule branche de la hiérarchie de navigation au cours d'une seule session. La canalisation des utilisateurs de pages de présentation générales à des pages détaillées les aide à comprendre ce qu'ils recherchent et à se concentrer sur le contenu d'une section individuelle.
Navigation en plein écran dans Yelp
En utilisant la navigation en plein écran, les concepteurs peuvent organiser de grandes quantités d'informations de manière cohérente et révéler des informations sans submerger l'utilisateur. Une fois que l'utilisateur prend sa décision sur l'endroit où aller, vous pouvez dédier l'intégralité de l'espace d'écran au contenu.
Conclusion
Avec les modèles de navigation pour mobile, il n'y a pas de solution unique pour tous. cela dépend toujours de votre produit, de vos utilisateurs et du contexte. 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. Aider les utilisateurs à naviguer devrait être une priorité absolue pour chaque concepteur d'applications. Les utilisateurs novices et débutants devraient être en mesure de comprendre comment se déplacer facilement dans votre application.