Forms ask users to enter or select information. For example, when a user edits a contact's details or creates a meeting request, they're using a form.

Best practices

Minimize the amount of text that users need to type. Ask only for relevant information. Include smart default values and let users choose from pickers where possible. Try to store and display information that users enter so that they don't need to enter the same information more than once.

If the form has multiple fields, set the focus on the first field. This helps users complete the form quickly. If the first field isn't a text field, don't set the focus on any component. Otherwise, users might miss the first component.

Device showing an example of a form.

Best practices for input

Allow users to press Enter to move to the next text field. Make sure that the form scrolls so that users can see the next field.

Be flexible with formats. For example, for phone numbers, accept (519) 555-0199, 5195550199, and 519-555-0199.

Use a specific type of all-touch keyboard if the input is limited to a specific type of entry. For example, use a numeric keyboard for entering numbers.

Create appropriately sized fields. Let the size of a field indicate how much information users should enter.

Use progressive disclosure. If the form contains infrequently used fields or if a set of fields appear as the result of a previous field, use progressive disclosure to reveal fields at the appropriate time.

Best practices for groups and labels

Group and order fields logically. For example, group related items together or include the most common items first.

Use space, labels, dividers, and different font sizes to create hierarchy as needed, but avoid creating too much visual noise. Use bordered sections sparingly.

Limit the use of labels. Include hint text in fields to minimize the need for labels. This approach helps keep forms compact and content-focused. In some cases, you might need a label if the field contains a default value or if the description of the field is too long to include as hint text.

Place labels above their associated fields to provide a stronger visual hierarchy for small screens and to allow extra space for translated text, if required. If your app is intended for landscape orientation, consider placing labels beside their associated fields.

Best practices for validation and submission

Validate information as users progress through the form. Don't make the user wait for the information they entered to validate against a server before they can access subsequent fields in the form.

If you create custom UI components, use a distinct visual cue (for example, a red box) to inform users of errors. Try to add descriptive error text close to where the error occurs. If you can't validate the information until a user submits the form and there are errors in multiple fields, scroll to the first field in the form that contains an error. BlackBerry UI components contain built-in error states.

Disable a Submit action until the user enters all of the required data. If the user tries to select a disabled Submit action, display an inline message or a toast to identify the missing information.

To make text entry faster, allow users to submit a form by pressing Enter. For example, when entering a username and password.

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus