How to organize multiple information popup areas over a table?

Question

How might you best organize multiple popups over a table when both the table content and the popup content are equally important.

Scenario:

Tabulated data, for which the user may be interested in examining or watching more detailed information for a given row in the table. That information may (for example) be viewed in a popup window (modeless) and may show a list of attributes, live feed information, or other content of interest to the selected row.

The main table itself also needs to be watchable as the content changes and this is what drives the user to bring up a popup in the first place - ie to do a more detailed watch on attributes of the selected item.

Things to bear in mind:

• no more of the main table should be hidden than necessary because that contains live/dynamic information that the user may be watching too.

• The user may want to examine or watch any number of these items in the table (the rows of interest may be adjacent or disconnected)

• The user shouldn't have to spend time organizing the popups/areas themselves.

• You need to be able to relate which popup/area corresponds to which row in the table

• Conversely, You need to be able to see which row already has a popup open

• The extra information can't just be inserted into the table as that would push too many table items off screen.

What strategy might be best to organize the multiple popup information in such a way as to optimize the ability to view each popup without too much movement, reordering, or hiding of the main table?

I'm absolutely for avoiding physical popup windows if at all possible.

The scenario could be likened to a Google Map for example, where it's possible to view multiple InfoWindow popups for different locations on the map that may be close together or further apart. It's a fine balance between being able to see all the popups but still as much of the map as possible.

Examples that don't work well:

Cascading popups: Typical cascading option requires too much user interaction (repositioning and reordering) and doesn't visually relate to the 'owning' row in the table.

Tiled popups: Typical tiled popups cover a lot of the main table and don't visually relate to the 'owning' row in the table.

Offset popups: Better at indicating the 'owning' row, but after a few popups you quickly need to overlap the windows - especially if the selected rows are adjacent.

Answer 1

If the popups show more detailed information about the row, make sure they don't obscure part of the row. So, perhaps it better to let them appear below the row.

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

However, it's best not to obscure anything. As you say, that data is on screen to be monitored and you don't want to put stuff in front of each other and make the user have to manage the screen.

You could reserve a part of the screen for viewing the information that is now in a popup.

Depending on whether the main table is tall or wide, put it on the left (close to the important first column) or below the table. This would require making a connection between the entry in the table via an icon (numbers perhaps), repeating the ID, or a color (or all of the above). But doing so you could also put them next to each other so you can just scroll around to view one or the other.

^{download bmml source}

You could also fold out an area inside the row in the main table to show that extra data. This maintains a visual connection to the main entry and the information. While this obviously takes up screen real-estate, it's usually preferable over having things overlap. It does break the structure of the main table, making it harder to read, so you need to design for that. I guess it depends on the kind of data you have if you can pull this off. I've designed UI's where it works, and I've seen it fail completely (like in this this Balsamiq thing ;) ).

^{download bmml source}

Answer 2

A possible solution might be multiple right aligned tabbed popups.

Yes they overlap, but each one is easily selected via a tab that is aligned to the 'owner' row. For added value - each tab could be highlighted according to the age at which the popup content was last changed, so that the user can see that hidden popups have changed content.

Or, alternatively use an area to the left of the table - but the downside of this is you immediately lose a view of the right most columns of the table, as soon as you only have one popup open...and of course there's a physical shift of the table which is hard to justify.

Answer 3

This is another good example of a complex master-child data view, as such, it's tempting to try to show too much info on one screen. You might be attempting to design for the "power user" instead of the common user, but I don't know how much research has gone into this requirement. I like to push back on these overly complex data screens.

So, a possible solution that comes to my mind is a deviation on the "tiled popover" but more of a tiled window collection. The popovers become detailed windows that do not overlap but lay out next to each other. The detail windows could be beside, above or below the table, and could optionally scroll in one dimension.

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