web-dev-qa-db-fra.com

Utilisation d'une combinaison de navigation horizontale avec sous-menus et de navigation latérale verticale avec sous-menus dans un site Web

J'ai été impliqué dans une refonte du site Web où la navigation comprend un menu de navigation horizontal principal avec un niveau de listes déroulantes et une navigation secondaire dans la colonne de gauche qui répète le sous-menu du menu principal et un niveau supplémentaire d'éléments sous forme d'arborescence.

Navigation en haut:
Livres
Fiction
Science
Création de sites web

Navigation latérale:
Fiction
Littéraire
Historique
Crépuscule
Science
etc
etc

Le sous-niveau de navigation latérale (comme Littéraire dans l'exemple) peut devenir très long (10 liens ou plus) et s'étendre bien en dessous de la fin du contenu. La navigation latérale agit comme un panneau en accordéon pour chaque article.

Quelqu'un connaît-il des études UX ou même des discussions anecdotiques sur ce type de système affectant, positive ou négative, l'interaction des utilisateurs? Je voudrais donner quelques raisons de s'éloigner de ce type de navigation - uniquement sur la base de tests internes et de différents moniteurs, etc., nous perdons beaucoup de biens immobiliers pour la navigation sans aucun avantage réel (il n'y a aucun budget pour quelque chose comme A/Test B, etc.). Il me semble que les méga-menus ou les listes déroulantes à deux niveaux sont plus la norme de nos jours.

11
sscott

Kingsbury JR & Andre AD (2004, A Comparison of Three-level Web Menus: Navigation Structures. Proceedings of the 48th HFES Annual Meeting, p1513-1517; summary ) ont fait des recherches sur des menus hiérarchiques comme le vôtre cela suggère que les utilisateurs ont généralement de meilleures performances lors de la sélection dans le menu de gauche d'abord , puis dans le menu supérieur, plutôt que l'inverse.

Cependant, il semble que votre menu de deuxième niveau puisse être trop long pour être au sommet. Vous pouvez casser les éléments de niveau inférieur dans votre menu de deuxième niveau pour créer un troisième menu de niveau en haut afin de tout adapter. Cela a bien fonctionné pour Kingsbury et Andre, mais ils n'ont testé que les hiérarchies de menus à 3 niveaux, et en général, un menu à un seul niveau de 10 éléments groupés surclassera deux menus courts hiérarchiques. (par exemple, voir Snowberry K, Parkinson SR et Sisson N (1983), Computer Display Menus, Ergonomics, 26 (7), p699-712).

J'envisagerais de mettre tout dans le menu de la barre latérale, qui, selon Kingsbury et Andre, avait des performances proches de gauche puis supérieures sur diverses mesures. Cependant, cette performance est basée sur le fait d'avoir deux menus latéraux, un pour chaque niveau, ce qui peut prendre trop d'espace horizontal dans votre cas. Vous pouvez utiliser des expandeurs pour garder tous les niveaux dans la même marge, mais je ne sais pas ce que cela fera pour les performances des utilisateurs

Parlant plus d'anecdote que de recherche, je suis un peu préoccupé par la barre latérale qui répète le menu déroulant à partir de la barre supérieure. Comme vous, je ne sais pas quel est l'avantage de cette redondance - je ne vois pas comment une méthode serait sensiblement supérieure à une autre selon les utilisateurs ou les circonstances (par exemple, ce n'est pas comme si le monde était divisé en barres latérales) -navigation des utilisateurs et navigation vers le bas). Pendant ce temps, il présente les problèmes potentiels suivants:

  • Les utilisateurs peuvent se demander si les liens sont vraiment identiques ou non, et finir par cliquer sur les deux. C'est particulièrement le cas si vous n'utilisez pas de code couleur reconnaissable pour distinguer les liens visités des liens non visités (ce que presque plus personne ne fait plus).

  • Même si les utilisateurs se rendent compte que les liens sont les mêmes, l'utilisateur doit maintenant décider de la méthode de navigation à utiliser. Cette pensée les ralentit. Forcer cette pensée est bon lorsque le gain se traduit par une réponse nette plus rapide, mais je ne pense pas que vous ayez cela ici.

Il est souvent préférable de donner aux utilisateurs une meilleure façon de faire quelque chose plutôt qu'un choix. Si vous craignez que certains utilisateurs ne réalisent pas que la barre latérale est déterminée par le menu supérieur (ou vice versa), résolvez cela avec une conception graphique reliant visuellement la sélection de menu principale actuelle au menu secondaire.

Pour un menu relativement complexe comme le vôtre, ces menus déroulants peuvent être problématiques, ce qui vous suggérerait d'utiliser uniquement la barre latérale. Cependant, compte tenu de vos préoccupations immobilières, les méga-listes déroulantes peuvent en effet être la voie à suivre , car elles répondent à de nombreuses limites des listes déroulantes ordinaires.

6
Michael Zuschlag