How to Design Web Forms

Web forms may mean nothing for an average person, but when you are designing a website, it is one of the important elements of a website. A well crafted form make it easy for people to practically do everything on a website. Whether you need to sign up, buy a product, subscribe to a blog, leave a product review, web forms are important to complete your action.

In this post, you will learn about web forms and how to design them better without causing any confusion:

1. Input field. This is where users input their information. It can either a text box, a check box, a list of buttons, and so on.
2. Field label. This label indicates the name of the input fields. So, users will know a name should be entered here and an address should go there.
3. Form Structure. This refers to the order and the appearance of the fields.
4. Action button. This performs the action. If a user clicks on buy, he should be able to proceed to the checkout form. If a user clicks on next, he should be able to go to the next page.
5. Feedback. This verifies the action taken. Once a user finishes his purchase, there should be a message saying thank you along with the details of his order.

In designing a web form, you need to figure out the order of the fields.

• The fields should follow a structure.

  Like in any conversation, you say your name first. Same is true with forms. On sign up, you don’t ask for date of birth first or the location, you obviously ask the name first.

• Ask only necessary things.

  People on the web are in a hurry. They want to buy something, they click and viola! Make sure to ask only what is needed. An extra field of question will increase the chances of abandoning the page. This is very crucial when you are selling online because this affect your conversion rate.

• Segregate fields.

  It’s not only the order that’s important. You should also need to group related questions in a logical manner. Personal details should go first, the shipping address next, the billing address, and the payment method. You don’t ask the birthday on the payment method section. The correlation between fields should make sense.

• Make only one column.

  Forms should be one straight line because it’s easier that way. Multiple columns will confuse users and will likely answer them incorrectly. Never design a form with two or more columns.

 

Whether it’s the field label or the input label, texts should be always be clear.

• Limit the number.

  Field labels are NOT help labels. It should be direct to the point and limited to one to two words. This makes your form easier to scan for users. For example, when asking for someone’s name, you simply label the field: Name or Full Name. You don’t say: MY NAME IS.

• Avoid the Upper Case.

  Sentence case offers a better advantage than indicating labels in ALL CAPS. Upper case letters are harder to read. Thus, your users will  experience difficulty in scanning the form.

• Choose the top alignment.

  Matteo Penzo’s article on labels indicates that web forms are completed quickly if fields labels are on top of the input labels. Users – specifically mobile users – can easily scan and answer the forms. If the top-aligned labels are completed faster, the left-aligned labels are have the slowest completion time.

There should be an obvious different between all the website buttons.

• Primary buttons should be bigger and bolder.

  The submit button should be clearer than the back button. The submit button is more important than the back button. If the buttons look the same, users can easily click the other button thinking it was submit. To reduce mistakes, you should choose a lighter color for the secondary buttons like BACK, PREVIOUS, CANCEL.

• Think about your button location.

  Multiple forms needs a back or previous button. If the back button is located to the next button, then, most likely users can accidentally click it. Please do not put a secondary button beside an important buttons such as PAY AND SHIP, or PROCEED TO CHECK OUT.