Barres d'onglets et navigation inférieure : des règles de conception qui tiennent le coup

Ce que disent les plateformes

Material Design 3 indique que les barres de navigation donnent accès à trois à cinq destinations, chacune avec une icône et une étiquette, et qu'une destination est toujours active. Les directives d'Apple stipulent d'utiliser une barre d'onglets pour la navigation, de ne pas fournir d'actions, de la garder visible lorsque les gens se déplacent entre les sections (sauf lorsqu'un modal la recouvre) et d'éviter les onglets de débordement.

Choisir les onglets

Les onglets représentent la structure de l'application :

• Choisissez les sections que les gens utilisent le plus souvent, et non toutes les sections dont vous disposez.
• Utilisez des noms pour les destinations ("Bibliothèque"), et non des verbes pour les actions ("Télécharger").
• Placez les actions dans l'écran lui-même, dans une barre d'outils ou un bouton d'action flottant.
• Si vous en avez besoin de plus de cinq, reconsidérez votre structure avant d'ajouter un onglet « Plus ».

Étiquettes et badges

Les onglets composés uniquement d'icônes économisent de l'espace mais obligent les gens à deviner. Les étiquettes rendent la navigation plus claire, en particulier pour les icônes les moins courantes. Les badges doivent signaler quelque chose sur lequel les gens doivent agir ; un badge toujours présent cesse d'être remarqué.

Conserver l'état par onglet

Apple note que les barres d'onglets permettent aux utilisateurs de changer de section tout en préservant l'état de navigation actuel dans chaque section. Le retour à un onglet doit montrer où ils se sont arrêtés, et non être réinitialisé en haut.

Mouvement

Une petite transition sur l'indicateur actif, comme une pilule qui glisse ou une icône qui se remplit, aide les gens à savoir où ils se trouvent. Gardez-le rapide, en dessous d'environ 250 millisecondes, évitez de faire rebondir chaque icône à chaque pression et simplifiez-le lorsque le mouvement réduit est activé.