Forms

Best practices

  • Minimize the amount of text that users need to type. Only ask for relevant information. Include smart default values and allow users to choose items from pickers where possible. Try to store and display information that users enter so that they don't have to enter the same information again and again.
  • If the form has a lot of fields, place the focus on the first field. This approach helps users complete the form quickly. If the first field is not a text field, don't place the focus on any component. Otherwise, users might miss the first component.

Groups and labels

  • Group and order fields logically (for example, group related items together or include the most common items first).
  • Use labels, space, 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 descriptive 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 the associated fields. This approach provides a more distinct visual hierarchy for small screens and allows extra space for translated text, if required. If your application appears in landscape view you could consider placing labels beside the associated fields.

Input

  • Allow users to press the Enter key 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 virtual 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. The size of a field indicates how much information users should expect to enter.
  • Use progressive disclosure. If the form contains infrequently used fields or if a set of fields are a result of a previous field, use progressive disclosure to reveal fields at the appropriate time.

Validation and submission

  • Validate information as users progress through the form. Don't make users wait for information to validate against a server.
  • 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 the location of the error. If you cannot validate the information until users submit the form and fields are in error, scroll to the first field in the form with an error. BlackBerry UI components contain built-in error states.
  • Disable a "Submit" action until users enter all of the required data. If users try to select a disabled "Submit" action, display an inline message or a toast to identify what's missing.
  • In some cases, consider allowing users to submit a form by pressing the Enter key on the keyboard (for example, when entering a username and password). This approach makes text entry faster.

Was this information helpful? Send us your comments.