User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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


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.

enter image description here

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

enter image description here

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.

enter image description here

share|improve this question

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

share|improve this answer
+1 for the area inside the row even if "The extra information can't just be inserted into the table as that would push too many table items off screen." It still sounds like a good idea to me. – Gildas Frémont May 6 '13 at 19:57
I do prefer the idea of folding the relevant information inline as it removes the need for users to self organize any overlapping layout elements. I suggested that wasn't desirable in my question due to pushing too much off screen, but perhaps it can be designed around. One possible 'extra' is to have a view switch which temporarily hides/shows all open info panels - to help users whose attention focus may switch between monitoring the main table and the info panels. I do also still have a scenario where the table data is row based but graphical and contiguous and can't be separated though... – Roger Attrill May 7 '13 at 9:06
I believe at some point this becomes very specific to the data you're trying to show. One application I've designed comes to mind, where the left half of the table was important, the right was not. We put a large tooltip over the second half and it made a lot of sense to be able to quickly view some detailed information while obscuring some secondary info (and buttons in this case). I hate to say it depends, but it does. The answers here cover a nice array of possible patterns though. – Koen Lageveen May 7 '13 at 16:24

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.

enter image description here

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.

enter image description here

share|improve this answer
You know, you must have read my mind and typed in what I would have answered. This is the first thing that came to mind reading your question. :-) – Marjan Venema May 6 '13 at 17:25
@MarjanVenema You must have read my mind, because that is what I was about to say to Roger :) – JohnGB May 6 '13 at 19:18
Rather late comment, but I really like the second option, and depending on the design of the table, the physical shift in the second option could be very similar to having a slideout sidebar menu. – rach oune Oct 24 '14 at 18:12

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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