Designing Better Forms in OutSystems
Follow these 9 best practices to elevate your form game!
Forms are ubiquitous – they’re in almost every app we work on. Though not the sexiest, the critical functionality they provide warrants some time spent designing them well. Follow these guidelines to help you build elegant, intuitive forms for your next project!
1. Use one column
Single column forms provide a clear path for the user to scan and complete them. Multiple columns can feel disjointed, making it easier to skip a field. A single column offers a cleaner layout, faster completion rates, and a better experience for the user. It’s also more easily adapted to mobile.
There’s one exception to this rule - fields that are closely related. In that case, they can be set inline.
2. Organize information logically
Don’t just add fields haphazardly! Organize them in a way that flows logically and reflects the user's perspective, rather than that of the database. Group like fields together through flow or with explicit sections.
Logical groups of information can also show where to break apart a larger form into smaller chunks (see the next tip).
3. Limit the length
Large forms can become unwieldy, and there are ways we can improve the user experience by simplifying them. Always evaluate if a field is necessary; if it’s not, get rid of it. Then consider breaking your form out into sections. This helps the user process information in small, logical sections.
4. Make proper use of labels
Labels are important – use them! And consider the following when you do:
Labels should be positioned directly above the input field, aligned to the left.
To make the label/ input field association clear, spacing should be minimal. Greater spacing should be given between the input field and the successive label.
Label input widget
Associating the label with its respective input ensures mandatory field flags and validation errors are correctly displayed to the user. On the label, remember to set the “Input Widget” property.
5. Make proper use of input types
Using the correct input type leads to better data and a better user experience. Here are the most common form components, and their respective use cases:
When selecting a single option from a list that is small (~ <6 options), or requires greater visibility.
When selecting a single option from a list that is large (~ >6 options), or has a recommended default option.
When selecting one or many options from a list.
When specifying a boolean value for a single field. Examples include setting something as active, “remember me”, or accepting the terms of the agreement.
When entering free form text or numeric information.
When entering long-form text that requires several rows of input space.
6. Validate data with the form widget
Group your input fields and buttons inside the “Form Widget”. This allows you to take advantage of built-in customizations and validation UI.
Set “Built-in Validations” to yes on the submit button to activate the built-in client-side validations. This checks two things: mandatory field completion and data type compliance.
In addition to the built-in validations, you might want to consider creating additional custom validations based on your unique needs and business logic.
7. Denote mandatory fields
Input widgets have a mandatory field. This provides not just data validation, but important visual cues to the user (an asterisk next to the label and highlighting on validation error).
Mandatory fields in the database will default to mandatory in the input widget, but this can be configured. Be sure that any required fields are set as such.
8. Clearly define actions
Forms need actions! Here are a few things to consider when designing action buttons:
Forms generally have a primary action, and one or more secondary actions.
Primary actions could include:
- progressing the step
- submitting the form
Secondary actions could include:
- going back a step
Primary actions should be styled with greater emphasis than secondary ones.
Don't be vague! A specific phrase for your primary action is generally better. Consider rewording to clearly indicate the action that will be taken.
9. Provide user confirmation
Once a form is submitted feedback should be provided to the user, be it positive (a success message), or negative (an error in saving or sending). If there is an error, make the feedback message specific enough that the user understands what went wrong and what they need to do next.
Checkboxes vs. Radio Buttons (nngroup.com)
7 Rules of Using Radio Buttons vs Drop-Down Menus | by Saadia Minhas | Prototypr
Validate the fields of a form - OutSystems 11 Documentation
Inputs - OutSystems 11 Documentation