When it comes to a functional app or website, forms serve as a tool for users to achieve their goal of utilizing your platform. The role of forms in web design is ultimately to gather data from users to complete a task or send a submission. It is important that forms meet certain standards in order to make the platform as user-friendly as possible. Such standards include a visually pleasing form with a clean and simple design. As well as looking the part, the most important aspect of a form is that it contains fields designed to obtain information that is useful for the purpose, and nothing more.
WHAT MAKES A FORM?
There are numerous key aspects involved in creating an optimal form. Most forms are created with the goal of providing users with an interface that appeals to them and allows them to easily provide the desired information. Structure is an extremely important area to focus on, along with translation and localisation.
TRANSLATION AND LOCALISATION
If your business or institution deals internationally, then you will more than likely be engaging with customers and clients that speak a variety of languages. In order to ensure adequate data collection, it is paramount for forms to translated. Certain web browsers have inbuilt software that claims to effectively translate content using machine translation. However, it is possible to add a far more personal touch to the form through human translations, which will benefit from a higher degree of localisation. Forms are composed of several key sections. The structure of a form includes the appearance and order of the sections presented. Input fields are a key aspect that is used to receive information such as name, password, email, etc. Below are the key elements to successful forms and what they should feature. This breakdown was first devised by developer Nick Babich.
STRUCTURE
The structure of a form can really affect how it is received by users. To make things user-friendly, it makes sense to pay attention to the order in which questions are asked. For example, asking for a title and name before a postcode and address is standard etiquette. Forms should only ask for what is essential. Making a form longer than necessary will only decrease completion rate. The structure should feature related and relevant groups of information. For example, personal information like name and date of birth could make up one group. Following that, account information, such as an email address and password could make another group. The arrangement of inputs will really impact the structure of a form. A form in which the user only has to scroll down is optimal. Multiple columns may disrupt the order of data entry and add to unnecessary complexity.
INPUT FIELDS
Input fields are the sections where users input the information that is being asked of them. These fields may include inputs for email addresses, passwords, dates, check boxes, and more. In order to keep forms efficient and user-friendly, is it optimal to keep the number of fields to a minimum? Only create input fields for information that is absolutely required. Around 5-7 fields are usually enough to ask appropriate questions and extract the sought after information. A long and complicated form with many input fields may intimidate users, causing them to reject filling out the form entirely. It’s best to try and avoid optional inputs to reduce clutter. If you decide to include optional fields, be sure to mark them as such. Be careful when it comes to setting default options; doing so may lead users to breeze past them without inputting the correct information. One example of this is setting a default country, although this can be tracked using geo-location data.
INPUT MASKS
Field masking makes inputting data easier for users and makes it more noticeable to the user if they have made an error. Input masks can be applied to fields such as credit card and phone numbers. Parentheses, dashes, and spaces can be pre-set in order to prevent users from adding too many characters. Be sure to make forms friendly for specific interfaces. Desktop users should be able to use the keyboard and tab key with ease. Smartphone users should be provided with the correct keyboard depending on the information being asked for. Autocompletion features are also helpful, such as when typing in an address. This makes the process much more efficient for users.
LABELS
Labels are essential for helping users navigate forms and understand what each input field requires. Labels should be brief and to the point, using as few words as possible. Using sentence case instead of title case is more appealing and practical. Title case involves capitalizing every word, whereas sentence case only capitalizes the first word. All-caps should not be used as this makes forms harder to read and scan. Labels can either be arranged to the side or above input fields. Top-aligned labels are associated with better completion rates, but may not be ideal for longer forms as they will increase the length. Labels aligned to the left require less vertical space, yet are associated with a lower completion rate. Labels aligned to the right have a good completion rate, offer a better visual connection, yet are harder to read and scan.
ACTION BUTTONS
Action buttons are used on forms to catalyze an action, such as submitting the form. Usually, a form will feature action buttons such as “submit” and “cancel.” It is useful to employ visual distinctions between these buttons to help users avoid clicking the wrong one. Perhaps make the “submit” button larger and more visually appealing. Action buttons such as these should be placed below the form where appropriate. Providing visual feedback on an action button will allow the user to clearly see that they have clicked it. Such feedback could include a change in colour or depth.
VALIDATION
Validation can point out errors that the user has made and will prevent the form from being submitted. This will show specifically what fields have been missed in order to make the correction process quick and easy. While there are many subtleties and considerations to take into account when designing a data capture form, the above should lay some good groundwork for producing forms that your users will happily interact with.
