Comment rendre évident le contenu d'un tableau basé sur la ligne sélectionnée d'un autre?
Étant donné une boîte de dialogue avec deux tableaux de style grille, quelle est la meilleure approche pour montrer visuellement que la ligne sélectionnée du tableau de gauche est ce qui remplit le tableau de droite? Le mieux que je puisse penser est une flèche entre les tables, mais le problème du diviseur entre les tables est glissable (les tables sont redimensionnées pour remplir l'espace qui leur est donné), donc j'ai l'impression qu'une flèche dit " faites glisser de cette façon "ou" réduisez ce côté ".
J'ai considéré une flèche qui reste toujours à côté de la ligne sélectionnée, mais il y aura généralement beaucoup plus de lignes que visibles, et il semble que le calcul du placement de la flèche puisse être un peu pénible.
Y a-t-il une solution évidente que quelqu'un d'autre voit ou dois-je mordre la balle et aller avec la flèche?
Vous n'avez pas besoin de la flèche, vous pouvez simplement jouer avec les couleurs, comme suit (ce n'est qu'une preuve de concept, vous pouvez changer les couleurs grises avec les couleurs que vous aimez qui correspondent à votre thème):
Un autre moyen plus simple:
Windows Explorer et Macintosh Finder utilisent ce type de modèle depuis des années et il est bien établi. Donc, cela pourrait être un bon moyen de l'utiliser également.
Une petite flèche indique un contenu supplémentaire sur OSX. La dernière ligne à droite est une vue détaillée des propriétés du dernier élément marqué ou s'il s'agit d'un dossier, vous voyez le contenu de ce dossier.
Sous Windows 7, la vue détaillée est en bas et sur le côté droit est un aperçu d'une image sélectionnée. Remarquez comment Windows a une sélection active (ligne du milieu/bleu foncé) et une sélection inactive (ligne de gauche/au milieu à l'élément "Bilder"). Ainsi, vous savez toujours à quoi votre vue détaillée est liée.
Je pense que l'astuce mentale est la barre de défilement. Et une deuxième ligne vierge au début. La barre de défilement fait de chaque ligne une entité propre, où un clic sur un élément permet de changer le contenu de la ligne suivante à droite. Cela vous montre une dépendance.
source http://www.ovalnets.de/
source: http://www.tippscout.de
Mettez en surbrillance la ligne et le tableau de droite de la même couleur.
La flèche qui reste juste à côté de la ligne sélectionnée, que vous décrivez, fonctionnerait également, bien qu'elle soit un peu moins évidente que ces exemples graphiques que vous obtenez dans plusieurs réponses ici.
Pour le séparateur déplaçable: j'utiliserais la zone entre les tables ici pour changer le curseur ou afficher une "poignée" glissable dans cette zone, au survol de la souris.
Edit: Si vous utilisez déjà une certaine couleur ou un cadre pour les sélections autour de l'interface graphique, ce que vous devriez, alors essayez de faire ce type de sélection dans une extension de ce modèle de sélection. Par exemple, si la sélection d'un bouton lui ajoute un cadre vert, alors dans mon croquis ici, la ligne bleue deviendrait non seulement bleue mais obtiendrait également ce cadre vert. De cette façon, les éléments à droite peuvent également obtenir un cadre vert lorsqu'ils sont sélectionnés. Inversement, si vos éléments de l'interface utilisateur deviennent bleus lorsqu'ils sont sélectionnés, marquez les relations du tableau avec le cadre.
Qu'il s'agisse d'une flèche ou non, je pense que vous allez devoir mordre la balle et utiliser une sorte d'indicateur visuel du lien. C'est plus facile si les tableaux peuvent défiler indépendamment les uns des autres, vous pouvez donc toujours garder l'élément "parent" à l'écran.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Pouvez-vous nous donner plus de détails sur l'application? Il existe peut-être une meilleure solution qu'une configuration à deux tables.
Edit: Compte tenu de ce que vous avez expliqué à propos du cas d'utilisation, je réitère qu'une vue à deux tables n'est peut-être pas la plus appropriée. Jetez un œil à `` Contacts '' sur iPad et OS X Lion - il s'agit d'une configuration à deux volets, avec une vue de liste à gauche et un volet lié à droite avec tous les détails de cette sélection dans la vue de liste ( bien que, personnellement, je pense que le lien entre la gauche et la droite pourrait être plus clair):
La chose la plus importante est de tester l'interface (ou ses prototypes) avec des utilisateurs réels. Surtout s'il s'agit d'une application avec laquelle les utilisateurs interagiront quotidiennement ou toutes les heures, il y aura des opinions bien arrêtées sur la convivialité et l'ergonomie de l'application.
Vous avez la deuxième grille apparaît comme un pop-up avec une belle animation à l'intérieur de la même forme tout en estompant la première en arrière-plan.
Voici une approche que j'ai utilisée pour afficher un aperçu des résultats de recherche.
L'avantage de cette méthode est qu'elle s'adapte bien à la valeur sélectionnée et est également propre
Je ne suis pas un grand fan des grilles pour commencer. Je pense qu'ils sont maltraités et à vrai dire, vous pouvez généralement fournir plus de densité d'informations en utilisant une liste formatée. Cela étant dit, dans tous les cas, j'utiliserais une sorte d'indicateur de signe d'insertion avec le placement pour montrer que ce que vous voyez ici est lié à ce que vous avez sélectionné là-bas.