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.

We have a web application where we show lots of data in "datasheets". As part of this, some data values can have other values associated with them. To make it more complicated, every item can have multiple values.

e.g. (this is probably a more complicated example, but we have lots of data that is similar, albeit a bit simpler)

Item 1        Value
  Sub Item1     Value
  Sub Item2     Value 1
                Value 2
                Value 3
  Sub Item3     Value
  Sub Item4     Value
  Sub Item5     Value

Item 2        Value 1
              Value 2
              Value 3
  Sub Item1     Value
  Sub Item2     Value 1
                Value 2
                Value 3
  Sub Item3     Value

Item 3        Value

When these values are displayed in the datasheet, we need to make it obvious that the sub items values and their values are associated with the main value, instead of being part of the main datasheet themselves.

What visual techniques can we employ to make this data clear when presented in a web page?


EDIT:

Below are tow mockups that have been generated in-house. The first one is preferred by several people, although personally I think it is horrid. The second is my preferred version.

Stripes within stripes

Lines within stripes

Is there a better way of distinguishing this information?

share|improve this question
1  
Are any of these values editable, or is this read-only? –  Monica Cellio Mar 20 '12 at 14:34
    
@MonicaCellio In this view, they are read only. –  adrianbanks Mar 20 '12 at 15:37
add comment

2 Answers

up vote 2 down vote accepted

Would this work? I wasn't why the Values needed to be indented and vertically stacked in your design?

So the below design has the following changes:

  1. column headers
  2. data values aligned left, and much closer to the field names.
  3. values separated by commas. (which can wrap.)

enter image description here

share|improve this answer
    
I've gone with something similar to this in the end, but without the column headers. –  adrianbanks Mar 21 '12 at 14:55
add comment

You could use a method like "even" and "odd" to separate sub items from other sub items. Each even item could have a slightly different shade or colour to the next odd item.

For example, you could adopt something similar to this: enter image description here

The tabbed design certainly reduces clutter but may not work well with your data if Items need to be compared to one another. It can be adapted to suit this if need be.

I hope you have a CSS whiz handy!

share|improve this answer
    
We have some mockups using colour (which I may add as an edit to the question), but the approach doesn't work well. We can't really use the tabbed route, as some datasheet have lots of items (> 50) which would translate into lots of tabs. –  adrianbanks Mar 20 '12 at 15:57
add comment

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.