Pour les grandes hiérarchies - arbre de case à cocher ou «construction d'arbre guidé»
Le contexte
Dans mon application Web, j'ai hiérarchie des genres musicaux . Il y a environ 1,5k genres dans l'arbre, et la profondeur de l'arbre est au maximum d'environ quatre niveaux.
Mon application vous permet de choisir dans l'arbre des genres qui sont "autorisés". J'ai utilisé une arborescence de cases à cocher pour modéliser cela. L'arbre entier est rendu et les nœuds que l'utilisateur souhaite "autoriser" sont vérifiés. Voici une capture d'écran:
(Je voudrais me concentrer sur la question des grands arbres de cases à cocher. Il y a un autre argument à avoir si la hiérarchie est la bonne façon de naviguer dans le genre - il y a deux raisons pour lesquelles je l'ai fait de cette façon: (1) il est plus facile de trouver un genre car la recherche n'est pas fournie et (2) lorsque les genres sont interdits, l'application recherche le genre parent le plus spécifique autorisé. Je voulais que ce modèle mental soit conservé dans l'interface utilisateur).
Arbres à cases à cocher pour les grandes structures hiérarchiques: préoccupations
A partir de maintenant, je vais parler des arbres de cases à cocher dans l'abstrait.
Mes préoccupations concernant l'utilisation des arborescences de cases à cocher pour une structure aussi grande sont les suivantes:
- Charge cognitive accrue en raison du nombre de nœuds présentés
- L'utilisateur doit rechercher un nœud particulier qu'il souhaite sélectionner
- C'est sacrément lent (dans les moteurs JS lents comme IE)
Ici, la "grande hiérarchie" est un arbre avec 1 000 nœuds ou plus.
Une alternative - la construction d'arbres guidée
Une alternative que j'ai trouvée dans ma tête est la suivante:
Commencez avec une arborescence vide ou choisissez de bons nœuds racine par défaut.
Lorsqu'un nœud est sélectionné, offrez-lui la possibilité d'ajouter un nœud. Lorsque vous cliquez dessus, une liste d'enfants suggérés est présentée. Cela suggère qu'un arbre "modèle" ou "modèle" est compris par l'interface utilisateur. Dans le cas de l'arbre de genre ci-dessus, la même hiérarchie pourrait être utilisée, c'est juste que cela n'est utilisé que pour suggestion de nœuds enfants. Alternativement, l'utilisateur pourrait simplement taper le nœud qu'il souhaite.
Tous les nœuds peuvent être supprimés de l'arborescence.
Tous les nœuds qui se trouvent dans l'arborescence sont ainsi sélectionnés (dans le cas de l'arborescence de genre, "autorisés").
Il faudrait un mode d'addition en masse, car sinon, l'ajout d'un certain nombre de nœuds prendrait 2 * N où N = nombre de nœuds ajoutés.
Une autre alternative - la construction d'une liste aplatie
Bien que le modèle utilisé en interne pour décider des alternatives de genre pour un album utilise un arbre, cela n'a pas nécessairement besoin d'être représenté dans l'interface utilisateur. Au lieu de cela, une approche de création de liste/liste double pourrait être adoptée.
Exigences de l'une ou l'autre solution
- Noeuds avec arbitraire, décidé par l'utilisateur, des valeurs peuvent être ajoutées ou supprimées
- Tout nœud doit avoir un moyen d'être sélectionné (dans l'arborescence des cases à cocher, cela est vérifié, dans ce dernier, il s'agit simplement de l'arborescence)
Suis-je trop réfléchir à cela? Dois-je simplement aller avec l'arborescence des cases à cocher?
La traversée des arbres et la sélection des nœuds (au moins dans l'implémentation "classique") est une tâche fastidieuse et fastidieuse du point de vue de la conception d'interaction.
Juste une petite pensée:
Que diriez-vous aplatir la hiérarchie style smartphone combiné avec quelque chose le long d'un modèle Listbuilder (dans une version mise à jour, celle montrée dans l'image est plutôt archaïque). Ce dernier car il peut être difficile de garder une trace de vos sélections dans la même liste que vous parcourez.
La liste de gauche serait l'ensemble de votre collection de genres (doit-elle vraiment être aussi grande, au fait?). Il suivrait le modèle d'exploration en une seule fenêtre . À chaque niveau, vous pourrez soit ajouter un genre (et ses sous-genres, le cas échéant), soit approfondir (en dehors des niveaux les plus bas, bien sûr), quelque chose comme Birdbrain ici: http://pttrns.com/listes .
La liste de droite serait les genres autorisés représentés dans une liste plate, avec la hiérarchie des genres représentée comme des "métadonnées" de type fil d'Ariane, avec des métadonnées format comme par exemple Instacast, à partir de la même ressource que celle citée ci-dessus ( http://pttrns.com/lists ).
Vous devriez simplement utiliser une arborescence de cases à cocher, mais en trouver une rapidement.
Malheureusement, je ne peux pas vous en indiquer une rapide - mais j'espère que quelqu'un d'autre le pourra. J'ai par le passé résolu un problème de vitesse similaire avec IE. Le problème sous-jacent est le coût d'affichage d'un widget dont une grande partie est en fait découpée/cachée ou hors écran. Il peut être résolu par javascript qui réutilise les éléments DOM lors du défilement de l'utilisateur. Cela a fait un widget complexe avec 'plus de 4000 éléments' aussi vite que lorsqu'il n'en avait que 100. J'espère que quelqu'un d'autre a résolu cela pour les arbres de cases à cocher auparavant.
Modifier
L'arborescence des cases à cocher est familière - ou du moins l'arborescence et les cases à cocher le sont, donc ce n'est qu'un petit pas pour les utilisateurs. Une interface de construction d'arbres, d'autre part, aura besoin d'instructions avec elle. La solution de construction d'arbres va être plus déroutante lorsque vous ajoutez/supprimez des nœuds et des feuilles. Cela confondra particulièrement les utilisateurs ce que signifie un nœud non feuille dans l'arborescence. Cela signifie-t-il tout ce qui est englobé par ce nœud, ou seulement ce qui a été explicitement ajouté en dessous? Lors de l'ajout d'un nœud non-feuille, vous devrez avoir un moyen de montrer ce qui se trouve sous ce nœud (je veux ajouter "hip-hop", "hip-hop" sous "contemporain"?). Donc, à certains moments, vous voudrez choisir parmi un arbre pour construire un arbre. Cela semble beaucoup plus facile si l'arbre est déjà construit pour vous et que vous sélectionnez simplement en place.
Si vous ne trouvez pas d'arborescence de cases à cocher plus rapide, le fractionnement des niveaux de l'arborescence à un moment donné en utilisant master-details pourrait vous donner un gain de performances suffisant. Vous auriez les deux parties côte à côte. Par exemple, si vous avez une arborescence de niveau supérieur contenant 50 nœuds, vous pouvez l'utiliser pour choisir entre 50 arborescences de cases à cocher contenant chacune environ 50 nœuds et construites sur demande. Avec cette stratégie, vous pouvez vous permettre de désactiver l'ouverture/fermeture des éléments d'arbre et de les avoir tous ouverts - de sorte que les arbres gauche et droit deviennent effectivement des listes en retrait défilantes. Cela réduira le nombre de clics pour sélectionner, mais nécessitera beaucoup plus de TLC pour bien paraître et fonctionner correctement qu'une arborescence de cases à cocher rapide.