Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

Example usage of the RowDetailsTemplate property of DataGrid

(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.

share|improve this question
    
While I have already accepted an answer, I'd still like to see more good examples of this pattern in use; especially for tables of data, as my particular table's local zooming (not the one shown above) doesn't look or feel that great to use. –  Mal Ross Apr 20 '11 at 16:03

3 Answers 3

up vote 5 down vote accepted

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.

share|improve this answer
    
Thanks for the answer - it's the first time I've come across that term. –  Mal Ross Apr 20 '11 at 16:01

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.

share|improve this answer
    
Agree wholeheartedly with your 2nd paragraph. In fact, a lot of what you suggest is implemented in this Silverlight example of the pattern in action. –  Mal Ross Apr 27 '11 at 12:32

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.

share|improve this answer
    
While I agree that the movement can be surprising, I'm not so sure it's that bad a thing. I've seen it implemented smoothly enough in many places (e.g. Skype) to feel quite natural and pleasing. Also, by having the extra content appear where the eye is focussed, you don't risk the user not noticing it. Maybe sometimes it's good for the eyes to be "distracted"? –  Mal Ross Apr 27 '11 at 12:28

Your Answer

 
discard

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.