Showing extra information for a table row when that row's selected

Question

In the app I'm developing, we have a table/list that makes use of a kind of master/details approach; when you select a row in the main table, a second table below it is populated with 'child' items.

However, I've just noticed a feature of the grid control I'm using: the ability to have the 'details' shown inline in the main grid, just underneath the selected row. For example:

(Note: the above screenshot is not of my app; it's just an example I found on the internet, so I'm really not interested in specific comments about it. Thanks.)

I was wondering, does anyone know of UI design guidelines for this pattern? Does the pattern even have a commonly-agreed name?

Some thoughts:

• I can imagine that it would break down if the details panel were excessively tall (whatever that means), but is there anything else I should be looking out for?
• Is there even any styling I can apply to make my master/details relationship any clearer without cluttering the design?
• Have you seen any good examples of this pattern in use?

If anyone has any references -- or even just tips -- I'd love to hear it.

Answer 1

According to Quince's pattern library it's called local zooming and is related to the pattern of showing data tips. From a user perspective it's not very different from a normal accordion, where the table rows are used for navigation.

In your example, the relationship between the expanded section and the row it belongs to could be shown a bit clearer. The color use makes the row stand out from all the rest, including the address part, while it should be obvious that the address and selected column belong together.

Answer 2

We've used a pattern where clicking on a row gives details beside the row, in a separate pane. I can't give you a screenshot, but it ends up being similar to the Outlook preview pane in side-by-side mode.

As you point out, it's important not to disrupt the user's focus too much when bringing the new information into view. Having the extra info be relatively small will help them keep their bearings. Using subtle animations to guide the eye as the accordion opens can also help, as can use of matching colors/shades.

It's also important to make it clear what row the detail goes with. In your case, tinting the address detail in a lighter shade of the selection color would make it clearer that this detail goes with the cell above, not the cell below. You could also use borders to set it "into" the page slightly, or otherwise set it off from surrounding areas.

You also have a mix of columns and the larger text box with details in it. This is a tiny bit odd, but perhaps it's not too disruptive if you handle it carefully. Right now, the column borders pierce the larger text box and resume below it, which is visually distracting.

Answer 3

I am not sure this is a good pattern. When the row is selected, a brand new section underneath it with more information is displayed. When the row is deselected, the section disappears. The rows beneath that rows get moved down and up. Seems to me like too much row movement and stuff happening and rows are moving up and down with new info showing between them and then disappearing.. poof.

How about the detail section next to the table? The rows in the table don't shuffle around. The detail info is always located in the same area. Your eyes doesn't get distracted as much and it expects to know where the details are every time.