mozilla
Vos résultats de recherche

    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

    Contributors to this page: tregagnon, teoli
    Dernière mise à jour par : teoli,