web-dev-qa-db-fra.com

Comment résoudre un menu de barre latérale à plusieurs niveaux où les sections parentes doivent montrer les enfants ET lier quelque part

Remarque: Lorsque vous lisez ceci, gardez à l'esprit que nous pouvons avoir plus d'un problème d'architecture d'information qu'un problème d'utilisation du menu.


Supposons que nous ayons ce menu:

Item 1              ............  Should link to Page 1 AND somehow show its children
    Item 1.1        ............  Should link to Page 1.1
    Item 1.2        ............  Should link to Page 1.2
    Item 1.3        ............  Should link to Page 1.3 AND somehow show its children
        Item 1.3.1  ............  Should link to Page 1.3.1
        Item 1.3.2  ............  Should link to Page 1.3.2
Item 2              ............  There is no Page 2. This should not link anywhere. Only show its children.
    Item 2.1  
    Item 2.2
    Item 2.3

Etc. with more items....


Le défi:

  1. Nous voulons que les articles pour enfants et petits-enfants soient cachés par défaut, nous avons donc besoin d'un moyen de les montrer à la demande.
  2. Nous ne voulons pas utiliser une interaction flyout/hover avec laquelle nos utilisateurs ont du mal. Nous voulons seulement utiliser le clic.
  3. Certains éléments parents sont des pages elles-mêmes et doivent donc être liés à une manière ou à une autre. D'autres éléments parents existent uniquement pour fournir une sorte de titre de groupe pour englober leurs enfants et afficher la structure du site, mais ces éléments parents ne sont pas eux-mêmes des pages.
  4. Base d'utilisateurs: personnes de plus de 40 ans et ayant peu d'expérience sur Internet et parfois une vision/dextérité limitée. Ils ont des problèmes avec des choses que vous n'imaginez pas.


J'ai pensé à faire quelque chose comme:

Link 1  [+]
    Link 1.1
    Link 1.2
    Link 1.3 [+]
        Link 1.3.1
        Link 1.3.2
Non-link 2  [+]
    Link 2.1
    Link 2.2

Où le symbole [+] serait une icône qui montre que vous pouvez ouvrir/fermer un sous-niveau. Vous cliqueriez dessus pour voir les articles pour enfants mais vous cliqueriez sur le texte pour aller réellement à une page. Je crains que l'icône [+] soit trop petite pour être facilement cliquable par nos utilisateurs.


Toute suggestion alternative serait très appréciée car j'ai eu ce problème sur 3 projets maintenant et je n'ai jamais vraiment trouvé de solution qui me satisfait.

================================================== ==========

MISE À JOUR:

Eh bien, il semble que nous modifions l'IA ou que nous effectuions une vue d'ensemble comme décrit ci-dessus et illustré dans l'une des réponses ci-dessous. Si quelqu'un voit ce message et a une meilleure idée, faites-le moi savoir.

usabilitymenuaffordancehoverclick
2
Andres Diez

Je suis désolé de vous le communiquer, mais il n'y aura pas de solution si vous n'êtes pas prêt à changer du tout l'IA.

Une solution (bon marché et pas très élégante) consiste à toujours déplacer le contenu sur le parent d'un niveau vers le bas et à l'appeler quelque chose comme "aperçu" ou "introduction"; comme ceci lorsque vous cliquez sur un parent, le sous-niveau s'ouvre et le premier élément du sous-niveau est actif. Pas sympa, mais mieux que des icônes plus ou des trucs comme ça.

J'espère que ça aide, Phil

1
Phil

N'est-ce pas une vue d'arbre classique dont vous avez besoin ici?

Exemple: http://cssglobe.com/lab/sitemap_styler/01/# et http://boagworld.com/demos/sitemap/#

Ceci est en fait très proche de votre propre réponse suggérée, seule la position du bouton [+] est à gauche du lien.

1
Bart Gijssens

Je changerais le modèle d'interaction et ferais développer/réduire les titres de leurs enfants, tout en utilisant une icône pour suivre le lien.

Il semble que la majeure partie de l'interaction avec ce menu consistera à naviguer dans le menu lui-même, et cette exploration sera une action beaucoup plus courante que la suite d'un lien. Il est donc logique d'affecter cette action au grand élément facilement accessible (l'étiquette). Vous pouvez faire la distinction entre les parents et les articles sans enfant du même niveau en codant par couleur, ou en rendant les parents en gras ou une autre astuce de mise en forme.

Maintenant, l'élément menant à la page liée peut être placé à droite de l'étiquette. Afin de le résoudre visuellement, ceux-ci peuvent tous être alignés à droite dans une colonne, semblable à une table des matières. Vous pouvez également donner à cette colonne une étiquette qui les aidera à comprendre la signification de l'icône. La similitude visuelle avec une table des matières emploie également une métaphore qu'ils connaissent probablement, avec la navigation réelle effectuée dans la partie droite de l'élément (numéros de page).

1
Vitaly Mijiritsky

Selon les spécificités de votre conception, vous pourrez peut-être améliorer le modèle d'arborescence avec la disposition:

Link 1             [+]
  Link 1.1
  Link 1.2
  Link 1.3         [-]
    Link 1.3.1
    Link 1.3.2
Non-link 2         [-]
  Link 2.1
  Link 2.2

Cela obtient la cible de clic du [+] loin du lien texte (ce qui lui permet d'être à la fois plus grand et plus facile à toucher sans déclencher accidentellement une autre action) et les aligne, ce qui évite à un utilisateur de rechercher pour trouver la fonction 'show' d'une ligne particulière.

Aussi: Je pense que votre cas sans lien va entraîner une confusion chez les utilisateurs, en particulier chez les utilisateurs plus âgés. Des éléments similaires dans votre IA devraient prendre une forme parallèle - être en mesure de cliquer sur un élément de niveau supérieur pour accéder à cette page et ne pas pouvoir cliquer sur un autre va se sentir cassé.

0
Drew Beck