Interface à écran tactile pour le menu et la facilité d'utilisation du menu déroulant
Je fais la conception de pages Web en utilisant menu déroulant de Twitter Bootstrap .
Problème: Supposons que j'ai un menu horizontal comme indiqué dans la documentation Twitter Bootstrap. Cette barre de menu qui répertorie les pages que je veux parcourir, et l'une des pages contient des sous-pages.
Si je devais normalement répondre à une machine de bureau ou à toute personne disposant d'une souris/d'un pavé tactile, l'utilisateur passera le curseur de la souris sur la page B, pour découvrir qu'il existe des sous-pages, B-1 et B-2.
S'il veut aller à la page B, il suffit de cliquer sur le lien. S'il veut aller aux sous-pages, il passera sur la page B, puis passera sur l'une des sous-pages pour cliquer dessus.
Cependant, sur un appareil à écran tactile, nous n'avons pas le luxe d'un vol stationnaire.
Solution A: Comme pour l'implémentation de Bootstrap, par défaut, l'utilisateur devra cliquer sur l'un des déclencheurs du menu déroulant pour ouvrir le menu. Cela rend le lien "Page B" inutile en tant que lien, car il est utilisé comme déclencheur pour ouvrir un menu à la place. Cela rompt le regroupement logique des éléments dans la présentation.
Solution B: L'autre solution est " liste déroulante des boutons fractionnés ", où l'utilisateur doit cliquer sur le bouton ou la moitié du bouton pour déclencher l'apparence de ce menu. Et faites le lien Page-B dans le sous-menu. Cette solution rend la complexité visuelle du menu horizontal principal beaucoup plus élevée.
Je voudrais savoir, pour concevoir des appareils à écran tactile, s'il existe des moyens de le modéliser après l'expérience utilisateur de bureau de cliquer directement sur la page-B? Sinon, existe-t-il des solutions meilleures que la solution B avec moins de complexité visuelle?
Moins de clics est toujours bon.
J'espère que je comprends bien cette question. Une troisième solution pourrait être de faire une légère mise à jour de votre "solution A"; oui, un clic ouvrira le menu mais une fois ouvert si l'utilisateur clique à nouveau sur le lien "Page B" qui le mènera au lien, plutôt que de fermer la liste déroulante.
Je ne suis pas convaincu à 100% que tous les utilisateurs comprennent de toute façon le fonctionnement des menus déroulants de survol, donc permettre à ces menus d'être également navigables par clics (même sur les bureaux) devrait également aider ces utilisateurs.
Vous devrez montrer que cet élément de menu est maintenant un lien plutôt qu'un simple bouton - faites-le souligner au survol pour donner plus d'importance.
Si l'idée de cliquer sur le menu de haut niveau une fois qu'il est ouvert ne convient pas (probablement un pour certains tests AB peut-être), vous pouvez toujours déplacer l'option 'Page B' pour être son propre lien dans le menu déroulant lui-même, le L'option du menu supérieur étant le premier élément de la liste, différenciée des sous-niveaux dans le style pour montrer qu'il s'agit d'un élément de titre sélectionnable en plus des éléments de niveau inférieur sélectionnables ci-dessous.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
J'aime aussi la suggestion de Jon W. Peut-être que l'indentation et les puces aideraient à souligner la nature hiérarchique de la navigation.
Et si vous rendez la barre de menus et le menu déroulant visuellement suffisamment distincts, je pense que la répétition de l'élément de menu "Trois" serait moins déroutante.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Lorsque l'utilisateur appuie sur B, le menu se développe.
S'ils tapent à nouveau sur B alors que le menu est ouvert, ils vont à B.
Si ce n'est pas assez intuitif, changez l'apparence de B lorsqu'il est développé pour correspondre aux signaux "Tapez ici pour aller" des éléments de navigation secondaire.
Avez-vous envisagé d'utiliser une barre de navigation horizontale coulissante? ala iOS?
Cela semble (légèrement) plus élégant que d'avoir à cliquer/cliquer, voir le menu développé, puis à traiter.
L'interface iOS est un peu plus élégante en termes de présentation d'une métaphore cohérente du mouvement.