Système de Navigation en Bas

Que fait Système de Navigation en Bas ?

Objectif

Le Système de Navigation en Bas fournit un cadre de conception standardisé, mobile-first pour les barres de navigation inférieures, les barres d'onglets et les docks d'actions persistants sur les interfaces web mobiles et les applications web progressives (PWA). Les appareils mobiles modernes avec de grands ratios d'aspect placent les en-têtes supérieurs hors de portée confortable à une main ("la zone du pouce"). La navigation en bas ancre les destinations principales de l'application et les actions de conversion critiques directement à portée naturelle du pouce de l'utilisateur.

Concevoir un système de navigation en bas efficace nécessite d'équilibrer la densité des éléments (3 à 5 éléments), la hiérarchie visuelle des états actifs/inactifs, le dimensionnement des cibles tactiles, le placement des badges indicateurs, les zones de sécurité de la fenêtre d'affichage (env(safe-area-inset-bottom)), les intégrations de boutons d'action flottants (FAB) et les règles d'adaptation transparente pour ordinateur de bureau. Cette compétence fait le pont entre la conception UX mobile et l'exécution technique dans le strict respect des normes d'accessibilité WCAG AA.

Cas d'Utilisation

• Application Web Mobile de Commerce Électronique : Offrir un accès immédiat en un tapotement du pouce à l'Accueil, la Recherche/Parcourir, les Éléments Sauvegardés, le Panier d'Achat (avec badge de nombre d'articles) et le Compte.
• Applications Web Mobiles SaaS et PWA : Structurer la navigation principale pour les applications de productivité mobile (par exemple, les Tâches du Jour, les Flux, Ajout Rapide [+], les Messages, les Paramètres).
• Plateformes Sociales et de Contenu : Gérer les changements fréquents entre le Flux d'Accueil, Explorer, Créer/Télécharger, les Notifications d'Activité et le Profil Utilisateur.
• Services Web à la Demande et Logistiques : Garder les onglets de statut principaux (Commandes, Carte de Livraison Active, Boîte de Réception, Profil) persistants dans la partie inférieure de la fenêtre d'affichage pendant le suivi actif.
• Opérations sur le Terrain et Formulaires d'Inspection : Ancrer les boutons d'action persistants (Sauvegarder le Brouillon, Télécharger une Photo, Soumettre le Formulaire) en bas de longs formulaires mobiles.

Quand NE PAS Utiliser

• Applications Web d'Entreprise Desktop-First : Pour les mises en page grand écran (>1024px) où les barres latérales verticales ou les barres d'en-tête supérieures offrent une efficacité spatiale supérieure, utilisez sidebar-navigation-system ou site-navigation-system.
• Changement de Contenu Intra-Page : Pour changer de vues ou filtrer du contenu à l'intérieur d'une section ou d'une carte de page spécifique, utilisez tab-ui-system ou segmented-control-system.
• Feuilles d'Action Contextuelles et Modales : Pour les panneaux superposés temporaires et spécifiques à une tâche qui apparaissent sur le contenu de la page, utilisez accessible-bottom-sheet-implementation ou overlay-and-dialog-system.
• Déclencheurs d'Actions Secondaires Flottants : Pour les boutons d'aide flottants uniques, les boutons de retour en haut ou les bulles de chat, utilisez sticky-and-floating-ui-system.

Entrées

1. Taxonomie d'Architecture de l'Information (IA) : Liste des destinations principales de premier niveau (3 à 5 éléments maximum) et leurs métadonnées d'icône/libellé.
2. Exigences de Notifications et de Badges : Spécifications pour les indicateurs de non-lu (badges ponctuels vs badges numériques de compteur).
3. Mise en Évidence de l'Action Principale (Optionnel) : Indication si l'emplacement central nécessite un bouton d'action flottant (FAB) surélevé pour les actions de création principales.
4. Jetons de Conception : Palettes de couleurs, jetons d'élévation/ombre, typographie fluide, jeux d'icônes et variables d'espacement (issus de accessible-color-system, elevation-and-depth-system et iconography-system).
5. Stratégie de Bureau Responsive : Choix du mode d'adaptation pour ordinateur de bureau (Masquer sur bureau, Ancrer dans la barre latérale ou Convertir en navigation d'en-tête).

Sorties

1. Spécification d'Anatomie de la Barre de Navigation Inférieure : Plan de mise en page détaillé définissant les largeurs des éléments, l'empilement vertical icône/libellé, les jetons de typographie, les coordonnées de placement des badges et les calculs de hauteur incluant les paddings de zone de sécurité.
2. Carte des Jetons d'État Interactif : Définitions de contraste couleur et états visuels pour les éléments Par Défaut/Inactif, Actif/Sélectionné, Hover, Focus-Visible et Désactivé.
3. Cartographie d'Accessibilité de la Zone du Pouce : Règles de placement spatial optimisant les onglets les plus fréquents vers les zones de portée centrale du pouce.
4. Directives pour les Zones de Sécurité et les Encarts de Fenêtre d'Affichage : Règles d'implémentation CSS utilisant env(safe-area-inset-bottom) pour les zones d'encoche des écrans mobiles sans bordure (Home Indicator iOS et barres gestuelles Android).
5. Plan de Transition Bureau et de Point de Rupture Responsive : Requêtes média responsive et règles de mise en page pour masquer ou faire transiter la barre inférieure sur les écrans de tablette et de bureau.

---

Flux de Travail

1. Établir la Quantité d'Éléments et la Grille Spatiale

Limitez la barre de navigation inférieure à 3 à 5 éléments de premier niveau :

• 3 Éléments : Distribution flexible à largeur égale (width: 33.33%). Meilleur pour les applications web compactes avec des vues principales distinctes.
• 4 Éléments : Distribution flexible à largeur égale (width: 25%). Équilibre idéal pour les applications mobiles e-commerce et SaaS.
• 5 Éléments : Distribution flexible à largeur égale (width: 20%). Limite maximale recommandée pour les largeurs d'écran mobiles (320px–430px).
• Règle des 5 : Ne jamais dépasser 5 éléments. S'il y a 6 destinations ou plus, regroupez les pages secondaires sous un onglet de menu "Plus" ou "Compte", ou déplacez les liens de moindre priorité dans un tiroir latéral.

2. Définir l'Anatomie Verticale et les Jetons de Hauteur

Construisez un conteneur inférieur fixe positionné en bas de la fenêtre d'affichage :

• Positionnement du Conteneur : Utilisez position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;.
• Hauteur de Base : Définissez une hauteur de contenu de base de 56px à 64px pour les barres d'onglets standard, plus padding-bottom: env(safe-area-inset-bottom, 0px) pour éviter l'occlusion tactile par les indicateurs d'accueil iOS ou les poignées gestuelles Android.
• Disposition d'Empilement des Éléments :
  • Taille d'Icône : Standardisez sur des icônes SVG 24x24px (iconography-system).
  • Typographie du Libellé : Utilisez une taille de police de 11px à 12px (font-size: 0.75rem; font-weight: 500; line-height: 1.2).
  • Espacement Vertical : Positionnez l'icône en haut (4px de padding supérieur), un écart de 2px entre l'icône et le libellé, 4px de padding inférieur.
  • Surface Tactile Minimale : Assurez-vous que chaque onglet offre une zone tactile pleine hauteur et pleine largeur (min-height: 48px, min-width: 48px).

3. Établir la Hiérarchie des États Actif et Inactif

Appliquez un fort contraste visuel entre l'onglet actif et les onglets inactifs :

• État Inactif :
  • Remplissage/Trait d'Icône : Couleur secondaire subtile (par exemple, var(--text-tertiary, #6B7280)).
  • Couleur du Libellé : Couleur de texte secondaire (var(--text-secondary, #4B5563)).
  • Poids de Police : Normal ou Medium (400 ou 500).
• État Actif / Sélectionné :
  • Remplissage/Trait d'Icône : Primaire de marque ou accent à fort contraste (var(--brand-primary, #2563EB)). Utilisez la variante d'icône remplie si disponible.
  • Couleur du Libellé : Texte primaire ou couleur de marque (var(--text-primary, #111827) ou var(--brand-primary)).
  • Poids de Police : Semi-gras (600).
  • Indicateur Actif (Optionnel) : Une bordure supérieure de 3px ou un indicateur en pilule (background: var(--brand-primary)), ou un remplissage de capsule d'arrière-plan subtil (var(--brand-subtle, #EFF6FF)).
• Exigence de Contraste : Assurez-vous que le texte inactif et le texte actif passent tous deux le rapport de contraste minimum WCAG AA (4,5:1 par rapport à la couleur de fond de la barre).

4. Intégrer les Badges et les Indicateurs de Notification

Les badges informent les utilisateurs des messages non lus, des actions en attente ou des quantités d'articles dans le panier :

• Positionnement du Badge : Positionnez les badges par rapport au coin supérieur droit du conteneur d'icône 24x24px de l'onglet (position: absolute; top: -2px; right: -6px;).
• Badges Ponctuels (Indicateur de Non-Lu) : Cercle solide de 8x8px (background: var(--badge-danger, #EF4444)).
• Badges Numériques (Indicateur de Compte) : Badge en pilule (height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);). Tronquez les comptes supérieurs à 99 en 99+.
• Texte Accessible : Incluez toujours un texte accessible uniquement pour les lecteurs d'écran à l'intérieur ou à côté du badge (<span class="sr-only">3 notifications non lues</span>).

5. Gérer les Zones de Sécurité de la Fenêtre d'Affichage et le Style de Surface

Assurez-vous que la surface de navigation inférieure reste lisible sur le contenu défilant :

• Flou d'Arrière-Plan & Translucidité : Appliquez un fond de surface translucide avec un filtrage d'arrière-plan (background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);). Pour le mode sombre, utilisez (background: rgba(17, 24, 39, 0.85)).
• Règle d'Encart de Zone de Sécurité : Utilisez CSS :

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
  }
  

• Dégagement Inférieur de la Page : Ajoutez un padding inférieur au conteneur du corps défilable principal égal à la hauteur de la barre inférieure + l'encart de zone de sécurité (padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))) pour éviter la troncature du contenu derrière la barre fixe.

6. Mettre en Œuvre l'Adaptation de Bureau Responsive

Les barres de navigation inférieures sont optimisées pour les écrans tactiles et semblent peu naturelles étirées sur de larges fenêtres d'affichage de bureau (>1024px).

• Stratégie de Point de Rupture :
  • Mobile (<768px) : Afficher la barre de navigation inférieure fixe.
  • Tablette (768px – 1023px) : Soit garder la barre inférieure centrée/contrainte (max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;) soit la convertir en en-tête supérieur.
  • Bureau (≥1024px) : Masquer la barre de navigation inférieure (display: none). Les destinations principales passent dans l'en-tête supérieur (site-navigation-system) ou une barre latérale verticale (sidebar-navigation-system).

---

Règles de Décision

Choix du Motif de Disposition de la Barre Inférieure

Motif	Structure des Éléments	Cas d'Utilisation Idéal	Interaction Clé
Barre d'Onglets Standard	3 à 5 éléments de largeur égale avec icône + libellé texte.	Navigation e-commerce, SaaS, portails de contenu.	Navigation immédiate en 1 tapotement de vue.
Dock FAB Central	4 onglets + 1 bouton d'action central surélevé (par exemple, "+ Créer").	Publication sociale, suivi de tâches, applications de création multimédia.	Le bouton central ouvre une feuille/modale de création ; les onglets externes naviguent entre les vues.
Barre d'Icônes Étiquetées	4–5 éléments avec icônes persistantes et libellés texte de 11px visibles.	Par défaut pour la plupart des applications web mobiles ; convivialité et clarté maximales.	Reconnaissance immédiate sans deviner l'icône.
Barre Compacte Uniquement par Icônes	4–5 éléments avec icônes uniquement (les libellés apparaissent dans aria-label).	Applications grand public très familières (par exemple, interfaces de type Instagram).	À utiliser avec prudence : Uniquement lorsque les icônes sont universellement reconnues.

Sélection du Style de Badge

• Badge Ponctuel (Point Rouge/Accent) : À utiliser lorsque l'utilisateur a besoin de savoir "il y a une nouvelle activité", mais que la quantité exacte n'a pas d'importance (par exemple, nouvel article de blog disponible, mise à jour système).
• Badge Numérique (Compte) : À utiliser lorsque le nombre exact d'éléments influence directement l'action de l'utilisateur (par exemple, "3 articles dans le Panier", "5 messages non lus").

---

Contraintes

• Accessibilité (WCAG 2.1 / 2.2 AA) :
  • SC 2.1.1 Accessibilité au Clavier : Les onglets de navigation inférieure doivent être implémentés en utilisant une <nav> standard avec des liens <a> sémantiques ou des contrôles <button role="tab"> navigables via la touche Tab ou les touches Flèche.
  • SC 2.4.7 Focus Visible : Les éléments de navigation inférieure focalisés doivent afficher un anneau de focus non rogné avec un rapport de contraste minimum de 3:1 par rapport à l'arrière-plan.
  • SC 2.5.8 Taille de Cible (Minimum) : Les cibles tactiles doivent mesurer au moins 48x48px (ou 24x24px avec un espacement environnant assurant une zone tactile de 48px).
  • SC 1.4.3 Contraste Visuel : Les libellés et icônes d'onglets inactifs doivent maintenir au moins un contraste de 4,5:1 par rapport au remplissage d'arrière-plan.
• Comportement de Défilement : Les barres de navigation inférieures doivent rester solidement épinglées (position: fixed) pendant le défilement par impulsion tactile sans scintillement ni sautillement vertical.
• Encarts de Zone de Sécurité : Doivent inclure env(safe-area-inset-bottom) pour éviter de chevaucher les indicateurs matériels d'accueil sur les fenêtres d'affichage mobiles basées sur les gestes.

---

Schémas d'Échec Courants

• L'Espace de Zone de Sécurité Manquant : Ne pas appliquer env(safe-area-inset-bottom), ce qui fait que les libellés de navigation inférieure sont chevauchés par les barres gestuelles iOS ou les découpes d'écran.
• Densité Excessive d'Éléments : Forcer 6 ou 7 éléments dans une barre inférieure, compressant les cibles tactiles en dessous de 40px et provoquant de fréquents mauvais taps accidentels.
• La Barre de Bureau Étirée : Permettre à une barre inférieure de 4 éléments de s'étendre sur 1920px de large sur un moniteur de bureau avec d'énormes espaces vides entre les icônes.
• Icônes Mystères Non Étiquetées : Omettre les libellés texte pour les icônes ambiguës (par exemple, utiliser une icône d'étoile sans préciser si elle signifie "Favoris", "Avis" ou "Récompenses").
• Troncature du Contenu Derrière la Nav Fixe : Oublier d'ajouter padding-bottom au conteneur de la page, ce qui fait que le contenu du pied de page et les boutons de soumission de formulaire principaux sont masqués de manière permanente derrière la barre inférieure fixe.

---

Critères de Validation

• La navigation inférieure contient entre 3 et 5 destinations principales.
• Chaque onglet fournit une zone de cible tactile répondant ou dépassant 48x48px.
• Les états actif et inactif sont visuellement distincts et satisfont aux exigences de contraste WCAG AA 4.5:1.
• Le CSS inclut padding-bottom: env(safe-area-inset-bottom) pour la prise en charge des encarts de zone de sécurité.
• Le conteneur de contenu principal de la page inclut un padding inférieur pour que le contenu de la page ne soit jamais caché derrière la barre fixe.
• Les badges incluent un texte accessible uniquement pour les lecteurs d'écran (par exemple, sr-only).
• La navigation est entièrement accessible via le clavier (Tab et Shift+Tab ou touches Flèche avec des indicateurs :focus-visible clairs).
• Sur les fenêtres d'affichage ≥1024px, la barre inférieure se masque proprement ou passe dans un en-tête ou une barre latérale de bureau.