Navigation accessible de grands arbres d'information

Question

Je suis en train de créer un site Web public qui constitue le point de départ de l’information sur les problèmes de santé.

Après avoir effectué une recherche (basée sur un questionnaire), l’utilisateur présente les résultats qui sont classés en sections et sous-sections.

Vous pouvez affecter des éléments d’information aux sections et aux sous-sections.

Pour l'instant, les sections sont représentées par des onglets en haut et à l'écran et les sous-sections par des liens dans une barre latérale. Les liens dans la barre latérale changent en fonction de la section sélectionnée.

Le problème est que les noms de section sont assez longs (plusieurs mots) et que la longueur combinée des onglets est trop large pour une résolution d’écran standard (1024 x 768). Par conséquent, ils enveloppent et cassent la mise en page. Nous devrons également ajouter d'autres onglets à l'avenir.

Compte tenu de ce problème et du fait que notre public cible est assez large, il s’agit d’un site Web médical public. Quelles options existe-t-il pour présenter ce type d’informations de manière accessible et facile à naviguer pour un utilisateur moyen?

Answer 1

Quelle est la longueur des noms de sous-section? Est-ce que ils vont dans l'espace pour les onglets? Vous obtiendrez probablement de meilleures performances utilisateur si vous placez les liens de section dans le menu de la barre latérale et les liens de sous-section dans les onglets, plutôt que l’inverse. Voir http://www.usability.gov/pubs/040106news.html .

L’autre solution consiste à tout mettre dans le menu de la barre latérale. Les liens de sous-section peuvent apparaître en retrait sous leurs liens de section. Vous pouvez également envisager de placer les liens de sous-section dans une colonne distincte, à droite de la colonne de section. Cela rend le menu de section stable, mais prend beaucoup d’espace horizontal qui est peut-être mieux utilisé pour le contenu. Dans les deux cas, une attention particulière à la conception visuelle montrera la section actuelle, la sous-section et le lien entre eux.

Il ne devrait pas y avoir de problème d’accessibilité tant que vous utilisez des liens pour naviguer dans chaque section / sous-section (peut-être généré par programme pour chaque page sur la base d’une base de données reliant les liens aux pages).

Answer 2

Il suffit de réfléchir à quelques idées:

• Utilisez les listes déroulantes pour permettre à l'utilisateur de sélectionner les (sous) sections, puis d'afficher les informations appropriées.
• Créez des pages distinctes pour chaque niveau de section et fournissez un contrôle sommaire pour indiquer à l'utilisateur sa position dans la hiérarchie des pages.
• Créez une sorte de menu déroulant à masquer automatiquement lorsque l'utilisateur lit un élément d'information.

Dans une autre question sur SO, je suis tombé sur un lien vers Coing , peut-être vous pouvez aussi y trouver de l'inspiration.

Answer 3

Vous pouvez essayer:

• Un menu de style iPod (dans lequel les sous-sections contiennent des pages cachées de droite): http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

Ou, comme l'a dit Daan:

• Zones déroulantes en cascade: http: //www.asp .net / AJAX / AjaxControlToolkit / Samples / CascadingDropDown / CascadingDropDown.aspx

L’inconvénient de ces deux aspects (par rapport à une arborescence traditionnelle) est que les sous-sections ne sont visibles que lorsque vous choisissez une section. Si vos utilisateurs ne connaissent pas le nom de la sous-section qu'ils recherchent, l'un ou l'autre de ces éléments conviendra parfaitement.

Si, par contre, ils connaissent le nom de la sous-section qu'ils veulent, il est probablement préférable de leur donner une zone de texte à saisie semi-automatique afin qu'ils puissent saisir quelques caractères et y accéder directement.