Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Patrons de navigation adaptative

Besoin d'aide pour mettre au point la navigation dans votre application ? Ces patrons sont un bon point de départ.

Les patrons de navigation adaptative qui suivent présentent différentes manières de prendre en compte la navigation sur de petits et grands écrans. Les menus de navigation en haut et à gauche sont courants sur les grands écrans mais ne sont pas souvent la manière optimale de présenter l'information sur les petits, à cause de la taille réduite. C'est pourquoi il est nécessaire de prendre en compte la présentation du contenu ainsi que la facilité de navigation pour toutes les tailles d'écrans.

Note : Le code HTML/CSS pour les patrons correspondants sera bientôt disponible.

Patron 1 : Menu en haut avec bascule

Dans ce patron, étant donné que la largeur de l'écran est réduite, les éléments de navigation du haut seront réarrangés jusqu'à manque de place. À ce moment, certains des éléments seront déplacés du haut de la navigation vers un menu déroulant. Dans les plus petits écrans, tous les éléments seront dans un menu à bascule et l'utilisateur doit taper pour le développer.

Vous pouvez classer les priorités des éléments pour vous assurer que les plus importants sont toujours dans la navigation supérieure.

Pour :

  • un bouton dans l'entête maximise l'espace pour le contenu sur un petit écran
  • les éléments importants restent visibles dans la plupart des tailles d'écrans et vous décidez de la priorité des éléments
  • la lisibilité des éléments de navigation est conservée avec un espacement adapté, en cachant automatiquement ceux qui ne rentrent pas

Contre :

  • les éléments de navigation peuvent être moins découvrables car certains sont cachés dans le menu déroulant ou à bascule
  • les utilisateurs pourraient ne pas voir que le bouton contient un menu de navigation sur les écrans de plus petite taille
  • une étape supplémentaire est nécessaire pour accéder aux éléments de navigation cachés

wide UI layout with top toggle menu and three by two layout of content blocks

moderate width UI layout with top toggle menu and two by three layout of content blocks

moderate but short UI layout with top toggle menu and size content blocks in a scrolling strip

narrow mobile layout with top toggle menu and smaller content blocks in two by three layout

Patron 2 : Menu du bas extensible

De manière similaire au premier patron, les éléments de navigation supérieure se réarrangent pour les petites largeurs jusqu'à ce qu'il n'y ait plus assez de place. À ce moment, certains éléments du menu de navigation supérieur vont migrer vers un menu déroulant. Vous pouvez classer les priorités des éléments pour vous assurer que les plus importants sont toujours dans la navigation supérieure.

Sur un écran plus petit, plusieurs éléments restent en bas de l'écran, et les autres sont cachés. L'utilisateur peut ouvrir le menu et sélectionner parmi les autres éléments de navigation. Vous pouvez sélectionner les éléments qui restent en bas.

Pour :

  • le menu extensible est facile à découvrir
  • les éléments importants sont toujours visibles et vous décidez de la priorité
  • la lisibilité des éléments de navigation est conservée avec un espacement adapté, en cachant automatiquement ceux qui ne rentrent pas

Contre :

  • une étape supplémentaire est nécessaire pour accéder aux éléments de navigation qui sont cachés
  • des éléments de navigation pourraient être moins faciles à repérer à cause de ceratins éléments masqués.
  • moins d'espace pour le contenu sur les écrans de plus petite taille

wide layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate layout with top horizontal menu bar, which moves to the bottom of the content when the layout gets narrower

moderate but short layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content so much.

narrow screen mobile layout sees the top menu bar moving to the bottom of the page so it doesn't get in the way of the content. It can be dragged up to reveal the menu options.

Patron 3 : Menu caché à gauche

La navigation principale est toujours à gauche sauf sur les écrans de petite taille, où ce menu est caché par défaut dans un bouton. Sur les plus petits écrans, quand l'utilisateur tape sur le bouton, le menu de navigation s'ouvre et affiche les éléments.

Pour :

  • afficher potentiellement plus d'éléments de navigation dans une navigation à gauche comparé à une navigation en haut
  • la plupart des éléments sont toujours visibles sauf sur les écrans les plus petits
  • un bouton dans l'entête maximise l'espace pour le contenu sur un petit écran

Contre :

  • les éléments de navigation peuvent être moins découvrables car certains sont cachés dans le menu déroulant ou à bascule
  • les utilisateurs pourraient ne pas voir que le bouton contient un menu de navigation sur les écrans de plus petite taille
  • une étape supplémentaire est nécessaire pour accéder aux éléments de navigation qui sont cachés

wide UI layout with vertical navigation menu down the left hand side

moderate layout with vertical navigation down the left hand side and narrower content area

moderate but short layout with vertical navigation down the left hand side and narrower content area

narrow mobile layout with hidden left hand menu, which can be dragged onto the screen using a special button to reveal the menu options.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : teoli, tregagnon
 Dernière mise à jour par : teoli,