Skip to main content

Forms

Introduction

Forms are central to business applications. This topic will discuss best practices for formers, such as order, grouping, labels, and more. Watch the video to learn more.

Video

Transcript

Forms are central to business applications. Forms should be clear and easy to complete, as well as compact and efficient.

Take care to logically group and order all fields. Think of your form as a questionnaire and imagine you are verbally asking your user for information. 

The order and grouping of the fields in the form should be organized logically according to priority, grouped by context, and read like a verbal query, rather than a form. You can test this on someone outside your team: Read the labels out loud and see if the person understands what information you are requesting. This technique can uncover confusing labels and illogical field order.

Required or important fields should typically be shown before less important or non-required fields because this ensures that users do not miss them. Also, avoid mixing a required field with non-required fields, as again, the user may miss the required field.

Our research demonstrated that users complete a one-column form the fastest. However, speed should be balanced with other needs. 

For example, if real estate is at a premium, use a two-column form. But, make sure that fields with a strong association are grouped horizontally. This would be the case for first and last names, or date ranges. For related data like this, grouping makes sense and provides necessary context.

Headings can provide clarity by separating groups of fields, but try not to overwhelm the user with too many headings.

The overall width of a form should not be wider than 80 characters. Any form wider than this is exceedingly hard to use and also will fail accessibility testing.

You must ensure that a user can tab through the entire form easily and that the tab order is logical.

This is critical for efficiency in business applications and will conform to accessibility rules.

Pega provides a lot of leeway regarding how data is collected. Examples of data collection tools include text fields, text areas, dropdowns, and autocompletes. It is important not to abuse this freedom by using incorrect controls for data collection in forms. For instance, you should always use a phone control to collect phone numbers and not a normal text field.

You should also be consistent about how you collect types of data. For instance, if you are collecting a region field in your form, you should not use a text field in one section, and an autocomplete in another. 

Labels tell the user what data is being requested for the field. 

Labels, unlike placeholders or hover-tips, maintain their usefulness when the user is focused in the field and will remain after inputting text in the field.

Labels should be succinct, short, and descriptive (typically, a word or two) so that users can quickly scan your form.

A clearly labeled text field should not require a tooltip or placeholder, both of which add complexity to the form with little benefit.

Placeholders rely on your user's short-term memory: The moment they enter the field, the placeholder is removed. The placeholder text also makes the form very busy and thus hinders a user's ability to quickly scan the fields. The labels and headings should be the clear and obvious signposts in your form. Simplicity and clarity are the goals.

The same is true regarding helper text that sometimes appears under fields. We would like to avoid helper text by having labels and headings that provide clarity.

Text area fields should be set to auto-expand.

Typically, there is no need to have more than two rows showing initially. 

When a user is picking from a series of options in a form, it's important to use the correct control element. Use the following logic to choose the correct control element:

For general yes/no choices on a form (booleans) with a save/submit button visible on the screen, use a checkbox,

For yes/no choices (booleans) that do not require a save/submit button to activate, use a toggle.

For a range of numbers, use a slider or a five-star control.

For 2-7 options displayed horizontally, use a radio segment. Be careful to check for wrapping!

For 2-7 options displayed vertically, use a radio group.

For more than seven options, use an autocomplete.

Dropdowns should only be used when it makes sense to show a preselected default option. Dropdowns should not be used when less than seven and/or more than 15 options are available to the user. Huge drop-down lists are unusable since they require users to scroll within the list, which is awkward and inefficient.

One caveat about dropdowns: If you're building a UI for a mobile device and you want to take advantage of an operating system's native control element, you will need to use a dropdown. 

When reasonable, put long and wide fields under short ones. This would include text areas, maps, or other element taller than 60px. If these long and wide fields are at the top of a form, they can hide other fields by pushing them below the visible area of a viewport.

Let's look at a problematic form. This form, which may have been inherited from a very old app, has a number of critical issues.

The form is too wide. Forms should not exceed 80em, about 80 characters, in width. Forms that are wider than 80em are exceedingly inefficient, prone to error, and will fail accessibility testing. This one is showing a scrollbar, which is not ideal.

The fields here are presented in multiple widths and heights, some with labels on top, and some with labels to the left. This inconsistency makes the form exceedingly confusing.

The bulk of the form appears to be in a table, which is very awkward. The column headings are meant to fill in for labels on the fields below, but now a user must constantly look up to the top of the table to figure out what the fields are for. Ironically, while the form appears to have been designed to save space, the unorthodox structure of the form, inconsistent with other forms users are used to, has created quite a lot of wasted space. The misalignments here make things even worse.
 

Check your knowledge with the following interaction.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice