web-dev-qa-db-fra.com

Application mobile de la barre d'onglets de défilement

Barre d'onglets déroulante ...

scrolling tabs

... ou 'Plus' bouton?

more button

Quel est le plus convivial?

Je suis nouveau dans la conception mobile et je n'ai pas d'appareil moi-même, je ne pourrais donc pas dire lequel est le plus utilisé.

Je cible Android, iOS et Windows Phone. J'aurai au plus 8 à 10 onglets. Je ne veux pas avoir de menu dans la barre latérale en raison de problèmes de performances avec ma dernière version.

1
user3783608

Vous devez utiliser un bouton "plus" pour fournir des options de menu supplémentaires.

Vous devriez également vraiment regarder votre structure de navigation et comprendre pourquoi vous avez besoin de tant d'options! 8-10 semble trop excessif.

Apple : Les iOS Human Interface Guidelines appellent une taille minimale de bouton de 44x44 pixels, ce qui équivaut à environ 7 mm. Pousser un bouton gauche/droit sur le menu introduirait une cible beaucoup plus petite, ce qui frustrerait probablement les utilisateurs (en particulier ceux avec des doigts plus gros).

enter image description here

iOS fait également une recommandation de limite de 5 onglets dans la section Barres d'onglets de la section Éléments de l'interface utilisateur et spécifiquement appelle un bouton "plus":

enter image description here

N'affiche pas plus de cinq onglets à la fois sur l'iPhone (s'il y a plus d'onglets, la barre d'onglets en affiche quatre et ajoute l'onglet Plus, qui révèle les onglets supplémentaires dans une liste)

Microsoft : va plus en détail dans Bibliothèque de conception pour Windows Phone . . Comme décrit dans la section Interactions et convivialité avec Windows Phone : un carré de 9 mm est la taille cible tactile idéale; lorsque des hauteurs de cible plus petites sont garanties, la taille cible minimale est de 7 mm; un espacement minimum de 2 mm entre les éléments.

enter image description here

La taille de cible tactile recommandée est supérieure ou égale à 9 mm carré. Utilisez-le pour les contrôles qui prennent en charge la majorité des tâches.

Si l'espace est fortement limité, vous pouvez utiliser une taille de cible tactile minimale de 7 mm, tant que la largeur est beaucoup plus grande.

Neuf millimètres est un nombre déterminé par des centaines d'heures de test utilisateur et représente le taux d'erreur moyen le plus bas (ou le rapport des fausses prises sur le nombre total de prises) pour les tâches discrètes et en série. Une taille de cible tactile minimale de 9 mm peut limiter le taux d'erreur à seulement 1,6%.

La taille minimale de la cible tactile est de 7 mm. Utilisez-le pour les commandes rarement utilisées ou les commandes suffisamment larges (supérieures ou égales à 15 mm), et uniquement lorsqu'une hauteur excessive limite la conception.

Ces tailles cibles seraient clairement difficiles à atteindre avec les petits boutons gauche/droite.

Le Windows Phone App Bar (la barre en bas) prend en charge le défilement hors de la boîte. Mais les directives appellent spécifiquement notre limitation de vos boutons à 5 ou moins, pour éviter le défilement:

Évitez d'utiliser plus de cinq éléments de menu sur une barre d'application, car cela forcera l'utilisateur à faire défiler.

Google : recommande un dimensionnement similaire dans la documentation Android Design . Il est suggéré que les composants de l'interface utilisateur tactiles soient disposés sur des unités de 48dp, comme décrit dans la section Métriques et grilles , qui se traduisent par une taille physique d'environ 9 mm (avec une certaine variabilité en raison des différences de densité d'écran).

enter image description here

Encore une fois, nous voyons clairement que les recommandations de taille de hit appellent pour éviter les boutons gauche/droit dans un menu.

Bien que je n'aie trouvé aucune recommandation spécifique pour le nombre de boutons, la priorité pour "plus" est clairement établie dans plusieurs applications couramment utilisées dans l'écosystème Android. Vous pouvez en savoir plus sur Action Bars et peut-être trouver une recommandation que je n'ai pas faite.

1
Evil Closet Monkey

J'irais pour la barre d'onglets de défilement, en supposant que vous pouvez tourner à gauche ou à droite, avec 10 éléments, cela permettrait à l'utilisateur d'accéder aux éléments de menu plus rapidement que d'appuyer trois fois à droite pour arriver au 10e élément.

0
DarrylGodden

Sur Android les directives de conception spécifient un tiroir de navigation pour votre situation, si vous utilisez des fragments au lieu d'activités, il n'y aura pas de problème de performances. Si vous êtes vraiment mort contre le tiroir de navigation, alors je le ferais il suffit d'aller avec la norme sur iOS, qui n'est pas plus de 5 onglets, avec le cinquième onglet étant un onglet plus si nécessaire. (J'utiliserais cette norme iOS pour les deux plates-formes).

0
ChristianCuevas