I'm working on a financial services project, which includes a questionnaire. Some of the terms used in this questionnaire are financial and won't make sense to some users , but in order to explain what they mean, the length of the question would double, making the question very long indeed. Having a lot of copy on the page is not desirable as it will discourage people from using the tool. As a way of managing this complexity, we are considering:

  • A glossary that defines terms, but which would take the user away from the questionnaire
  • Hover copy that would use a dashed underline to indicate to the user that an explanation is available
  • Biting the bullet and including the explanation in the question

Which approach would you use and why? And is there another possibility?

  • What platform is available to the user? What all platforms do you have to support?
    – ripu1581
    Jan 17, 2013 at 2:35

7 Answers 7


Have you considered using a simple tooltip over the terms that need more explanations? (Activates on Hover)

enter image description here

You can also have a pop over for more descriptive explanations. (Activates on click)

enter image description here


Perhaps, consolidating the complex terms into one hidden module would be a better solution with a consistent "Need Help" button, link, or icon next to the question.

This should keep things more organized and provide help to those who are in search of it without leaving the page.

I'm not sure what your questionnaire format is, so I took a guess.

enter image description here

  • I've thought about using hover copy (2nd bullet, but probably with a dashed underline to indicate it's not the same as a normal link), but I don't think it's accessible.
    – Peter
    Jan 16, 2013 at 19:49
  • Not accessible for what? For mobile devices? Can you be a little more specific?
    – Chris N.
    Jan 16, 2013 at 19:54
  • Sorry, accessible for visually impaired users
    – Peter
    Jan 16, 2013 at 19:56
  • The update for this answer is my answer to this question. You can make Need Help section more than simple glossary but can make additional text explanations. But I suggest to put the link and explanations at the bottom instead of at the top.
    – Serg
    Jan 16, 2013 at 22:49

There are accepted HTML tags for a definition and abbreviations if you want to keep it simple.

<dfn title="Explanation here">Term</dfn>
<abbr title="Full text">ABBR</abbr>

Browsers usually implement the DFN tag as italics and when you hover over it displays a tooltip with the explanation. ABBR is typically unstyled, but you can do that with CSS.


If you looked at the FAQ for this site, they have arrows by the headings on sections that can be expanded and stay expanded (unless explicitly closed).

They also only display the 'Show all' link when you open up one of the sections, which makes sense, but I didn't actually see that when reading through the first time. So if you're worried about novice users you might want to include a 'Show all' link always next to the 'show more' link and make both links more prominent.

Then you:

  • avoid the temporary nature of the tooltip
  • keep the answer in context for the user that needs it (not in a popup, or separate glossary)
  • hide it from users that don't

Collapsed enter image description here

Expanded enter image description here


I would say the UX needs to have well written content that is structured too. use text fragments and dont repeat information. A short style guide can help.

Structured information. Each term needs to have

  • Term entry
  • Definition entry
  • Longer Details entry
  • Context is everything - use a screenshot or example of use where appropriate

Cut down on effort by generating any contextual information - metadata on type of term, approval status, domain, etc.

Then use:

Progressive disclosure - show more / less link or page turner - for longer details and example screens or to ability to share the term with team (link, social media widget),comments, or links.

Some tight examples: http://office.microsoft.com/en-us/access-help/access-glossary-HA010218202.aspx


(Assumed this is desktop, mobile affordances may be different)


Your approach is going to likely depend on your expected audience (desktop? mobile? online?) and, if on the web, whether they're using up-to-date browsers or if their organization has them on an outdated version of Internet Explorer, for example. So the first thing you need to know is who you're trying to reach and what technology will be available to you.

I'd probably go with the hover text like Chris N suggested. Another option would be to use a vertical accordion - click on the word and the next line of text below the word pushes down and the definition of the word appears instead, in a shaded box. That way the user can read that definition (and even leave it up on the screen if they way) but still continue with their reading.


Keep it simple. Show that terminology like a hyperlink (Blue text color and underline, or maybe double underline if you want to indicate that it is not normal hyperlink) and on clicking that hyperlink show the tool-tip. Tooltip will be an overlay with a 'Close' or 'X' button.

This will make your design consistent for desktop and touch-based devices.

@Edit: Some websites like twitter shows the text with dotted underline to indicate a tooltip action (either on hover or on click)

http://twitter.github.com/bootstrap/base-css.html (go to Abbreviations section)

  • If you're using the Twitter Bootstrap you might as well use their Tooltips
    – icc97
    Jan 17, 2013 at 7:02
  • @icc97 Good point - if he is talking about web-applications
    – ripu1581
    Jan 17, 2013 at 7:13

I found a good example in Strava app

Strava terms explanation

It's almost perfect, but I think the dotted underline should be always visible. In their app if you hover the term it gets a dotted underline, info-icon and tooltip with short explanation. Clicking the term opens a modal popup with glossary, which contains an extended explanation.

Strava glossary

My Question I wonder how to deal with complex terms when they are a table header label, where clicking should change sorting order?

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.