These guidelines help you design forms that provide a great touch experience while optimizing the use of screen real estate and reducing the need to scroll.
When designing a form and deciding which layout to use, consider how you want the user to fill out the form and where scrolling might be required. Also consider how much scrolling is necessary when the touch keyboard is visible. The touch keyboard takes up to 50% of the screen in landscape orientation. Inline error notifications will also increase the length of the content.
The next sections describe when to use single- and multi-column layouts.
When to use single-column layouts
Use a single column layout in these cases:
- You want the user to fill in the form in a specific order.
- The form shares screen space with other UI. For example, the form might share screen space when:
- The app uses a two-pane UI layout.
- The app is in the snapped view state.
- The screen displays additional notes and info, instructions, or branding and advertising.
Here's an example of a short form that uses a single-column layout:
Here's an example of a longer form that uses a single-column layout:
Instead of trying to fit a lot of controls into one very long form, consider breaking up the task into groups or into a sequence of several forms. Here's an example of a longer form that is broken up into groups:
Here's an example of a longer form that's broken up into multiple pages:
Here's an example of a form that uses a single-column layout because the UI contains additional notes and info:
When to use two-column layouts
Use a two-column layout for short forms with limited vertical scrolling. The two-column layout makes the best use of the visible horizontal real estate in the landscape orientation. Remember to reserve ample gutter space between the two columns.
Here's an example of a form that uses two columns:
Don't use two or more columns when there is a long vertical scroll, because the user has to scroll to the bottom of the first column, then scroll to the top of the second column and back down again to fill out the entire form. This experience becomes even more awkward if the touch keyboard is up.
Here's an example of a form that uses two columns improperly:
When to use three or more columns
To make the best use of the visible horizontal real estate in landscape orientation, you may use multi-columns. This layout works well in fixed or horizontally panning screens, but is awkward in vertically panning screens. Only use this layout when the input order is not important.
Label placement
Most controls need a label. Place labels above their controls or to the left of their control. In any given form, use only one type of label placement. Don't use different label placements for different controls in the same form.
When to use upper label placement
Placing labels above their controls helps establish the relationship between the labels and their controls and help create a clean layout, since all the labels and control elements can be left-aligned. Placing labels above their controls makes it easier to present long strings and handle localization and accessibility issues.
In general, place labels above their controls. When using a multi-column form layouts, always place labels above their controls.
When to use left label placement
In single-column forms where vertical real estate must be conserved, place labels to the left of their controls when the following are true:
- The label strings are short and approximately the same length.
- There is enough horizontal space for the longest label string (in any localization).
Here's an example of a form that uses left
Don't place labels to the left when there is a lot of text string length variance, because some labels will be far away from their controls.
Don't use left label placement in multi-column form layouts, because the labels will have the appearance of another column. For example, a 2 column layout would look like it had 4 columns:
Inline placeholder text
Sometimes you can simplify your layout by using inline placeholder text instead of labels. Use inline placeholder text when:
- The form pattern is commonly understood by a wide audience (for example, a user logon control or a password entry field).
- The label can easily be implied or construed after the data has been entered in the input field (since hint text disappears after data is entered) .
- There are a limited number of input fields.
Here's an example of a form that uses inline placeholder text:
Button placement
Align form buttons to the right, except when there are multiple buttons are embedded with other controls. To show that the buttons feel more cohesive with the other controls, they should match the alignment of those controls. For example, in the PC Settings screen, the embedded buttons are left-aligned:
For more info about button placement, see the Guidelines for buttons.
Focus and navigation
The control that a user is interacting with on the form has focus. A user may use the Tab key on the keyboard to navigate around the controls on the form, including controls that are not currently in view. In this case, the panning region containing the focused control should auto-scroll so that entire control is in view. There should be a minimum of 30 pixels between the control in focus and the edge of the screen or the top of the touch keyboard to account for various edge gestures/UI and the text selection gripper.
In some cases, there are UI elements that should stay on the screen the entire time. Design the UI so that the form controls are contained in a panning region and the important UI elements are static. For example:
Invoking and dismissing the touch keyboard
When no physical keyboard is detected, the touch keyboard invokes when the user taps an input text field. Don't make your app automatically launch the touch keyboard; let the user invoke it.
The keyboard is dismissed in one of two ways:
- The user completes and submits the form, leaving the view.
- The user dismisses the keyboard via the dismiss key.
The touch keyboard does not automatically dismiss while the user is in a form and navigating between controls.
For more info, see the Guidelines for touch keyboard and handwriting panel.
Layout examples
Here's an example of a registration form that follows the guidelines in this document:
Here's a diagram that shows the size of each element and the spacing between elements:
Related topics
Build date: 11/28/2012
