0

We have a Web application with a right sidebar which shows a lot of vertically stacked cards with details (aka properties) of the main active entity. Each card contains a property table, where each row has 2 columns, a label/header and a value, which itself can be of different types (numbers, short text, long text, "chips", lists, even tables). We have differences of opinion about the horizontal and vertical alignment of the labels/headers:

Option 1 (horizontal: right, vertical: middle)

enter image description here

Option 2 (horizontal: left, vertical: middle)

enter image description here

Option 3 (horizontal: left, vertical: top)

enter image description here

Option 4 (horizontal: right, vertical: top)

enter image description here

We have read of course plenty of articles about header alignment in tables, but in all of these articles the headers are on top, not on the left, and there are multiple columns. Here we only have 2 columns and the header is on the left.

Do the general rules on table header alignment apply here, or is this a special case?

2
  • Not a rule, but I'd definitely avoid the vertical middle in situations where the data column for at least one row is so tall that it's not possible to have the header visible when the top of the data column is on the screen. That would create frustration for someone scrolling down the table, encountering a new row, and not being able to know what it is about without having to scroll down to the hidden heading and then back up to the top of the row. Jul 13, 2023 at 12:44
  • @RayButterworth thanks for the comment, this is indeed one of the considerations, but I didn't want to explicitly state it in the question so as not to influence the answers. Jul 13, 2023 at 13:19

1 Answer 1

4

Option three is the right one, although the most relevant problem is not the alignment of the label but the relationship with the content between cells:

enter image description here

The different distance in the horizontal alignment between the texts of the labels and the text of the following cell generates a great imbalance.

Ideally:

  • The label and text should be aligned to the top
  • All cells have the same generous generic top margin
  • Decrease the top margin of cells containing chips until the text baselines match

enter image description here

Edit after the comment

There is something called visual perception, which could be summed up in everything we see, but also in what we do not see but affects the formal set.

In your schemes, you are proposing dispositions of elements in a virtual structure. From all the options, the one that incorporates the fewest elements is the one with the best perception.

A simple exercise is to visualize and study these axes and their directions:

enter image description here

enter image description here

Personally, I think the one that incorporates central alignments is the most controversial. This does not mean that it should not be used, but balancing what is the most important between design and content, in this particular case my decision would be the content.

4
  • I'm glad you noticed this misalignment in the chip values, some people don't 🙂. And indeed, this is part of the problem with the top vertical alignment, because now we have chips, we also have tables (not in the screenshots), lists, etc. and it becomes problematic to find a top margin that works for all and doesn't expand the whole table vertically to waste more space. It also adds complexity to the technical implementation (to create exceptions for different types of values). But why is the left alignment obvious? Jul 13, 2023 at 13:14
  • Answer updated.–
    – Danielillo
    Jul 13, 2023 at 13:40
  • Thank you for the extremely detailed answer! If nobody else replies within the next days I will accept it. Jul 13, 2023 at 15:02
  • 2
    I was going to recommend the same since it's teh coomnly accepted pattern, but Danielillo said it better than what I would be able to. Anyway, just to support what he said, here you have a couple links supporting this: uxdesign.cc/designing-smarter-data-tables-8cb15b5371a8 , medium.com/@virginiaracu15/… , smashingmagazine.com/2023/06/…
    – Devin
    Jul 13, 2023 at 15:59

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.