web-dev-qa-db-fra.com

Alternative moderne à l'arborescence pour les données hiérarchiques

Il y a d'autres questions similaires à cela, mais aucune des solutions ne correspond vraiment à mon problème. Chapelure et menus déroulants ne sont pas la solution. Alors sans plus tarder:

  • Le problème de conception est un panneau de configuration qui occupe 1/3 de l'espace d'application
  • C'est une application de bureau (pas web, pas mobile)
  • Les groupes de configuration ont des fichiers qui ont des éléments enfants qui doivent être vus/gérés
  • Il y a une fonction de recherche, mais pas de facettes
  • Doit être compatible avec les écrans tactiles
  • Le panneau de configuration de 1/3 de largeur affecte directement la zone d'application de 2/3 de largeur. L'utilisateur doit voir en direct les effets de ses choix de configuration.

Tout ce qui concerne le problème de conception suggère que nous avons besoin d'une arborescence, à l'exception des écrans tactiles. J'ai essayé d'utiliser un modèle d'accordéon dans les maquettes avec notre équipe de développement et cela n'a pas vraiment fonctionné pour notre situation. Nous devons ouvrir plus d'un sous-groupe à la fois.

Détails plus demandés:

  • Profondeur typique: 4 niveaux
    • Section de configuration
    • Groupe
    • Fichier
    • Record
  • Profondeur du monde le plus défavorable: 5-6 niveaux (les groupes peuvent avoir des sous-groupes)
  • Enregistrements typiques par fichier: 10 s
  • Enregistrements de cas les plus défavorables par fichier: 100s
  • Sections de configuration: 4

REMARQUE: Nous pouvons ou non choisir d'afficher le niveau du fichier uniquement si l'utilisateur le demande. Cela réduira la profondeur maximale dont nous devons nous inquiéter, et pour certaines sections de configuration, cela gêne.

La recherche sera un élément clé de cette boîte de dialogue, il n'y a vraiment pas d'autre moyen de le faire. Cependant, nous n'avons pas le bien immobilier pour la recherche à facettes, ni aucune facette évidente qui ne fait pas déjà partie de la hiérarchie. Le fil d'Ariane peut être une partie de la solution, mais dans la zone où nous avons le plus d'enregistrements, nous avons besoin que les groupes voisins s'ouvrent en même temps.

gui-designhierarchy
16
Berin Loritsch

Je n'aime pas les vues arborescentes, mais parfois elles sont vraiment le widget le plus approprié.

Avant de supprimer l'arborescence, il convient de se demander si elle peut être mieux repensée pour les tablettes.

1. Problèmes avec les arborescences

  • Les icônes déroulantes sont généralement trop petites. Ils sont difficiles à cliquer même sur les ordinateurs de bureau, et encore moins sur les tablettes (voir loi de Fitt ).
    • Idea Peut-on agrandir les icônes?
  • Les hiérarchies d'arbre profondes occupent beaucoup d'espace horizontal, vous obtenez donc un découpage ou un défilement horizontal, ce qui est frustrant pour les utilisateurs.
    • Heureusement pour vous, vous budgétez intelligemment 1/3ème espace d'écran pour ce contrôle, donc c'est un peu moins un problème.
    • Idea Peut-on utiliser des retraits et des retours à la ligne plus petits pour préserver le budget d'espace horizontal?
  • Si l'arborescence comporte de nombreux nœuds, il est facile pour les utilisateurs de se désorienter lorsqu'ils se trouvent profondément dans la hiérarchie.
    • Idea Pouvons-nous utiliser des indicateurs pour montrer à quel niveau de hiérarchie nous en sommes?

2. Croquis de conception

Voici une approche qui intègre les idées ci-dessus:

enter image description here

  • Grandes icônes pour une convivialité tactile
  • Les icônes ont une hauteur de ligne> 2x, ce qui vous permet d'envelopper de longues lignes une fois plutôt que de les faire déborder de la boîte
  • Retrait étroit
  • Utilisation des principaux . indicateurs de période pour afficher le niveau dans la hiérarchie
  • Barre d'outils supérieure pour la recherche/filtre/etc

Cela peut ou peut ne pas convenir à vos besoins, mais je pense qu'il est toujours utile d'examiner la possibilité de moderniser un contrôle existant avant de l'écrire comme obsolète.

Ma dernière suggestion est: rappelez-vous que pour les applications d'entreprise, le but est généralement de concevoir l'interface la plus efficace, pas la plus belle une.

15
tohster

Tirages hiérarchiques vers le haut
Considérez l'État, le comté, la ville

Tout d'abord je vois c'est l'état
Après avoir sélectionné un état, puis à droite, vous pouvez sélectionner le comté et il ne présente que les comtés dans cet état
Puis ville

Si vous avez une paroisse dans certains comtés, puis une paroisse avant la ville

Texas
Texas Harris
Texas Harris Houston

Je change d'état puis le comté recommence

1
paparazzo