Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
What platform is available to the user? What all platforms do you have to support? –  ripu1581 Jan 17 '13 at 2:35
add comment

6 Answers 6

up vote 5 down vote accepted

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

UPDATE------------------------------------------

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

share|improve this answer
    
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 '13 at 19:49
    
Not accessible for what? For mobile devices? Can you be a little more specific? –  Chris N. Jan 16 '13 at 19:54
    
Sorry, accessible for visually impaired users –  Peter Jan 16 '13 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 '13 at 22:49
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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

http://www.termwiki.com/EN:voice_%E2%82%87

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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)

share|improve this answer
    
If you're using the Twitter Bootstrap you might as well use their Tooltips –  icc97 Jan 17 '13 at 7:02
    
@icc97 Good point - if he is talking about web-applications –  ripu1581 Jan 17 '13 at 7:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.