How to make a great mobile form design?

We use forms more often than we think, especially online. Almost every transaction requires the use of a form, from purchasing a pair of trainers to booking a flight.

The main objective of a form is for the user to complete the form hassle-free.

Users typically scan the form and estimate how much time and effort is required to complete it just by the first look of it. If your form looks too complicated, it increases the chance of them abandoning the form.

Also, if the form is too difficult to understand, or it is very hard for the user to input their details into the form, they will also find it too much of a hassle and would then abandon it.

The following would be the typical components of a form:

• Input Fields

These input fields could ask for text, passwords, or any kind of selections and input of the user’s details or opinions.

• Field Labels

These are just labels to tell the user what to input at in that specific input field.

• Call-to-action

These are usually in the form of buttons that could trigger the submission of the entered data.

• Feedback

This is a notification or directed page that lets the user know that he or she has successfully submitted the form or if there is an error due to unfilled fields.

So the main question is, how do we then design a form so that it is less likely a user would abandon it?

Below are some ways to improve your form design, in no particular order.

Reducing number of fields

One of the areas we can start with is on form field design. It is ideal lessen the effort of the user by reducing the input required. Form designers can do this by reducing the total number of fields. Only include the essential fields and avoid overloading and making the form too complex. Simply put, the easier and faster the user could get through the form, the less likely it will be abandoned.

Making optional fields known

It is irritating sometimes when you fill out more than you need to and realise that some of the fields are optional. Therefore, coming from a form designer’s perspective, you should create a form where the optional fields are clearly denoted. Similarly, you could highlight compulsory fields or mark them with a star. As long as the user could tell which are required and which are optional, it gives him or her a better option to fill what they want to fill and thus making them more likely to complete the form.

Size of fields

The size of each particular field should co-relate to how much information the user is expected to enter. This little detail is important to avoid confusion and remove the hesitation of the user to key in the details.

Use field focus

Using an accented border on the field which the user is currently filling out could ease the process and experience of the user and increase his focus in filling out the form. This is a small but useful detail to ensure better converting forms.

Use a single-column layout

The layout of the form should flow in a way whereby the eyes of your user could look at it naturally. Avoid zig zag patterns where the user needs to go up and down to fill out your form. Try to keep it in a simple down-flowing sequence which is natural to your user’s visual hierarchy.

Create a flow with your questions

The questions you include in your form should flow in a logical manner from the user’s point of view. This would quicken the flow of answering those questions and fill up the necessary fields without unnecessary disruptions in the user’s thought process.

Group related fields together

Following the logic of the previous point, it is also wise to group fields that are of relevance together and making it clear and easy for the user to go through these fields.

Make use of call-to-action buttons

These buttons should be prominent and unmissable in your form. They should also have a clear description either on them or beside them, indicating what will happen when the user clicks on them. You should also use different styles to separate the main call-to-action buttons and the secondary ones. Example, the “apply discount code” button, which is a secondary to the “Confirm purchase”, should be smaller and have a different style to the main button. This will ensure the user is clear about the different call to action and select the right button.

Conclusion

The list above is not exhaustive and there are still many other ways to improve on your form design. At the end of the day, just keep in mind that a minimalistic form which is easier to go through seamlessly would also end up with better results than a complex one. With that in mind, feel free to explore other ways in which you can modify your forms to fit your users.

If you want more advise on web development related subjects. Feel free to reach us at marketing@sginteractive.com.sg or call 9172 9726.