How to show "more info"? Modal Vs Deeper Page?

Question

I'm designing a web application that contains some tables with data entries/rows that all can be edited in some way. We only present a limited amount of information about each data entry in the main table view, but more information is also available.

My question is, if the user chooses to see more information about an item, whether it's best to use a modal window, or show them a deeper view"? (Take them to a separate page)

There are some problems with modals, namely double modal windows layered over each other, e.g one to view/edit, one to confirm, though modals do have the benefit that they they are versatile when it comes to working with a small amount of data.

The deeper page view obviously doesn't have the problem of multi-layered modals, but it does take the user away from the the main table view and their task there.

Answer 1

Consider Page Layers

You can display what you're referring to as a "deeper" view without using a modal dialog, but maintain the main benefit of the modal i.e. it doesn't feel like you're leaving the table view and can just get back to that view with a single click.

When the user clicks for a more detailed view, or to make an edit that your main table UI can't handle, you can open a page layer on top of the table. It should be obvious that the table is still behind this new layer, but the new layer should behave as any other page.

To get back to underlying table, the user can click the title of the page below (which has become a link), simply 'x out', or complete whatever the main action is on that page.

Because this appears and behaves as a more static part of the UI, you can use modal dialogs on top, if you need to.

Some Examples

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

In Use in the Basecamp Project Management App

Answer 2

Have you considered to use child-rows to show additional data? It's a great way to show additional information of each row when needed. Here an example: