Tips For Better Form Design #2

So for the second installment in “The Tips For Better Form Design” series we are going to look at a couple of quick bite sized examples on how we can help the user along in the submission process,  as well as let provide them with information that will help them to know we are not going to use their information for Viagra ads or some other crazy form of spam. We are letting them know that they are submitting information to a trusted source. Again our main focus is always to lead the user to the desired result as painlessly as possible.

Provide Help and Tips

When filling out a form you can help the user by providing help and tips along the way. Not only will the user understand why they are providing the information they are entering into the form, but they will be reassured that they are not inviting spam, and providing their information to a trusted source. As we see in the image below Yahoo gives an explanation for requesting your birth date when signing up for an email account.

help2

Using tool tips is a great way to help users complete the form process easily, but there is a need for balance as to not overwhelm the user. Yahoo provides a well-balanced use of tool tips in their email sign up process. The tool tips here are not all displayed at once, but instead are active as you start to type into each field. This helps you stay focused on what you are filling out, and providing the additional info/help if you need it.

help1

The image above shows how Yahoo uses a very simple tool tip to provide helpful tips, and information that is relevant to the user (in this case, location based information) as well as to garner user trust when the user is providing personal information.

Here are a few more tips that will help in structuring helps and tool tips.

  1. Help should visible and adjacent to the form fields to be most helpful.
  2. Keeping the form simple, should minimize the need for help, and tips.
  3. If you are providing a lot of help information, remember to keep it consistently displayed throughout the form.
  4. If your forms are complex, or if fields are often reused consider a user activated help system (i.e. icons that can be clicked to display help tips.)

So we can see that as we are leading our users towards a path to completion providing  a balance of help, and informative tips along the way not only makes it easier for the user, but it also provides a level of trust when the user is entering personal information.

Do you use tool tips? have you found them useful or did they get in the way? What techniques do you use to help users, and provide a level of trust when they are entering personal information.

Tags: , , , , ,

5 Responses to “Tips For Better Form Design #2”

  1. Josh Cagwin 13. Sep, 2009 at 8:43 pm #

    Ahh good old tool tips. Tool Tips are great if used properly. They are not always necessary but when they are it’s important to display the proper information in them, meaning the copy within must be precise and to the point to avoid confusing users, causing them to think to much about what they are doing leading to an increase in bounce rates.

  2. Chris Da Sie 14. Sep, 2009 at 7:15 am #

    I think this a great way to help with the user experience. Like people always say don’t make the user think when they are on your sites. I think we all tend to forget that in some sense every now and then. But this is a great tip to help the user through without making them think too hard. It also doesn’t take away from the design. In fact, I think if it is done correctly can boost the design of a form.

    Great Tip

    Oh and PS (forgot to comment last week) but great Friday Vidcast. You made a lot of excellent points about there being no need to compare Twitter with Facebook as they can both exist together. I definitely find that facebook is more engaging and consuming where as a twitter can be a quick in and out process. I think both can help in giving back to the communities without conflict.

  3. Mert TOL 14. Sep, 2009 at 2:10 pm #

    Great post as always Aaron. Forms can be painless for all visitors. I see so many really really bad forms around the web. I hope people can read and understand like these articles. But, If people doesn’t, we’ll not stop to pay attention for sure…

    Several days ago I wrote about forms too. I believe, it’ll be useful after your series. Here is the link.

Trackbacks/Pingbacks

  1. Tweets that mention Tips For Better Form Design #2 | This Is Aarons Life – Web Design, Graphic Design, and UX Articles. -- Topsy.com - 13. Sep, 2009

    [...] This post was mentioned on Twitter by Michael Brisk and rich hemsley. rich hemsley said: RT @aaroni268 New Article: Tips For Better Form Design #2 http://bit.ly/Ou9ja ** good info as usual. [...]

  2. Twitted by jentanbernardus - 16. Sep, 2009

    [...] This post was Twitted by jentanbernardus [...]

Leave a Reply