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.

I have a data set with three levels of data and a numeric score at each level. These score values roll up to the parent each level. I need this display as part of a report that is "printer friendly".

Here is the layout that I am playing with: enter image description here

For some reason, I don't really find it eye-catching. I am a novice to UX and looking for some expert guidance.

Thanks in advance for your time to look up my post.

share|improve this question
1  
Hi Moiz. Do you see any particular problems with the solution you have so far? You mention that you don't find it eye-catching but the information looks pretty clear to me. –  Matt Obee Dec 23 '13 at 15:37
    
One problem that I feel is that it is not very evident that it is the children that is giving the parent the sum on the score. If you look to the left, there is indentation plus the multi-level numbering, which gives a very clear indication that the item that is indented is a child item. If I indent from the right, it is no good visually. –  Moiz Tankiwala Dec 23 '13 at 17:08

3 Answers 3

up vote 5 down vote accepted

Some improvements are:

  1. Remove agressive black border as it takes too much attention
  2. Use single grid, it creates simple visual structure
  3. Align numbers to the right for easy scanning and reading
  4. Remove repetitive 'Score'. It breaks the numbers reading
  5. Don't use too long empty lines
  6. Be careful with zebra-coloring the lines, as printed version could be hard to read. Instead try to use horizontal dividers

enter image description here

Shift of the numbers doesn't necessary mean sum for users. However it brings visual complexity ("dance" of the numbers). Probably direct note will work better.
enter image description here

Zebra, if used, could break hierarchy of the data, it should be tested with the real data.

share|improve this answer
    
Thanks @Alexey. Appreciate your inputs. 1. Very good suggestion. 2. Again very nice. 3. Agree, but here I don't get the effect where I want to make it very evident that 18 = 9 + 9 & 9 = 2 + 3 + 4. 4. Sure. Good one. 5. Sorry, that was just a quick wireframe mock up. 6. Do you suggest that zebra coloring for the screen version and no zebra for the print? –  Moiz Tankiwala Dec 23 '13 at 17:09
    
@MoizTankiwala, I've edited the answer. –  Alexey Kolchenko Dec 23 '13 at 18:46
    
Thanks @Alexey. The second layout that you suggest looks really sleek with the vertical borders taken off. This is what I feel is eye-catching! –  Moiz Tankiwala Dec 24 '13 at 3:19

Alexey Kolchenko has made some good suggestions, specially regarding simplifying the grid to improve readability. I'd like to propose an additional measure for readability. Looking at your initial example, I noticed the "parent" groupings; that suggested to me visually distinguishing those groupings in some way to make them intuitive to the reader.

My suggestion is to add some vertical spacing between the parent groupings, so that each group is separate and it is easy to tell which child elements belong to which parent. Also some horizontal lines to clearly mark the divides, and to suggest a sum of scores.

Score data with vertical spacing

share|improve this answer
    
Good suggestion for more clear visual hierarchy! –  Alexey Kolchenko Dec 23 '13 at 19:03
    
Good suggestion. Thanks Grant. –  Moiz Tankiwala Dec 24 '13 at 3:17

I would suggest playing with this in Microsoft Excel. It gives you the ability to try different combinations of things quickly, or even to create the same data, with different styles applied and compare side by side.

Here is quick mock-up I did in less than 5 minutes. There are a ton of other combinations you could experiment, and I think with 30 min you could have several completely different looks for the same data. Then simply print them out, and walk them around to different people in your office and ask them to pick their favorite and then ask them why. You will likely find that it will help narrow things down for you.

Here was my 5 min attempt:

enter image description here

share|improve this answer
    
This is a good layout. I will take the indentation on the numbers you have suggested. Thanks! –  Moiz Tankiwala Dec 24 '13 at 3:20

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.