0

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?

mockup

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.

  • Confused about sorting the table? Do make them chick to get the the tooltip? – paparazzo Jul 21 '16 at 13:24
  • @Paparazzi Yes, if using a link (e.g. blue underline), we were planning to use the standard behaviour (i.e. click) to trigger the tooltip, just to cater for touch users. For the ? icon, we could do hover, with a click fallback. – KemanoThief Jul 22 '16 at 10:11
  • To me click is is not standard behavior. – paparazzo Jul 22 '16 at 14:54
8

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.

Tooltips for table headers in Google Analytics

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.

Tooltips for table header in YouTube analytics

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. :)

  • 2
    I totally agree on adding a question mark on the header won't look messy, especially if designed it with monotone color like Google does. The Youtube one I think is somehow confusing for the users, it could add cognitive load to them. But if you want to be cautious about this, I would suggest testing the two versions with real users. – Wen G Jul 21 '16 at 16:41
  • It's not desktop-only. Totally agree with your points @Daniel. – KemanoThief Jul 22 '16 at 10:15
  • What would you do if you had a lot of columns and no room for the question mark icon? (this is the problem I'm facing now: ux.stackexchange.com/questions/107065/…) – Joshua Frank Apr 17 '17 at 19:41
1

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

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.