10 Must-Have Tips for User Friendly Forms

Forms are like conversations between people. They help automate things and reduce a bureaucracy if done right.

By creating forms, you build an interface where dialogue happens. So, the goal here is to make sure that the form asks the right questions at the right time.

1.Use smart defaults

If you’re asking questions like phone number or country, you should suggest a default phone extension or country based on the user’s IP address.

When asking for addresses, use a post code / zip code lookup to reduce field entry When asking users to fill out their address, it’s best practice to just ask for a house number and post code/zip code, and then use a lookup service to suggest the full address.

When asking users to choose their country, occupation, or something else with a large number of predefined options, it’s best to provide a predictive search function to reduce the amount of typing and cognitive load required.

2.One Column vs. Multiple

There are many debates on whether a form should fit one screen even if we have to design it in multiple columns. Of course, it depends on a case and sometimes it can be beneficial to use all the space on the screen, but in a general case, it's a bad practice.

People must scan forms that designed in multiple columns in a Z pattern. If a form in a single column then the path to completion is straight to the bottom. So it's hard to do it wrong and skip mandatory fields or fields that are beneficial for a user after the completion of the form.

3.Reduce The Number Of Input Fields To A Minimum and Remove all non-essential fields

Hide optional fields in an expandable box below the form, or move them to an additional panel on the side.

Remove fields that unnecessary or can be combined with others.

To make your forms simpler, you need to combine several input fields into one if possible. For instance, if you have a date into three fields, like a day, month and year.Every additional field in your form is losing you leads – so consider whether each question justifies the incremental loss in leads or opt-ins.

4.Complex Forms Can Be Split Over Multiple Pages

A step count helps with navigation and with showing the user where they are at in the process. Huge forms lead to cognitive overload and demotivation of completion. Simplify and split it using tabs or expandable blocks/steps on one page to break big forms on smaller chunks.

5.Forms Grouping

Group fields to make the process of completion done by batches. For example, you can create a group with personal information, another group with payment details, one more for shipping details.

6.Labels

Place labels on the left of fields in case of large forms and on top for smaller forms.

Display a field label: A field label is the question text that sits above the field. These should always be present and should not be replaced with placeholders. Why? Because when you start entering text into a field the placeholder text disappears which forces people to use their memory to recall them. The only instance where it may be acceptable to not have a field label is if you’re using inline labels. Inline labels are a hybrid solution that are always in view, but do not take up as much vertical space as top-aligned labels. Below is an example of inline labels being used by Bounce Exchange form.

Make label texts short. Leave big sentences for explanation text below or near an input field. Leave only essentials. Always try to reduce the number of words and get to the point right away. People don't read it, they quickly scan.

Use sentence case instead title case. We shouldn't focus on each word on a label, and there is no context there. Sentence case is slightly easier and thus faster to follow grammatically than title case. One thing is for sure: never use all caps, or else the form would look unprofessional and be difficult to scan.

Be consistent and keep vocabulary in place. Use common words related to the product.

7.Placeholders

A placeholder is the light text that appears within a form field. In the example above, you can see a placeholder that says ‘E.g. ‘CR0 3RL…’.

Placeholders should be used to guide users on how to fill out the field if there’s any ambiguity. In other words, you probably don’t need to have a placeholder for fields like ‘First name’ as most people know how to answer their first name.

It's an excellent solution for small forms like login, leaving your phone to call you back, or something like that. However, they work poorly in big forms with lots of data.

The problem is that people fill out a lot of different data and at the end of this flow you don't remember which field means what? You can guess or double check. However, if you want to check what it meant you need to remove data from it to see the placeholder again.

The good solution for it is floating labels. They look like placeholders, but when you click on it, the placeholder becomes a label on top of value that you enter.

We can use both labels and placeholders. However, each one has its purpose. For example, labels ask for data, placeholder shows the example of this data, and you already know an approximate answer or a format in what you need to enter asked information.

8.Buttons

Don't forget to distinguish primary from secondary action. Make these buttons visually different. Moreover, if one of the buttons is about going back or canceling then make sure that it's on the left of primary action, such as confirmation or submission.

The confirmation button should be right below the last input field. So, it's like a continuation of the form and end of it at the same time.

Be specific with names. Don't use general naming like "Submit" or "Done." Let people know what action are they doing by pushing this button and even let them know what is next. That helps to build confidence and make it look professional.

9.Default and Automation values

Almost all people who use forms that you create select values. We should have some by default there. Alternatively, it can be pre-defined information that users already dealt previously and it can be taken from his profile or somehow calculated.

Avoid as much filling in as possible. Allow pre-population from existing records with duplicate/copy functions. That is relevant to the growing trend of machine learning. So a modern interface can help filling up forms taking into account previous experiences.

For example, a tax form can be calculated automatically taking data from different sources like financial account, transactions, previous submissions.

10.Mobile and desktop

For desktop, forms make sure that you have autofocus on the first input field when you open a particular form. Moreover, it's good if you can move between elements with Tab key.

In mobile/tablet experience, it's good to match keypad.Use specific HTML input types to show the correct keypad.

• input type=”text” displays the normal mobile device keyboard
• input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’
• input type=”tel” displays the numeric 0-9 keypad
• input type=”number” displays a keyboard with numbers and symbols
• input type=”password” this hides characters as they’re typed in the field
• input type=”date” this displays the mobile’s date selector
• input type=”datetime” this displays the mobile’s date and time selector.
• input type=”month” this displays the mobile’s month/year selector

Check the url for live demo

Note: Open the live demo in mobile, it will show different keyboard for different input

For clone the code click the github link

Be sure

1. Does your form work on all major browsers and devices?
2. Is your form easy to use in bright or low-light situations?
3. Give reason to people "why they will use your form"?
4. Don’t make your validation too strict.
5. If you must use validation, does your form reports error inline(to the right of the field) ?
6. Do not ask people to confirm their email or password twice.
7. Be careful using security seals, unless you’re asking for payment.
8. Does your form contrast on "call to actions"?
9. Avoid using ‘clear’ or ‘reset’ buttons.
10. Use specific HTML input types to show the correct keypad.

You can like my facebook blog page Developerstips and subscribe my blog for the latest post.