Best way to show long list of detailed information for summarized items in a table?

Question

I'm working on an application page for an insurance company regarding purchasing policies and showing all the detailed information that comes with the policy.

The problem I'm facing is knowing how to appropriately show the detailed information for each policy since there can be anywhere from 1-5 policies that holds 10-50 detailed items in a list. (These also have prices associated for each item).

You could say it's similar to buying multiple computers with a list of every computer part and price included.

This is the current design I have. I contemplated hiding the detailed list and adding a "View Details" link underneath each summary policy, but I can't imagine how legible it would be to show a table inside of another table. Any help would be appreciated?

Answer 1

As you mention something around 1-5 policies with 10-50 items each, what about using some sort of accordion for your policies that you can use to show/hide the details in a sub-table for each policy?

Something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Edit: removed the scroll bars following Charles' advice

Answer 2

I would look at following some of the patterns that you would see in iOS or Android applications for this. It wouldn't be very different from what you have now, but it would be both easy to use and easy to implement.

Make it clear visually that the first view is a list of selectable items. Then when you select an item in the list view, you could show the detailed view as a modal. If you need to interact with the items on this level, I would consider having a separate page for them, which would make that interaction easier.

Answer 3

I can't comment it seems, so had to stick this into an answer node. Having recently dealt with re-insuring my car, from what I could make of it there's more to it than just expanding or fly-out lists of detail that are arrived at by a simple search to get to policies. It seemed to me the database structure is much flatter and information more mashable than simple hierarchies of detail. You'll need to find out more how the insurance agents typically interact with this information, before deciding on a design. I don't see any opensource insurance apps to have a look at.

Answer 4

The classic solution to this problem is to use master-slave tables. In the master table the list is displayed and in the slave table, the details for the currently selected item. Of course, the "table" term is used conditionally: it can be tree or other data representation form, depending on the nature of the displayed information.

Depending on the size of the details information, some hint-on-hover window can be provided for quick overview of the information. Although it will be useful only if the detailed information is small enough.