Blog

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

Improving Form Interaction –Tip to Eliminate User Frustration

I recently worked on integrating the “help” function into online forms for a website. As I was doing this, I realized that, in some instances, small changes to the form structure could eliminate the need for “help” text in certain fields, thus decreasing user frustration and increasing submission rates.Problem:

The forms I’m working on have overwhelming and somewhat tedious user requirements. Here is an example:

Form preview presenting  tedious help item

This portion of the web form is just one of many, many fields the user is required to complete. In this particular instance, the user must evaluate and count characters they enter into the input box. Not exactly user friendly. The “help” item tells the user that he/she must use “about 40 characters” when creating their organization’s short name, but this can become a guessing game because the user can only see their final result once they submit the form and check the front-end of the website. Limiting characters is important for avoiding line breaks, but clearly the instructions and method for avoiding this are less-than-ideal.

Solution:

Using what I learned from reading Web Form Design: Filling in the Blanks by Luke Wroblewski, I eliminated the less-than-useful “help” text and user guessing game.  Instead,  using Javascript, I changed the form to provide a live preview, enabling the user to see exactly what their input will look like on the front-end of the website. I also included the critical instruction pertaining to the width of the text above the blue line. This prevents the user from having to click on any “help” items, hopefully saving time.

Live preview of the input the user types

A simple solution that (hopefully) makes the user experience less frustrating.
Out of curiosity, how have others resolved similar issues?

 

Leave a Comment

Leave a comment or send a note
  1. (required)
  2. (valid email required)
  3. (required)
  4. Send
 

cforms contact form by delicious:days