Affichage d'informations supplémentaires pour une ligne de tableau lorsque cette ligne est sélectionnée
Dans l'application que je développe, nous avons une table/liste qui utilise une sorte d'approche maître/détails; lorsque vous sélectionnez une ligne dans le tableau principal, un deuxième tableau en dessous est rempli avec des éléments "enfants".
Cependant, je viens de remarquer une caractéristique du contrôle de grille que j'utilise: la possibilité d'avoir les "détails" affichés en ligne dans la grille principale , juste en dessous de la ligne sélectionnée. Par exemple:
(Remarque: la capture d'écran ci-dessus n'est pas pas de mon application; c'est juste un exemple que j'ai trouvé sur Internet, donc je ' Je ne suis vraiment pas intéressé par des commentaires spécifiques à ce sujet. Merci.)
Je me demandais, quelqu'un connaît-il les directives de conception de l'interface utilisateur pour ce modèle? Le modèle a-t-il même un nom commun?
Quelques idées:
- Je peux imaginer qu'il se briserait si le panneau de détails était excessivement grand (quoi que cela signifie), mais y a-t-il autre chose que je devrais rechercher?
- Y a-t-il même un style que je peux appliquer pour rendre ma relation maître/détails plus claire sans encombrer le design?
- Avez-vous vu de bons exemples de ce modèle en cours d'utilisation?
Si quelqu'un a des références - ou même juste des conseils - j'aimerais l'entendre.
Selon la bibliothèque de modèles de Quince, elle s'appelle zoom local et est liée au modèle d'affichage conseils de données . Du point de vue de l'utilisateur, ce n'est pas très différent d'un accordéon normal, où les lignes du tableau sont utilisées pour la navigation.
Dans votre exemple, la relation entre la section développée et la ligne à laquelle elle appartient pourrait être un peu plus claire. L'utilisation de la couleur fait ressortir la ligne de tous les autres, y compris la partie adresse, alors qu'il devrait être évident que l'adresse et la colonne sélectionnée vont de pair.
Nous avons utilisé un modèle où cliquer sur une ligne donne des détails à côté de la ligne, dans un volet séparé. Je ne peux pas vous donner une capture d'écran, mais elle finit par être similaire au volet de prévisualisation Outlook en mode côte à côte.
Comme vous le faites remarquer, il est important de ne pas trop perturber l'attention de l'utilisateur lors de la mise en évidence des nouvelles informations. Le fait que les informations supplémentaires soient relativement petites les aidera à garder leurs repères. L'utilisation d'animations subtiles pour guider l'œil lors de l'ouverture de l'accordéon peut également aider, tout comme l'utilisation de couleurs/nuances assorties.
Il est également important de préciser la ligne avec laquelle le détail va. Dans votre cas, la coloration du détail de l'adresse dans une teinte plus claire de la couleur de sélection rendrait plus clair que ce détail va avec la cellule ci-dessus, pas la cellule ci-dessous. Vous pouvez également utiliser des bordures pour la placer "dans" la page légèrement, ou sinon la décaler des zones environnantes.
Vous avez également un mélange de colonnes et la zone de texte plus grande avec des détails. C'est un peu étrange, mais ce n'est peut-être pas trop perturbateur si vous le manipulez avec soin. À l'heure actuelle, les bordures des colonnes transpercent la zone de texte plus grande et reprennent en dessous, ce qui est visuellement gênant.
Je ne suis pas sûr que ce soit un bon schéma. Lorsque la ligne est sélectionnée, une toute nouvelle section en dessous avec plus d'informations s'affiche. Lorsque la ligne est désélectionnée, la section disparaît. Les rangées sous ces rangées sont déplacées de haut en bas. Il me semble que trop de mouvements de lignes et de choses se produisent et que les lignes montent et descendent avec de nouvelles informations montrant entre elles puis disparaissant .. pouf.
Que diriez-vous de la section de détail à côté du tableau? Les rangées du tableau ne se mélangent pas. Les informations détaillées sont toujours situées dans la même zone. Vos yeux ne sont pas autant distraits et ils s'attendent à savoir où se trouvent les détails à chaque fois.