How to add contextual help for tables

Question

I've got a table that contains around 9 columns. Many of the columns contain dates and reference numbers that are used for complicated processes. The column headings are currently expert terms for the data.

The tables are used by experts as well as first-time users. How do I explain to new users what the information in each column is for?

^{download bmml source – Wireframes created with Balsamiq Mockups}

I've thought about:

• Adding question mark icons in column headings so that the icons open the tooltips (looks messy)
• Making the headings as links that open tooltips (but the user might not be clear why the heading is a link, looks like the header should sort the table)
• Adding a glossary section somewhere (all terms are defined but the user has to hunt for the term she/he wants to learn about. It also gets in the way for expert users that don't need a glossary.)

How could this issue be solved? Any good examples would be welcome.

Answer 1

Why do you think that adding a question mark icon/button displaying a tooltip on mouseover would look messy? That's exactly how Google Analytics does it and I think it's very straight forward.

In fact there's a variant that looks fancier for YouTube analytics, but is less obvious to users. There you simply see the tooltip on mouseover on the whole table header row.

If your users are purely coming from Desktop then the second version will do the trick, but I'd still say the first variant is more obvious to use. Another bonus point is that hover doesn't work for touch, so variant 1 would also work nicely on mobile.

I think the second and third option you mentioned (links that open tooltips and glossary) are way worse than the two options I just mentioned. I don't have any data/studies to back this up, so take this with a grain of salt. Still I would go for the very first suggestion I presented. :)

Answer 2

This is a great question (because I have the same issue) and its super helpful to know that your audience are expert users. Our company is also looking for an answer to how to show help without cluttering our online app grids with help icons or distracting link looking headers. The question mark icons not only clutter but also distract a workflow. One study participant thought the header was asking a question with the question mark icon placed after the text. If your users are expert types then they may only need the information once or want gentle reminders occasionally.

I found in another post (on UX stack exchange <3) that Andrea Ames has done great research on this topic and suggests "embedded assistance" which is more in-line with expert user experience. Some people don't like to admit that they need "help" :) but assistance or hints are nice to have on a busy day! check this out: http://www.tcworld.info/e-magazine/content-strategies/article/improving-software-usability-through-embedded-user-assistance/ and from Andrea Ames: https://static.aminer.org/pdf/PDF/000/591/904/just_what_they_need_just_when_they_need_it_an.pdf