5 UX tips that help you design forms correctly

Pineapple
Quick Design
Published in
5 min readJul 31, 2019

Once you open the internet browser, you are accustomed to filling forms at multiple avenues. From filling forms on signup pages, surveys and questionnaires to applying for invites or contacting sales teams. Even when you search on google, you are filling out a single bar form.

As a designer, it is our responsibility to make sure users don’t perceive forms as barriers of communication but a bridge to reach out to a brand or company with delight.

Small organizations usually avoid using forms because they would like their customers or clients to get in touch with them immediately, however, mid to large size firms require users to fill out pages of detailed product forms or even the simple contact form to get in touch with them. These forms could either overwhelm the user and make them quit mid-way or delight a user that the company has set an organized system for all their needs.

Why does the form design matter?

Businesses tend to avoid forms at initial stages as it becomes a dreadful sight for them to see their funnels with users dropping off without viewing their products/offerings.

Forms reveal an organization’s personality. It would be appropriate to say that the users can detect a company’s approachability, ability and openness just the way through how forms are put across.

Every element in the form design has to be considered after understanding the audience it wants to cater to.

Boring and lengthy forms will lead to higher bounce rates. Accurate forms will allow users to provide relevant information without the caveat of making them feel saturated.

So let’s dive into 5 important UX tips to follow while creating form designs.

1. Communicate clearly

The biggest flaw in asking questions would be the question itself.

If you want data, it has to be understandable. Using fancy terms and jargons or even incorrect grammar would decrease user motivation.

Explain the question in a simplified manner. Do not include redundant information that can potentially confuse a user. If a question is very detailed, the user would end up skipping the question or probably provide you with information that is irrelevant.

We love how Airbnb keeps it short and simple, allowing enough information to understand the product and yet explore more about their offerings.

2. Don’t hide information

One of the most important rules of User Experience is to not hide information. It is also debatable at times as it becomes difficult to portray tons of information without losing the attention span of the user.

Understand the interface and fit information that is useful for the user to answer the question. If it is inevitable to cut down on information, help the user by displaying information creatively.

Search recommendations, Dropdowns with an option to search, alphabetical arrangement, highlights and prefilling information are some ways which allow users to skim through information quickly while allowing users to attain their goal.

3. Use a friendly, conversational tone

The tone of the form brings in delight. A conversational, fun and friendly tone helps the user perceive information better. The user creates a hypothetical persona about the product which portrays the entire process to be seamless.

The users feel relaxed and are more open to answering even open-ended and even personal questions.

We love how Wix.com connects to its audience. All their questions are like conversations that uses would want to have with the brand while building their website. This information allows the user to open us and describe their brand better, which in turn improves the output that their system provides. All this just because of the appropriate tone utilized.

4. Explain the unexplained

At times, it becomes essential to collect more information.

Create logical structures in the form, and ask for information sequentially. Personal and sensitive questions (Salary, Address) should be asked after the user is accustomed to the form visually and psychologically.

Form structures and conversions can be enhanced by adding help text where it is required. For example: Put the necessary conditions for setting up a password upfront. This helps the users not go through the frustration of filling the password more than once. However, ensure that this information does not distract the user while filling the important information. Clear and concise exhibition of this rule will ensure that the quality of data that flows is better.

In the example above for Survey Monkey, the requisites of setting up a username are clearly specified using a short and appropriate help text.

5. Validate user inputs

We have observed instances where the users are shown a generic message about an error in a form. However, the reason and the field where the error has been made is not pointed out.

Firstly, restrict the input of incorrect data when the field is being filled. For example: Do not let the users enter symbols and restricted characters.

If that is not avoidable, display the incorrect values to the user using a stronger highlight. If possible, highlight the number of mistakes in the form and take the user to those fields for them to enter a new value.

Create validations after every value is filled. A small tick mark would let the user know that the field input is correct and the user can go ahead without any hesitation.

If you like what you read, do clap for us and check out other articles on Medium! :)

Want to say hi? Drop us a line on hello@pineapplestudio.in

Check out our work on https://www.pineapplestudio.in/our-work

--

--

Pineapple
Quick Design

We design holistic digital experiences that enrich human lives and help businesses grow. Let’s connect at hello@pineapple.design