Layout 

Size, spacing, and placement of information are critical in creating a visually consistent and predictable environment. Visual structure is also important for communicating the purpose of the elements displayed in a window.

Note: Win32 uses dialog units (DLUs) as the unit of measure for user interfaces. Windows Forms (managed code) uses pixels as the unit of measure. However, Windows Forms surfaces are not direct conversions from Win32 surfaces, and attempting to use a conversion chart or algorithm will give incorrect spacing. Instead, when creating Windows Forms-based user interfaces, use the template measurements shown in Layout Specifications: Windows Forms.

• When choosing control placement, comply with any guidelines specific to the type of control or surface. If no relevant guideline exists, place UI elements in the order that users require them.

• How you place controls conveys their relationship to one another. Proper placement helps the user understand the controls' relationship clearly and quickly. When you have controls in proximity to one another, use the following guidelines as a basis for choosing control placement.

  Relationship of Neighboring Controls	Recommended Placement	Example
  Label and its control	Text-field labels are either to the left of or above (and left-aligned with) the control. (Does not apply to check boxes, option buttons, or group boxes. They have built-in labels.)
  Independently operating controls (no interoperation)	Stack the controls vertically and left-aligned.
  Interoperating controls (no subordination)	See Layout Specifications: Win32 or Layout Specifications: Windows Forms.
  Superior/subordinate controls	See Subordination.

  Developer Note:

  About DLUs: In unmanaged code, the system measures the placement of controls on a surface in dialog units (DLUs), not pixels. A dialog unit is the device-independent measure to use for layout. One horizontal dialog unit is equal to one-fourth of the average character width for the current system font. One vertical dialog unit is equal to one-eighth of an average character height for the current system font. The default height for most single-line controls is 14 DLUs. Be careful if you use a pixel-based drawing program, because it might not provide an accurate representation when you translate your design into dialog units. If you do use a pixel-based drawing tool, you may want to take screen snapshots from a development tool that supports dialog units and use those images. Your application can retrieve the number of pixels per base unit for the current display by using the GetDialogBaseUnits function.

  For more information about secondary window sizes, see the appropriate Win32 or Layout Specifications: Windows Forms layout topic. If a single task involves using multiple dialog boxes, try to maintain a consistent width. This can provide a smooth transition, making it easier for a user to focus on the task. Also, always check to make sure that the window fits in the minimum screen resolution set by your application's users. Typically, this means using an 800 X 600 resolution. You must also take into account the space that might be taken up by the taskbar and other desktop toolbars.

• Use the default button width.
  Exception: If the button label is too long to fit in the default button size, you can make that button wider. Do not make other buttons wider to match.

• Tabs are sized correctly by default. Do not change the default settings.

• Try to make text boxes and list boxes on the same surface a consistent width. Use no more than one or two different widths per group or surface.

• Extend text fields, option button labels, and check-box labels to be as wide as the group or surface, where possible. This will reduce the work necessary to localize your interface.

• Visually distinguish optional user input. Ideally, put required and optional input on separate surfaces or in visually distinct areas. Alternatively, you may add the word required or optional in parentheses after the label (and before the colon, if any). To meet accessibility requirements, do not use color unless you are using some other form of feedback as well.

• When grouping related UI elements, use group boxes, etched separators, or standard spacing. For more information about using a group box or separator, see Group Boxes, Layout Specifications: Win32, or Layout Specifications: Windows Forms.
  Elements grouped by a group box
  Elements grouped by etched separators
  Related command buttons grouped by spacing
  

See Also

Concepts

Check Boxes
Group Boxes
Layout Specifications: Win32
Layout Specifications: Windows Forms
Option Buttons
Subordination