web-dev-qa-db-fra.com

Une alternative aux onglets de carrousel pour mobile?

Je conçois une application mobile pour entreprise, donc pour la vue bureau, nous utilisons des onglets comme vous pouvez le voir dans l'image ci-dessous. Je veux concevoir la même chose pour mobile, donc si nous utilisons la navigation par onglet de carrousal, nous devons glisser pour atteindre le dernier onglet et cela peut être moins détectable.

enter image description here

Vues mobiles

  1. Navigation dans l'onglet Carrousal

enter image description here

  1. Onglet avec plus de liste déroulante

enter image description here

Je voulais donc savoir s'il y avait une meilleure alternative à cela?

3
Ashish Mohan

Il existe plusieurs possibilités pour placer les tableaux de bord. Le contrôle le plus approprié peut varier selon le contexte.

  • Onglets du carrousel: vous permettent de basculer rapidement entre 2 à 3 options, les autres options sont masquées. En général, les onglets gardent les options visibles à tout moment, ce qui permet de basculer rapidement et facilement entre les options. D'autre part, ils occupent un espace précieux.

  • Onglets avec liste déroulante "plus": basculez rapidement entre les 2 actions les plus courantes, toutes les autres options sont masquées. Si un utilisateur n'est pas habitué aux onglets de carrousel, il peut découvrir les options cachées plus facilement avec la liste déroulante. Différencie également les tableaux de bord "communs" (ceux des onglets) et les moins importants (dans la liste déroulante). Cela peut ne pas convenir si vous souhaitez les transmettre comme tout aussi importants.

  • Une seule liste déroulante: toutes les options sont tout aussi importantes, la liste déroulante prend peut-être moins d'espace qu'une barre d'onglets mais seule l'option sélectionnée est initialement visible. Toutes les autres options sont invisibles mais encore une fois, la découvrabilité ne devrait pas être un problème, car les listes déroulantes sont couramment utilisées. La commutation des options nécessite toujours 2 taps/clics. Si vous décidez d'utiliser une liste déroulante, assurez-vous de lire d'abord ces directives de Nielsen Norman Group.

  • Un menu burger: bouton Burger dans l'un de vos coins supérieurs qui ouvre un menu en cliquant/tapant. Pourrait utiliser moins d'espace que toutes les options ci-dessus, mais masque également complètement le mécanisme de sélection du tableau de bord de votre écran initial, ce qui se traduit par une moins bonne découvrabilité ( menus Hamburger ).

Pour plus d'informations et d'inspiration, je recommande cet article sur Modèles de base pour la navigation mobile .

Pour résumer : sachez que différents contrôles peuvent convenir à différentes situations. Réfléchissez à votre situation spécifique ici avant de chercher une solution appropriée. La découvrabilité n'est qu'un facteur de l'équation; vous pouvez également considérer le poids visuel/l '"importance" de ces options, y a-t-il des options plus couramment utilisées que d'autres, le nombre de clics, la surface d'écran, la cohérence interne (cohérence au sein de votre application), la cohérence externe (cohérence avec d'autres applications similaires), etc. .

1
QWERTZdenker

Hmm, cela dépend de la quantité d'informations que le widget présentera, mais en utiliser une sur 100% demande beaucoup d'espace:

  1. Vous pouvez utiliser ce type de commandes, pour donner la possibilité à l'utilisateur de sélectionner, en affichant la liste comme il lui convient.

enter image description here

  1. À partir des onglets - selon la conception du matériau, la pratique que vous avez utilisée n'est donc pas nécessairement appropriée dans la conception de ce système:

enter image description hereenter image description here

0
Piotr Żak