Designing Better Form / by Gavin Lau

1*240Ats3xTBoR2cKUlqqM6Q.jpg

Forms can be boring, forms can be fun, but when it comes to online user interaction, there is nothing more important than your web form. In fact, it is like a front door to your business and the avenue that visitors utilize to begin their relationship with you and your business. Forms is how your potential clients/visitors/customers get in touch with you, hence creating an effective, high-performance web form that provides your visitors with the right kind of information is the backbone of your online presence.

You can make a form interesting, simple to fill out, but then, the real challenge is to deliver great user experience. Users don’t fill up forms for the fun of it, they fill it up to get results, they are sharing their personal information with some trust put in but generally it often ends up being a pain point for both designers and users. Enhancing functionality of a form requires more than good-looking visuals with robust code, it requires a deep understanding of the user. Here are few incredibly effective pointers that can help fellow designers to improve UX and conversions while designing forms.

We have taken an example of a registration process of a travel portal to help you understand better. It may sound extremely simple but, pay close attention, as the devil is in the detail. This flow highlights 6 most prominent tips that you need to follow while designing a form.



Human Touch — because it’s all about ‘Trust’

Everybody looks for a better experience and this can be achieved only when the content and design elements are well understood by your target audience. Also, while designing it is critical that users feel the strong connection with the brand and not feel alienated or disconnected with machine driven process; adding a hint of personal touch goes a long way.

Keep in mind that design elements such as illustrations, images or icons should be complementing the content, and not overwhelming it. In the below example we have used the image of the travel portal instead of just displaying the form.

0*PlcmEoNCX4Pmed2F.jpg

 

Simple layout makes information easier to process

Human eyes are very picky when it comes to reading, and if too many color and design elements are used, chances are that your user might find it incredibly difficult to focus on the information the business is trying to gather.

Lighter Background color with the focus on content is a smart move. It is also a good idea to have small descriptive elements to help users break down the kind of information required, this just speeds up the input speed and increases the intuitiveness of the form. In the image, data like Username’, ‘Password’ are the descriptive parameters that acts as a guide.

0*J6LCqLZC7-5AXDA0.jpg

 

Increase the Awareness

Always remember, your main goal for designing a form is to create trust in your user and gather information swiftly. Be upfront and honest about each step, this help users understand the time required and keeps them patient. If the form is lengthy, this is an absolute must, because hiding steps will only make the user’s frustrated. Please note that always try to show information which is absolutely necessary and not clutter the form, because, ‘Less is always More’ here.

In the example users can easily identify that they have to go through three simple steps of ‘Identify’, ‘Address’ and ‘Payment’.

0*TF29H_e78pAhVr7A.jpg

 

Be subtle in showing Error Messages

The message should always make your user feel guided and not the other way round. It is important to keep the language conversational, remember it is you who want the information from the user.Error messages shouldn’t make the users feel that they has done a terrible mistake, instead it should come across as a guided tour to reduce the effort and time.

The below example begins with ‘Sorry’ communicating that it might be us and suggests if the user could help us.

0*Dqqlxf1cd9LbDslf.gif

 

Always be available to help the user

Helping out the users when they are stuck will not only diminish frustration but also build comfort and trust. It might be in any form but providing instant help is the key be it in the form of a pop-up, faq or chat box.

In the below example, we have used chat box as one of the option to help users, because at times it is necessary to think one step ahead, the proactive behaviour on your part can enthuse and drive trust factor little further.

0*eMdhETWZYAenJjJc.gif

 

Greet the users on successfully completing the task

Human mind is wired to receive rewards when they complete a task. It is psychologically proven fact that our body releases Dopamine when we are awarded that leads to instant gratification. Hence, greeting your users or congratulating them after successful submission of a form will help them feeling good and satisfied. Fun fact, Dopamine is a neurotransmitter often referred to as the ‘chemical of reward.’

Just a simple ‘Thank You’ message can leave your users with a ‘Feel good’ motion and a smiling face.

0*keff6-fX3ZgcA8vF.gif

Forms may be one of the simplest section of a website or application, but don’t be deceived. They are extremely crucial for a business and many designers mess it up by keeping user experience in the back burner and ends up doing what ‘everyone does’. Forms are the last thing that people want to fill up- keep it short, keep it conversational and do the unexpected.

 

 

Source: https://uxplanet.org/design-better-form-26...