Menu déroulant horizontal ou barre d'onglets?
Je développe une application mobile prenant en charge iOS, Android et les plates-formes Windows.
L'application comprend une "navigation en coupe". Par navigation sectionnelle, je veux dire qu'il comporte différentes sections telles que:
1. Plans
2. Évaluation
3. Chercher
etc
Je suppose qu'il pourrait y avoir un total de 8 à 10 sections et chaque section emmène l'utilisateur vers un nouvel écran. Certains d'entre eux peuvent ouvrir une superposition avec un bouton de fermeture (icône "X") dans le coin supérieur gauche.
Je veux garder un design minimaliste. J'avais deux options en tête:
1. Barre d'onglets avec onglet "Plus".
2. Barre de défilement horizontale avec toutes les options en place.
Cependant, je suis confus, ce qui serait attrayant sur le plan esthétique. La barre d'onglets semble un peu démodée et la barre de défilement horizontale semble sur la ligne opposée du design minimaliste.
Cependant, j'ai vu l'application Zomato qui a récemment été mise à jour. Ils ont placé une icône "+" dans le coin inférieur droit de l'écran qui, lorsqu'elle est appuyée, révèle les options du menu. J'ai également visité iPhone App: Tab Tab vs Dashboard (aka Grid Navigation). Ou les deux? et Alternative à la barre d'onglets (dans l'application iPhone) sur ce site mais d'une manière ou d'une autre, je n'ai pas pu résoudre ma requête.
C'est quelque chose lié à la conception de la navigation et de nombreuses réponses avisées pourraient m'aider à essayer un tas de choses pour mon application et à obtenir des critiques utiles de mes testeurs.
Commençons par vos options ...
- Vous avez des options hétérogènes . Cela signifie que vos options sont toutes assez différentes. Parce que maps sont très différents de ratings, qui sont très différents de search, il n'est pas facile pour les utilisateurs de traiter un beaucoup d'options hétérogènes.
Comparez cela aux options homogènes où les éléments sont du même type. Pour 8 à 10 options homogènes, il est un peu plus facile pour les utilisateurs de faire défiler un long menu car l'utilisateur sait exactement en quoi chaque élément est différent. Les filtres sont un excellent exemple d'éléments homogènes où le défilement peut être efficace:
![enter image description here]()
Une approche moderne de la conception des navbars
Serait quelque chose comme ...
Tout d'abord, pouvez-vous réduire le nombre d'options à 5 ou moins ? Si oui, vous pouvez utiliser un onglet ou une barre d'icônes simple. Voici Instagram:
![instagram menu bar]()
Si vous ne pouvez pas le faire, essayez à nouveau, vraiment .
- Si vous ne pouvez vraiment pas réduire, choisissez l'un des modèles ci-dessous.
Modèles de conception pour 8 à 10 éléments de navigation mobiles
Présentez-les tous en même temps . Voici l'écran d'accueil de Yelp Android (jusqu'à récemment):
![enter image description here]()
Choisissez les 4 ou 5 sections les plus courantes, puis masquez le reste à l'aide d'un menu déroulant ou d'un menu de tiroir. Vous pouvez présenter les 4-5 éléments sous forme d'onglets ou d'icônes. Facebook utilise cette approche avec un menu hamburger, mais des ellipses horizontales ou verticales (
...) sont également populaires:![facebook menu]()
D'autres modèles moins efficaces pour diverses raisons sont:
- Cachez tous les liens de navigation dans un menu hamburger .
- Utilisez un menu à défilement horizontal. C'est moins efficace qu'un menu statique car il est plus sujet à la désorientation et à la frustration de l'utilisateur (la position de défilement est-elle réinitialisée au chargement de la page?.
J'utiliserais un défilement horizontal avec de bons indicateurs visuels où se trouve l'utilisateur, et avec du code pour toujours mettre la barre toujours au centre/à l'écran afin qu'elle ne soit pas confuse. De cette façon, l'utilisateur peut rapidement faire glisser le menu pour voir où aller.
Idéalement, il serait préférable de faire des recherches massives à ce sujet. J'aimerais pouvoir, mais je ne peux compter que sur des tests en petits groupes, lorsque je terminerai mon article et mes recherches, je mettrai à jour ma réponse avec mes résultats.
J'avais eu avec le défilement horizontal comme ce n'est pas rare dans les applications mobiles ces jours-ci. vous pouvez ajouter un "+" ou un "plus" et une ancre pour que l'utilisateur défile un peu horizontalement afin qu'il connaisse l'écran en défilement horizontal