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 building a public website and I need to display helpful information to guide the user when filling in forms. The forms may contain text inputs, dropdown lists, sliders... The site will be mobile compatible.

I have thought of 2 ways to display the tooltip:

  • The tooltip is displayed when the user focuses on the field
    Pros: does not clutter UI
    Cons: Users might miss it if they don't click in the field, and just leave the page.
    Information is always shown when field is focused, user might not need it.

  • The tooltip is displayed when the user clicks a "?" icon
    Pros: Information shown only when needed.
    User will easily find help
    Cons: Clutters UI
    Usually, "?" icons are not clickable

What would be the best practice here ?

share|improve this question

2 Answers 2

up vote 3 down vote accepted

It depends on how often you expect help to be needed.

  • A clickable ? icon is a good way to go if the answer will usually be clear without any explanation, but help might be needed occasionally. It is easily accessible, but doesn't get in the way for the majority of users who don't need it.

    I have seen plenty of sites use this paradigm, and it generally is quite clear. The key is to use styling to show that the ? is clickable. Often it looks like a small, round button.

  • If there is an explanation that will always be needed in order to complete the form, you should have that appear when the field is highlighted, or even always be visible on the page.

    One example of this I have seen is passwords that must meet certain strength requirements (must contain special characters, be at least 12 chars long, etc.). Users can't be expected to know your custom rules, so it must be shown. Either rules are displayed statically on the page, or Javascript is used to dynamically validate the password and indicate what is missing.

Pick what seems most appropriate for your situation.

share|improve this answer
    
If I have a form with some straight forward fields and other fields that require an explanation, would it be OK to mix both techniques ? if not, which one to use ? I suppose it would be best to have the same "tooltip style" in the whole application ? Thanks –  ThunderDev Jun 7 '13 at 12:16
    
@ThunderDev, I think mixing both techniques would be fine, as long as it is well-presented overall. –  dan1111 Jun 7 '13 at 12:30
    
I think I will just go with always displaying the information, and maybe a hoverable tooltip "show more" link if the text is too long. –  ThunderDev Jun 10 '13 at 13:16

Why do you want to hide the information (on focus/on click). If there is no restriction on space, I would go with incontext labeling and examples.

  • Treat your users as intelligent people.
  • Do not talk as if you are ordering : "Email address" instead of "Enter your email address"
  • Give examples of expected data
  • Notify formatting or any other special cases

The advantage of this design is, even if the user is not familiar what the information needed is, the example provides additional details on what is expected. Remember how Credit Card forms show where to find the security/CVV number.

Making the information always visible is good since the user knows that it exists. If you are using on focus tooltips, user is not sure if all the fields will have tool-tips when he arrives. Can look daunting to see a page length form with only first field having any example/explanation.

Using ? will save you space, but, it forces the user to click on the icon every time they need help. Can get discouraging if it happens too often ('I am stupid :-(' ) Better have the help always visible and easy access.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Not sure about in-context labeling, I think the average person would feel more comfortable with a classic label. Good point about the "?" button. –  ThunderDev Jun 10 '13 at 13:10

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.