1

In my website I have three boxes that contain general information about a customer:

enter image description here

I think the presentation of "label: value" is a disaster. The contrast between short labels and long labels is an eyesore: it forces the text to accommodate the longest label, which pushes everything to the right.

Is there a better format I can put this information in? (Right now it’s implemented as a 2 column table.)

3
  • 1
    Take a look at Tables from Material design guide: material.google.com/components/…
    – Alvaro
    Nov 17 '16 at 22:56
  • Why aren't the long lines folding?
    – MMacD
    Nov 18 '16 at 19:43
  • Because i want each box to be the same height, therefore each table needs to have the same number of rows.
    – Eric Guan
    Nov 18 '16 at 19:48
2

Gestalt principles, specifically proximity and enclosure, come to mind here:

Gestalt principles illustrated

Users are likely to approach such data in two principle ways:

  • Search for a label of interest then look at the value.
  • Scan each label-value pair (top-down Z shape scan).

It is perhaps worth noting that in none of your examples the labels are left-aligned, which requires a tiny bit of extra effort to fixate on their first letter.

Also judging by your examples, it seems you may be concerned that if all columns are left-aligned, the space between the label and value could get too big to yield a form of visual detachment. Although probably not a real issue, you can always separate rows with a faint vertical line, or use row-background-toggle.

Just to demonstrate this, see if you had any problem finding the amount of plays Foo Fighters had:

A grid with artist names on the left wide column with 60% white space on average, and play figures on the right column

This image was taken from this page, where you can see more table layouts like this.

0

Sometimes a little cleanup will get you to a cleaner look.

A few recommendations:

  1. I'd provide better contrast between the labels and the values... possibly gray out the labels a bit so they don't stand out so much and/or bold the values a bit (you want to differentiate the values from the labels a bit)
  2. I think you can combine a few labels into something more concise... eg "address" could work for all address related values in the company box
  3. If there is any way to simplify the labels yet still keep them obvious to the user it will help improve the clarity (eg in your 2nd panel, you could reduce the labels to: Total, % Corporate, Top Product, etc)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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