Le meilleur moyen d'afficher une longue liste d'informations détaillées pour les éléments résumés dans un tableau?
Je travaille sur une page d'application pour une compagnie d'assurance concernant les polices d'achat et montrant toutes les informations détaillées fournies avec la police.
Le problème auquel je suis confronté est de savoir comment afficher de manière appropriée les informations détaillées pour chaque politique, car il peut y avoir de 1 à 5 politiques contenant 10 à 50 éléments détaillés dans une liste. (Ceux-ci ont également des prix associés pour chaque article).
On pourrait dire que c'est similaire à l'achat de plusieurs ordinateurs avec une liste de chaque pièce d'ordinateur et le prix inclus.
Ceci est la conception actuelle que j'ai. J'ai envisagé de masquer la liste détaillée et d'ajouter un lien "Afficher les détails" sous chaque stratégie de résumé, mais je ne peux pas imaginer à quel point il serait lisible d'afficher un tableau à l'intérieur d'un autre tableau. Toute aide serait appréciée?
Lorsque vous mentionnez quelque chose autour de 1 à 5 politiques avec 10 à 50 éléments chacune, qu'en est-il de l'utilisation d'une sorte d'accordéon pour vos politiques que vous pouvez utiliser pour afficher/masquer les détails dans un sous-tableau pour chaque politique?
Quelque chose comme ça:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Edit: supprimé les barres de défilement suivant les conseils de Charles
Je regarderais en suivant certains des modèles que vous verriez dans iOS ou Android pour cela. Ce ne serait pas très différent de ce que vous avez maintenant, mais ce serait à la fois facile à utiliser et facile à mettre en œuvre.
Précisez visuellement que la première vue est un liste des éléments sélectionnables. Ensuite, lorsque vous sélectionnez un élément dans la vue de liste, vous pouvez afficher vue détaillée en tant que modale. Si vous avez besoin d'interagir avec les éléments de ce niveau, j'envisagerais d'avoir une page séparée pour eux, ce qui faciliterait cette interaction.
Je ne peux pas commenter il semble, donc j'ai dû coller cela dans un nœud de réponse. Ayant récemment traité de la réassurance de ma voiture, d'après ce que je pourrais en faire, il y a plus que de développer ou de dérouler des listes de détails qui sont obtenues par une simple recherche pour accéder aux politiques. Il me semblait que la structure de la base de données est beaucoup plus plate et les informations plus faciles à masquer que les hiérarchies simples de détails. Vous devrez en savoir plus sur la manière dont les agents d'assurance interagissent généralement avec ces informations avant de décider d'un modèle. Je ne vois aucune application d'assurance open source à consulter.
La solution classique à ce problème consiste à utiliser des tables maître-esclave. Dans la table maître, la liste est affichée et dans la table esclave, les détails de l'élément actuellement sélectionné. Bien entendu, le terme "table" est utilisé de manière conditionnelle: il peut s'agir d'un arbre ou d'une autre forme de représentation des données, selon la nature des informations affichées.
En fonction de la taille des informations détaillées, une fenêtre de conseil sur le survol peut être fournie pour un aperçu rapide des informations. Bien que cela ne soit utile que si les informations détaillées sont suffisamment petites.