4

We have a table of data that is not interactive but is too wide and growing so we need to consolidate the columns. Currently the headings are taking up the most space so I am trying to provide a highly useable representation of the data.

The target user is a competent computer user who has reasonable experience working with applications, not just a web user.

This is the original table. The headings are what is important and their representation is lost as the page is scrolled. Where there is a check then that column is a property of the item.

Note most rows will only have 2-3 properties showing per item.

enter image description here

My first thought was to show coloured blocks with a legend, along with tool tips:

enter image description here

But are legends more a thing of the real world rather than online?

Next is abbreviated text with tool tip, from a usability perspective this gives inline understanding without referring to the legend.

enter image description here

Or a combination of text and coloured blocks.

enter image description here

I am not sure which approach would be the most usable/easily understood?

Improve this question
4
  • Is it not possible to switch the column/row configuration of the table in the first instance? Also, does it have to work on desktops or mobile devices as well?
    – Michael Lai ♦
    Commented Feb 29, 2016 at 22:11
  • 1
    If you don't need to preserve the table structure (i.e. you don't need to sort or filter on all fields) then you could possibly consider a list or card view style where you create blocks that contain just the type information present rather than display empty column cells which just takes up space.
    – Michael Lai ♦
    Commented Feb 29, 2016 at 22:14
  • nice idea. There will be the option to sort though. Thanks for the response
    – Gurnard
    Commented Mar 1, 2016 at 9:07
  • 1
    A list or card view style still allow some sorting and filtering, but just not for all the fields (at least not easily). I guess there is a trade-off between making all the data visible versus how easily it is for the user to pick up the information they are looking for.
    – Michael Lai ♦
    Commented Mar 1, 2016 at 10:43

1 Answer 1

Reset to default
5

The color legend creates an arbitrary mapping between colors and values, that will be difficult to learn and will increase user errors.

The combination of text and color creates clutter, the color dimension is redundant and unnecessary.

I recommend that you use the second option, abbreviated text with tool tip. The abbreviations will act as keys to the actual value, thus making learning very easy.

Improve this answer
2
  • Thanks for your concise order. The colour is for visual flair (mainly on the combination), but also can users not relate colours to values? For instance green/blue = go red = stop. I understand that there maybe too many colours here but would this not communicate to the user maybe on a sub-concious level?
    – Gurnard
    Commented Feb 29, 2016 at 16:17
  • sorry concise order should read concise answer.
    – Gurnard
    Commented Mar 1, 2016 at 9:08

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.