top of page
Writer's pictureKristi Kitz

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:


  • Position

Labels should be positioned directly above the input field, aligned to the left.




  • Spacing

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:

  • Radio buttons

When selecting a single option from a list that is small (~ <6 options), or requires greater visibility.


  • Dropdown

When selecting a single option from a list that is large (~ >6 options), or has a recommended default option.


  • Multiple Checkboxes

When selecting one or many options from a list.


  • Single Checkbox

When specifying a boolean value for a single field. Examples include setting something as active, “remember me”, or accepting the terms of the agreement.


  • Input

When entering free form text or numeric information.


  • Text Area

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:

  • Action type

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:

- saving

- going back a step

- cancelling



  • Style

Primary actions should be styled with greater emphasis than secondary ones.
















  • Specificity

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.

















Resources


1,304 views0 comments

Recent Posts

See All

Комментарии


direction.png

Ready to get started?

Let us help transform your business on the industry leading modern application platform

bottom of page