Web forms are boring. When is the last time you really enjoyed filling out a form, I’m going to guess never. Nevertheless, they stand as one of the most important layers on your landing page or website. They are at the center of customer interaction, so even if your content is king and your designs are captivating, the form stands out as the only place your customer will engage. The experience this engagement produces is often times the predictor of another sale or a page abandonment. If you at all doubt the importance of web forms look into the infamous story about the $300 Million Button.

I have broken down some guidelines to help you improve your web forms and divided them into three categories: structure, elements and interaction.

Structure

The way we design web forms is often backwards. Generally we define some required fields, we have a programmer create or modify a database, and we plop some input fields on our page. Without taking the time to evaluate the design of your web forms, you could potentially be turning the unpleasant action of filling out a web form into a lost opportunity. So here are some tips to guide you in designing web forms:

  • Always evaluate your form’s questions, and remove anything that is not necessary to you or your customers.

  • Consider asking optional questions after a web form has been submitted, you don’t need to inquire about your customers demographic prior to the sale.

  • Strive for simplicity, web forms are not the best place to experiment, the forms should feel familiar, so that the transaction is over as soon as possible.

  • If your form stretches across multiple web pages, use a progress indicator so the customer can gauge his/her progress. If the amount of pages the customer will see changes depending on answers use general progress indicators rather than specific ones to avoid confusion.

Elements

Web forms have three basic elements, a label, an input field and an action. Labels ask questions, input fields accept answers and actions submit the form.

Label alignment plays an important part in the way a customer will interact with your web forms. There are four basic ways to align labels in a form, and each serves a specific purpose.

Left-aligned labels take longer for the eye to process, and are best used on forms with unfamiliar question. The distance between the label and the input slows down the user when completing the form, making it perfect for forms in which users must think before answering.

Top-aligned labels offer the fastest form completion time, the proximity of the label to the input field requires the least effort from the user to connect the two in their mind. One disadvantage of top-aligned forms is the amount of vertical real estate they take up in a page.

Right-aligned labels are also a quick to complete layout option, but because there is no hard edge on the left side of the labels so there is a reduction in the amount of time it takes a user to scan the requirements of a form. Using right-aligned forms is a great way to have the short completion times a top-aligned form offers, but also save on vertical real estate, just make sure the for questions are familiar to the user.

Labels within inputs are a great way to reduce the space a form takes up, but there are many considerations that should be taken. There must be an interaction that takes place when the user clicks or tabs to the input, i.e. the label must disappear so that the user can type. Because the labels disappear when the user engages the input, you better hope they do not forget what the question was. You must also make sure that the labels reappear after the form validation occurs, so that the user can correct their mistakes.

Which should I use? Well it all depends on what type of data you are collecting, I would not suggest mixing alignment types within one form, but you could use different types if you have multiple forms. More often than not a landing page will have some sort of simple form, which could benefit from a quick label to input alignment.

Other considerations for form elements:

  • Always use the correct input type for a question, for example when asking a user for his/her state use a select box what includes all of the states, rather than making the user type this information in.

  • Consider format within input types, if asking for a phone number either limit the input by using three input boxes, which accepts 3/3/4 numbers, or provide an example on how the user should type out the phone number. Your validation should never return an error because you failed to not specify the format. Flexibility is important.

  • Inputs fields should tip off the user in the amount of data they need to enter, for example the zip code input should not be the same length as their email input element.

  • If there is only one optional question, do not mark all of the other fields required, and rather label the solo optional field, as optional. Be wise in the way you label and define required/optional fields.

  • Know that form elements render differently across all browsers and systems, so test, test, and test again.

Interaction

Once your labels are in place correctly, it’s time for some action. Interaction takes place within web forms in many ways. Moving from one input field to the next, receiving an error from the validation, or pressing the submit button at the end of a form are all examples of interaction. Improving the way your web forms interact with the user will make the experience less painful.

  • When using multiple pages for your forms, allow the user a way to go back and change his/her answers without losing data.

  • Always allow the user to use the tab key to get from input to input in the correct order, developers can use the “tabindex” HTML attribute if necessary.

  • When validating form data be as unobtrusive as possible, and never route users to a new page when giving them validation errors and then expect them to find their way back.

  • Inline validation offers the user immediate feedback on both errors and confirmation of correct values, jQuery.validate is a great option

  • If you must use only server side validation make error messages as clear and relevant as possible, and provide what the user must do to fix the error.

  • Use a help icon and help boxes next to unfamiliar content, for example if asking for a CVV2/CCID make sure there is a way for the user to find out what a CVV2/CCID actually is.


SPEAK / ADD YOUR COMMENT
Comments are moderated.




Return to Top

Effective Web Form Design for Landing Pages