web-dev-qa-db-fra.com

Menu supérieur vs menu latéral sur le tableau de bord

Je conçois un tableau de bord d'administration et cela m'est venu à l'esprit.

  • Dois-je utiliser un menu latéral ou un menu supérieur?
  • Pourquoi? Quelle est la principale différence pour l'expérience utilisateur?

Lorsque vous utilisez un menu supérieur, il semble plus cohérent lors de l'analyse de la navigation croisée, car il est toujours au sommet, même si ce tableau de bord va être réactif, c'est quelque chose que les utilisateurs n'utiliseront pas très souvent sur mobile, au maximum sur une tablette. Il s'agit de véritables informations basées sur la version précédente de ce tableau de bord.

enter image description here

D'un autre côté, le menu latéral semble être plus cohérent sur un bureau, avec une manière plus intuitive de changer de menu.

enter image description here

Donc, sur la base de ces informations, quel type de menu dois-je choisir? Actuellement, je n'ai aucun critère sur le type de menu à utiliser en plus de la mise en page et de l'apparence.

31
CelsomTrindade

À partir d'un article UXMovement.com :

Menu supérieur ou gauche, il n'y a pas de réponse absolue. Lorsqu'il s'agit de concevoir pour les utilisateurs, le contexte est roi.

Une navigation qui fonctionne bien dans un contexte peut ne pas convenir à un autre contexte. Pour conclure quelle navigation est la meilleure pour votre application, il est important de comprendre le contexte différent où la navigation en haut et à gauche peut fonctionner le mieux. enter image description here

Numérisation

  1. Une navigation à gauche est plus rapide et plus efficace pour les utilisateurs à numériser.
  2. La navigation de gauche facilite également une direction de balayage verticale naturelle pour les personnes.
  3. La navigation en haut force une direction de balayage horizontal que les gens utilisent souvent lorsqu'ils lisent.

Visibilité

  1. Les éléments de navigation supérieurs sont plus visibles car ils sont toujours au-dessus du pli et sont plus faciles à trouver.
  2. Les éléments de navigation de gauche ne sont pas toujours au-dessus du pli, car parfois, si vous avez trop d'éléments, certains d'entre eux peuvent être poussés sous le pli.
  3. Les navigations supérieures sont également plus faciles à trouver car elles sont généralement accompagnées de l'en-tête et du logo, qui sont tous deux des objets visuellement dominants.

Priorité

  1. L'élément le plus à gauche a plus de poids visuel que les autres éléments en raison de son placement dans la zone optique principale (en haut à gauche).
  2. Les éléments en haut à gauche sont plus visibles.
  3. La navigation gauche est plus prioritaire car il n'y a pas de navigation équilibrée sur le côté droit.
  4. Les éléments d'une navigation supérieure n'ont pas le même poids.

Quand il s'agit de conception, il y a peu d'absolu où une approche sera 100% efficace tout le temps pour tous les cas. Trouver l'approche qui vous convient le mieux, à vous et à vos utilisateurs, nécessite une compréhension du contexte concerné.

24
Grafix Guru

Du point de vue de l'évolution de l'interface graphique, la couche de navigation des commandes devrait être en haut, que ce soit sur les côtés de l'écran, vous trouverez généralement la couche opérationnelle/contextuelle des commandes.

Dans le cas particulier des tableaux de bord , où la couche de navigation a tendance à fusionner avec la couche opérationnelle, il est probablement plus élégant de placer le menu sur le côté gauche . Plus encore, au cas où le menu devrait avoir de nombreuses entrées.

Par exemple, naviguer et fonctionner dans wordpress admin est tout à fait le même enter image description here

8
semion lapin

J'ai essayé de passer par des discussions sur le moment et la façon d'implémenter la navigation dans une page de type `` tableau de bord '', alors voici quelques-unes des considérations que nous avons prises en compte, qui, espérons-le, vous aideront à trouver la bonne réponse:

  • Longueur de la page: c'est là que la navigation supérieure convient aux longues pages, car la navigation latérale prend de la place sur toute la longueur de la page
  • Nombre d'éléments de menu: la navigation supérieure traite cela en utilisant soit une structure de menu méga ou pliable/accordéons, tandis que la navigation latérale peut également utiliser une structure d'arborescence/dossier
  • Éléments de navigation supplémentaires: si vous utilisez le fil d'Ariane ou la navigation secondaire sur la page, il est important de l'intégrer dans le reste de la présentation du système de navigation
  • Fenêtre d'affichage: la navigation latérale est bonne pour le bureau à écran large car les navigations sont étroitement groupées, tandis que la navigation supérieure a tendance à l'étendre davantage; dans le mobile, vous voulez plus d'espace horizontal pour que la navigation supérieure fonctionne mieux que la navigation latérale
  • Écosphère des applications: si cela fait partie d'une suite d'applications, le style que vous choisissez peut-il être appliqué de manière cohérente pour créer une apparence commune?
6
Michael Lai

Je préfère réserver le menu supérieur pour les interactions de plus haut niveau. Des choses comme: accéder à la "page d'accueil" du site Web, passer à un flux de travail totalement différent, accéder au profil utilisateur, etc. Ces activités sont moins courantes et les utilisateurs rechercheront intuitivement tout en haut de la page pour ces niveaux supérieurs Activités.

Le menu latéral peut être plus utile pour les actions qu'un utilisateur entreprendra plus fréquemment. Si les actions que vous regroupez font partie du même flux de travail (par exemple, parcourir les sections d'une boîte de réception ou surveiller les ventes dans différentes catégories), je dirais alors utiliser un menu latéral pour garder les utilisateurs logiquement dans le même espace de travail.

Si les utilisateurs basculent fréquemment entre ces éléments de menu du tableau de bord, je recommanderais le menu latéral. J'aurais besoin d'en savoir plus sur les workflows pour suggérer le contraire.

Pour des exemples de cela, voir: Pivotal Tracker, Facebook, Gmail et CircleCI.

1
Jack Collins