How to launch an additional info popup from a set of cells in a grid

Question

I have a grid with a large amount of rows and columns. Columns are logically grouped together in sets of 5 all related to one data item (the letters in the below example).

Header | Property 1 (A) | ... | Property 5 (A) | Property 1 (B) | ... | Property 5 (B) | ...
Row 1  |      1A.1      | ... |      5A.1      |      1B.1      | ... |      5B.1      | ...
Row 2  |      1A.2      | ... |      5A.2      |      1B.2      | ... |      5B.2      | ...

I am trying to think of a way to launch a popup with some additional information about that data item (the letter in the above example), but I am unsure how/where the popup should launch.

Placing an icon in the header is not an option because then we will not be able to tell which row the user would like to open it for. Placing an icon in the row is also not an option because then we will not know which grouping in that row the user would like to open it for.

The options I have come up with so far, which are both not great, are:

• When a user clicks into a cell, show a small hovering button nearby that they can click to open the popup for the row and column grouping that the cell is in. This has issues with both usability and discoverability.
• Adding a new column for each grouping that has an icon the user clicks to open the popup for that row and column grouping. The issue with this approach is the user loses real estate (in an already busy grid) for this column and the icon repeating all down the column for every 5 columns will look strange.

Is there a better way for the user to get to the popup they want?

Answer 1

If the user is very likely to want see the more-info details you could find it worthwhile to go to a fixed master-child UI layout, similar to illustrated.

This provides affordance and fixed positioning for data.

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

Note

• details area could be positioned at right hand side of screen, especially if a widescreen device or landscape orientation.
• Size of details area can vary depending on info displayed. Can be small if no data displayed.

Answer 2

My suggestion would be to use a tool-tip If the description or additional details are of a smaller size, you can use the title attribute to display the information when the user hovers over the column header If you require a consistent experience, you can implement a custom tool-tip

Answer 3

Rather than using a popup, which can get problematic on small devices, I'd suggest to display the additional information below and inside the affected row. The example in the image shows what I'm trying to describe. It usually a grid with various album names. The song names of the album appear when you click the link (in the example it's clicking on Sleep Is For the Week). See it in action here.

This will temporarily claim a lot of screen space of course, but it's with relevant information/information the user is currently interested in. So that shouldn't be a problem.

To further improve it, you could add an icon to the link that gives a hint on the on/off state (e.g. an arrow pointing up/downwards if expanded). Additionally the tooltip when hovering over the link could describe the possible action (e.g. Click on link for further information).

Answer 4

Here's another approach:

I work in e-commerce and one possible solution to your additional info in a grid problem could be solved with how we display more info about our product on the product listing page.

If you think of a product grid as a cell in your spreadsheet. In order to see more info about a product (in this case your cell), a pane could slide open below the cell to display the additional info. Here's an example from Google Shopping (see live demo here):

This solution is better than pop up solution because

1. nothing is covering the original cell
2. the additional info is on the page and user can reference other cells without closing a pop up
3. no pop up means less click
4. user is able to view other cells without closing the pane.

Worth a consideration.

Answer 5

This complex interface has two layers, both of which are complex in themselves. A primary and secondary layer if you like. Using a popup is a good start but there are several ways you can make this easier to use:

Highlight the cell that they are operating on and consider using that as the trigger to open the popup, or highlight and the enter key, meaning you won't need an icon, a simple instruction in the header will cover all cells, following on from that:

Keyboard navigation - using arrow keys (and tab) to move around and enter to trigger the secondary popup - and esc to close it, along with cell highlighting so the user knows which cell will trigger a popup. Enter to examine and esc to close is a very common pattern in software, gaining great recognition as a result of Spreadsheet software.

Provide complete interaction from mouse and keyboard - especially if this is going to be heavily and repetitively used. highlight would equate to one click and highlight and enter would equate to a double click. Remember, your mouse interactions double up as taps on touch screens (this doesn't look like a phone app, at least in it's current form, but tablet sized screens would handle it).

Allow navigation from secondary layer to secondary layer, so you would be able to move around the cells but have the secondary layer popup and focus automatically without going back to the grid. If you decided to popup on focus then this would naturally happen each time the user moved amongst cells.

Use a fixed child UI layout as suggested by JayFang in their answer - this is probably better than a central popup or other sorts of popup (credit due to JayFang for this suggestion, but in order to make my answer as complete and good as possible I had to think and make use of this knowledge)

Search / filter facility - allow the user to quickly restrict cells using typed search terms, for example, 5b9 would immediately focus on that cell and you can then either open the popup immediately or focus on it so their next keypress opens the secondary level of interaction.

Highlight the current row and column they are on at the interface edges, much in the way that excel does, providing extra feedback to their position and also helping them deduce what is contained by any cells obscured by the popup

Examine your users - are they experts - if so, you can afford to sacrifice a certain amount of discoverability in order to make things more streamlined and rely on the fact that expert users will invest time in learning and teach each other. There's a big difference between facebook or google, building a learnable interface for a billion users and an application targeted at a few experts.

Highlight the first cell on page load - marking your instruction up in a similar way will help the new user make the connection

two screen solution - as you mention that the secondary level of interaction is complex too (a grid of 5 by 6, presumably editable, fields) you could also consider splitting it off onto its own screen and gaining the benefits of a full screen for this secondary grid. Retain grid context clearly and provide secondary layer to next secondary layer navigation too

You might not need to implement all of this to provide a good solution, but you should be able to play around with these different ideas, build a few prototypes, combine a bit of user observation with some hands on user testing and find the best pattern for your specific application.

PS don't just use colour to highlight

Answer 6

My advice would be to add a row at the top of your grid with the information for the user to click in the grid squares to see the additional info in pop ups. In my experience it is better for the user to see the instruction to get more info first, rather than have them figure out where it is or stumble upon what to do to get it.

Answer 7

Not knowing the context of use makes it fuzzy to come up with a solution. Here is what I can come up with:
How about selecting the raw and the column separately? Here is what I am trying to explain: the user selects the column they want to get the data then selects a row. When the raw and the column are selected, the extra pop-up can appear.

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

This is a bit complicated. I came up with that since I think the "secret pop-up" will not be used much. If it will be used often, then a button or a link visual change on the cell will just be more clear and easy to notice.

^{download bmml source}

Answer 8

In a similar case, I used a tooltip instead of a poppin. You just have to roll-over a cell for more than 1 sec to see the additional information.

You can even add a link if you need to go to another page

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