Thoughts, musings, and adventures of a user experience designer and front-end developer

Improving Form Interaction – Integrating Help

A few months ago, I read “Web Form Design” by Luke Wroblewski, and then had the opportunity to hear him speak at the UI16 conference. I was hooked on what he had to say because, for the last three years, I have been responsible for designing web forms for a large-scale website. Part of my work is to enhance user experience and improve form submission rates. As Luke puts it “…forms make or break the most crucial online interactions” for user activities such as checkout, registration, and data input.

Here is a little story illustrating how important it is to create a well-designed form: Not long ago, I wanted to donate $15 to a non-profit animal welfare organization. After completing the form, it failed to submit, and notified me that a $15 donation option did not exist. What a shame! Think about all those who wanted to donate, but could not because the amount they desired to donate did not exist on the form. Because the design was bad, the form could not complete a crucial interaction.

In my current position, part of improving our back-end forms is to integrate help files. Our forms have the tendency to be a bit overwhelming in requirements because of the nature of the subject we deal with (science and exploration). The information we request often needs clarification and/or explanation, so a good help sections is a necessity. However, I was concerned that adding help items would clutter our forms and deter users from utilizing the form itself.

Considering our situation, we had to develop a solution that was both easy for users to access and provided flexibility in terms of content length and format. We also tried to minimize the need for help items by improving labeling and reorganizing the forms.

We ended up with three different solutions:

  1. A link to a central help section with all the help content, which is the first paragraph users see when logging in:Main admin area with a link to help files
  2. Small, gray inline “help” text under the input labeling. This provides immediate help to the user for understanding the label. No additional clicks are needed:Inline gray text is integrated under the form label
  3. A tooltip revealed by a mouse hover interaction over the question mark. This takes up minimal space and presets a satisfying amount of content if needed:For help items that have more content, we integrated the help by tool tip.

My next task will be to create a style guide on how to implement future help items.

How have you added the “help” function to your online forms? I am interested in hearing what others are doing out there!

Leave a Comment

  1. (required)
  2. (valid email required)