web-dev-qa-db-fra.com

Deux barres d'outils en vue maître-détail

Nous créons une nouvelle version d'une application basée sur une vue maître-détail des données. Donc, fondamentalement, il y a une liste d'enregistrements en haut et des informations détaillées sur l'enregistrement sélectionné en bas.

Malheureusement, il peut y avoir une autre liste dans la vue détaillée. Un utilisateur peut créer/éditer/supprimer ou utiliser d'autres actions sur les enregistrements des deux listes. La version actuelle de l'application dispose donc de deux barres d'outils, une pour chaque liste. Voici un bref aperçu de l'application actuelle: quick sketch

Nous ne pouvons pas nous débarrasser de ces listes "détaillées", nous devons garder les mêmes fonctionnalités. Nous voulons nous débarrasser de ces deux barres d'outils, car nous les trouvons déroutantes pour un utilisateur. Nous avons quelques idées comme les contrôles en ligne ou certaines barres d'outils qui glissent d'une liste à l'autre en fonction du focus, mais rien ne semble être la solution idéale.

Quelqu'un at-il rencontré un tel problème ?? Est-ce que quelqu'un a des suggestions?

1
andrle

Distinguer la sélection du courant

Vous devez séparer le contenu marqué pour action du contenu marqué comme enregistrement principal. C'est-à-dire que vous devez distinguer fonctionnellement et visuellement le contenu sélectionné de l'enregistrement actuel . L'enregistrement en cours est l'enregistrement principal de la liste détaillée. Il y a toujours exactement 1 enregistrement en cours pour une liste principale donnée. Le contenu sélectionné est ce que l'utilisateur a explicitement mis en évidence pour l'action. Il peut s'agir d'un enregistrement principal ou d'un enregistrement détaillé. Il peut s'agir de plusieurs enregistrements dans une liste, en supposant que vous prenez en charge la sélection multiple (vous devriez). Il peut ne pas s'agir d'un enregistrement du tout, mais d'un champ dans un enregistrement ou d'une partie d'un champ (par exemple, mettre en surbrillance du texte dans une zone de texte), en supposant que vous supportez la modification sur place (vous devriez). C'est peut-être même plusieurs champs . Il se peut qu'il n'y ait rien du tout sélectionné (par exemple, lorsque l'utilisateur tape dans un champ de texte).

Peu importe ce qui est sélectionné, combien sont sélectionnés, ou même si rien n'est sélectionné, il y a toujours toujours exactement un enregistrement en cours par liste principale. Il doit y avoir –vous affichez toujours la liste détaillée, vous devez donc toujours montrer à quoi elle appartient. C'est pourquoi les éléments sélectionnés et actuels doivent être séparés visuellement et fonctionnellement, même si cela représente une complication supplémentaire pour vos utilisateurs. L'enregistrement sélectionné est souvent l'enregistrement en cours, mais ce n'est pas obligatoire.

Le menu agit sur la sélection

Pas trivialement, la séparation de la sélection du courant résout également votre problème. Vous avez un menu et il fonctionne sur le contenu sélectionné (qui est la définition du contenu sélectionné). Le dossier actuel n'est pas pertinent. Par exemple, l'utilisateur peut utiliser le même élément de menu Copier pour copier un ou plusieurs enregistrements principaux, ou un ou plusieurs enregistrements de détail, ou un ou plusieurs caractères d'une zone de texte et un ou plusieurs champs. Tout ce qui compte, c'est ce qui est sélectionné.

(BTW, pour les commandes sur la vue de la liste dans son ensemble, par exemple le filtrage, je vous recommande d'avoir un menu distinct pour chaque liste. En effet, les éléments de menu montrer les paramètres de la vue, par exemple, ce qui est filtré, et l'utilisateur devrait pouvoir les voir tout le temps).

UI pour le courant et le sélectionné

Visuellement, vous pouvez indiquer le contenu sélectionné en surlignant (par exemple, vidéo inversée ou ombrage) et indiquer l'enregistrement en cours avec un marqueur dans la marge de gauche.

enter image description here

Vous pouvez également essayer d'inclure une zone en pointillés autour de l'enregistrement en cours, conformément à la façon dont les zones de liste indiquent l'élément avec le focus lors de l'utilisation du clavier (surtout si vous n'avez pas de modification en place, auquel cas, l'enregistrement en cours est l'élément avec focus dans la liste principale).

Fonctionnellement, l'utilisateur définit l'enregistrement en cours en cliquant n'importe où sur un enregistrement principal (par exemple, en cochant une case dans l'enregistrement ou en cliquant dans une zone de texte pour le modifier). L'enregistrement principal est l'enregistrement sur lequel l'utilisateur a cliqué le plus récemment dans la liste principale . Par défaut, c'est le premier enregistrement de la liste. Si vous n'avez pas de modification en place, le ou les enregistrements sélectionnés sont les enregistrements sur lesquels l'utilisateur a cliqué le plus récemment à partir de ou de la liste . Si vous avez une modification en place, vous devez distinguer fonctionnellement la sélection d'un enregistrement entier de la définition du focus ou la sélection dans un enregistrement (par exemple, pour copier du texte à partir d'une zone de texte). Je recommande un " contrôle d'objet " dans la marge de gauche pour gérer les actions sur un enregistrement entier.

0
Michael Zuschlag

Avez-vous besoin d'avoir la section principale constamment visible lorsque vous modifiez/travaillez avec la liste des détails? Pensez à la divulgation progressive: sélectionnez d'abord l'élément dans le masque, puis ouvrez/faites glisser une nouvelle page avec les détails, maintenant avec suffisamment d'espace pour présenter les détails en détail. Ainsi, la liste principale ne serait qu'à un pas/clic (retour) et vous êtes en mesure de mieux utiliser l'espace d'écran. Cela devrait apporter plus de précisions sur les boutons d'action, car les boutons ne sont visibles que dans le bon contexte. Ainsi, personne ne peut confondre le "nouveau" de la première ligne avec le "nouveau" des actions de détails. (Pensez au parfum de l'information, je recherche la suppression, et la première chose qui me semble m'amener à mon objectif pourrait être la toute première occurrence de ce bouton).

J'espère que cela t'aides

0
Stefan Wasserbauer