Menus horizontaux et verticaux dans les applications Web
Il est désormais très courant de trouver les meilleurs menus horizontaux dans les sites Web. Une raison à cela pourrait être les habitudes et loi de Jakob .
Dans les applications Web, vous pouvez également trouver un menu en haut ou à gauche. La plupart du temps, cela semble être une combinaison de menus verticaux et horizontaux. Sans raison constante.
Il n'y a apparemment pas de véritable convention d'ailleurs. D'où la question suivante:
Quelles raisons/facteurs sont pertinents lors du choix de l'orientation des menus dans les applications Web?
Nous parlons de menus de navigation - conduisant à d'autres pages - pas de menus d'action - modifiant la page courante.
La question ne concerne pas les tablettes ou les téléphones. Il est normal de ne pas être exhaustif. Les méthodologies personnelles peuvent également être des réponses.
Les menus horizontaux ne prennent pas facilement en charge plus d'un niveau . L'imbrication ou l'indentation sont difficiles à réaliser, conduisant à de nombreuses solutions difficiles à utiliser largement documentées dans de nombreux articles et ici sur UX.SE. Je ne suis pas un grand fan du site Web de Windows 8 par exemple, au troisième niveau, cela devient juste bizarre.
Les documents Web sont généralement disposés pour un défilement vertical. Les gens sont plus habitués à faire défiler dans cette direction et les interfaces matérielles (souris, trackpads) et les normes HTML/CSS actuelles sont conçues pour prendre principalement en charge le défilement vertical. Cela fait que la largeur d'un document Web est généralement fixe, tandis que la hauteur est libre de croître avec le contenu. L'espace horizontal devient rapidement un problème .
Il y a généralement une limite très stricte à la quantité d'éléments qu'un menu horizontal peut héberger, surtout si vous devez prendre en charge un écran de 1024 pixels de large tout en utilisant une taille de police de 16 pixels. Les utilisateurs peuvent modifier la taille de la police sur le Web, par exemple s'ils ont une vue limitée, ce qui aggrave ce problème. Il n'y a pratiquement pas de solutions réelles à ce problème d'espace. Envelopper un menu horizontal sur plusieurs lignes est également problématique, par exemple si un seul élément passe à une nouvelle ligne, il rompt l'unité visuelle du menu. L'habillage rend également presque impossible d'avoir plusieurs niveaux et interfère avec les menus déroulants.
Dans le contexte des applications, un autre problème prend en charge le choix d'un menu vertical pour la navigation: les éléments de l'interface utilisateur (par exemple les barres de boutons ) pour interagir avec la page actuelle sont généralement présentés horizontalement. Cela correspond à la plupart des applications de bureau courantes, sauf peut-être PhotoShop et Illustrator (et similaires), mais elles mettent simplement des boutons partout :). De plus, les boutons doivent être visibles pour que toutes les fonctionnalités disponibles soient visibles pour l'utilisateur. Alors que les gens ont l'habitude de faire défiler verticalement, la plupart des écrans offrent en fait plus d'espace dans le sens horizontal. En outre, des actions peuvent généralement être proposées en utilisant des icônes (surtout si elles sont courantes comme "enregistrer" et "supprimer") plutôt que des mots, ce qui économise beaucoup d'espace dans le sens horizontal (mais presque aucun dans le sens vertical).
Le fait d'avoir une barre horizontale offre également la possibilité de fixer cette barre à la fenêtre d'affichage (c'est-à-dire de la garder en haut de l'écran même lorsque l'utilisateur fait défiler ). C'est désormais un comportement courant dans les clients de messagerie Web et dans de nombreuses applications Web comme Facebook, Twitter, etc. Bien que vous puissiez corriger une barre de boutons verticale, l'espace vertical est plus limité et pourrait également devenir rapidement problématique. La barre horizontale de Facebook colle à la fenêtre d'affichage, tandis que le menu vertical défile avec la page. C'est un avantage important pour un menu horizontal, vous pouvez donc opter pour votre navigation la plus importante pour y aller.
Donc, à bien des égards le menu horizontal est préférable . Si vous pouvez faire fonctionner le vôtre pour l'écran et les tailles de police que vous devez prendre en charge, allez-y. Assurez-vous simplement de vous différencier visuellement avec les barres de boutons, etc.
Cependant, les menus verticaux évoluent mieux à la fois en longueur et en profondeur, donc si vous avez besoin de proposer beaucoup d'articles, allez verticalement.
Vous pouvez également utiliser les deux. Navigation de haut niveau horizontalement, sous-niveaux verticalement et à gauche. Ou mélangez-le avec un méga-menu.
Des menus horizontaux et des menus verticaux sont nécessaires pour faciliter l'architecture de l'information - sinon il y a un danger de se retrouver avec le menu comme celui sur l'ancien site d'Amazon (impossible de trouver l'image malheureusement).
En règle générale, le menu horizontal serait utilisé à un niveau supérieur, peut-être même une sous-navigation horizontale, mais vous ne voudriez certainement pas avoir une troisième couche de sous-navigation horizontale - par conséquent, une verticale est requise. À ce stade, vous pouvez demander d'autres options de navigation telles que des onglets, des filtres, etc.
Si le site n'a pas de pages profondément imbriquées, toutes les choses que vous avez mentionnées s'appliquent - par exemple cela peut dépendre du contenu réel - les blogs se prêtent bien aux contenus verticaux car il y a de l'espace sur les côtés pour la liste des dossiers/tags.
Un autre aspect à considérer - votre menu continuera-t-il de grandir? si c'est le cas, la verticale est mieux adaptée. Encore une fois - l'exemple de blog est approprié ici.
Bonne chance
Je pense qu'il serait juste de dire que l'interface utilisateur doit d'abord être conçue pour le contenu. Il est beaucoup plus difficile de prendre en compte des éléments tels que l'environnement utilisateur, les périphériques matériels et les habitudes, car ils sont beaucoup plus variables. En revanche, avec le contenu, il est beaucoup plus faisable de prendre en compte les types d'éléments, le nombre d'éléments et l'interaction/le comportement.
Pour répondre à la question, je dirais que la tendance est que les menus horizontaux semblent être plus acceptables pour afficher une grande quantité de contenu (comme avec les méga menus déroulants), alors que les menus verticaux ne semblent pas être utilisés à cette fin autant . Sinon, vous commencerez généralement par le contenu (avec une analyse de la conception de l'architecture de l'information) et vous frayez un chemin à travers certains ou tous les points énumérés qui sont applicables.