Articles Usability

Form Design – 20 Usability Tips and Best Practices

4.67/5 (3)

A web form is an entrance, a phase transition from sheer interest to turning into an actual customer. Therefore, it is reasonable to make the form design inviting and user-friendly.

The process of filling out a form should be as easy as putting two and two together, since people to who face some issues and get failures more likely associate it with your brand. And your reputation instantly looses its balance. So believe it or not, but one tiny form can mess up your brand reputation. You don't want that, do you?

How to avoid such a fail? First of all you are to remember that any form is a business card of your brand, a face of your company. It is the very first step in your interaction with your potential clients, and it should look easy, warm and inviting.

20 Tips To Make Forms Rock!

Today we are offering you some tips to help avoid the epic fails and unconveniences associated with your web forms.

  • Make forms visible and easy-accessible. Don’t hide them.
  • Make them short – ask for essential info only. Avoid asking for unnecessary information not to distract the customers. Get the ball rolling with the really important data you need to know to get messages from clients or sign them up. You may ask something like “How did you know about our company?” on further stages.
  • Make up a status bar to set clear expectations. People want to know how much time it's going to take them to complete the form, and a progress bar would be a great advantage in this case. At least display the info like "Step 1 of 3", but the best thing would be to keep it short enough to be at one little form.

Progress bar

  • Explain why clients need to sign up or fill out a contact form: specify the benefits they get. And offer bonuses like free trials or discounts for filling out the form.
  • Make it clear and consistent, avoid chaos. The layout should be logical, symmetrical and brief. Eliminate any excess sections in the web form layout.
  • Consider the conveniences of the one-column form. It is easy to fill out and doesn't look cluttered. You may give any highlight or background color to all fields and labels to better associate them with each other. If you need several fields on a line, it's better to place them so that they look unified.

One-column form layout

  • Mark some fields as required and explain the way you mark them on top. Use some explanatory text to clear up the label meaning in your form (e.g. an asterisk) and make them visible at once.
  • Number fields/questions. This rule concerns longer and detailed forms where you can easily get lost – just like multi-page surveys and questionnaires.
  • Avoid asking for the name at first. You need just to set up interaction with customers, so nickname and e-mail at the initial step would be enough. The name could be found out later.
  • Use the prefilled answers. Use list boxes and drop-down menus for the fields with the predictable info like country, city or sex.
  • Use the font of 11 pixels and larger for representing text in the form areas and fields. Emphasize all important info with the bold type.
  • Make call-to-action buttons large enough while avoiding using more than 2-3 words. Consider the encouraging colors. Speaking of sizes, we'd recommend you to use large fonts on buttons.

Font sizes

  • Apply warm and friendly colors for the general form layout. We'd recommend you to use not more than 5 color tones for the single form.

color scheme

  • Avoid using links to anything else within the form itself. You may push the navigation bar down/aside or to the footer not to distract the eye from the form. Unnecessary links take customers away from the form page, and surely there's nothing good in this transition. Make just the “complete”/“submit” button clickable.
  • Use the check boxes/radio buttons to unify and standardize the answers.
  • Do your best to avoid captchas in your form. SEOmoz analysis states that captchas may cause the loss of 3.2% of your potential clientele. So if you find this small group of people considerable for your budget, try to get rid of captchas at all.
  • Include specific needs among the other form fields. This feature is great for the customers who already know what they are opting for. And there should be a way to specify these specific items or services.
  • Explain errors and make it easy to recover from them. Let it be a clear one-step process to fix errors that occur during the form submission.

Form validation errors

  • Apply marketing strategy. This may imply a list of specific questions about your customers. This feature would be helpful for your website traffic analysis and its further promotion. You may inquire about the company name and your client's profession, an address (for sending out catalogues or coupons), a cell phone number (for SMS-strategy), a fax number (for sending out fax marketing materials), about the ways your clients have heard about your company etc.
  • Make it look unique. It's never enough to make up an ordinary web form. You should give it an exclusive and memorable look, add some zest. Just use imagination and play with symbols, icons, colors, web form position or size to create an interesting design solution!

You may view a couple of great examples below:

Chemistry Recruitments form

***

Pistachio form

***

TheWatchMakerProject form

Additional content we suggest in case you want to dig deeper into forms design:

Form usability presentation from Slideshare. It covers all aspects of building a form in a simple and straight-foward way.

Form Usability Presentation 1

Usability Comics from Theoatmeal.com

Oatmeal usability comics

8 Responses

  1. I found your latest newsletter with an example of a fake website koalameat.com disgusting! Your Journalist Helga Weber needs to be sacked! The Koala is one of Australia’s most loved marsupials and to treat it in this fashion is crude and insensitive. Take me off any subscription lists for Template Monster this article just demonstrates how ignorant Americans are about the rest of the world!!

    1. Don’t shoot the messenger – Before being so critical go to the website http://theoatmeal.com/comics/shopping_cart  its funny and outrageous all in one.
      What ever ails you can be cured by laughing a lot
      Good work Helga!

    2. Man, get a life! That was just a random fake website that the author of the infographic made up, it’s meant to sound silly enough for no one to believe such website can even exist. And theOatMeal.com who happens to be the author of the infographic is a managed by a brilliant guy that does have a sense of humor, something you should think about, Hennessy.
      Btw, I’m also subscribed for template monster newsletter, I believe there’s an unsubscribe link in the message.

    3. Hennessy. Americans are both ignorant and arrogant, but that’s a whole different story. Don’t take yourself to serious 🙂

    4. Are Americans arrogant? Yes we are!! Now, where can I get some Koala Meat?

  2. Hennessy needs a sense of humor, I guess we only have those in America!  I guess we Americans need to be more sensitive to the fact that the world is filled with infantile sissies like Hennessy.

  3. Yo! Hennessy – Have a chilled glass of YellowTail, put some shrimp on the barbie and relax. Try to laugh someday.

  4. thank You.mostly i use emailmeform.but now i will try to change for other.nice list 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *