10 advices to improve your online form

I cannot imagine anything more annoying than filling out an online form. Don’t you agree? They always hinder quick online actions and, apart from that, they have a bad usability most of the time. No wonder that the disconnect rate of online forms is very high. That’s frustrating, not only for the user but also for the provider.


Hard times for complex mobile forms

Current developments in the digital world make the problem of complicated and over-engineered online forms even worth: more and more customers use mobile devices for their online purchases. According to a recent report from Cisco, “mobile data traffic of China’s top three mobile operators grew 83% from mid-2013 to mid-2014.” And in the near future “global mobile data traffic will increase nearly tenfold between 2014 and 2019”. (Source: http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html)

 

How to solve the problem?

The numbers above proof: Whoever does not have a website that can be used on mobile devices should change that as soon as possible. How? By using a responsive design, a separate mobile website or a mobile app for example.

The same is true for all online forms: they need to be optimized for mobile devices. But keep in mind that their users act under different conditions:

  • Usage on the way
  • Time pressure
  • Bad connections
  • Solar radiation
  • Small screen size
  • Touch pad

In the following, you find 10 important rules for the development of simple online forms.

 

1. Get to know your target group

Before you start the set-up of the online form make sure that you understand your target group, their customer journey, their devices as well as their context and aim of usage. Only then, you will know how to satisfy your customer.

 

2. Keep it short and simple

Simplicity is important for static devices but essential for mobile devices. Therefore, make sure that you stick to the following rules:

  • Delete all queries that are unnecessary
  • Simplify the process
  • Use compact and single-columned forms
  • Divide long forms into different pages but still show the user his position within the process
  • Insert field-labels that are easy to understand
  • Use an inline-validation that proofs the input and gives feedback to the user in real-time

 

3. Be gentle with stubby fingers

Typing on a smartphone is no easy undertaking. Many online forms are just too small or too tight. So give your customer’s fingers more free space.

  • All form elements should be as big as possible
  • There should be enough space between the form elements

See the example from “ctrip.com” below. There’s a good amount of space between the form elements.

IMG_2519

 

4. Use mobile specific input options

It is necessary that the form elements are easy to handle with the fingers. Radiobuttons, for example, are often too big. Use alternative form elements instead, like buttons or tabs.

Since typing on a smartphone is annoying and time-consuming, provide choices for prescribed texts or date-pickers if possible.

A date-picker simplifies the manual input of the date. Here you see another example from “ctrip.com”:

IMG_2520

 

5. Summarize input fields

Combine several input fields with regard to their content, if possible. For example use “full name” instead of “first name” and “last name”.

 

6. Place the label above the input field

The user can read labels easier and fill out the form faster when the labels are above the input field. If there is not enough space, so called “inline labels” could be used. In this case, the label is written inside of the field and disappears when you click on it. These labels are not appropriate for long online forms, though, because the context gets lost.

 

7. Define the input format

Consider which signs, for example letters or numbers, the user will put into the field and define the respective input format in advance. This makes the handling much easier for the user.

 

8. Apply “smart defaults”

By using smart defaults the form will be filled in with data that is known from the registration, IP-address or GPS. It will make the process faster for the user if fields like name, address or country were automatically filled in.

 

9. Be innovative and surprise the user

Try to find new display formats that entertain the user but are still easy to handle. The use of the so-called “Natural Language” could be one possibility. Using Natural Language means that the form fields are designed of complete natural language sentences. But still be careful: consider if this style matches your target group and content!

index

Using Natural Language To Improve Conversion Rates

 

10. Last but not least: consider the loading time

The loading time is a crucial factor for mobile usage since the user context is special. The user might be on the rush, has no time or the connection is not stable. Under these circumstances it is very important that the online form has a very fast loading time. Otherwise the user might stop the process.

loading time