Quelle est la meilleure façon d'afficher une liste de catégories hiérarchique avec un aperçu?
Je travaille sur un site conçu pour afficher des données organisées en catégories hiérarchiques. Nous recherchons le meilleur moyen d'afficher ces catégories afin d'afficher à l'utilisateur une grande quantité d'informations en un minimum de clics.
Quelques exigences:
- La liste des catégories est un nombre arbitraire de niveaux, mais nous n'avons besoin d'afficher que deux niveaux vers le bas sur une page donnée - c'est-à-dire que si nous sommes sur une page pour une catégorie de niveau 2, nous voulons montrer ses enfants et ses petits-enfants.
- Nombre arbitraire d'enfants et de petits-enfants dans une catégorie donnée, mais seuls les ~ 10 premiers enfants et ~ 3 petits-enfants pour chaque enfant doivent être affichés initialement; le reste peut être masqué et développé/réduit.
- Toute catégorie enfant "nœud feuille" (c'est-à-dire celle qui ne contient pas de petits-enfants) a un contenu qui doit également être affiché dans la liste, mais peut être extrait.
- En survolant une catégorie (ou en cliquant sur un lien "Aperçu" à côté), un panneau d'aperçu affiche une partie du contenu de cette catégorie afin qu'un utilisateur puisse voir les informations les plus importantes pour cette catégorie sans quitter la page actuelle.
Presque tout le reste est en l'air - par exemple, si l'aperçu s'active via le survol ou le clic; que ce soit une info-bulle ou un élément statique, etc.
Voici un candidat sur lequel nous travaillons. Dans cet exemple, l'utilisateur survole ou a cliqué sur "Laitue Iceberg". "Grains" est un nœud de feuille avec un contenu extrait affiché. Les "23 More" et "Collapse" développent ou réduisent les listes de petits-enfants.
L'un d'entre vous a-t-il de l'expérience dans la mise en œuvre de quelque chose comme ça? Toutes les suggestions sont chaleureusement accueillies. :)
Je peux penser à quelques suggestions (que vous aimerez ou non, j'accueillerais volontiers des commentaires constructifs), mais la plupart d'entre elles pourraient être utilisées en combinaison, alors voyez ce que vous en pensez:
- Affichez la description de la catégorie sur l'événement onhover du titre de la catégorie (bien que cela ne fonctionne pas pour les appareils tactiles).
- Affichez un peu de texte à côté du nom de la catégorie pour indiquer le nombre de sous-catégories:
Fruits (23 sous-catégories) - Ajoutez un indicateur déroulant à côté du nom de la catégorie et affiche un menu sous forme de grille de sous-catégories (multi-colonnes), il s'agit essentiellement d'un menu multi-colonnes qui évolue vers une liste beaucoup plus large qu'un menu standard.
- Utilisez un indicateur de développement/réduction en forme de bouton, mais placez-le, par exemple, à gauche du nom de la catégorie, l'utilisateur n'a pas besoin de parcourir les sous-catégories pour trouver le bouton de développement/réduction (comme dans votre exemple actuel) ), car il est toujours au même endroit. Du texte et/ou une image pourraient être utilisés (avec le texte affichant le nombre de sous-catégories) pour cela:
# 23 Fruits
Certains d'entre eux (en particulier s'ils sont utilisés en combinaison) pourraient donner aux en-têtes de catégorie un aspect très chargé, cela dépend de ce que vous pensez être les informations les plus utiles pour les utilisateurs et de la longueur des descriptions de vos catégories.
Je recommanderais une mise en page comme celle-ci où vous montrez une partie du contenu au début et en cliquant sur Afficher plus, les autres colonnes sont totalement réduites et la seule colonne sélectionnée est entièrement expansée. Le nombre à côté de la vue mentionne davantage le nombre d'éléments dans la catégorie.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le nombre de clics n'est pas utilisable. Ce que vous voulez, c'est du temps sur les tâches et le nombre d'erreurs. S'il faut plus de temps à un utilisateur pour identifier visuellement où il veut cliquer (il s'agit généralement d'une tâche longue), vous perdez. Si c'est rapide mais 90% du temps, l'utilisateur se retrouve au mauvais endroit, vous perdez. Amazon a trouvé un très bon moyen de le faire, soutenu par des millions de dollars et des milliards de dollars de revenus dans la balance. Je copierais leur modèle, même si cela signifie un clic de plus.
De plus, une navigation hiérarchique signifie que vous pouvez économiser des pixels, aérer vos conceptions pour l'efficacité et l'esthétique du pointage. Il est également susceptible d'aider votre utilisateur à comprendre à long terme l'architecture de l'information du site.