Meilleures pratiques du menu hiérarchique / déroulant du site Web
J'essaie de comprendre la meilleure façon de communiquer avec les utilisateurs via les menus de navigation du site Web et, en particulier, les menus à plusieurs niveaux.
- Alors que le monde devient plus mobile, le Web aussi.
- Les sites Web vont être "réactifs". Un site Web est codé une fois pour fonctionner sur le plus grand ordinateur de bureau et le navigateur d'un téléphone mobile. Les développeurs utilisent des outils pour gérer les feuilles de style en cascade pour s'adapter automatiquement au périphérique d'affichage.
- Une chose que les appareils mobiles n'ont pas, c'est une souris pour la saisie. Par conséquent, il n'y a pas de capacité de survol de la souris. Les appareils mobiles ont uniquement une capacité "tactile".
- Oui sur les petits appareils mobiles, la barre de menu supérieure du navigateur est normalement cachée derrière un bouton d'affichage de menu, et lorsque ce bouton est enfoncé, le menu est visible pour l'utilisateur. Bien qu'il soit possible d'afficher la structure du menu ENTIER (avec un espacement en retrait pour afficher les éléments sous-titrés) qui peut submerger un appareil mobile assez rapidement. Le modèle caché sous-hiérarchisé peut économiser sur l'espace d'affichage.
- Sur une grande tablette, il n'y a toujours pas de survol de souris disponible. Pensez iPad en mode paysage.
Par conséquent, les menus déroulants à plusieurs niveaux ont des performances quelque peu étranges. Un utilisateur utilise une touche (ou un clic de souris sur le bureau) pour afficher les éléments de sous-menu cachés. Un deuxième toucher/clic est nécessaire pour sélectionner un sous-menu.
Ma question implique des commentaires à l'utilisateur sur lequel l'élément de menu est actuellement affiché. Un élément de menu de niveau supérieur est facile. Vous changez de couleur/police/arrière-plan pour identifier que c'est différent. Voici un exemple:
Le problème concerne l'affichage actuel pour une sélection de sous-menu. Il ne semble y avoir aucun bon moyen de signaler qu'un élément de sous-menu est sélectionné. Voici un menu avec l'élément de menu à plusieurs niveaux sélectionné via un toucher/clic de souris. Le "tactile" affiche les choix disponibles dans le sous-menu:
Nous pouvons facilement afficher l'élément sélectionné sur la nouvelle page ET après avoir touché l'élément de menu supérieur. Dans ce cas, un simple changement de police (gras/italique) fonctionne bien:
Et voici le dernier dilemme. Le site Web affiche actuellement "Ressource 2". Il s'agit de l'état normal affiché après que le site Web accède à la nouvelle page. Alors, comment communiquez-vous à l'utilisateur qu'un élément de sous-niveau est sélectionné lorsque seul le menu supérieur est affiché?
Et voici la même page sur un téléphone mobile, juste après avoir appuyé sur le bouton de menu (Remarque: je n'ai pas fini de styliser le mobile. Ce logo supérieur est beaucoup trop grand. Il devrait être au ¼ de cette taille, etc.) Je veux que vous pour voir le même système de menus à plusieurs niveaux:
Quelle est la meilleure pratique ici pour afficher un élément de sous-menu sur la page actuelle?
- Ajoutez un fil d'Ariane en dessous du menu ("vous êtes actuellement sur la page d'accueil")
- Style l'élément de menu de niveau supérieur comme un élément de menu sélectionné autonome, même si vous ne pouvez pas voir directement quel élément de sous-menu particulier que vous regardez?
- Laisser le menu déroulant ouvert et visible lors de la visite de cette page particulière? Encore une fois, c'est tout le menu tier2 qui est tiré vers le bas et affiché. Toujours. Aie.
- Ajoutez un repère de style subtil supplémentaire à l'élément de menu de niveau supérieur (icône supplémentaire, symbole de curseur en V agrandi, soulignez le texte, le texte en italique, etc.)
- Laissez-le caché, qui s'en soucie de toute façon? (Certainement un choix, aïe encore.)
Il doit y avoir des conseils de style systémique sur les meilleures pratiques pour ce genre de choses. Quelqu'un connaît les résultats des récents sondages auprès des clients? Merci beaucoup pour vos commentaires.
Smashing Magazine a publié un article sur l'orientation mobile qui je pense est très utile: http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/
Aucune de ces solutions n'est fausse , mais étant donné le choix, j'utiliserais probablement l'approche "poupée imbriquée" comme point de départ. C'est un modèle familier sur iOS et Android et éliminerait le fardeau cognitif de l'apprentissage d'un nouveau modèle.
