Guideline For Form Layout

GUIDELINE FOR FORM
LAYOUTS
OBJECTIVES
• Know the layout that is appropriate for the content and app
• Know the same style of label placement for all controls in a form
• Identify the proper use of columns in a specific form
• Know the proper placement of the remaining controls in a form

RECOMMENDATIONS
• 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.
ADDITIONAL USAGE GUIDANCE
USE SINGLE COLUMN LAYOUTS 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:
HERE'S AN EXAMPLE OF A LONGER
FORM THAT'S BROKEN UP INTO
MULTIPLE PAGES:
WHEN TO USE TWO-COLUMN LAYOUTS
Don't use multiple columns when there is
Use a two-column layout for short forms with limited extensive vertical panning. To fill out the form, the
vertical panning. The two-column layout makes the best user has to reach the bottom of the first column,
use of screen real estate in landscape orientation. move to the top of the second column, and then
Remember to reserve ample gutter space between the two back down again. This experience becomes even
columns. more cumbersome if the touch keyboard is
displayed.
Here's an example of a form that uses two columns: Here's an example of a form that uses two columns improperly:
WHEN TO USE THREE-COLUMN LAYOUTS
Here's an example of a form that uses three 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.
LABEL PLACEMENT
• 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
Here are a two examples of 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.
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).
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.

Sans-serif fonts Font-family Styles Notes
Arial Regular, Italic, Bold, Bold Italic, Supports European and Middle
Sans-serif fonts are a great choice for Black Eastern scripts (Latin, Greek,
headings and UI elements. Cyrillic, Arabic, Armenian, and
Hebrew) Black weight supports
European scripts only.
Calibri Regular, Italic, Bold, Bold Italic, Supports European and Middle
Light, Light Italic Eastern scripts (Latin, Greek,
Cyrillic, Arabic and Hebrew).
Arabic available in the uprights
only.
Consolas Regular, Italic, Bold, Bold Italic Fixed width font that supports
European scripts (Latin, Greek
and Cyrillic).
Segoe UI Regular, Italic, Light Italic, Black User-interface font for European
Italic, Bold, Bold Italic, Light, and Middle East scripts (Arabic,
Semilight, Semibold, Black Armenian, Cyrillic, Georgian,
Greek, Hebrew, Latin), and also
Lisu script.
Segoe UI Historic Regular Fallback font for historic scripts
Selawik Regular, Semilight, Light, Bold, An open-source font that's

Semibold metrically compatible with
Segoe UI, intended for apps on
other platforms that don’t want
to bundle Segoe UI.
Verdana Regular, Italic, Bold, Bold Italic Supports European scripts (Latin,
Greek, Cyrillic and Armenian).
Serif fonts
Serif fonts are good for presenting large amounts of text.
Font-family Styles Notes
Cambria Regular Serif font that supports

European scripts (Latin,
Greek, Cyrillic).
Courier New Regular, Italic, Bold, Bold Serif fixed width font
Italic supports European and
Middle Eastern scripts
(Latin, Greek, Cyrillic,
Arabic, Armenian, and
Hebrew).
Georgia Regular, Italic, Bold, Bold Supports European scripts

Italic (Latin, Greek and Cyrillic).
Times New Roman Regular, Italic, Bold, Bold Legacy font that supports
Italic European scripts (Latin,
Greek, Cyrillic, Arabic,
Armenian, Hebrew).
Symbols and icons
Font-family Styles Notes
Segoe MDL2 Assets Regular User-interface font for app

icons. For more info, see
the
Segoe UI Emoji Regular
Segoe UI Symbol Regular Fallback font for symbols

Fonts for non-Latin languages Font-family Styles Notes
Ebrima Regular, Bold User-interface font for
Although many of these fonts provide Latin African scripts (Ethiopic,
N'Ko, Osmanya,
characters. Tifinagh, Vai).
Gadugi Regular, Bold User-interface font for
North American scripts
(Canadian Syllabics,
Cherokee).
Javanese Text Regular Regular Fallback font for
Fallback font for Javanese script
Javanese script
Leelawadee UI Regular, Semilight, Bold User-interface font for
Southeast Asian scripts
(Buginese, Lao, Khmer,
Thai).
Malgun Gothic Regular User-interface font for
Korean.
Microsoft Himalaya Regular Fallback font for
Tibetan script.
Microsoft JhengHei UI Regular, Bold, Light User-interface font for
Traditional Chinese.
Microsoft New Tai Lue Regular Fallback font for New
Tai Lue script.
Microsoft PhagsPa Regular Fallback font for Phags-
pa script.
Microsoft Tai Le Regular Fallback font for Tai Le
script.
Microsoft YaHei UI Regular, Bold, Light User-interface font for
Simplified Chinese.
Microsoft Yi Baiti Regular Fallback font for Yi
script.
Mongolian Baiti Regular Fallback font for
Mongolian script.
MV Boli Regular Fallback font for
Thaana script.
Myanmar Text Regular Fallback font for
Myanmar script.
Nirmala UI Regular, Semilight, Bold User-interface font for
South Asian scripts
(Bangla, Devanagari,
Gujarati, Gurmukhi,
Kannada, Malayalam,
Odia, Ol Chiki, Sinhala,
Sora Sompeng, Tamil,
Telugu)
SimSun Regular A legacy Chinese UI
font.
Yu Gothic Light, Regular, Medium, Use Yu Gothic Medium
Bold for body text and
similar content.
Yu Gothic UI Light, Semilight, User-interface font for
Regular, Semibold, Bold Japanese.

Guideline For Form Layout

Uploaded by

Copyright:

Available Formats

Guideline For Form Layout

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guideline For Form Layout

Uploaded by

Copyright:

Available Formats

GUIDELINE FOR FORM

• Identify the proper use of columns in a specific form

• Know the proper placement of the remaining controls in a form

• Don't use multiple columns when there is extensive vertical panning.

• The form spans multiple pages.

• The app is resized to a tall, narrow layout.

Use three or more columns to make the best use of visible

• Place labels above controls or to the left of a control.

Here are a two examples of upper label placement.

Placing labels above controls helps establish the

In single-column forms where vertical real estate must

• The label strings are short and approximately the

• There is enough horizontal space for the longest

Sometimes you can simplify your layout by using inline

 The form pattern is commonly understood by a wide

 The label can easily be implied or construed after the

 There are a limited number of input fields.

Segoe UI Historic Regular Fallback font for historic scripts

Selawik Regular, Semilight, Light, Bold, An open-source font that's

Font-family Styles Notes

Cambria Regular Serif font that supports

Georgia Regular, Italic, Bold, Bold Supports European scripts

Font-family Styles Notes

Segoe MDL2 Assets Regular User-interface font for app

Segoe UI Emoji Regular

Segoe UI Symbol Regular Fallback font for symbols

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.