Window Layout

The guidelines for the placement of controls in a window.


[ Guidelines | Essential Related Topics | Supplemental Related Topics ]

Guidelines

Design the initial size and layout of an action window so that a user will not need to scroll the window.
Within a column of controls, left-align the edges of the controls to the right of the longest field prompt.
If the contents of a window can be scaled when the window is sized, provide a user option to specify whether to scale or clip the contents.
Place push buttons that affect the entire window horizontally at the bottom of the window and justified from the right edge.
Avoid placing push buttons in more than two rows.
If the action indicated by the label on a push button adjusts or is associated with a component within the same window as the push button, place the push button near that component. For example, if the function of a push button is to restore the initial value in an entry field, place that push button beside the entry field that it affects.
Avoid using a push button to change the size of a window; instead, allow a user to change the size of the window using the size borders and the maximize push button or Maximize choice. For example, do not provide a push button labeled More>> to allow a user to enlarge a window.
Use a Tab to organize groups of controls when they will not fit in a single window. Avoid placing related controls in separate windows connected by routing choices on push buttons.
In high-volume data-entry windows, consider using right-aligned edges of field prompts next to left-aligned entry fields so that a narrow vertical column of space is left between the field prompts and their associated entry fields to allow a user to quickly scan the choices in the window.
Allow a user to adjust the size of each column in a window, where appropriate. For example, provide column borders that a user can directly manipulate to change the size of columns.
If a user cannot adjust the width of a column or scroll the column, make the column at least as wide as the widest item in the column or as wide as the column's heading, whichever is wider.
If a user can adjust the width of a column, make the initial width of the column wide enough to display choices of average width.
If the order of columns can be changed, allow a user to directly manipulate each column. For example, allow a user to drag column headings to change the order of columns.
If you provide an information area, place it at the bottom of a window.
If you provide an information area and there is a horizontal scroll bar in the window, place the information area below the scroll bar and above the window border.
If you provide a status area, place it below the title bar and below the menu bar, if a menu bar is provided, and above the rest of the window. For example, place a status area below the menu bar and above column headings in a window.

Essential Related Topics

Supplemental Related Topics


[ Top of Page | When To Use | Guidelines | Essential Related Topics | Supplemental Related Topics ]


Home

Copyright ©. 1991-1999 Interfaced Systems International Inc. Last modified: Saturday, March 20, 1999 11:42:54 PM EST