I have the following table design for PC. How can I make it easier to see that "ddd", "eee", and "fff" are groups of "CCC" in mobile view?


enter image description here


enter image description here


I think the problem lies in the origin, not the destination.

The hierarchy ranks in the original table are given by position, typographic style and color, except in the second hierarchy, which maintains the same color as the first.

By modifying just this, you already have much of the problem solved. In this extremely simple example, there's an indentation to accentuate it:

enter image description here

Hierarchies in a landscape table are more evident because the eye follows the reading order:

  • left → right
  • top → bottom

In a vertical table one of these readings is eliminated so hierarchies must be emphasized by other means. The visual contrasts is the design tool for those cases. With very simple design tricks you can get better results:

enter image description here

  • Small nitpick, but you should probably switch up > down with top > bottom as you don't read up to down, you read top to bottom. Jan 11 at 17:05
  • 1
    Thanks (spanglish 😉 ). Next time you can edit the answer to fix it.
    – Danielillo
    Jan 11 at 17:22

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.