Introduction to Forms
Guiding Principles
Our approach to designing forms is in keeping with the broader guiding principles of Sabre Spark. The goal is to maximize completion rates by minimizing burden for users.
When designing forms, use the following best practices as a guide to executing to these principles:
1) Keep forms as simple as possible
- Minimize the amount of information requested. Only ask what is required.
- Choose input types that minimize burden for the user. Typing and completing dropdowns, for example, require more effort for users. Consider providing users with a set of common responses (instead of open text fields) and consider using radio buttons or other single select input (instead of dropdowns) when there are six or fewer options.
- Prefill input fields with appropriate defaults.
2) Display form fields in a logical, visually uncluttered layout
- Use single column layouts for form pages. Single columns improve usability by providing users with a clear path to completion. They have also been demonstrated to result in the fewest errors and the fastest completion rates.
- Display input labels directly above the input text. Labels position above and inside the field itself have been demonstrated to result in fields that are easier to comprehend and scan as well as being faster to complete.
- For longer form pages, group related fields into sections using additional spacing and subtitles.
3) Prevent users from making errors
- Use clear labels and hint text.
- Inform users of format requirements in advance. Even better, allow for a variety of common formats and parse the data behind the scenes.
- Inform the user of errors before submitting the form (when possible).
- Provide clear instructions for recovering from an error. Display field-specific messages directly below the field.
Form Organization
Group logically related fields and content
- Separate related fields with 12px (1 rem) of space
- Separate unrelated fields with 24px (2 rem) of space
- For longer form pages, use subtitles to group broad, yet related, sections of content
For page-level button groups, use placement to emphasize button hierarchy
- On small to extra large screens, place the button group on the right of its container, with the primary action button on the farthest right position. All other actions follow to the left, with the most destructive action (ex. delete) on the farthest left position.
- On extra small screens, place the primary action button above all other buttons, with the most destructive action on the bottom. Page-level buttons in a button group should span the full width of the viewport.
(Select image to view full size)