Guidelines for form layouts

Applies to Windows and Windows Phone

Design forms that provide a great touch experience, optimize the use of screen real estate, and minimize panning/scrolling in your Windows Store app.

See this feature in action as part of our App features, start to finish series:  User interaction: Touch input... and beyond

Dos and don'ts

  • Use a form layout that is appropriate for the content and app.
  • Use the same style of label placement for all controls in a form.
  • Use in-line place holder text when form content is simple or easily understood.
  • Don't use multiple columns when there is extensive vertical panning.
  • Don't place labels to the left when there is a lot of variance in the length of the labels.
  • Don't automatically launch the touch keyboard without touch input.

Additional usage guidance

When you design a form and the control layout, think about how you want the user to fill out the form and the effects panning/scrolling might have on the experience. Make sure you also consider the impact of the touch keyboard (it can use up to 50% of the screen in landscape orientation) and inline error notifications, if used.

Single-column layouts

Use a single-column layout for your form when:

  • You want to encourage users to fill out the form in a specific order.
  • The form spans multiple pages.
  • The app is resized to a tall, narrow layout.
  • The app displays additional notes and info, instructions, or branding and advertising.

Here's an example of a short form that uses a single-column layout:

A short form that uses the single column layout

Here's an example of a longer form that uses a single-column layout:

A longer form that uses the 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:

A longer form that uses groups

Here's an example of a longer form that's broken up into multiple pages:

A longer form that uses groups

Here's an example of a form that uses a single-column layout because the UI contains additional notes and info:

A form that contains additional notes and information

When to use two-column layouts

Use a two-column layout for short forms with limited vertical panning. The two-column layout makes the best use of screen real estate in landscape orientation. Remember to reserve ample gutter space between the two columns.

Here's an example of a form that uses two columns:

A form that uses two columns

Don't use multiple columns when there is extensive vertical panning. To fill out the form, the user has to reach the bottom of the first column, move to the top of the second column, and then back down again. This experience becomes even more cumbersome if the touch keyboard is displayed.

Here's an example of a form that uses two columns improperly:

A form that uses two columns improperly

When to use three or more columns

Use three or more columns to make the best use of visible screen real estate in landscape orientation. This layout works well in fixed or horizontally panning screens, but is awkward in vertically panning screens. Use this layout only when the input order is not important.

A form that uses three columns

Label placement

Most controls need a label.

  • Place labels above controls or to the left of a control.
  • Use the same style of label placement for all controls in a form.

When to use upper label placement

In general, place labels above controls. When using multi-column form layouts, always place labels above controls.

Placing labels above controls helps establish the relationship between a label and its control and helps create a clean layout, as all labels and controls can be left-aligned. Placing labels above controls makes it easier to present long strings and handle localization and accessibility issues.

Here are a two examples of upper label placement.

A form that positions 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 controls when:

  • The label strings are short and approximately the same length.
  • There is enough horizontal space for the longest label string (in any locale).

Here's an example of a form that uses left label placement.

A form that uses left label placement

Don't place labels to the left when there is a lot of variance in the length of the labels as some labels will be too far away from their controls.

A form that uses left label placement improperly

Don't use left label placement in multi-column form layouts. The labels themselves might look like a separate column.

A form that uses left label placement improperly

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:

A form that uses inline placeholder text

Button placement

Align form buttons to the right, except when multiple buttons are embedded with other controls. To help a form appear more cohesive, buttons should match the alignment of those other controls. For example, in the PC Settings screen, the embedded buttons are left-aligned:

A PC Settings screen that shows left-aligned buttons

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 through the controls on the form, including controls that are not currently in view. Ensure the panning region that contains the focused control auto-pans 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 (if visible) to account for various edge gestures/UI and the text selection gripper.

A form with and without the touch keyboard showing

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:

A form that contains areas that should always stay in view

Invoking and dismissing the touch keyboard

For devices that support touch, the touch keyboard is displayed when the user taps an input text field. Don't make your app automatically launch the touch keyboard without this interaction.

The keyboard can be dismissed in one of two ways:

  • When the form is submitted.
  • The Hide keyboard command is invoked, as shown here.

    The Hide keyboard command on the touch keyboard

The touch keyboard typically remains visible while the user navigates between controls in a form. This behavior can vary based on the other control types within the form.

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:

A registration form

Here are recommended sizes for various elements, with spacing guidelines:

Sizing and spacing for the registration form

Related topics

For designers
Guidelines for buttons
Guidelines for touch keyboard and handwriting panel

 

 

Show:
© 2014 Microsoft