Dynamic Help in Web Forms

Communication Design

Musings from the merger of medium and message

A column by Luke Wroblewski
May 21, 2007

Many Web application designers strive to reduce the amount of instructional text that appears in the user interfaces they create. A likely part of their motivation is the perception that, if explaining how to use something requires too much instruction, it probably isn’t that easy to use and, therefore, has room for improvement in its design. Another motivating factor might be the tendency for people not to read any on-screen instructions, just like they tend not to read product manuals.

This type of thinking also applies to Web forms. When possible, designers strive to utilize a minimal amount of text to explain how users should fill in the different input fields in a form. In cases where forms absolutely require additional explanations or examples, a bit of clear text adjacent to an input field tends to do the trick, as shown in Figure 1.

Champion Advertisement
Continue Reading…
Figure 1—On, clear, concise Help text adjacent to an input field
Concise, adjacent Help text

Concise Help text adjacent to input fields is most useful when

  • asking for unfamiliar data—What’s a PAC code?
  • people might question why you are asking for specific data—Why do you need to know my date of birth?
  • there are recommende ways of providing data—Separate your tags with commas.
  • certain data fields are optional

However, there are many types of forms that require lots of obscure data, use unique formats, or have input restrictions. In such cases, the amount of Help text necessary for each input field could quickly overwhelm a form, making it appear quite intimidating or complex. For forms like this, it might make sense to consider using dynamic contextual Help. As various Help systems have emerged online, I’ve started to catalogue the different types I’ve come across.

People’s behavior can automatically trigger access to Help systems. Automatic systems reveal applicable Help text when people engage with a form. Actions like moving between form fields or groups of fields result in the display of useful Help text. User-activated Help systems, on the other hand, require people to take deliberate actions specifically to reveal relevant Help text.

Automatic In-Line Exposure

Automatic in-line Help systems reveal themselves when and where the information they contain is most applicable. For example, when a user clicks or tabs to an input field, the relevant Help text appears beside or below the field. Figure 2 shows this behavior in action in a form on Wufoo.

Figure 2—Help text appears automatically as users engage with input fields on Wufoo
Automatic in-line exposure

Some sites automatically expose in-line Help text for a set of related fields rather than just an individual input field. For example, in Figure 3, the SnapTax Web application automatically highlights relevant information for each set of information: identity, spouse, address, and so on.

Figure 3—SnapTax automatically reveals Help text for groups of related input fields
Help for related fields

It is worthwhile to note that both of these examples make use of a strong visual element to communicate the relationship between input fields and their associated Help:

  • in the Wufoo example—two aligned rectangles
  • in the SnapTax example—a common background color

A potential drawback of this type of automatic Help system is that people are unlikely to know any Help text is available until they begin to fill out the form. There’s often very little in the presentation of these forms that indicates Help is available. As a result, users who feel they may need help completing a form could get discouraged and not even try.

User-Activated In-Line Exposure

An alternative in-line exposure technique is one that lets people access Help text when they need it. This method usually makes consistent use of an icon, button, image, or text link to let people know Help is available. A user can either click or point to these hot buttons to reveal the relevant Help text as needed.

Figure 4—Juicy Studios’ user-activated, in-line Help system
User-activated, in-line Help

Adding Help text to a form in this manner can cause content below the inserted Help text to jump further down on a page. Figure 4 shows how Help text pushed another input field lower on the page. Too much shifting of content on a page can leave users disoriented. Another potential drawback of this technique is that it might be necessary to display Help text differently, depending on the types of input fields—or set of input fields—to which it applies. A set of check boxes or multiple drop-down menus might require a different placement of Help text than a single input field.

Utilizing a rollover to expose Help text, as Figure 5 shows, does not require the insertion of content into a form and thereby avoids the jumping effects of in-line exposure. However, rollover interactions require users to keep their pointers continually positioned on a trigger’s hot spot. Extending the size of the rollover’s activation area makes it easier for users to trigger the content display.

Figure 5—Help text that appears when a user points to a hot spot
Hot spot for Help

A question mark is the most common symbol for an icon that displays Help content, but as Figure 6 shows, there are other symbols you could use. Regardless of whether you use an icon, button, text, or a combination thereof to indicate points at which users can access Help text, it’s generally a good idea to include some kind of visual cue that indicates such elements are actionable—for example, a 3D bevel or underlines beneath text.

Figure 6—Symbols for Help
Help symbols

User-Activated Help Section Exposure

Some sites display user-activated Help in a consistent location on a page instead of showing it adjacent to input fields. Making use of a consistent area where Help text appears can provide a larger display area for extensive Help content and meet users’ expectations for a permanent location where they can find Help text, as shown in Figure 7.

Figure 7—On Vizu, Help text that is relevant to the active input field appears in a consistent location on a form page
Consistent location for Help

On eBay®, the Sell Your Item form that Figure 8 illustrates makes use of a Help panel that a user can display or hide by clicking a global Help icon above the form. The content in the Help panel also updates with contextually relevant Help text when a user clicks one of the Help icons next to each input field. When open, the Help panel also automatically updates with relevant content as users move from field to field while completing the form.

Figure 8—Sell Your Item Help panel on eBay
Help panel

In Conclusion

Each of these dynamic Help systems for Web forms has its distinct advantages and disadvantages. As with all design decisions, an understanding of user needs and business goals should inform which of these dynamic Help systems is right for your Web forms. If you’ve used other types of dynamic Help on Web forms, please let me know, so we can extend this list of options. 

Product Director at Google

Speaker and Author at LukeW Ideation & Design

Silicon Valley, California, USA

Luke WroblewskiBefore joining Google, Luke was CEO and cofounder of Polar and Chief Product Officer and cofounder of Bagcheck. He is the author of three popular Web-design books—Mobile First, Web Form Design, and Site-Seeing: A Visual Approach to Web Usability—in addition to many articles about digital-product design and strategy. He was also the founder of LukeW Ideation & Design, a product strategy and design consultancy. Luke is a top-rated speaker at conferences and companies around the world, and was a cofounder and former board member of the Interaction Design Association (IxDA).  Read More

Other Columns by Luke Wroblewski

Other Articles on User Assistance Design

New on UXmatters