web-dev-qa-db-fra.com

Sous-menu déroulant vs onglets sur mobile

J'essaie de comprendre ce qu'est un meilleur UX sur un téléphone mobile. Soit avoir la sous-navigation sous forme d'onglets, soit avoir une liste déroulante.

Méthode 1 - Dropdown sur mobile

Dans les images suivantes, la sous-navigation passe d'onglets sur un bureau à une liste déroulante sur un téléphone mobile. Desktop view. Each sub-menu is visible along the top as a tabMobile view. The sub-menu is a dropdown

Le bureau affiche la sous-navigation en haut en blanc. Vous pouvez voir chacune des options (Top-stories, world, U.S., Business, etc.)

Le téléphone n'affiche que le sous-menu actif dans la navigation supérieure. Vous accédez aux autres options (Monde, États-Unis, etc.) à l'aide de la liste déroulante.

AVANTAGES:

  • Économise de précieuses surfaces d'écran
  • Semble très propre

LES INCONVÉNIENTS:

  • L'utilisateur ne connaît pas les autres options jusqu'à ce qu'il clique sur le menu déroulant
  • moins d'espace pour développer le menu principal (texte de titre non inclus avec le bouton hamburger pour développer le menu principal)
  • Difficile de faire un 3e niveau de navigation

Méthode 2 - Onglets sur mobile

Dans l'exemple suivant, le menu principal reste sous forme d'onglets. Mobile view. Sub-nav is tabs

AVANTAGES:

  • L'utilisateur est immédiatement informé de toutes les actions importantes
  • Le menu hamburger peut être combiné avec du texte pour donner une plus grande zone de succès

LES INCONVÉNIENTS:

  • Occupe un espace d'écran plus précieux
  • Difficile de donner un 3ème niveau de navigation

Méthode 3 - Tout dans la navigation gauche

Si vous mettez tout dans la navigation principale, la navigation principale n'est généralement plus cliquable. Il est généralement extensible ou affiché comme un en-tête comme cette capture d'écran. La sous-navigation est celle qui est directement cliquable. (Imaginez que "Favoris" était "News" et que tout ce qui se trouvait en dessous était des liens différents). Mobile View. Sub-nav links are directly clickable in the main-menu.

AVANTAGES:

  • Économise de l'écran immobilier
  • La navigation de 3ème niveau peut être affichée sous forme d'onglets

LES INCONVÉNIENTS:

  • La navigation gauche est difficile à parcourir et semble encombrée, en particulier avec de nombreux liens
  • L'utilisateur ne connaît pas toutes les options sans cliquer sur le menu principal et parcourir tout.

Une dernière pensée

La plupart de mes exemples étaient des applications d'actualités. Les sous-navs de ces applications d'actualités peuvent être considérés comme un simple filtre des actualités. C'est à dire. vous n'auriez pas nécessairement à cliquer sur le lien sportif pour voir des histoires sportives importantes. Cependant, que se passe-t-il si ce n'est pas exactement le filtrage des choses que vous pouvez trouver sur l'onglet principal, mais affiche des informations supplémentaires. C'est à dire. une section nécrologie. Cela n'apparaîtrait jamais sur la page principale, mais ce serait toujours quelque chose que quelqu'un voudrait naviguer.

7
Billy McKee

Je pense que vous avez répondu à votre propre question en disant que l'utilisateur ne le sait pas jusqu'à ce qu'il clique dessus. C'est également le cas s'ils cliquent sur le menu déroulant ou latéral.

Je pense que si l'utilisateur ne sait pas qu'il est là, il pourrait tout aussi bien ne pas être là. Les onglets fourniront plus de visibilité et occuperont plus de biens, mais je ne vois pas cela comme un énorme problème. Je pense également que vous pouvez utiliser des onglets pour une navigation plus approfondie, il suffit de regarder la plupart des applications iOS qui utilisent des onglets et Android ceux aussi.

Pas vraiment une réponse, mais j'espère que cela aide.

1
El Wexicano

Les onglets peuvent occuper plus de terrain, mais de nombreuses applications ont utilisé un modèle qui, tout en faisant défiler la page, les onglets (ou tout sous-en-tête/barre de boutons) se glissent derrière l'en-tête principal. Un simple défilement vers le haut de la page fera apparaître les onglets. Cela permet toujours à l'utilisateur de savoir où ils se trouvent dans l'application, mais donnera un pouce de plus de biens immobiliers tout en naviguant vers le bas.

Vu sur Yik Yak, Facebook, Instagram, etc.

1
Kyle Alwyn