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.

  • 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, 2013 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. Dec 23, 2013 at 17:08

3 Answers 3


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.

  • 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? Dec 23, 2013 at 17:09
  • @MoizTankiwala, I've edited the answer. Dec 23, 2013 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! Dec 24, 2013 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

  • Good suggestion for more clear visual hierarchy! Dec 23, 2013 at 19:03

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

  • This is a good layout. I will take the indentation on the numbers you have suggested. Thanks! Dec 24, 2013 at 3:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.