Approche maître-maître / détail? (a.k.a, comment aborder les données résumées)
Bonne journée à tous.
J'essaie de concevoir une application qui est essentiellement une liste de tâches, qui fournit bien sûr un certain niveau de maître-détail: une liste de tâches et le détail de chaque tâche.
Maintenant, la fonctionnalité supplémentaire que cette application fournira sera un graphique qui affiche les dépendances entre toutes les tâches. Et voici le défi: puisque ce graphique généré est utile comme vue principale de la liste générale, il devrait également être affiché.
J'ai donc deux sections: une vue d'ensemble principale, une liste principale (avec des capacités d'ajout/suppression) et une vue détaillée.
Comment peut-on les concevoir de manière à ce qu'ils s'écoulent de manière naturellement utilisable?
C'est ce que j'ai jusqu'à présent, qui n'est pas proche de quelque chose qui a vraiment du sens pour moi.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Quelle est la bonne approche de ce besoin maître-maître-détail? Ou peut-être qu'il n'y a rien de tel que maître-maître-détail?
Mise à jour: Après les commentaires d'Izhaki, j'ai mis en place une deuxième itération où le panneau supérieur est ce qui s'affiche en fait tout le temps: la liste et l'aperçu du graphique. Le panneau de détails est masqué ou affiché si nécessaire pour modifier les détails, donc grâce à cela, il est devenu une approche plus courante des détails principaux.
Ça va comme ça.
Tout d'abord, faites la distinction entre les données et sa vue . Dans le cas de la tâche list, vous avez un ensemble de données et deux vues pour les afficher - si les données changent, les deux vues doivent être mises à jour.
Ensuite, considérez ces trois concepts IA populaires (j'utilise mes termes préférés, mais mentionnez également d'autres termes):
- Composant unique - un composant (généralement une page) qui n'apparaît qu'une seule fois dans le système. Par exemple, une politique de confidentialité page .
- Composant de liste (alias catalogue, enregistrements, articles, galerie) - un composant qui répertorie une collection d'articles similaires. Celles-ci impliquent généralement un modèle et les entrées sont lues à partir d'une base de données. Par exemple, ne page sur un site répertoriant tous les T-shirts pour hommes.
- Composant d'enregistrement (alias article, produit) - un composant qui montre un seul enregistrement parmi plusieurs. Généralement, une page de modèle qui remplit les données d'un seul enregistrement de base de données (et éventuellement ses associations). Par exemple, ne page sur un site affichant un T-shirt particulier.
Maintenant, dans votre cas, vous avez un seul ensemble de données (les tâches) qui a deux vues (la liste et le graphique), les deux sont une forme de composant de liste. Ceci est courant - comme une application d'informations de voyage qui montre les stations à proximité à la fois sous forme de liste et sous forme de carte.
Ensuite, vous avez également un composant d'enregistrement (une tâche), qui est affiché par le panneau de détails de la tâche.
Je pense que ce qui est flagrant dans la conception actuelle, c'est que vous avez choisi de créer la hiérarchie visuelle suivante:
- Volet gauche
- Tâches (vue liste).
- Volet droit
- Tâches (vue graphique).
- Détails de la tâche.
Où il semble hautement raisonnable d'employer la structure suivante.
- Volet gauche
- Tâches (vue liste).
- Tâches (vue graphique).
- Volet droit
- Détails de la tâche.
En d'autres termes, déplacez le graphique vers la droite (où se trouve la vue de liste) pour profiter de loi de proximité gestuelle .
S'il est important que les utilisateurs voient les deux vues en même temps, vous devez diviser le panneau de gauche en parties supérieure et inférieure. Si ce n'est pas le cas, vous pouvez les mettre dans un onglet.
Considérez également à quel point il est important pour les utilisateurs de voir en permanence le panneau des détails de la tâche. Peut-être que vous pouvez afficher des détails supplémentaires sur une boîte popover lors du survol, et afficher uniquement le formulaire lui-même lors d'un double clic?