Arborescences

Avec une arborescence, les utilisateurs peuvent afficher et interagir avec une collection hiérarchique d’objets, à l’aide d’une sélection unique ou d’une sélection multiple.

Dans une arborescence, les objets qui contiennent des données sont appelés nœuds feuilles et objets qui contiennent d’autres objets sont appelés nœuds conteneur. Un nœud de conteneur le plus haut est appelé nœud racine. Les utilisateurs peuvent développer et réduire les nœuds de conteneur en cliquant sur les boutons plus et moins du expandeur.

Arborescence classique.

C’est le bon contrôle ?

L’utilisation de données hiérarchiques ne signifie pas que vous devez utiliser une arborescence. Très souvent, une vue de liste est un choix plus simple, mais plus puissant. Affichages de liste :

• Prendre en charge plusieurs vues différentes.
• Prise en charge du tri des données par l’une des colonnes en mode Détails.
• Prise en charge de l’organisation des données en groupes, en formant une hiérarchie à deux niveaux.

Pour utiliser un affichage de liste, vous pouvez aplatir des informations hiérarchiques à l’aide des techniques suivantes :

• Supprimez le nœud racine s’il est présent, car il n’est souvent pas nécessaire.

• Utilisez des groupes d’affichage de liste, des onglets, des listes déroulantes ou des en-têtes extensibles pour remplacer les conteneurs de niveau supérieur.

  

  Dans cet exemple, les groupes d’affichage de liste sont utilisés pour les conteneurs de niveau supérieur.

  

  Dans cet exemple, les onglets sont utilisés pour les conteneurs de niveau supérieur

  

  Dans cet exemple, une liste déroulante est utilisée pour les conteneurs de niveau supérieur.

• Si un contrôle associé affiche le contenu du conteneur sélectionné, ce contrôle peut afficher des niveaux inférieurs de la hiérarchie.

  

  Dans cet exemple, les conteneurs de bas niveau sont affichés dans la fenêtre de document.

Vous devez utiliser une arborescence si vous devez afficher une hiérarchie de plus de deux niveaux (sans inclure le nœud racine).

Pour déterminer si une arborescence est le bon contrôle, tenez compte des questions suivantes :

• Les données sont-elles hiérarchiques ? Si ce n’est pas le cas, utilisez un autre contrôle.
• La hiérarchie comporte-t-elle au moins trois niveaux (sans inclure la racine) ? Si ce n’est pas le cas, envisagez des alternatives telles que des groupes d’affichages de liste, des onglets, des listes déroulantes ou des en-têtes extensibles.
• Les éléments ont-ils des données auxiliaires ? Si c’est le cas, envisagez d’utiliser un affichage de liste en mode Détails pour tirer pleinement parti des données auxiliaires.
• Les données de niveau inférieur sont-elles liées aux tâches subordonnées indépendantes ? Si c’est le cas, envisagez d’afficher les informations dans un contrôle associé ou dans une fenêtre distincte (affichée à l’aide de boutons de commande ou liens).
• Les utilisateurs cibles sont-ils avancés ? Les utilisateurs avancés sont plus compétents lors de l’utilisation d’arborescences. Si votre application vise les utilisateurs novices, évitez d’utiliser des arborescences.
• Les éléments ont-ils une catégorisation unique, naturelle et hiérarchique familière à la plupart des utilisateurs ? Dans ce cas, les données sont idéales pour une arborescence. Si plusieurs affichages ou tri sont nécessaires, utilisez plutôt un affichage de liste.
• Les utilisateurs doivent-ils voir les données de niveau inférieur dans certains scénarios, mais pas tous les scénarios, ou tout le temps ? Dans ce cas, les données sont idéales pour une arborescence.

Concepts de conception

Les arborescences sont destinées à organiser les données et à faciliter la recherche, mais il est difficile de rendre facilement détectables les données au sein d’une arborescence. Gardez à l’esprit les principes suivants lors de la décision sur les vues d’arborescence et leur organisation.

Prévisibilité et détectabilité

Une arborescence est basée sur les relations entre les objets. Les arborescences fonctionnent mieux lorsque les objets forment une relation claire, bien connue et mutuellement exclusive dans laquelle chaque objet est mappé à un conteneur unique et facile à déterminer.

Un problème important est qu’un objet peut apparaître dans différents nœuds. Par exemple, où les utilisateurs s’attendent-ils à trouver un périphérique matériel qui lit de la musique, a un disque dur volumineux et utilise un port USB ? Peut-être dans l’un des différents nœuds de conteneur, tels que multimédia, stockage, USB, et éventuellement dans les ressources matérielles. Une solution consiste à placer chaque objet sous le conteneur le plus approprié, quel que soit le cas ; Une autre approche consiste à placer chaque objet sous tous les conteneurs qui s’appliquent. L’ancien promeut une hiérarchie simple, propre et celle-ci favorise la détectabilité chacun présente des avantages et des problèmes potentiels.

Les utilisateurs peuvent ne pas comprendre complètement la disposition de l’arbre, mais ils formeront un modèle mental des relations après avoir interagissant avec l’arbre pendant un certain temps. Si ce modèle mental est incorrect, cela entraîne une confusion. Par exemple, supposons qu’un lecteur de musique se trouve dans les conteneurs Multimédia, Stockage et USB. Cette disposition améliore la détectabilité. Si un utilisateur trouve d’abord l’appareil dans Multimédia, l’utilisateur peut conclure que tous les appareils tels que les lecteurs de musique apparaissent dans le conteneur multimédia. L’utilisateur s’attend alors à ce que des appareils similaires, tels que des caméras numériques, apparaissent dans le conteneur multimédia et deviennent confus si ce n’est pas le cas.

Le défi lors de la conception d’une arborescence consiste à équilibrer la détectabilité avec un modèle utilisateur prévisible qui réduit la confusion.

Largeur et profondeur

Des études d’utilisation ont montré que utilisateurs sont plus réussis à trouver des objets dans un arbre qui est large que dans un arbre qui est profond, de sorte que lors de la conception d’un arbre, vous devez préférer l’étendue sur la profondeur. Dans l’idéal, une arborescence ne doit pas avoir plus de quatre niveaux (sans compter le nœud racine) et les objets les plus couramment consultés doivent apparaître dans les deux premiers niveaux.

Autres principes

• Lorsque les utilisateurs trouvent ce qu’ils recherchent, ils arrêtent de chercher. Ils n’ont pas l’air de voir où un autre objet peut être trouvé, car ils n’ont pas besoin de. Ces utilisateurs peuvent supposer que le premier chemin qu’ils trouvent est le seul chemin d’accès.
• Les utilisateurs ont des difficultés à trouver des objets dans des arborescences volumineuses et complexes. Les utilisateurs n’effectuent pas de recherche exhaustive manuelle pour rechercher des objets dans ces arborescences ; ils s’arrêtent une fois qu’ils pensent qu’ils ont dépensé un effort raisonnable. Par conséquent, les arborescences volumineuses et complexes doivent être complétées par d’autres méthodes d’accès, telles que la recherche de mots, un index ou le filtrage.
• Certains programmes permettent aux utilisateurs de créer leurs propres arborescences. Bien que ces arbres auto-conçus puissent être alignés sur le modèle mental d’un utilisateur, ils sont souvent créés de manière aléatoire et mal conservée. Par exemple, alors qu’un système de fichiers, un programme de messagerie et une liste favoris stockent généralement des types d’informations similaires, les utilisateurs se dérangent rarement de les organiser de la même façon.

Si vous ne faites qu’une seule chose...

Pesez soigneusement les avantages et les inconvénients de l’utilisation des arborescences. L’organisation hiérarchique des données ne signifie pas que vous devez utiliser une arborescence.

Modèles d’utilisation

Les arborescences ont plusieurs modèles d’utilisation :

Usage	Exemple
arborescence avec uniquement des nœuds de conteneur les utilisateurs peuvent afficher et interagir avec un conteneur à la fois.	En règle générale, ces arborescences ont un contrôle associé qui affiche le contenu du conteneur sélectionné, afin que les utilisateurs puissent interagir avec un seul conteneur à la fois. Dans cet exemple, l’arborescence comporte uniquement des nœuds de conteneur. Le contenu du nœud sélectionné s’affiche dans le contrôle d’affichage de liste associé.
vues arborescence avec des nœuds conteneur et feuille les utilisateurs peuvent afficher et interagir avec des conteneurs et des feuilles.	En règle générale, ces arborescences ont un contrôle associé qui affiche le contenu du conteneur ou feuille sélectionné. permettre aux utilisateurs d’interagir avec les feuilles rend souvent nécessaire pour prendre en charge plusieurs sélections. dans cet exemple, l’arborescence comporte à la fois des nœuds conteneur et feuille. étant donné que la sélection multiple est prise en charge, le contenu des éléments ouverts s’affiche à l’aide de onglets dans le contrôle associé. sinon, l’arborescence peut avoir une liste organisée, où les conteneurs sont des en-têtes et les feuilles sont des options. Dans cet exemple, les feuilles d’arborescence sont des options et les conteneurs sont des catégories d’options.
case à cocher vues d’arborescence les utilisateurs peuvent sélectionner n’importe quel nombre d’éléments, y compris aucun.	Les cases à cocher indiquent clairement que plusieurs sélections sont possibles. utilisez ce modèle d’arborescence lorsque plusieurs sélections sont essentielles ou couramment utilisées. Dans cet exemple, une arborescence de cases à cocher permet d’activer ou de désactiver la sélection des fonctionnalités.
générateurs d’arborescences les utilisateurs peuvent créer une arborescence en ajoutant un conteneur ou une feuille à la fois et en définissant éventuellement l’ordre.	De nombreux arbres peuvent être créés ou modifiés par les utilisateurs. certains arbres sont créés à l’aide de menus contextuels et de glisser-déplacer (tels que les dossiers dans l’Explorateur Windows), tandis que d’autres arborescences sont créées à l’aide d’une boîte de dialogue spécialisée (par exemple, la liste des favoris dans Windows Internet Explorer). Dans cet exemple d’Internet Explorer, les utilisateurs peuvent créer leur propre liste de favoris à l’aide d’une boîte de dialogue.
arborescences avec d’autres méthodes d’accès les utilisateurs peuvent trouver des objets de manière autre que l’utilisation d’une arborescence hiérarchique.	Comme mentionné précédemment, les utilisateurs ont des difficultés à trouver des objets dans des arborescences volumineuses et complexes, de sorte que ces arborescences doivent être complétées par d’autres méthodes d’accès, telles qu’une recherche de mots, un index ou un filtrage. dans cet exemple, les utilisateurs peuvent également accéder aux informations à l’aide d’une table des matières, d’un index et de favoris. pour certains utilisateurs, l’index et les onglets de recherche peuvent être plus utiles que l’onglet contenu. Dans cet exemple, le menu Démarrer de Windows permet également aux utilisateurs d’accéder aux programmes, fichiers et pages Web en tapant une partie du nom dans la zone de recherche.

Lignes directrices

Présentation

• Dans un conteneur, triez les éléments dans un ordre logique. Triez les noms dans l’ordre alphabétique, les nombres dans l’ordre numérique et les dates dans l’ordre chronologique.

• Utiliser l’attribut Always Show Selection pour permettre aux utilisateurs de déterminer facilement l’élément sélectionné, même lorsque le contrôle n’a pas de focus d’entrée.

• Si l’arborescence agit en tant que table des matières, utilisez l’attribut Single Expand pour simplifier la gestion de l’arborescence. De cette façon, seule la partie pertinente de l’arborescence est développée.

• Évitez de présenter des arborescences vides. Si un utilisateur crée une arborescence, initialisez l’arborescence avec des instructions ou des exemples d’éléments dont les utilisateurs peuvent avoir besoin.

  

  Dans cet exemple, la liste est initialement présentée avec des exemples.

• Ne rendez pas les nœuds de conteneur réductibles si les utilisateurs n’ont aucune raison de les réduire. Cela ajoute une complexité inutile.

• Si les performances de charge sont un problème, affichez uniquement les conteneurs de premier et deuxième niveau de l’arborescence par défaut. Vous pouvez ensuite charger des données supplémentaires à la demande lorsqu’un utilisateur développe des branches dans l’arborescence.

• Si les utilisateurs étendent ou réduisent un conteneur, rendez cet état persistant afin qu’il prenne effet la prochaine fois que l’arborescence s’affiche, sauf si les utilisateurs sont susceptibles de préférer démarrer dans l’état par défaut. La persistance doit être en mode par arborescence, par utilisateur.

• Si les conteneurs de haut niveau ont un contenu similaire, envisagez d’utiliser des indices visuels pour les différencier.

  Incorrect :

  

  Dans cet exemple, les dossiers de boîte aux lettres et d’archivage ont un contenu similaire. Une fois les arbres élargis, il est très difficile pour les utilisateurs de savoir où ils se trouvent dans l’arbre, ce qui entraîne une confusion. L’utilisation d’icônes légèrement différentes dans les différentes sections répond à ce problème.

• Reconsidérer les lignes de connexion. Bien que ces lignes affichent clairement les relations entre les nœuds conteneur et feuille, elles ajoutent un encombrement visuel sans faciliter considérablement la compréhension. Plus précisément, ils n’aident pas quand les nœuds sont proches, ni quand ils sont si éloignés que le défilement est nécessaire.

  correct :

  

  Mieux :

  

  Les lignes de connexion ne font que peu pour faciliter la compréhension.

Interaction

• Envisagez de fournir un comportement en double-clic. Le double-clic doit avoir le même effet que la sélection d’un élément et l’exécution de sa commande par défaut.

• Effectuez un double-clic redondant sur le comportement. Il doit toujours y avoir un bouton de commande ou une commande de menu contextuel qui a le même effet.

• Si un élément nécessite une explication supplémentaire, fournir l’explication dans une info-bulle.

  

  Dans cet exemple, une info-bulle fournit des informations supplémentaires.

• Fournissez des menus contextuels des commandes pertinentes. Ces commandes incluent Couper, Copier, Coller, Supprimer ou Supprimer, Renommer et Propriétés.

• Lors de la désactivation d’une arborescence, désactivez également les étiquettes et boutons de commande associés.

Organisation de l’arborescence

• Utiliser une structure hiérarchique naturelle familière à la plupart des utilisateurs.
• Si vous ne pouvez pas utiliser une telle structure, essayez d’équilibrer la détectabilité avec un modèle utilisateur prévisible qui réduit la confusion.
• Pour améliorer en toute sécurité la détectabilité, placez un élément dans plusieurs conteneurs lorsque :
  • L’élément n’est lié à aucun autre élément similaire (donc les utilisateurs ne sont pas confondus par des associations incorrectes).
  • Il n’y a que quelques-uns de ces éléments redondants (donc l’arbre ne devient pas ballonné).
• Utilisez la structure hiérarchique la plus simple qui fonctionne bien. Pour ce faire :
  • Placez les objets les plus couramment consultés dans les deux premiers niveaux de l’arborescence (sans compter le nœud racine) et placez les objets moins couramment consultés plus loin dans la hiérarchie.
  • Éliminez les conteneurs de niveau intermédiaire inutiles ou combinez des conteneurs redondants de niveau intermédiaire.
• Préférez l’étendue sur la profondeur. Dans l’idéal, une arborescence ne doit pas avoir plus de quatre niveaux et les objets les plus couramment consultés doivent apparaître dans les deux premiers niveaux.
• Déterminez si vous avez vraiment besoin d’un nœud racine. Fournissez un nœud racine si les utilisateurs ont besoin de la possibilité d’effectuer des commandes dans l’arborescence entière (éventuellement à l’aide d’un menu contextuel sur le nœud racine). Sinon, l’arborescence est plus simple et plus facile à utiliser sans elle.
• Si l’arborescence possède d’autres méthodes d’accès telles qu’une recherche de mots ou un index, optimisez l’arborescence pour la navigation en mettant l’accent sur le contenu le plus utile. Avec d’autres méthodes d’accès, le contenu de l’arborescence n’a pas besoin d’être complet. La simplification de l’arborescence permet aux utilisateurs de trouver plus facilement le contenu le plus utile.

Affichages d’arborescence de cases à cocher

• Afficher le nombre d’éléments sélectionnés sous la liste, en particulier si les utilisateurs sont susceptibles de sélectionner plusieurs éléments. Ces commentaires aident les utilisateurs à confirmer que leur sélection est correcte.

  

  Dans cet exemple, le nombre d’éléments sélectionnés s’affiche sous l’arborescence. Il est clair que deux éléments ne sont pas sélectionnés.

• S’il y a potentiellement de nombreux éléments et qu’ils sélectionnent ou désactivent tous ces éléments, ajoutez tout et désactivez tous les boutons de commande.

• Utilisez des cases à cocher à état mixte pour indiquer une sélection partielle des éléments d’un conteneur.

  correct :

  

  Dans cet exemple, les cases à cocher à état mixte sont utilisées pour indiquer une sélection partielle.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les contrôles d’arborescence.

• Choisir une largeur d’arborescence qui évite la nécessité d’un défilement horizontal pour la plupart des éléments lorsque l’arborescence est entièrement développée.

• Inclure un pourcentage supplémentaire de 30 % pour prendre en charge la localisation.

• Choisissez une hauteur d’arborescence qui élimine le défilement vertical inutile. Envisagez de rendre une vue d’arborescence légèrement plus longue (voire plus si l’espace est disponible) si cela réduit le besoin d’une barre de défilement verticale.

  Incorrect :

  

  Dans cet exemple, rendre l’arborescence légèrement plus large et plus longue éliminerait les barres de défilement dans la plupart des cas. Dans cette arborescence particulière, un seul conteneur peut être ouvert à la fois.

• Si les utilisateurs tirent parti de l’agrandissement de l’arborescence, rendez l’arborescence et sa fenêtre parente redimensionnables. Cela permet aux utilisateurs d’ajuster la taille d’arborescence en fonction des besoins.

Étiquettes

Étiquettes de contrôle

• Toutes les vues d’arborescence ont besoin d’étiquettes. Écrivez l’étiquette sous la forme d’un mot ou d’une expression, et non comme une phrase, se terminant par un signe deux-points et en utilisant texte statique.

• Attribuez une clé d’accès unique. Pour obtenir des instructions sur l’affectation, consultez clavier .

• Utilisez la mise en majuscules de style phrase.

• Positionnez l’étiquette au-dessus du contrôle et alignez l’étiquette avec le bord gauche du contrôle.

• Pour les affichages d’arborescences à sélection multiple, écrivez l’étiquette afin qu’il soit clair que plusieurs sélections sont possibles. Les étiquettes d’arborescence de cases à cocher peuvent être moins explicites.

  Incorrect :

  

  Dans cet exemple, l’étiquette ne fournit aucune information sur la sélection multiple.

  Mieux :

  

  Dans cet exemple, l’étiquette indique clairement que plusieurs sélections sont possibles.

  Best :

  

  Dans cet exemple, les cases à cocher indiquent clairement que plusieurs sélections sont possibles, de sorte que l’étiquette n’a pas besoin d’être explicite.

Texte des données

• Utilisez la mise en majuscules de style phrase.

Texte d’instruction

• Si vous devez ajouter du texte d’instruction sur une arborescence, ajoutez-le au-dessus de l’étiquette. Utilisez des phrases complètes avec une ponctuation de fin.

• Utilisez la mise en majuscules de style phrase.

• Des explications supplémentaires qui sont utiles, mais qui ne doivent pas être nécessaires, doivent être conservées courtes. Placez ces informations entre parenthèses entre l’étiquette et le signe deux-points, après l’instruction principale si elle est utilisée au lieu d’une étiquette ou sous le contrôle.

  

  Dans cet exemple, l’explication supplémentaire est en dessous du contrôle.

Documentation

Lorsque vous faites référence à des vues d’arborescence :

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas le trait de soulignement ou le signe deux-points de la clé d’accès. Incluez la liste de mots ou la liste hiérarchique si le contexte nécessite une distinction entre les listes régulières.
• Pour les éléments d’arborescence, utilisez le texte exact de l’élément, y compris sa mise en majuscule.
• Reportez-vous aux arborescences en tant que vues d’arborescence uniquement dans la programmation et d’autres documents techniques. Partout ailleurs, utilisez la liste ou la liste hiérarchique, car l’arborescence de termes est déroutante pour la plupart des utilisateurs.
• Pour décrire l’interaction utilisateur, utilisez sélectionner les données, puis développez et réduisez les boutons plus et moins.
• Lorsque cela est possible, mettez en forme l’étiquette et les éléments d’arborescence à l’aide du texte en gras. Sinon, placez l’étiquette et les éléments entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : dans la liste Contenu, sélectionnez conception d’interface utilisateur.

Lorsque vous faites référence à des cases à cocher dans une arborescence :

• Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule et incluez la case à cocher mots. N’incluez pas le trait de soulignement de la clé d’accès.
• Pour décrire l’interaction utilisateur, utilisez sélectionner et effacer.
• Lorsque cela est possible, mettez en forme l’étiquette à l’aide du texte en gras. Sinon, placez l’étiquette entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemple : dans les éléments pour sauvegarder liste, cochez la case Mes documents.