Trendics Blog

Users are more likely to complete your web forms if you provide a simple help system to answer common questions to complete each input. There are a couple of common techniques to provide help for individual form inputs…

• Help text under the form inputs - often too limited in space and/or clutters the form too much to provide detailed help
• Clickable help icons next to the form elements - can either show the help when moused over or when clicked but either way require an additional action from the user to see the help

I prefer to show a help tooltip automatically to the right of the input when an input gains the focus. Unlike normal tooltips, the tooltip remains visible as long as the input has the focus allowing the user to refer back to the tooltip as needed while entering the input. Tab through each field in the form below to see this in action…

The tooltips in the form above are implemented using YUI in a Javascript class call YFormTip. Both the formtip-example.html and the yformtip.js are available to download free of course.

None of this is rocket science but it is my $0.02 on providing context sensitive help for web forms.

This entry was posted on Tuesday, August 5th, 2008 at 3:17 pm and is filed under yui.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.