Améliorez la conception de l'interface maître-détail
INTRODUCTION ET INFORMATIONS PERTINENTES
Je programme une application qui écrit des données sur les contrats dans une base de données. Il est similaire au logiciel bancaire.
Le contrat est une donnée très complexe, alors laissez-moi décrire sa structure:
Il a des informations de base qui sont représentées par un ensemble de commandes de base (bouton, case à cocher, zone de texte, etc.).
Contrat peut ou non avoir des données complexes supplémentaires qui le décrivent, en vue d'une annexe.
Contrat peut ou non avoir des données complexes supplémentaires qui le décrivent, en vue d'un rapport spécial.
L'annexe et le rapport ont exactement les mêmes caractéristiques que le contrat d'origine. Ils ont les mêmes boutons, zones de texte, etc. La différence seulement entre le contrat et ces deux est le fait que le contrat a 2 zones de texte supplémentaires, et bien sûr, que l'annexe et le rapport font partie d'un contrat.
Après avoir demandé de l'aide ici précédemment et recherché en ligne, j'ai décidé d'utiliser interface maître-détail pour préserver l'espace. De cette façon, l'utilisateur peut à la fois ajouter de nouvelles données ou modifier/supprimer/rechercher/imprimer/etc. celles existantes.
MES EFFORTS POUR RÉSOUDRE CELA
Afin de présenter une telle quantité de données, j'ai décidé d'utiliser le contrôle des onglets. Cette solution a réduit de moitié la quantité d'espace occupé.
Pour afficher les données existantes, j'ai décidé d'utiliser le contrôle treeview pour les raisons suivantes:
- Il peut présenter le contrat en tant que nœud racine.
- Si le contrat contient des anex ou/et des rapports, ils peuvent être affichés en tant que nœuds enfants.
Vous trouverez ci-dessous les croquis du contrôle des onglets lorsque l'utilisateur saisit un contrat/une annexe/un rapport.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le deuxième onglet a les mêmes contrôles pour le contrat/l'annexe/le rapport. Le premier onglet a 2 contrôles supplémentaires pour le contrat, mais est le même pour l'annexe et le rapport. Dans la maquette, j'ai montré le premier onglet pour Contract afin de fournir un point de référence pour les lecteurs de cet article.
Voici les croquis de l'arborescence des cas suivants:
- Le contrat ne comporte ni annexes ni rapports.
- Le contrat comporte 2 annexes.
- Le contrat comporte 2 rapports.
- Le contrat comporte des annexes et des rapports.
Vous trouverez ci-dessous l'esquisse de ce que j'ai "compris" jusqu'à présent.
MÉCANIQUE D'ENTRÉE DE NOUVELLES/MODIFICATION DE DONNÉES EXISTANTES:
Comme indiqué précédemment, treeview représente les données existantes dans la base de données.
Si l'utilisateur souhaite modifier le contrat/l'annexe/le rapport, il vérifie le nœud souhaité et appuie sur < bouton. Cela charge le nœud sélectionné dans le contrôle onglet. Une fois l'édition terminée, l'utilisateur enregistre les modifications en appuyant sur > et les modifications sont enregistrées.
Si l'utilisateur souhaite ajouter une nouvelle annexe/un nouveau rapport au contrat, il peut le faire en chargeant le contrat existant dans le contrôle onglet (en appuyant sur <), puis en appuyant sur New Annex ou New Report bouton (ces boutons seront activés dès que le contrat sera chargé dans le contrôle des onglets). Une fois la saisie des données pour l'annexe/rapport terminée, l'utilisateur doit appuyer sur le bouton save pour ajouter la nouvelle entrée.
Un nouveau contrat est ajouté en appuyant sur New Contract bouton -> le contrôle de tabulation est réinitialisé et effacé. Une fois que l'utilisateur a fini d'entrer les données, il doit appuyer sur le bouton save pour ajouter le contrat dans la base de données. Le contrat sera affiché dans le contrôle de l'arborescence.
L'utilisateur peut annuler l'édition/nouvelle entrée en appuyant sur le bouton cancel.
Si l'utilisateur souhaite supprimer/imprimer le contrat/l'annexe/le rapport, cela peut être fait en vérifiant le nœud souhaité et en appuyant sur le bouton correspondant.
En ce qui concerne l'option de recherche, appuyer sur ce bouton lancera une boîte de dialogue où l'utilisateur configurera les critères de recherche. Treeview sera repeuplé avec les résultats de la recherche.
[~ # ~] problèmes [~ # ~]
Je crois que mon idée générale est bonne -> utiliser le contrôle des onglets pour entrer des données et l'arborescence pour afficher les entrées existantes. Je suis également satisfait de la solution d'édition du contrat/annexe/rapport via < et > boutons. Les fonctions d'impression, de suppression et de recherche sont également correctement mises en œuvre à mon avis.
Cependant, ajouter une nouvelle entrée - que ce soit un contrat/une annexe/un rapport - est à mon avis inefficace. Il en va de même pour le cas où l'utilisateur charge le contrat existant dans le contrôle onglet et essaie d'ajouter une nouvelle annexe/rapport.
Je pense que mon design est très "maladroit" et inefficace, ce qui est le résultat de mon inexpérience.
[~ # ~] questions [~ # ~]
- Comment puis-je améliorer la "mécanique" pour ajouter une nouvelle annexe/un nouveau rapport au contrat nouveau/existant?
- Existe-t-il un meilleur moyen de mettre en œuvre la saisie d'un nouveau contrat que d'y ajouter un bouton spécial (je pourrais peut-être ajouter un onglet spécial dans le contrôle d'onglet, comme
+dans ce but)? - Si vous avez une meilleure solution pour implémenter ce type d'interface maître-détail, je la considérerai également.
Si des informations supplémentaires sont nécessaires, laissez un commentaire et je mettrai à jour mon message avec les informations pertinentes.
Vos instincts en général sont à point, mais votre mise en œuvre est un peu bancale. L'interface que vous avez 1) se déplace de droite à gauche (sélectionnez d'abord quelque chose de droite, puis entrez les informations sur la gauche) et 2) nécessite une étape de chargement/déchargement qui n'est pas strictement nécessaire.
Voici comment je referais votre interface:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Un clic sur la gauche charge les informations demandées dans le volet droit. Apportez des modifications, cliquez sur Enregistrer, terminé.
Les "nouveaux" boutons de cette conception sont situés dans un endroit approprié au contexte. Le nouveau contrat est un ajout de haut niveau, il fait donc partie de la liste principale. Le nouveau rapport et la nouvelle annexe sont spécifiques à un contrat individuel et sont donc conformes à l'avis de ce contrat.
Le seul chemin UX qui n'est pas reflété ici est le cas du contrat non enregistré: que se passe-t-il si une personne modifie un contrat puis clique sur un autre contrat ou une annexe? Dans ce cas, je lancerais une fenêtre contextuelle indiquant "Vous avez des modifications non enregistrées au contrat n ° 1. Voulez-vous enregistrer vos modifications? [OUI] [NON]".