enavu webdevmania tutsvalley psdestination
visit the enavu network
2 Comments Article Title Overlay

Web Forms: Types of User Assistance [part 1]

In this series we talk about web forms and the best practices we have gathered as experienced web developers. This first part talks about User Assistance.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

In this series we talk about web forms and the best practices we have gathered as experienced web developers. This first part talks about User Assistance.

Series Introduction

If you want to buy something from the internet, or to post a comment on some blog, or buy an airplane ticket, or pay for electricity, or be a part of some social network and so on there is one thing standing in your way, a web form.

How many times have you simply given up from something because of that web form? Poor explanations, enormous data you need to fill out (and a part of them they won’t even use), bad organization and many other things that make you give up.

In this series of articles we go over all the aspects of creating captivating forms that will help your users.

Introduction

In this part of the series we’re going to talk about different types of assisting our users in filling out our form, about the pros and cons, and check out how some of the major websites deal with it, and where they might be making mistakes.

Let’s start.

Why to help?

A form is the only thing standing between you and the potential customer, user, business partner and everybody trying to interact with you. You both want the form to be completed but not everyone completes it, and in most cases that happens because of a poorly created form. A part of a poor form is bad user assistance, improving it will improve the completion rate of your form and that’s what you need.

When to help?

Sometimes we don’t really understand what or why we need to fill in some data, that’s where user assistance jumps in to help us resolve our doubts.

  • When you need something filled in a specific format (like phone numbers and dates)
  • When you need some data unfamiliar to many people (like credit card security number, SWIFT, IBAN)
  • When you are asking for private data (like credit card – let them know it’s safe, email – let them know it won’t be used for spamming)
  • When not all the fields are required (simply put the * sign on required fields, it works perfect and users are use to it)
  • When you are asking for specific information that you need but the user might not be informed about (asking about feedback on a certain subject)

At the end it all depends on the forms purpose, and a good way to know what to do is to check how others did it, but don’t copy it, try to use it and you will know what you don’t like about the assistance in their forms, what you think they forgot or added without a need for it and you will get the idea of what assistance your form needs.

After you make it, get some people of different age to test it (friends, family) and they can help you decide when you really need to help your users.

Where and How?

Well the possibilities are enourmous. You can make the help user activated, on field hover activated, on focus activated, inline, inside a modal window, bellow a field,  after a field, bellow a label, on top of a field, before the form after the form (those 2 aren’t suggested if you are referring to a specific field) and many more ways.

Where depends on the design, the amount of help text, how much space do we have for the help, will it interfere with the rest of the form and so on.

How really depends on what kind of help are you showing. Is it a rule like “minimum 5 characters” or a tip like “use _ – . for a more secure password” or maybe a bigger explanation like why we need some information like facebook explains why they need our birthday when we register.

Let’s take a look at some major websites to see how and try to see why they do it the way they do.

GMAIL – Always visible help

gmail

Gmail did a great job explaining fields that might not be very clear without them. For example this “recovery email” field, i don’t think anybody would know what’s it for without the description.

When to use this type?

  • For fields that most users won’t know what they are for (like the recovery password example)
  • For fields where the data must be in a special format or have some rules like min characters, characters type and such.

When using this type of assistance the best practice is to make the text color lighter than the rest of the form content text (as you can see in the picture above, it makes it easy for our users to focus on the rest of the content).

YAHOO – Help activated on field focus

yahoo

In my opinion the “Capitalization…” text should have been visible all the time, because it points out a rule we must obey. But thinking about it a bit more made me think they made it because it would attract more attention if it suddenly appears than it would if it was visible all the time. What do you think?

Let’s focus on the second help (for the password strength). It’s only a tip how to make our password more secure and not a rule. After the field becomes inactive that help disappears.

When to use this type?

  • When you want to give your user a tip or suggestion
  • When you want to ensure that the help captivates the users attention

FACEBOOK – User activated help

facebook

User activated + modal window centered on the page

When to use it?

  • For bigger help texts and explanations
  • For embedding visual effects like the back of a Credit Card for the CVV numver

We’ve seen the good, now let us look at the the bad and the ugly.


The screenshot above is taken from a very valuable website that offers their users to buy/sell ad spots, and this screenshot is taken from a page for depositing money.

1st issue – In which format should I fill my credit card number?

2nd issue – What is a security code? Oh, there is a link to find out. Clicking the “What’s this?” link expecting a new window or a JavaScript tooltip to popup but I’m taken back to the index page. I lost the data I entered and I need to find that page again. Screw this I’m not depositing.

3rd issue – Do I need to fill in all those fields? Why didn’t you simply put the * on required fields? Are they all required? You’re not helping me in making you money.

As I mentioned, that page is for depositing money, and I bet they lost a lot of money because they failed to explain to the user those 3 things. Fixing them would take less than 10 mins and the completion rate of this specific form would increase resulting it the income increase too.

Wrap Up

So we have seen some great examples of websites that just get it right, and an example of where we can find room to improve. We hope if you gather one thing from these series that is forms need to be simple, so simple that your cat can do it. Making your forms simpler will result in more successful customers and clients.

Related posts:

  1. Web Forms: Semantic Mark Up in our Forms [part 2]
  2. 10 Amazing jQuery Plugins To Improve Your Forms
  3. Web Forms: Validation [part 3]
  4. jQuery focus on first field trick
  5. Checking username availability with ajax using jQuery

Did you absolutely LOVE this article... share it!

Comments

  • Two thoughts:
    It could be argued of the bad example that there is no need to specify a specific format to enter the credit card number in. There could be a mechanism (ex. JavaScript) to limit the entry to only numeric characters. Another method would be to accept any number and pattern of hyphens and simply strip them out on the server side. These are just a few ideas to illustrate that there may not be a restriction in place thus no need to explain it.

    Secondly this very form I am using now to submit this comment fails to head your advice in a number of ways (which fields required? will my e-mail show with my post? privacy policy? etc.)

    P.S. (and I hope you do not take offense) You describe things in your article which the images do not illustrate (see Yahoo(sic))…this is confusing.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting