UX CALENDAR – 17 DÉCEMBRE – Menus du jour

La navigation d’un site est un critère essentiel de sa réussite. Pour cela, les menus de navigation sont là pour guider efficacement les utilisateurs. Ils doivent être clairs pour que leur visite soit la plus fluide et agréable possible.

Le rôle des menus de navigation :

  • Structurer et hiérarchiser le contenu et les fonctionnalités du produit
  • Mettre en avant les fonctionnalités essentielles
  • Simplifier le parcours utilisateur

À l’ère du “mobile-first” où l’UX mobile est un enjeu phare, nous allons découvrir ensemble les différents types de menus de navigation mobile les plus utilisés.

#1 Le Tabber ou Tab Bar – un grand classic

Le tab bar, menu généralement placé dans la partie inférieure de l’application est de loin le plus répandu. Son design classique permet à l’utilisateur de naviguer d’une seule main, ce qui est l’une des raisons de sa popularité.

Avantages : Il affiche clairement le point d’entrée et les fonctionnalités les plus importantes.

Inconvénients : Face à un grand nombre de fonctionnalités, ce modèle semble moins approprié.

source : https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction

#2 La navigation en grille (“Grid Navigation”) et carrousel

La navigation en grille rassemble les points d’entrées principaux sur la page d’accueil. Cependant, son design ne permet pas aux utilisateurs de voir le contenu du premier coup, ce qui rend leurs choix plus difficiles. De moins en moins d’applications utilisent ce type de menu de comme navigation principale, il reste néanmoins intéressant pour le design de table des matières de page secondaire ou point d’entrées d’outils.

Avantages : Ce type de navigation est simple mais pas complexe à mettre en place. Son efficacité peut être optimisée en le rendant plus clair et évident.

Inconvénients : Le choix des couleurs est primordial. Un design trop sophistiqué pourrait engendrer une fatigue visuelle de l’utilisateur.

source : https://dribbble.com/shots/14723386–54-Bonsai-Gardening-99-Days-in-the-Lab

#3 Le tiroir (“Drawer”), “Flyout” ou menu caché

Le menu tiroir est une bonne alternative au tab bar qui limite le nombre de fonctionnalités. Le problème est résolu en réorganisant les éléments interactifs verticalement et en masquant une partie de la page en cours.

Avantages : Il libère de l’espace et permet aux utilisateurs de se concentrer sur la page en cours. 

Inconvénients : Il ne convient pas aux utilisateurs qui souhaite passer rapidement d’une catégorie à une autre (ex: en e-commerce).

source : https://dribbble.com/shots/3661919-Navigation-Drawer-Concept

source : https://dribbble.com/shots/4731003-Airbnb-Menu-transition-Mobile

#4 Le menu gouvernail (“Rudder”) ou Tab bar plié
(“Folding Tab Bar”)

À mi-chemin entre le tab bar et le bouton flottant, le nom de ce menu est inspiré du gouvernail de navire avec d’autres boutons de commande de chaque côté. Il est placé et structuré comme le tab bar classique mais libère de l’espace à d’autres fonctionnalités une fois plié.

Avantages : Tout comme le tab bar, il met en évidence le point d’entrée des fonctionnalités principales. De plus, d’autres fonctionnalités propres à la page active peuvent s’y ajouter.

Inconvénients : Les mêmes que le menu tiroir. il en convient pas aux utilisateurs qui souhaitent naviguer rapidement d’une catégorie à une autre.

source : https://dubaimonsters.com/blog/create-a-functional-mobile-navigation-menu/

#5 Le bouton flottant (“Floating Action Button – FAB”)

Un bouton d’action flottant (FAB) est un bouton circulaire qui déclenche l’action principale dans l’interface utilisateur de votre application. 

Son nom est employé pour la première fois par Google dans Material Design.

À la différence du menu gouvernail, son emplacement et sa structure sont libres,
ce qui permet d’activer plus de fonctionnalités.

Avantages : Il donne la possibilité d’intégrer un plus grand nombre de fonctionnalités.

Inconvénients : Il ne convient pas aux utilisateurs qui souhaitent jongler d’une catégorie à une autre instantanément. De plus, en absence de légendes, l’iconographie peut être difficile à comprendre pour certains utilisateurs.

source : https://dribbble.com/shots/3908815-Floating-button

#6 Navigation combinée

Afin de pousser les limites de certains types de menus, les designers n’hésitent pas à combiner plusieurs modes de navigation pour une meilleure efficacité. En voici quelques exemples :

Tabber + Rudder

source : https://dribbble.com/shots/13986315-Floating-Button-File-Upload

Tabber + Floating Action Buttons

source : https://dribbble.com/shots/5722292-Tabbar-Animation/attachments/11019477?mode=media

Grid + Rudder

source : Alex Permyakov – https://freefrontend.com/css-menu/

 

“That’s not my name !”

Mini jeu : Nommés à tort, ces menus “hamburger” sont en réalité appelés autrement. Sauriez-vous retrouver l’origine de leurs appellations ?

Cliquez pour retourner
Le menu Bentô

Cliquez pour retourner
Le menu "Burger"

Cliquez pour retourner
Le menu "Kebab"

Cliquez pour retourner
Le menu "Meatball"

Cliquez pour retourner
Le menu "Döner"

Cliquez pour retourner
Le menu "Burger végé"

Conclusion

Les designers sont de plus en plus conscients de l’importance du design des menus de navigation dans le but d’améliorer l’expérience utilisateur. 

Que ce soit sur Android ou iOS, le menu Hamburger est progressivement remplacé par le menu Tab Bar, qui fait son grand retour depuis son âge d’or en 2008.

Pour les rendre performants et innovants, les designers exploitent toutes les possibilités techniques en intégrant des icônes plus grandes et plus claires.

De nouvelles idées naissent tous les jours, orientées vers une navigation simplifiée et une meilleure ergonomie.

Et vous, que proposez-vous au menu aujourd’hui ?

 

 

Sandra LE UI-UX Designer @UX-Republic

 

Nos prochaines formations