Modèles de navigation mobile : onglets, menus latéraux et parcours imbriqués

Commencer par la structure, avant le composant

Listez les destinations de l’application et regroupez-les selon la manière dont les utilisateurs les conçoivent. La recherche peut se trouver au même niveau que l’accueil ; le détail d’un élément enregistré appartient à la section des éléments enregistrés. Si les personnes passent souvent d’une destination de même niveau à une autre, gardez ces choix visibles. Si elles vont généralement d’une collection à un élément puis reviennent, une pile ou un parcours imbriqué exprime naturellement cette relation.

Distinguez les destinations des actions. Composer, partager, filtrer et trier agissent sur le contexte actuel ou le modifient ; ce ne sont généralement pas des endroits de l’application. Placez ces commandes dans une barre d’outils, un menu ou un contrôle contextuel au lieu de transformer chaque action en élément de navigation principal.

• Nommez les tâches répétées et repérez les zones qui doivent rester accessibles de partout.
• Dessinez les relations parent-enfant avant de choisir les contrôles de navigation.
• Veillez à ce que les destinations de même niveau restent cohérentes visuellement et dans leur comportement.

Comparer les trois modèles

Une barre d’onglets ou de navigation rend quelques destinations principales visibles et permet de passer rapidement de l’une à l’autre. Elle convient lorsque ces destinations sont de même niveau et que chaque libellé est reconnaissable sans explication. Indiquez la zone sélectionnée. Évitez de remplir la barre d’actions sans rapport ou de faire disparaître des destinations importantes dans un menu de débordement.

Un menu de navigation latéral peut contenir une liste plus longue de destinations regroupées, et parfois permettre de changer de compte ou d’espace de travail. Un menu temporaire libère de la place, mais impose une étape supplémentaire pour l’ouvrir et choisir, tout en masquant brièvement le contenu. Sur un téléphone compact, ce coût peut rendre les destinations fréquentes difficiles d’accès. Les recommandations actuelles de Material 3 pour Android privilégient une barre de navigation pour trois à cinq destinations sur écran compact, puis adaptent la navigation aux fenêtres plus larges ; il ne faut pas prendre les anciennes recommandations Material de menu latéral à partir de cinq destinations pour une règle universelle actuelle.

La navigation imbriquée ouvre une vue enfant depuis une liste, une carte ou un lien, avec un titre et un contrôle de retour qui préservent le chemin. Elle convient aux catégories, aux réglages, aux détails de produits et aux tâches en plusieurs étapes. Une imbrication profonde devient frustrante si la hiérarchie est masquée, si le retour fonctionne de manière incohérente ou s’il faut remonter plusieurs niveaux pour atteindre une section voisine. Ajoutez une recherche, des raccourcis ou une structure principale plus claire lorsque les personnes passent souvent d’une branche à une autre.

Choisir selon la fréquence des tâches et la taille de l’écran

Demandez-vous à quelle fréquence les personnes changent de zone au cours d’une séance typique. Un ensemble compact et stable de destinations très fréquentes favorise une barre visible. Si l’usage se concentre surtout sur une tâche ou la lecture d’un détail, réduisez la place prise par la navigation pour laisser de l’espace au contenu. Un menu latéral peut convenir aux sections moins fréquentes, à condition que les personnes puissent les trouver et revenir sans tâtonner.

Tenez compte de la taille de la fenêtre, de l’orientation et des conventions de la plateforme. Les recommandations actuelles d’Apple décrivent la barre d’onglets de l’iPhone comme une navigation de premier niveau et prévoient sur iPad une présentation adaptable entre barre d’onglets et barre latérale. Material 3 appelle son modèle compact « barre de navigation » et propose d’autres formes lorsque la largeur disponible augmente. Ces modèles ont un objectif commun, mais ne sont pas des composants identiques ; respectez l’emplacement, le comportement et l’adaptation natifs plutôt que de copier l’habillage d’une plateforme sur une autre.

Assurer une orientation et un retour fiables

Les icônes seules rendent la navigation plus difficile à apprendre et peuvent être ambiguës pour les personnes qui utilisent un lecteur d’écran. Donnez aux destinations des libellés visibles et courts, exposez sémantiquement l’état sélectionné et assurez-vous que les contrôles ont des noms accessibles et des zones tactiles utilisables. Vérifiez le contraste des états sélectionné et non sélectionné, les textes agrandis, la localisation et les interfaces de droite à gauche. Testez avec VoiceOver ou TalkBack et, si la plateforme le permet, au clavier ou avec un contacteur ; le focus doit se déplacer de façon prévisible à l’ouverture d’un menu, au choix d’une destination et à la fermeture d’une vue.

Le retour en arrière fait partie de la navigation. Distinguez Retour de Fermer : Retour remonte une hiérarchie, tandis que Fermer quitte une présentation temporaire ou modale. Préservez une position utile et les données saisies lors du passage entre zones principales ou du retour d’un détail. Si une destination est vide ou momentanément indisponible, conservez sa place et expliquez son état au lieu de la retirer ou de la désactiver sans explication. Pour une tâche irréversible ou coûteuse, rendez le chemin de retour clair avant la confirmation.

Un audit pratique de la navigation

Parcourez l’application en accomplissant une tâche réelle, puis recommencez avec les fonctions d’accessibilité activées. Notez si les personnes peuvent identifier la zone actuelle, atteindre une destination fréquente et se réorienter après une erreur de parcours. Comparez le même trajet sur un téléphone compact et dans une fenêtre plus large ; une mise en page adaptative doit préserver l’architecture de l’information lorsque le contrôle change de forme.

Utilisez la bibliothèque d’écrans pour comparer des exemples réels de sections et de parcours d’applications, puis évaluez chacun au regard des tâches de votre produit. Le modèle le plus solide reste lisible à mesure que l’application grandit et rend le retour évident après une interruption.

• Un nouvel utilisateur peut-il expliquer les zones principales à partir des seuls libellés ?
• Est-il facile de passer entre les destinations de même niveau et la sélection est-elle clairement indiquée ?
• Les écrans de détail présentent-ils un titre utile et un retour prévisible ?
• L’ouverture et la fermeture d’un menu latéral préservent-elles le contexte et déplacent-elles le focus d’accessibilité de façon logique ?
• Les libellés, les zones tactiles, le contraste et les états sélectionnés restent-ils utilisables avec un texte agrandi et les technologies d’assistance ?
• Peut-on revenir sans perdre une saisie en cours, la position de défilement ou sa place dans la hiérarchie ?
• La structure s’adapte-t-elle à un grand écran sans dupliquer des navigations principales concurrentes ?