4

I have a series of columns that have a header like so: enter image description here

What is the best option when it comes to readability and getting the information needed on the screen? I am currently resizing long headers in order to get them fit, but it becomes increasingly difficult to read. I tried to use ellipsis to cut off extra text, but the there are many cases where the header needs to be read in full, for example Long Header ID #1 and Long Header ID #2 both get truncated to something like Long Header I... which is useless to the client.

Improve this question
2
5

I would wrap the text, which means you'd sometimes have more than one line of text, and the height of your column header will need to be flexible.

In terms of readability, having a few 1-line headers with extra space above and below in order to accommodate the space for a couple of 2-line headers is better than having text that changes size from column to column. Variable text sizes can be really difficult for users' eyes to scan.

Improve this answer
2
  • This is what I have gone with. I reduced the overall font size a bit and allowed the headers to wrap to more lines. Thanks.
    – MrZander
    Oct 1 '15 at 15:39
  • 1
    Also, wrapping the header text allows for narrower columns meaning more columns visible at once, which is usually good for users working with tables like these of MrZander seem to be.
    – Juan Lanus
    Oct 7 '15 at 17:20
4

What devices are you targeting? You may just need to employ responsive table practices. As your screen shrinks, you may want to consider removing less important columns, or transforming your table into one of the following:

However, if you're not supporting smaller screen sizes, and you're just looking for a better desktop solution, then @Vicki's solution works perfect for most cases (:

Improve this answer
2
  • The columns are always the same size, its a desktop application.
    – MrZander
    Oct 1 '15 at 15:38
  • Ahh. Even if that's the case, then I would recommend looking at the TableSaw Example. Specifically it's "TOGGLE" portion, where you can select which columns you're viewing. There are a few other options that "work", but tend to not be as user friendly.
    – Daniel Brown
    Oct 1 '15 at 17:16

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.