6

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.

  • Good question with some good answers. It may be worth having a number of patterns which you can utilise depending on context / data complexity. – Wander Apr 20 '15 at 10:46
2

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In Use in the Basecamp Project Management App

enter image description here

1

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:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.