1

I have a table, possibly a very large table, where every cell is just a simple checkbox (e.g., click-dragging will check/uncheck a grid at a time). The table will have both row and column headers. Although the cells are very simple and small, the row / column headers will tend to be very long (the row headers, for instance, will typically be full sentences).

Ideally, the headers should be fixed while the table scrolls in both dimensions, in order to easily indicate each cell's location. It isn't vital that the entire row or column header be visible, except in its purpose of distinguishing it from the other headers (on average, maybe around 3-5 words at the start may match for some).

As a prerequisite, I know I can use ellipsis dots or fading to truncate the headers after so many characters. But the next question is what I'm struggling with: How do I elegantly lay out the table, without creating excess dead-space or cutting off too much of my headers?


1.

My first thought was to try using vertical labels for the columns. My concern with this is that it reduces the scrollable space by a bit while creating a large unused empty space in the corner:

horizontal row headers, vertical column headers

2.

I considered horizontal top-headers too, but it just leaves so much dead-space in the cells, since the ideal cell shape is a square:

horizontal row and column headers

3.

I also considered some kind of inline option... but not sure how intuitive or functional it would be:

horizontal row headers, vertical column headers, alternating inline in the table


If there's no definitive solution, what would be considered the generally accepted compromise?

TIA!

1 Answer 1

2

Trying to fit in too much content when the space doesn't allow for it is never an ideal user experience, but if you are talking about a compromise, the use of diagonal headings seems to work sometimes.

I think the top heading rows are more problematic then the left hand side, because you can always allow the users to scroll or hover to read the whole line, but it is much harder to do this for the top row if the text is very long.

enter image description here

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.