2009-10-27 7 views
4

Actuellement, j'ai une exigence pour afficher les éléments connexes dans une grille multi-niveaux. qui est grand grand-parent -> grandparent-> parent-> enfantModèle de conception d'interface utilisateur pour la grille multi-niveaux

Par exemple: pays-> state-> City-> Street est l'ordre d'affichage.

La solution proposée est d'afficher tous ces éléments dans une grille multi-niveaux (4 niveaux maximum).

Pays -> État -> Ville -> Rue

Depuis que je ne suis pas à l'aise avec cette solution par rapport à l'aspect facilité d'utilisation, je suis à la recherche d'un modèle de conception de l'interface utilisateur qui va briser l'affichage en unités logiques.

merci

+2

Quelle tâche attendez-vous des utilisateurs pour utiliser cette interface? Cela guidera votre conception. –

+0

Techniquement cette question appartient à http://ux.stackexchange.com/ –

Répondre

8

Lorsque vous avez des objets de données de deux niveaux différents de la même hiérarchie, vous peut:

  • Mettez chaque niveau dans une autre fenêtre (ou page lightbox) et permettre la navigation entre eux. J'appelle cela et je fais le.

  • Placez chaque niveau dans un volet différent de la même fenêtre (ou de la même page), où la mise en évidence d'un objet dans le volet supérieur remplit le volet subordonné. J'appelle cela maître-détail (ceci inclut des listes en cascade et ne doit pas être confondu avec l'analyse ci-dessus).

  • Placez les deux niveaux dans le même volet, indentant les objets subordonnés sous chaque objet supérieur et fournissant généralement des contrôles pour masquer et afficher les objets subordonnés pour chaque objet supérieur. J'appelle cela un arbre .

Avec une hiérarchie de plusieurs niveaux, vous pouvez utiliser n'importe quelle combinaison de ceux-ci. Voici quelques directives pour décider comment relier les niveaux adjacents dans la hiérarchie.

Mettez les niveaux dans un arbre si

  • Le nombre de niveaux dans la hiérarchie varie de manière arbitraire à chaque objet de données (comme des dossiers). L'utilisateur compare régulièrement les objets subordonnés de deux ou plusieurs objets superordonnés proches l'un de l'autre dans l'ordre de tri (l'utilisateur peut ensuite développer l'arborescence des deux objets supérieurs pour voir les objets suboridés en même temps). .

Mettre les niveaux dans une relation maître-détail si:

  • Vous montrez plus d'un ou deux attributs par objet (par exemple, plus que le nom), et chaque niveau a différents attributs.

  • Il existe plusieurs classes d'objets subordonnés pour les objets supérieurs.

  • Il existe des relations plusieurs-à-plusieurs que vous allez afficher.

Pour plus de détails voir Hierarchy Visual Design

Mettre les niveaux dans une relation de drill-down si:

  • La quantité d'informations à afficher pour chaque niveau est tout simplement trop grand pour tenir dans une fenêtre unique de taille raisonnable. La tâche dicte que l'utilisateur peut passer d'un niveau à l'autre mais l'utilisateur n'utilise pas les deux niveaux en même temps (en général, vous voulez éviter que l'utilisateur navigue entre les fenêtres) .

  • Vous aurez besoin de fenêtres distinctes pour les différentes tâches de haut niveau de toute façon. Cela implique que vous allez fournir un moyen de naviguer directement vers la fenêtre subordonnée sans « perçage vers le bas » par la fenêtre superordonné

En général vers le bas de forage n'a de sens que si les deux fenêtres sont primaires (ou pages) . La fenêtre subordonnée ne doit pas être une boîte de dialogue, une fenêtre de propriétés ou une visionneuse. Si vous n'avez pas assez à afficher dans la fenêtre subordonnée pour justifier une fenêtre principale en taille réelle, utilisez un maître-détail. Par rapport au détail principal, une boîte de dialogue d'analyse descendante:

  • Incorpore des incohérences dans l'enregistrement des modifications.

  • Crée des modes ou des ambiguïtés dans l'ordre z (ou, dans le cas des visionneuses, une ambiguïté sur la fonction du bouton Précédent).

  • Manque un menu déroulant avec ses commandes de base pour l'édition et la suppression (sous Linux et Windows).

  • Ne prend pas en charge le redimensionnement des fenêtres (sous Mac et Windows) pour permettre une visualisation plus flexible du contenu.

Pour plus d'informations sur ce qui précède, voir http://www.zuschlogin.com/?p=31.

+0

+1 - beaucoup plus complet que ma réponse ;-) – rohancragg

0

Arbre? Comme une vue Windows Explorer d'un système de fichiers?

2

Une façon courante de le décomposer pourrait être de le faire en 2 ou plusieurs étapes à la navigation entre eux (navigation à une autre page ou l'ouverture d'une boîte de dialogue modale, etc.)

Vous pouvez afficher la première grille/table avec 1 ou 2 ou 3 niveaux de votre hiérarchie, et un lien de navigation pour afficher les niveaux restants dans une deuxième ou sous-listes/tables.

Si vous cherchez une confirmation de certains de ces modèles établis, vous pouvez choisir (ou combiner):

Master/Detail

Tree Table

ou

Cascading Lists

Questions connexes