web-dev-qa-db-fra.com

Pourquoi déconseille-t-on une barre d'onglets défilante?

Pourquoi le défilement horizontal dans une barre d'onglets inférieure est-il généralement déconseillé? IOS et Android le découragent.

enter image description here

Et pour une raison quelconque, la navigation par défilement est parfois correcte en haut? (Onglets Android et iOS News) Et parfois vers le bas? (Appareil photo iOS)

enter image description here

Je peux penser à ces raisons possibles pour lesquelles ce n'est pas recommandé.

  • Psychologiquement, c'est contraire à nos attentes. Nous nous attendons à ce que les éléments inférieurs soient plus statiques et stables. Nous comprenons plus facilement la navigation fluide lorsqu'elle se trouve dans la zone supérieure de l'écran, mais en bas, nous sommes éjectés.
  • C'est gênant pour les pouces humains d'atteindre là-bas. Avec la "zone du pouce", cette zone en bas à droite est difficile à atteindre.

Y a-t-il d'autres raisons? Quelqu'un a-t-il étudié cela? Pensées?

Ou est-ce que ça va? Y a-t-il moyen de le faire correctement? Cela a-t-il déjà été bien fait?

6
Nathaniel S

Mis à part ce que vous avez déjà mentionné, je dirais que si vous avez tellement d'éléments dans votre navigation inférieure qu'il doit défiler, vous faites quelque chose de mal. Material.io mentionne "3-5" pour une raison. Au-delà de cela, il est trop difficile de rester droit. De plus, la navigation du bas est censée être un lien direct vers les pages principales de l'application. Si vous devez faire défiler pour y accéder, cela va à l'encontre du but de les avoir là-bas.

La navigation par défilement fonctionne mieux en haut, car elle est presque exclusivement utilisée pour sous-éléments d'une navigation principale au lieu de la navigation principale elle-même. Ce modèle fonctionne mieux parce que vous recherchez quelque chose de plus granulaire et que vous vous attendez à faire défiler plus de 5 articles pour trouver ce dont vous avez besoin.

2
jered

La navigation dans la barre inférieure est destinée aux vues les plus importantes de l'application auxquelles l'utilisateur voudra/devra accéder facilement. Ce sont quelques références de Material design (soulignement le mien):

La navigation inférieure doit être utilisée pour:

  • Trois à cinq destinations de premier niveau d'importance similaire (alternative: un tiroir de navigation persistant accessible depuis n'importe où dans l'application)

  • Destinations nécessitant un accès direct depuis n'importe où dans l'application (alternative: onglets pour seulement une ou deux destinations)

.

Étant donné que les actions de navigation inférieure sont présentées sous forme d'icônes , elles doivent être utilisées pour du contenu pouvant être correctement communiqué avec des icônes.

.

Faire: Utiliser des étiquettes courtes

À ne pas faire: évitez les étiquettes avec un texte d'habillage

À ne pas faire: évitez de tronquer les étiquettes de texte car cela pourrait empêcher la compréhension.

À ne pas faire: évitez de réduire les étiquettes de texte pour qu'elles tiennent sur une seule ligne.

Si nous appliquons ces règles: n'utilisant pas plus de 5 boutons, utilisez des icônes, utilisez des étiquettes courtes, alors il ne devrait pas y avoir pas besoin de déborder le contenu. L'idée est de garder la barre du bas simple avec le minimum de liens nécessaires vers les vues les plus importantes de l'application. Bien que les onglets n'aient pas ces limitations minimales ou maximales.


Conception matérielle - Navigation inférieure

Conception matérielle - Onglets

Conception matérielle - Navigation

5
Alvaro