How to design a great interactive form

Web forms have become an integral part of most websites and the internet in general. The primary purpose is to help both users and businesses achieve their separate goals by establishing a relationship or initiating a conversation between the two.

• Registration forms are what allows people to become members of online communities or services;
• Checkout forms allow transactions to happen through the web. Subscribing to a paid service and people purchasing products are a couple of examples which happen through a checkout form;
• Data submission forms are how people share knowledge, post information and communicate online. Forums, blogs and social communities all rely on users posting these forms for their websites to grow.

Even with their extensive importance, it is surprisingly common to come across very poorly made forms. Here are some simple guidelines which are a good foundation for most types of forms.

First, let’s see what elements a form is made up of and some best practices.

Labels

These literally label your input fields and inform users what information they need to provide in the given input field.

• Top aligned labels are generally a safe bet and make it easier for different sized labels and localized versions to fit easier within the UI;
• Left aligned labels are best when the form is very short and ask very similar questions such as date ranges;
• Labels are not help texts. Use succinct, short and descriptive labels so users can quickly scan your form;
• Labels are also not placeholders. Unless you have real estate constraints try to avoid inline labels. If you think they are your best option however, consider these type of css3 / javascript adaptations;
• Inline labels are best used for very short forms between 1 to 4 fields, such as search or logins. In longer forms they tend to hinder the form's usability;
• HTML placeholders are good to type in examples for the users to see.

Fig 1: If you decide to use labels on the left of the form, make sure the labels' text are right aligned. This makes it easier to scan the page.

Input fields

Input fields are what allow your users to fill in your form. Depending on what information you ask, there are various types you can use - text fields, password fields, dropdowns, check boxes, radio buttons, datepickers and others.

• Avoid dropdown menus with less than 4 options. Use radio buttons instead;
• Visually group related details, such as first name and last name (even better combine them into one field ‘Full name’);
• Date of birth can be a single datepicker, not three separate dropdown menus;
• Try to avoid optional fields in forms. If you cannot, a simple '(optional)' in the label is enough to differentiate it from the other fields.

Fig 2: Try to minimize the number of fields as much as possible. This renders your form less intimidating, especially when you require a lot of information for your users.

Action buttons

When clicked, these buttons trigger an action such as submitting the form.

• Avoid terms such as ‘Click here’ or ‘Submit’. Instead state what actions the buttons do when clicked, such as ‘Create my FREE account’ or ‘Send me weekly offers’;
• Avoid multiple action buttons since it might distract users from the goal at hand - in this case, submitting the form;
• The 'Reset' button is pure evil. This is generally more frustrating than useful to have;
• Make sure action buttons look like buttons - style them in a way that they ‘pop’ on the page;
• Action buttons not aligned to the input fields tend to be an eye-sore;
• When clicked, clearly indicate that the form is being processed and disable the submit button. This provides feedback to the user whilst also avoiding double posts.

Fig 3: Buttons come in different shapes, sizes and colors. Choose the styling that best fits your website and always remember to label your buttons according to what action they do. This will make it extremely simple to understand what the form provided does.

Help

Provides assistance on how to fill out any input fields when the labels alone are not enough.

• Input fields which require help should be kept to a minimum or avoided completely - especially on mobile;
• A clean way of integrating help is to show it on the right hand side of the field when the user focuses on it so that it is always in context;
• If space is an issue, tooltips are a nice solution. If a lot of information needs to be provided either reveal a hidden area underneath the label or popup a new window;
• Try to avoid help icons with a hover or click action. Instead use descriptive texts such as ‘What is this?’ or ‘Why is this information needed?’.

Fig 4: Always provide more information on fields which need it. In the example above, it is not obvious where the users can find the barcode. A simple modal helps them figure it out.

Feedback / Validation

Your form needs to be able to provide feedback. A form which cannot be submitted without informing its users why is worse than useless.

• Users should always be allowed to click on the submit button. Disabling buttons because the form is invalid is a very bad practice and should be avoided;
• Real-time validation is a good practice - especially when different input fields relate to one another;
• When form submission fails, a top-level error message should appear with a double visual emphasis (typically red in color with a warning icon) above the form and indicate why it failed;
• The erroneous fields (if any) should be highlighted and visual associated to the top-level error;
• Validation text should be provided next to the erroneous fields giving an easy-to-understand solution on how to correct them;
• To avoid confusion, reserve the red color and warning icons for error messages and destructive actions only.

Fig 5: Be descriptive in your field error messages. 'Username already in use' is a much better message than 'Invalid username' - it doesn't help the users at all understand what went wrong.

Now that we went through some guidelines for form elements, let's explore how you can optimize and improve the form as a whole .

#1 Only ask what's indispensable

Every single field you add to a form will affect its conversion rate, so make sure you only ask what you really need. Do you really need to know their telephone number if you will only contact them if they need support? Can't you ask for it when they request assistance? Do you really need to know their 'title' or whether they are Male or Female? Depending on your business you might need to, but you get the idea. Always question why and how the information you ask of your users is being used.

#2 Know when to ask for the appropriate information

Have you ever entered a clothing outlet and was asked to provide your credit card before you tried something on? Probably not. If your form is about allowing your users to access a 30-day free trial, don't ask for their credit card details. By doing that, your users will immediately starting thinking 'Oh, I thought it's a free trial, why do they need my credit card?'; 'Will they charge me after 30 days? What if I don't like it and forget about?' - This is exactly what you need to avoid - to get your users to question why you're asking for this information so early on in your relationship. Make sure you only ask for the information you need at the time and focus on making the free trial so awesome that users won't double guess whether they should pay you or not later on.

#3 Include trust factors

Trust is the amalgamation of beliefs and expectations users have of your company and is a key component in conversion. Gaining your users’ trust however takes time and it is therefore a good practice to introduce third party trust factors which in turn help users trust you more. These vary a lot depending on your industry, but a checkout form usually has 2 or 3 security and privacy trust factors from reputable companies which reassure the user that your company conforms to their standards.

#4 Make it easy for your users to scan the form

The form title should relate to the goal it allows users to complete. Avoid using generic titles such as ‘Please fill in this form to continue’ and instead opt for a more descriptive one such as ‘Register for your free trial’ or ‘Join our community’.

All the different elements within the form should be visually distinctive from one another. Users need to be able to to scan the form and immediately understand which is the submit button, which are the labels and which are the input fields they need to enter. Including white space will improve legibility and is always a must.

#5 Order the form logically

Details should be asked logically from a user’s perspective, not the database. Typically, it's unusual to ask for someone’s address before their name. For longer forms, structure multiple fields by visually grouping them together in sub sections such as: Account details, contact details, payment details, etc;

#6 Use smart defaults

Smart defaults are very good as they fill in fields for 90% of cases, resulting in faster fill ins. A couple of examples: A language dropdown can default to browser language and country can default to the user's IP country using geolocation.

#7 Break complex forms in a multi-step process

For longer forms which cannot be shortened, your best option is to split the process into various bite size steps. Make sure you split the requested information logically and that users are shown their progress within the process. This can be achieved by indicating the step they are on (example: Step 2 of 3) and by providing a visual cue such as a progress bar or a percentage - which is how survey forms typically handle it.

#8 Usability testing

Do not be frightened by the term - usability testing is indispensable in such a crucial part of your website or application. Very often, carrying out just two tests or simply asking a colleague or friend to go through a prototype of the form can give you ample insights in how usable the form is and what’s not immediately obvious by observing how they fill it out.

#9 Carry out A/B split tests

Although forms on different sites have a lot in common, it doesn't mean that copying Amazon's sign up form will work for your website as well. A/B split tests allow you to do tiny alterations to your form that gradually improve its conversion rate. Tests include altering the action button in text, size and color, making trust factors more prominent, adjusting field positions, removing optional fields and many others.

#10 Conform to standards

Make sure users can jump through fields using the Tab key and that the tabbing is in logical order. It is also important to conform to web standards by for example placing forms within HTML tags. Occasionally, I come across sites which don’t and they quickly become a pain to use since my browser is not able to automatically fill in the details for me.

Zsite Backend

Web/Front