Comment rendre le texte sélectionnable dans la vue tableau maître / détail?

Question

Nous concevons une vue datatable pour les utilisateurs scientifiques. Ils obtiennent ce tableau après avoir entré un tas de filtres et pressé la recherche. Le tableau est déjà assez grand - 13 colonnes. Cependant, nous savons que souvent nos utilisateurs veulent connaître des informations plus détaillées sur chacune des lignes. Chaque élément (ligne) contient de nombreuses informations supplémentaires. Comme il s'agit d'un outil de recherche, nos utilisateurs souhaitent trouver des éléments intéressants dans ce tableau, et parfois ils veulent simplement parcourir rapidement le tableau et vérifier les informations détaillées des éléments intéressants, ou aller un par un et afficher des informations détaillées pour chacune d'entre elles. Nous savons également que nos utilisateurs peuvent vouloir copier du texte dans cette table de données afin, par exemple, recherchez ce terme sur Internet. Certaines lignes contiennent également des liens vers des sites Web externes contenant des informations supplémentaires.

Donc, ce que nous avons trouvé:

Des informations détaillées sur un élément sont des informations assez lourdes à insérer dans des fenêtres contextuelles sur le survol de certaines colonnes, nous avons donc décidé d'opter pour le modèle de détail principal.
Nous pourrions mettre la vue détaillée de chaque élément juste en dessous du tableau, mais nous avons du contenu sur la page au-dessus du tableau, il n'est donc pas si facile pour les utilisateurs de tout garder bien aligné à l'écran. Nous avons donc décidé d'afficher une vue détaillée sur le côté de la table, tout en minimisant la table sur demande.

Il existe donc essentiellement deux modes:

Mode 1 - Mode tableau complet:

Mode 2 - Tableau minimisé + mode d'informations détaillées:

Mode 1 . Mode tableau complet, où les utilisateurs peuvent consulter les informations de base des éléments. En cliquant par exemple sur Name1 ouvrira le 1er élément en Mode 2. Cliquer sur Value4 du premier élément ouvrira également le 1er élément en Mode 2, mais il ouvrira également un 2ème sous-onglet "Info2" dans la vue détaillée, au lieu du sous-onglet par défaut "Info1".
Mode 2 . Tableau minimisé + mode d'informations détaillées, activé en cliquant sur la cellule du nom d'un article. Ici, les utilisateurs peuvent voir des informations détaillées sur un élément. Et il existe un moyen facile de revenir à la vue détaillée (contrôle à flèche bleue). Un tableau réduit leur permet de distinguer les éléments et de les parcourir rapidement un par un. Pour passer à un autre élément, utilisez cliquez sur Valeur 2 (nom alternatif à Nom1 qui a du sens dans ce contexte)

Le problème que nous avons est que seul le nom + 2 autres colonnes de la table de données ouvrent les informations détaillées sur un élément. Cependant, il est possible que les utilisateurs veuillent souvent basculer entre les modes 1 et 2, nous ne sommes donc pas sûrs que ce soit très naturel/rapide de le faire en cliquant sur certains liens à l'intérieur des lignes.

Nous ne pouvons pas rendre la ligne entière cliquable, car il sera alors difficile pour nos utilisateurs de copier les valeurs de la table. Nous voulons également que les tables réduites et les tables complètes fonctionnent de la même manière, nous aurions donc également besoin d'avoir le même type de mécanisme pour basculer les éléments dans une vue détaillée. Cliquer sur une cellule particulière dans le tableau réduit pour modifier l'élément peut être à nouveau attendu des utilisateurs quant au fonctionnement de la vue maître-détail.

Quelqu'un a posé une question similaire Cela vaut-il la peine de faire une exception à un modèle maître/détail en un seul clic? cependant dans notre cas, certaines cellules ont des liens vers des sites Web externes et nous ne pensons pas que le clic droit soit si loin un bon chemin à parcourir.

Quelle serait la solution la plus naturelle ici?

Toute contribution est la bienvenue!

À la vôtre, Max

ÉDITÉ:

Solution avec laquelle nous nous sommes retrouvés

Au final, nous nous sommes retrouvés avec la solution suivante:

Nous utilisons toujours le volet de détails basculable avec tout le contenu sur la ligne dans plusieurs onglets. Michael a proposé de diviser le contenu en morceaux et de n'afficher qu'une partie des informations dans la vue détaillée, par ex. seules les informations sur Value4 lorsque l'utilisateur clique dessus. Le problème était que l'objet avait bien plus de chapitres d'informations (onglets) que ceux représentés dans la ligne de la vue principale (en fait, certains des onglets de la vue détaillée n'auraient aucun lien dans la vue principale).
Nous ouvrons l'onglet correspondant dans le volet de détails, selon que l'utilisateur clique sur, par exemple Value4 ou Value5. Cependant, parce que nos utilisateurs veulent comparer rapidement, par exemple Value4 détails entre les différentes lignes, nous gardons l'onglet précédent ouvert dans la vue de détail, lorsque l'utilisateur clique sur les liens Name. Nous pensons que cela devrait être rapidement détectable.
Nous indiquons la différence entre les liens internes/externes en affichant différentes icônes à côté des liens lors du survol du lien.
Nous mettons en surbrillance toute la ligne dans la vue principale lors de l'ouverture de la vue de détail, afin que l'utilisateur voit clairement ce qu'elle regarde.
Nous avons laissé le contrôle à bascule (erreur bleue) assez volumineux car il est dans le filaire, donc accélérez le basculement (plus facile à cliquer) entre les modes.
Nous montrons une vue détaillée sur le côté droit, car il s'agit d'une position plus naturelle pour les détails (merci Michael!)
Nous n'avons pas de bascule supplémentaire pour la vue de table - car la plupart du temps, l'utilisateur veut toujours voir la table (par exemple pour basculer rapidement entre les éléments à afficher dans la vue détaillée)

Problèmes à résoudre

La vue détaillée est assez volumineuse - il se peut que l'utilisateur n'ait pas besoin la plupart du temps de toutes les informations à la fois. La principale exigence était que l'utilisateur puisse parcourir/comparer rapidement différentes informations entre les articles. Une autre solution possible serait de prendre conseil auprès de Michael et de n'afficher que les informations pertinentes sur le lien cliqué. Ensuite, pour afficher toutes les informations sur l'objet, nous pourrions ajouter un lien dans chaque vue détaillée Afficher les données de l'objet entier, qui afficherait tous les onglets avec les informations sur l'objet dans une page/modale différente fenêtre.
Il n'est pas évident pour l'utilisateur que cliquer sur Nom permettrait de parcourir rapidement les objets et de comparer l'onglet précédemment ouvert en vue détaillée entre les objets

Je garderai cette question ouverte pendant un certain temps dans l'espoir d'obtenir des indices sur les problèmes restants

ÉDITÉ 2:

Je voulais juste revenir et partager des idées après avoir testé cela avec nos utilisateurs. La plupart des conseils de Michael se sont avérés efficaces dans la pratique. Cependant, certaines choses que nous avons observées/supposons encore:

Nous avons gardé la douleur de détail multi-onglets comme dans Mode 2 - Tableau réduit + mode d'informations détaillées: maquette, car toutes les parties de ces lignes d'objets compliquées sont liées et en quelque sorte interconnectées (les parties vers lesquels, par exemple, les liens Nom, Valeur4, Valeur5, etc. conduiraient). Cela dérouterait les utilisateurs que différents liens montrent différentes parties de l'objet, et l'utilisateur ne semble pas être connecté entre eux (ce que les onglets de commutation afficheraient).
Les liens purs déroutent nos utilisateurs. Ils ne voient pas que la ligne entière "contient" des informations détaillées sur la ligne, et ils voient des liens sur les lignes qui ne montreraient pas les détails/le résumé. sur l'article entier. Nous voyons maintenant la meilleure approche pour que la ligne entière soit cliquable (ce qui déposera l'utilisateur dans l'onglet par défaut de la vue détaillée), et des liens spécifiques en ligne mènent simplement aux onglets particuliers de cette vue détaillée (sous forme de raccourci). Les liens externes sont affichés avec une icône qui donne un indice nécessaire.
Bouton à bascule de style particulier comme dans le filaire semble être bien accueilli par nos utilisateurs
Il y a en effet un problème avec l'espace - il est difficile d'adapter les deux parties de la vue principale avec le contenu des sous-onglets. Réduire la vue principale avec une bascule serait une excellente solution à cela.

Michael Zuschlag · Answer

Comment passer du mode 1 au mode 2?

Liens

Je pense que cliquer sur un lien pour ouvrir et remplir le volet de détail pourrait être correct. Les utilisateurs peuvent cliquer sur un lien pour ouvrir le détail, puis sur n'importe quel autre lien (pour la même ligne ou une ligne différente) pour modifier le contenu du volet de détails. C'est certainement rapide et facile. Personnellement, je m'attendrais à ce que le contenu détaillé apparaisse à droite du tableau, plutôt qu'à gauche (cohérent avec un flux hiérarchique de haut en bas de gauche à droite qui maitrise les détails ont généralement), mais vous avez peut-être vos raisons.

Vous semblez craindre que les utilisateurs attendent des liens qu'ils naviguent vers une autre page plutôt que d'ouvrir quelque chose dans la même page. Cela peut être vrai, mais les utilisateurs verront le contenu détaillé apparaître (cela prend la majeure partie de la fenêtre), donc, même si cela n'est pas prévu, les utilisateurs comprendront rapidement ce qui s'est passé. Ils ne se demanderont pas pourquoi le "lien ne fonctionne pas". Je pense qu'un lien est probablement correct dans votre cas puisque vous modifiez presque tout le contenu sur la page. Dans un sens, le lien accède à une nouvelle page qui arrive à partager un peu de contenu avec la page précédente pour le contexte.

Il peut être judicieux de distinguer visuellement les liens qui remplissent le volet de détails des liens qui pointent vers un site externe afin que les utilisateurs puissent formuler des attentes correctes. Malheureusement, il n'y a pas de norme pour cela (il est attendu depuis longtemps) et il n'y a pas d'imagerie naturellement intuitive, donc vos utilisateurs vont devoir la choisir en visitant votre site. Il semble que vos utilisateurs seront des utilisateurs relativement intensifs, donc cela se produira. Je suggère des icônes (google pour des idées). Je déconseille le codage couleur.

Basculer les boutons

La principale alternative à un lien est une sorte de contrôle d'état, comme un bouton bascule. Ce serait un petit bouton à côté de chaque Nom2, Valeur2, etc. avec une étiquette compacte (peut-être une flèche pointant vers la gauche?) Pour indiquer qu'il fournit des détails. En appuyant dessus (un seul élément du tableau entier peut être enfoncé à la fois), le contenu détaillé approprié s'affiche. C'est un peu comme utiliser une zone de liste (un autre contrôle d'état) pour sélectionner ce qui va dans un détail, ce que vous notez que vous ne pouvez pas faire. Les boutons bascule ont l'avantage de dire à l'utilisateur ce qu'il y a dans le volet de détail lorsque l'utilisateur regarde le tableau, ce qui est parfois plus facile que de lire le titre du volet de détail.

Cependant, cela m'inquiète de le faire dans votre cas, car le bouton est intégré dans les colonnes d'un tableau. Il peut sembler qu'il représente un attribut "défini" pour un élément de ligne (par exemple, l'élément "a" Value2 mais pas Value3). De plus, comme la page s'ouvre avec tous les boutons bascule non enfoncés, ils peuvent être confondus avec des boutons de commande qui modifient les données (la plupart le font), ce qui rend les utilisateurs réticents à cliquer.

Contrôle d'objet

Une autre alternative aux liens est un contrôle d'objet . En effet, vous disposez de plusieurs objets (sous-éléments, chacun représenté par un seul champ récapitulatif/identité) intégrés dans une ligne qui représente un objet/élément superordonné. Cependant, je pense que les contrôles d'objet n'ont de sens que si vous allez également exploiter leurs autres capacités (par exemple, la capacité de différencier la copie de la valeur 2 en tant qu'objet entier de la simple copie de sa valeur de champ résumé/identité). Sinon, tout ce que vous avez est un bouton bascule qui a une icône spécifique à la colonne pour une étiquette.

Clic droit et connexes

Vous avez raison de dire qu'un clic droit et un double-clic ne sont pas bons pour cela. Ce sont des raccourcis experts avec une mauvaise découvrabilité et plus d'efforts qu'un simple clic. Ils introduisent également des incohérences qui leur sont propres. Cette fonctionnalité, fréquente et importante, devrait se faire par une méthode en un seul clic visible.

Comment passer du mode 2 au mode 1?

Cela a peut-être été évident pour vous (vous n'avez simplement pas pris la peine de l'afficher dans la maquette), mais vous pouvez fournir un contrôle en un seul clic pour "fermer" le volet de détails afin de passer du mode 2 au mode 1. Un Le bouton "X" dans le coin du volet de détail peut être suffisamment intuitif, visible, tout en minimisant la consommation d'espace. En fait, je recommande que le volet de détail maître et soit masquable via un bouton à bascule.

Économisez de l'espace

Il semble que certaines de vos préoccupations soient liées à la disponibilité de l'espace. Voici quelques éléments pour vous donner plus de biens immobiliers avec lesquels jouer:

Afficher uniquement les détails de Name1 lorsque l'utilisateur clique sur Name1. N'afficher aucun onglet lorsque Name1 est dans le détail. Au lieu de cela, si les utilisateurs veulent Tab2, ils cliquent sur Value2 (ou autre) dans le tableau. Les utilisateurs ont toujours un accès en un clic pour échanger des informations dans le volet de détails, mais votre volet de détails a maintenant la moitié de la taille. Cela peut également réduire la confusion quant à savoir si cliquer sur Tab2 est vraiment la même chose que cliquer sur Value2 (fournissant parfois plusieurs chemins de navigation, ce qui provoque plus de confusion que cela ne vaut).
Placez les contrôles de recherche dans une fenêtre contextuelle ou une page distincte. Si les utilisateurs effectuent généralement une recherche puis travaillent intensivement sur le résultat, il peut être intéressant de forcer un peu de navigation supplémentaire à effectuer une nouvelle recherche afin d'avoir plus d'espace disponible pour les tâches qui dominent le travail des utilisateurs. Vous devriez inclure une indication des critères de recherche au-dessus du tableau au cas où les utilisateurs oublient ce qu'ils regardent, mais cela prendra généralement moins de place que les contrôles modifiables à part entière (bien que consultez À propos d'A face de Alan Cooper pour une manière remarquablement compacte de présenter critères de recherche/filtre modifiables).