web-dev-qa-db-fra.com

La navigation supérieure est-elle un modèle accepté pour les appareils mobiles?

J'ai toujours trouvé que la barre de navigation inférieure était l'une des pires conventions d'interface utilisateur dans la pratique courante, car elle constitue une violation de la hiérarchie des informations. Bien sûr, le menu hamburger est également universellement détesté, donc je ne veux pas faire ça.

Dans quelle mesure la barre de navigation supérieure est-elle testée et établie sur les appareils mobiles? C'est évidemment l'étalon-or pour l'expérience de bureau, mais je conçois spécifiquement pour le téléphone en ce moment.

Types of navigation

5
JClaussFTW

Le bon et le mauvais de la navigation en bas

La navigation inférieure était une excellente idée lorsque Apple est sorti avec elle. Steve était concentré sur le laser sur la convivialité d'une seule main. La navigation inférieure a été conçue pour permettre une commutation de vue rapide et pratique là où l'utilisation mobile l'affaire semblait l'exiger.

Steve with the iPhone 1

Malheureusement, la navigation inférieure est un cauchemar hiérarchique lorsqu'elle est utilisée pour l'architecture d'informations principale d'une application. Les concepteurs de produits principalement familiarisés avec iOS ont commencé à prendre la position la plus basse comme une donnée et à tout mettre là-bas. Alors que les applications Web sont devenues une solution mobile viable et que la navigation supérieure a été reportée dans le cadre de mises en page réactives simples, un nouveau modèle a commencé à prendre forme.

Entrez le passage progressif de Google à une organisation centrée sur l'expérience ...

La navigation supérieure a du sens

Regardez les Material Design guidelines pour une perspective bien développée sur la navigation supérieure. Ils ont récemment ajouté la navigation inférieure pour les scénarios de commutation fréquents, mais il a un angle légèrement différent dans MD.

Android app with top tabs

Android app with top icon tabs

Une partie de la logique derrière la meilleure solution de navigation de MD, en plus de la victoire évidente de la hiérarchie des informations, est le fait que l'action devrait vous guider à travers les vues d'une application. Nous n'avons pas à forcer les utilisateurs à appuyer sur des onglets et à parcourir manuellement leur flux de travail.

Android intent system flow

Pour aller encore plus loin, Google a préconisé un modèle de fonctionnalité centré sur l'activité: quelle que soit la vue ou même l'application , ne "intention" emmènera l'utilisateur là où le composant d'application dont il a besoin .

L'ajout récent d'onglets inférieurs dans MD n'est pas seulement en réponse aux concepteurs de produits iOS du monde. L'utilisation des onglets inférieurs peut être utilisée lorsqu'un changement de vue rapide manuel est nécessaire. Cela semble particulièrement bien dans une vue basée sur les gestes où vous souhaitez fournir des repères pour le comportement de balayage gauche/droite (bien que la navigation supérieure puisse faire la même chose).

Material Design bottom tabs

Barre latérale ironique

La perspective de navigation du bas sur l'utilisabilité physique a un problème: les utilisateurs ont décidé que ce n'était pas un gros problème. Combien de téléphones 4 pouces font des listes de technologies de pointe ces jours-ci. Les autres téléphones de petit format sont pour la plupart des appareils à petit budget.

Pour les utilisateurs d'iPhone 6+ à une main, devrions-nous développer une navigation en bas à gauche? ????

iPhone 6+ average thumb reach

C'est probablement plus réaliste ...

Big iPhone being used with 2 hands

6
plainclothes

Je pense que vous devriez reconsidérer la navigation du bas:

  • La navigation par le bas est très bien établie dans les applications mobiles, bien plus que la navigation par le haut, et il y a de bonnes raisons à cela.
  • Dans la plupart des cas, je suis en désaccord avec votre point de vue sur la hiérarchie des informations incorrecte - le contenu occupe une position visuelle privilégiée dans l'interface, et la navigation est simplement un outil permettant aux utilisateurs de trouver le contenu qu'ils souhaitent. Son emplacement doit être régi par les contraintes d'utilisation du dispositif en question. Sur les appareils à écran tactile portables, l'un des principaux problèmes d'utilisation est de couvrir/masquer l'écran avec la main tout en touchant et en interagissant. La navigation du bas évite ce problème, offrant une vue complète de l'écran pendant l'interaction, pour voir tout retour immédiat qui est donné. Il est également plus facile pour le pouce de la main qui tient le téléphone d'accéder à un menu inférieur qu'à un menu supérieur, simplement en raison de la distance.
  • La barre supérieure a une utilisation conventionnelle établie, et c'est pour les actions `` Retour '', certaines fonctions d'application de base (par exemple pour créer un nouveau Tweet, dans Twitter), l'accès à la fonctionnalité de recherche ou pour des choses comme les actions de fermeture sur les fenêtres modales.
  • Beaucoup de gens détestent l'icône du hamburger, mais pas parce qu'en général, cette façon d'afficher la navigation n'est pas efficace sur mobile. Je sais que certaines personnes soutiendront que la navigation ne doit pas être masquée, mais cela dépend du cas d'utilisation et de la taille de la navigation. Vous pouvez avoir un menu de navigation caché dans un panneau latéral hors toile, et au lieu d'avoir une icône de hamburger, avoir un bouton de menu avec le mot 'menu', ou similaire. Cela dépend aussi de votre marché - il existe certainement des marchés qui connaissent très bien l'icône du hamburger, pour qui son utilisation n'est pas un problème de convivialité.
  • D'autres options viennent toutes avec leurs propres problèmes plus importants, par exemple l'utilisation d'une interaction de menu hors toile moins bien établie, comme le balayage, pose des problèmes de signification de sa présence (sa détectabilité).
4
Joseph C Lawrence

Une réponse en ligne à cela est la Convivialité de choisir cette position.

Lorsque vous tenez votre mobile en main, votre pouce entre immédiatement en action et la position inférieure lui est facilement accessible par le haut. À l'ère des appareils grand écran, il est difficile de tenir le téléphone en main et d'accéder à la navigation placée en haut. C'est pourquoi Apple a changé la position des boutons de volume pour les appareils iPhone 6+ pour les rendre accessibles d'une seule main.

Il pourrait y avoir de nombreuses autres raisons, mais je pense que c'est la principale. La navigation du bas est plus tile que celle du haut.

1
DPS