Comment les utilisateurs s'attendent-ils à ce que la navigation déroulante fonctionne?
Cette question concerne le comportement attendu avec navigation déroulante dans les pages Web.
Cela fait partie d'un e-mail que je viens de recevoir d'un client: ("Admissions" est l'un des liens de navigation de haut niveau)
Question sur le niveau supérieur de navigation en ce qui concerne les admissions (et tout autre élément de niveau supérieur sur lequel vous pouvez cliquer et obtenir une page à ouvrir). Il y a de bonnes choses sous Admissions lorsque vous cliquez sur le haut. À moins que vous ne cliquiez sur les admissions Word, vous n'obtiendrez pas la description complète. Cela peut sembler idiot, mais les gens savent-ils d'abord cliquer sur les titres de navigation pour obtenir des informations, puis travailler les sous-menus qui apparaissent? J'ai toujours pensé que vous survolez le titre principal, obtenez le menu déroulant et allez de là. (Peut-être dit plus techniquement - les éléments de navigation du menu supérieur ont-ils généralement une page de destination lorsque vous cliquez dessus directement?)
Voici un autre e-mail que j'ai reçu d'un client avec la même question:
Question pour vous - les menus déroulants ..... quand je vois un menu déroulant, je ne pense pas à cliquer sur l'élément supérieur parce que je suppose que c'est l'en-tête - est-ce juste moi ou pensez-vous que les gens pourraient manquer de cliquer sur le "À propos de la fondation" et voir la pièce là-bas? Même chose avec la demande de subvention - les instructions et la demande devraient-elles toutes deux être des éléments de sous-menu afin que les gens puissent facilement trouver à la fois la demande et les instructions? Je ne sais pas si cela a du sens pour vous, mais je suppose que je demande si lorsqu'il y a des éléments de sous-menu, l'en-tête ne doit pas être un lien?
Dans le passé, j'ai supposé que les utilisateurs savent que le lien de niveau supérieur est en effet un lien vers une page, et pas seulement un espace réservé pour survoler afin de déclencher la liste déroulante et d'afficher les "vrais" liens. Je pense que cette supposition a été erronée, et ce n'est pas la première fois qu'un client me pose des questions à ce sujet, ou ne passe pas en revue plusieurs pages parce qu'il n'était pas au courant des liens.
Si je n'avais pas les meilleures pratiques en tête et que je n'étais pas un puriste HTML, je rendrais simplement les liens de niveau supérieur "morts", soit avec href="#" Ou href="javascript:void(0)", laissez-les être espaces réservés uniquement, et appelez-le un jour. Pour des raisons techniques, ils doivent toujours être des éléments <a>. Bien que cela soit tentant, je pense que c'est une mauvaise pratique et qu'il y a probablement des problèmes d'accessibilité à le faire également.
J'ai géré ce problème en dupliquant le lien de niveau supérieur dans la liste déroulante (créant un autre lien identique avec un texte différent), ce qui est la meilleure idée à laquelle je peux penser. J'ai également créé des pages "récapitulatives" qui ré-énumèrent simplement les sous-liens (un peu inutiles).
Les utilisateurs ne savent pas toujours que le survol du lien déclenchera une liste déroulante jusqu'à ce qu'ils le fassent réellement (sauf s'il y a de petites flèches ou quelque chose). S'attendent-ils à ce que chaque lien qui ouvre un autre niveau de navigation (lorsqu'il est survolé) soit également lié à une page lorsque vous cliquez dessus? Qu'en est-il de la navigation à 3 ou même 4 niveaux de profondeur?
C'est incroyable que je sois parti donc des années sans y penser: Comment les utilisateurs s'attendent-ils à ce que les liens dans la navigation déroulante fonctionnent, et que dois-je dire à ce client?
Les liens qui ont un sous-menu doivent-ils être non cliquables ou accéder à une page de présentation/résumé (contenant probablement une version étendue du sous-menu), ou est-il "OK" de placer des liens vers des pages importantes uniques comme niveau supérieur d'une liste déroulante? Plus j'y pense, plus je suis enclin à dire que c'est pas OK, car ces liens peuvent être facilement manqués ou négligés, ou les utilisateurs attendez-vous = rien de plus qu'une page de présentation.
Intéressé à entendre ce que vous avez à dire sur les attentes des utilisateurs de cette interface Web extraordinairement commune.
En général:
- HOVER pour afficher plus de liens lorsque la barre de menus est principalement un moyen de naviguer sur un site Web
- CLIQUEZ pour afficher plus de liens lorsque la barre de menus est principalement utilisée comme barre de tâches d'une application Web (plus semblable à une application de bureau standard)
Lorsqu'il est utilisé comme navigation, il y a le problème perpétuel qu'en survolant un lien de niveau supérieur, les gens voient les liens secondaires et sont susceptibles d'en cliquer ensuite sur un. C'est très bien, sauf que les chances sont que le lien de niveau supérieur ne sera pas cliqué presque aussi souvent.
Le remède typique consiste à traiter davantage la page de ce lien de niveau supérieur comme une table des matières pour cette section. En soi, il n'a pas beaucoup de contenu unique mais agit comme une passerelle/un aperçu des autres pages.
Pour répondre à votre commentaire, je vous suggère de ne pas leur faire de liens morts. La raison en est que si les menus déroulants sont mal construits (il y a beaucoup de très lourds JS lourds), les lecteurs Google et d'écran et autres auront du mal à parcourir le site. De plus - et ce n'est que mon opinion - que j'ai trouvé sur les appareils tactiles, je déteste faire face aux listes déroulantes. Je veux juste taper et partir.
Cela me rappelle le chemin du retour à la fin des années 90 (avant que l'UX soit considéré comme une chose importante) lorsque nous faisions des plans de site très basiques. Le client crée le plus souvent le contenu de toutes les pages SAUF celles de niveau supérieur. Cela nous a toujours conduit à avoir à gifler ensemble une liste rapide de liens vers les autres pages pour le contenu de cette page de niveau supérieur. Je suppose que cela a toujours été un problème. ;)
Je me suis souvent retrouvé à visiter une page à partir d'un menu de navigation et je me suis retrouvé à un niveau inférieur dans la hiérarchie de contenu que ce à quoi je m'attendais car il n'était pas évident que la barre de navigation elle-même contenait une couche de contenu entre la page que j'étais et les pages des éléments de menu.
Il y a quelques problèmes auxquels je peux penser avec la duplication de l'élément de niveau supérieur:
Parfois, les éléments d'une barre de navigation n'ont pas de menu car l'élément de la barre de navigation a suffisamment de contenu pour une seule page. Votre suggestion d'avoir un élément en double dans ce cas se traduit par un menu avec un seul élément.
Les utilisateurs utilisent généralement un menu de navigation pour naviguer vers d'autres pages au même niveau dans la hiérarchie de contenu - en supposant que tous les éléments d'un menu sont au même niveau. Si l'un d'eux se trouve être un niveau supérieur à la page actuelle, cela peut être désorientant. (Les parcours de navigation aident à cela)
Cela ajoute à la charge cognitive de l'utilisateur - il semble y avoir plus d'informations pour se rappeler comment y accéder.
Pour ceux qui sont habitués aux éléments de la barre de navigation ayant leurs propres liens, l'élément dupliqué dans le menu prête à confusion et semble inutile
En règle générale, la confusion survient car la barre de navigation n'indique pas à l'utilisateur que les éléments de la barre sont eux-mêmes cliquables et lorsque vous les survolez, les menus qui apparaissent apparaissent et se comportent de manière très similaire aux barres de menus des applications de bureau - où les utilisateurs ne s'attendent jamais à ce que les éléments de la barre activent autre chose qu'un menu déroulant.
Concevez donc la barre de navigation de manière sensiblement différente d'une barre de menus de bureau et fournissez suffisamment d'indices à l'utilisateur pour que les éléments de la barre de navigation soient eux-mêmes cliquables - par exemple en séparant les éléments les uns des autres dans la barre et en les mettant en surbrillance pour les rendre "chauds" lorsque vous survolez, cela vous aidera. Séparez le menu lui-même un peu de la barre, ce qui peut faire apparaître le menu lui-même dans un style différent de la barre de navigation elle-même. Cela peut alors certainement aider. Notez que le menu devrait apparaître assez rapidement lorsque vous survolez un élément de la barre de navigation.
J'ai trouvé ce problème assez fréquemment dans les thèmes WordPress, donc quand j'ai choisi un thème WordPress pour mon propre site Web, j'ai été particulièrement attiré par un thème de ThemeShift (Voir l'exemple ci-dessous sur leur site Web: http://themeshift.com/demo/designum/ ) qui a rendu la barre de navigation suffisamment distinctive, de manière à rendre les éléments de la barre de navigation clairement cliquables à part entière, et les menus de survol affichent leurs éléments dans un style sensiblement différent. Je cite cela comme un bon exemple, mais il y a bien sûr de nombreux sites qui montrent la navigation barres bien.
J'ai récemment reçu une demande similaire d'un client disant qu'il ne voulait pas de contenu dans la page de niveau supérieur et nous avons plutôt ajouté une page dans la zone de liste déroulante et y avons mis le contenu.
Ensuite, pendant que je jouais pour résoudre les problèmes de curseur, il affichera une flèche au premier niveau et un pointeur uniquement aux sous-niveaux ... page de niveau qui semble très cliquable mais ne va nulle part. Je pourrais créer une liste de liens mais le client a à peine assez de contenu pour le justifier.
Quoi qu'il en soit, cela peut probablement être corrigé, mais juste une pensée que ces décisions finissent également par avoir un impact sur la navigation mobile.
Pour l'un des sites que je gère, j'ai reçu une demande de correction pour que le contenu le plus important soit déplacé vers le sous-menu, car la plupart des gens ne penseraient pas à cliquer sur le menu principal. Je suis un peu étonné que les gens supposent qu'il n'y a rien. Dans mon esprit, il est évident que le menu principal a du contenu, et ce serait le point de départ. Sur la recherche sur Internet, je vois de nombreuses requêtes Web pour pouvoir rendre le menu supérieur non cliquable. Nous devons donc faire face à deux types d'utilisateurs, ceux qui ne regardent que dans les sous-menus et ceux qui cliquent sur les menus principaux. Plutôt que de rendre le principal non cliquable, je pense qu'une meilleure solution consiste à créer un lien de sous-menu vers cette même page et à l'appeler quelque chose de différent. Cela permet de contourner les problèmes non cliquables sur les appareils mobiles et tablettes. Si la conception Web le permet, vous pouvez dupliquer le nom, mais je pense que les moteurs de recherche auraient du mal à cela. Apparemment, nous voyons la plupart des premiers et des derniers, alors j'irais pour la répétition au bas du menu déroulant. En attendant, j'ai configuré Google Analytics pour voir comment les gens naviguent sur mon site.
Cela fait quelques années que je suis confronté à ce problème. Je suis étonné d'entendre des commentaires et des questions similaires. Cela devient de plus en plus courant maintenant que les gens sont en pilotage automatique et ont tendance à ne cliquer que sur ce qu'ils supposent. Nous avons des utilisateurs de site "chevronnés" qui savent cliquer sur n'importe quoi, et d'autres qui cliquent sur des choses basées sur de mauvaises approches UI et UX établies par Windows.
Ma réponse à cela est, malheureusement, que lorsqu'un nombre suffisant de personnes utilisent incorrectement une chose courante, cela devient standard. Tout comme l'enregistrement de la télévision numérique est maintenant appelé DVRing, mais nous ne l'avons jamais appelé VCRing par le passé. Donc, si l'on s'attend à ce que l'élément du menu principal (ugh, 'tab') ne contienne pas le contenu lui-même, et seulement les sous-pages déroulantes, alors, je suis d'accord avec la solution ci-dessus pour créer une table des matières pour cette section en tant que page de destination, au cas où vous cliqueriez dessus.
Il est dommage que tant de gens ne sachent pas comment utiliser les sites Web et fassent de nombreuses hypothèses qui paralysent et réduisent les interfaces du site.
"Comment les utilisateurs s'attendent-ils à ce que la navigation déroulante fonctionne?"
Cela n'a pas de réponse unique, car certains s'attendent à un comportement différent des autres.
La clé de ce problème, à mon avis, est d'améliorer la structure du contenu. Dès que vous vous éloignez d'un plan de site à un niveau, vous devez penser de manière hiérarchique. Chaque page parent est le résumé de ses pages enfants et chaque page enfant couvre une partie de son sujet parent.
Cette façon de penser résout deux problèmes:
Les utilisateurs qui ne cliquent pas sur la page parent ne manqueront aucune information détaillée, juste l'aperçu.
Cela permet au gestionnaire de contenu de réfléchir aux bons titres de menu axés sur le contenu.
La duplication du lien parent dans le menu déroulant peut fonctionner dans certains cas. Le premier ou le dernier élément peut être Aperçu des admissions, mais doit être visuellement séparé des autres éléments.
J'ai rencontré ce problème pour la première fois en 2008, et je l'ai annulé car le client ne l'avait pas compris. J'ai fait quelques tests informels rapides et j'ai constaté que d'autres personnes ne l'avaient pas non plus, que les principaux éléments de navigation avec des listes déroulantes étaient également cliquables eux-mêmes. Pour tout internaute initié, c'est une évidence. Mais apparemment pas aux autres.
Je viens de le rencontrer encore en 2015 avec un nouveau site que je suis sur le point de lancer, et encore avec un autre site que je mets à jour pour un client. Il est insondable pour moi que les gens ne comprennent pas, mais cela semble être hors de propos puisque c'est ce qui se passe.
Flickr adopte la même approche que Home Depot, ayant le premier élément dans le lien déroulant vers la même page que l'élément de navigation principal, mais avec un nom différent. Cela me fait mal, mais c'est l'approche que je vais adopter. Je vais également tester l'idée d'une différence visuelle entre la navigation principale et la navigation secondaire, mais je doute que cela vole ...
C'est une longue norme que chaque lien de niveau supérieur présente une page avec le nom du lien et que cette page présente le niveau suivant de sous-liens. Cela continue pour chaque niveau. Le contenu de ces pages doit contenir et un aperçu des pages que chaque lien présentera.Une trace de chapelure sous la barre de navigation est également très bonne pour les personnes qui préfèrent revenir directement au lien ci-dessus ou même deux niveaux au-dessus.
Il y a de nombreuses raisons de le faire, par exemple j'utilise une résolution de 1900x1200 et une souris haute résolution, donc les navs en cascade peuvent être difficiles sur des sites où ils sont trop fins ou mal structurés et ils s'effondrent pendant la navigation. Dans de tels cas, je préfère simplement cliquer sur le lien et aller à la page de présentation où je peux cliquer sur des liens de texte standard. J'aime aussi beaucoup la chapelure lorsque je surfe sur des sites avec un grand nombre de pages.
Si vous prévoyez de rendre votre site réactif, vous devrez effectuer des listes déroulantes à niveau unique car les listes déroulantes en cascade ne sont pas bien portées sur les téléphones.
S'il contient du contenu supplémentaire (liste déroulante), il doit apparaître au passage de la souris. Si vous cliquez sur le lien parent, il vous amènera à la page parent pour ce contenu (Admissions).
Jetez un oeil à Home Depot's site. Ils font exactement ça. Ils ajoutent également un signe d'insertion à chaque élément de navigation principal qui contient une liste de contenu supplémentaire.
