web-dev-qa-db-fra.com

Le fil d'Ariane serait-il efficace s'il incorporait des listes déroulantes?

Je pense actuellement à ajouter une section assez complète à un site Web: la section dont je parle commence au niveau 3 du site Web global et elle-même a quatre autres niveaux structurels. Massif!

Je ne peux pas utiliser ou toucher la navigation horizontale du site Web qui est utilisée pour les deux premiers niveaux du site Web. Je cherchais une alternative à une navigation à gauche qui offre toujours une grande flexibilité à l'utilisateur.

Donc, mon idée était d'utiliser une sorte de navigation par fil d'Ariane - bien que chaque élément du fil d'Ariane soit un menu déroulant. Chaque sélection dans une liste déroulante remplirait la liste déroulante suivante avec les sous-pages de la page sélectionnée. De même, une sélection ouvrirait la page correspondante.

Ainsi, l'utilisateur pourrait utiliser les listes déroulantes pour avancer et reculer - mais aussi pour changer de catégorie ou de sous-élément.

enter image description here

31
John Sample

Microsoft le fait dans l'Explorateur Windows! J'ai remarqué cela sur mon ordinateur de travail Windows 7 il y a quelques semaines à peine, et je ne saurais trop insister sur son utilité (dans certaines situations)

La clé ici est qu'ils l'ont rendu extrêmement fonctionnel, mais il reste également à l'écart jusqu'à ce que l'utilisateur le découvre.

30
Karen

J'éviterais d'utiliser des listes déroulantes directes comme dans l'exemple, car cela empêchera les utilisateurs de comprendre son objectif en tant que fil d'Ariane. Suivez plutôt l'exemple de Microsoft avec sa navigation dans les fichiers; mettre en surbrillance au survol pour indiquer la cliquabilité (peut-être changer le symbole> au survol en un symbole v pour indiquer une liste déroulante).

En affichant visuellement un fil d'Ariane standard, vous ne confondez personne. En offrant la possibilité de survoler, vous encouragez à cliquer, ce qui conduira à la découverte de la fonction de navigation. C'est du moins la théorie; c'est ce que Microsoft a fait dans l'Explorateur. Il devrait être évident que l'efficacité de cette méthode est inégale compte tenu des utilisateurs de cette question seuls qui n'ont pas réalisé la nouvelle méthode d'interaction disponible dans Explorer. Je suis d'avis qu'il sera plus efficace sur un site Web, qui a généralement moins d'effets en vol stationnaire et de complexité que l'Explorateur Windows. L'effet sur votre navigation sera probablement plus unique et plus prononcé, et donc plus découvrable.

5
Myrddin Emrys

J'ai vu deux sites Web, utilisant ce type de fil d'Ariane. Et pour moi cela semble assez efficace . Apparemment, si vous avez une structure énorme comme celle du Guardian.

L'un est exactement le comportement de Windows Explorer - Lonely Planet and Guardian utilise une approche différente, que j'aime pour sa conception épurée. Ce dernier a ses éléments de sous-menu (ou éléments de zone de liste) en clair à l'extrémité droite du fil d'Ariane.

enter image description here

Source de l'image i-patterns.com . Lonely Planet en action . En fait, vous voyez votre élément choisi à droite de sa liste, c'est-à-dire. vous pouvez choisir les villes dans le menu "Danemark". Prendre Copenhague le montre à droite. Cela semble assez intuitif et je pense que le fil d'Ariane montre les catégories du site.

.

.

enter image description here

Source de l'image i-patterns.com . Voir Guardian ici . Le gardien de modèle utilise est différent. Ils montrent des "liens croisés" ou des "sujets connexes" à droite des chapelures sur le fil d'Ariane du troisième niveau. Ainsi, News (premier) et World News (deuxième) sont des catégories "fixes". Où "l'administration Obama" sera remplacée si vous choisissez "Economie". Cela signifie que vous n'aurez jamais une structure plus profonde que 3 miettes de pain. Pour moi, ce n'était pas évident à première vue, mais après l'avoir utilisé un peu, cela semble correct. Cependant j'aime son attrait visuel.

5
FrankL

Jetbrains IntelliJ IDEA fait aussi cela (cela s'appelle barre de navigation ) et je le trouve extrêmement utile:

intellij http://www.jetbrains.com/img/webhelp/navigationBar.png

Après l'avoir découvert, je reviens rarement à la vue de structure de projet d'arbre ordinaire.

3

Un très bon exemple (et magnifiquement mis en œuvre aussi) est Xcode4 d'Apple:

enter image description here

La fonctionnalité supplémentaire intéressante ici est que les éléments de menu eux-mêmes ont des sous-menus, donc vous pouvez en fait naviguer dans l'arborescence (massive) en un seul clic et en planant.

Une caractéristique supplémentaire est que lorsque l'utilisateur commence à taper dans le menu, les éléments sont filtrés en fonction de cette requête de recherche, ce qui rend la navigation encore plus rapide:

enter image description here

1
Jakub Hampl

Je suis d'accord avec ce que vous essayez de réaliser avec cela. Mais l'objectif principal de la navigation est de faire visiter le site aux visiteurs. Le fil d'Ariane est utilisé pour afficher clairement où se trouvent les visiteurs et à quelle profondeur ils se trouvent sur le site.

Je pense que vous avez mélangé les deux et perdu le sens de l'utilisation des miettes de pain. Cette conception me ressemble plus à un filtre de recherche, quelque chose que vous devrez cliquer pour dire "Aller" ou "Rechercher".

Si je voulais savoir où je suis sur ce site, je ne m'attendrais jamais à ce que ces listes déroulantes indiquent clairement où je suis, mais plutôt un outil pour rechercher le site.

Je proposerais toujours la chapelure traditionnelle pour plus de clarté.

0
Steven Wu

Merci pour toutes vos réponses, opinions et exemples utiles. Mon intention en premier lieu est d'obtenir une navigation utile et flexible. Plutôt que d'implémenter une fonction, le fil d'Ariane est chargé. Donc, mon titre aurait pu être un peu trompeur.

En attendant, j'ai fait un (très) peu de tests A/B et comparé les listes déroulantes avec une navigation commune à gauche. Il semble qu'au moins les deux personnes testées ont rapidement compris la fonctionnalité des listes et ont aimé l'utiliser.

Je suis sûr que le design jouera enfin un grand rôle. L'illustration ci-dessus était certainement destinée à soutenir mon explication - pas un projet de mise en œuvre finale. Mon mannequin de clic a déjà utilisé des listes déroulantes non-système. En fin de compte, je vais certainement opter pour des listes déroulantes bien conçues ou jouer avec quelque chose comme la planète solitaire.

0
John Sample