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
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
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
