Content Layout Templates

General Description

• Spacing Of Various Page Contents
• Page Layout Of Standard Web Widgets
  • Label/Data Pair, Combination and Group
  • Single Column
  • Two Columns
  • Two Columns With Spanning
  • Various Standard Web Widget Combinations
• Content Layout and PPR
• Nested Label/Data Layouts
  • Label/Data Group With a Nested Label/Data Group
  • Single-Column Group Nested Within a Radio Group
  • Multiple-Column Groups Nested Within a Radio Group
  • Nested Group In a Two Column Page Section
• Horizontal Scrolling

Guideline Attributes

Interaction and Usage Specifications

Spacing of Page Contents

• A margin is required between the browser edge and page contents for readability. This is provided automatically by the browser.
• When a browser window is resized, many components dynamically resize with the window, but some spacing and margins remain relative, and some should remain fixed. For example:
  • relative spacing when browser window resizes:
    • spacing between headers/content, subheaders/content, and subsubheaders/content
    • margin spacing of headers/subheaders/subsubheaders
    • margin spacing of browser edge and entire page contents
  • fixed spacing when browser window resizes:
    • spacing between label/data
    • spacing between page contents and top page components
• The following components have spacing built into them:
  • Breadcrumbs
  • Train
  • Separator
  • Quick Links (on top of page)
  • Page Title / Subheaders / Subsubheaders
  • Instruction text (below headers)
  • Message Boxes
  • Ski

Visual Examples Of Spacing With Measurements For Common Page Components

Page Layout of Standard Web Widgets

• Pair: A single standard web widget or data associated with a label.
• Combination: A set of different web widgets associated with label(s).
• Group: A collection of label/data pairs and combinations. (Note: This type of group is not the same as a radio or check box group. See Standard Web Widgets for radio/check box group definitions.)

• Alignment: For label/data pairs or combinations, labels are aligned right, data (or interactive widget such as text field) is aligned left. The gutter between label/data pairs or combinations may not line up between sections of content (sections are separated by subheaders or subsubheaders).
• Columns: Label/data pairs, combinations or groups can exist as a single column or two columns within a page or section. These columns should have a minimum margin width of 20 pixels from the left edge of the section. As a single column layout, the label/data group is positioned so that the label/data spacer is aligned to the center of 75% width of its section. In a two column layout, the gap that separates the two columns (also known as the "gutter") should have a minimum width of 12 pixels and a relative maximum width of 5% browser window width.
• Spanning: Label/data groups can contain an updatable or view-only text area field that spans across columns. This is used when a lengthy amount of information needs to be entered and displayed, such as a description within a text area. When used within a nested group containing multiple columns, the spanning text area should be placed at the bottom of the group.
• Tab Order: The tab order of label/data groups is from top to bottom within a column, and from the leftmost column to the rightmost column when more than one column is present. The tab sequence completes one section of content before tabbing to the next section. (Sections are divided by sub/subsubheaders.) In addition, if a spanning text area exists in a label/data group, it should be last in the tab order of its group. This order is used based on the following reasons:
  • Label/data columns can spread far apart when the page's window is sized, making reading from left to right difficult.
  • Varying types and combinations of label/data in different columns can result in undesirable large areas of white vertical space within the page.
• Combinations of Label/Data Pairs: Standard web widgets are commonly grouped together.
  • Common configurations include:
    • Text field with radio items, check box items, or choice list
    • Choice list with text field or choice list
    • Check box with field or choice list
    • Radio Item with field or choice list
  • Principles for combining standard web widgets in groups are as follows:
    • The label for the primary widget acts as a group label and must quantify the entire combination of widgets.
    • If the primary widget of the combination is a radio or check box item, and it is associated with a field or choice list, then the radio button or checkbox will auto-select when the field or choice list is selected.

Visual Examples of Standard Widget Layouts

Content Layout and PPR

• Controlling fields must be placed above dependent content (fields, widgets, tables, or HGrids).
• Controlling fields can be used in many different ways, including:
• Content-specific: For example, selecting "Employee" in a controlling field in an HR application would display only employee-specific fields (hire date, review date, and so on). Conversely, selecting "Manager" would display manager-specific fields (number of subordinates, level of signature authority, and so on).
• UI Modes: For example, an application may provide the ability to switch a table from View-only mode to Update mode, with different options for each mode. See the HGrid Flows guideline for an example.
• The following web widgets may function as controlling fields:
  • Choice lists
  • Radio groups
  • LOVs
  • LOV choice lists
• Depending on the selection in the controlling field, dependent fields may be added, removed, change content, or remain unchanged. See the images below for examples.
• When dependent fields change, associated Hint text may also change.
• PPR should be avoided when most of a page's content needs to be redrawn, or time-consuming queries are needed to generate/refresh the content.
• PPR is disabled on older browsers, and when applications are started in accessibility mode.
• If PPR is not used, a "Go" button is required to reload the page. In this case, it is also recommended to place controlling fields near the top of the page to avoid scrolling on page reload.
• For more information, see the Partial Page Redraw (PPR) guideline.

Nested Label/Data Layouts

• A label/data group can be a standalone group or nested. Typically a group is nested within a single radio item that is part of a radio group, or within a check box item that is part of a check box group.
• In nested groups, each of the inner group has its own group label, typically this label is the parent radio item or check box item.
• If a widget within the nested group is selected or altered, the parent radio item or check box item will auto-select.
• A radio group should be in single column when it contains a nested group.
• Nested label/data groups can be oriented vertically as a single column or horizontally in multiple columns. When the group is oriented vertically, the labels are left aligned, followed by the data or widget. When the group is arranged horizontally, the labels in each column are right aligned and the data or widget is left aligned.
• Label/data groups can be nested as a single column when:
  • The page or section layout is either one or two columns;
  • Labels and field/data/widget in the nested group are too wide for multiple column layout;
  • A combination of different widgets exist in the nested groups.
• Label/data groups can be nested in multiple columns when:
  • The page or section layout is a single column;
  • Labels and field/data/widget in the nested group are short;
  • Minimizing vertical spacing becomes important.
  • Note for a multi-column nested group:
    • There should be no more than 3 columns as to prevent horizontal scrolling.
    • Different widget combinations should be avoided when nested groups are in multiple columns

Visual Examples of Nested Label/Data Layouts

Horizontal Scrolling

• Horizontal scrolling occurs when certain contents within the page extends beyond the width of the page.
• BLAF guidelines are designed for a maximum screen width of 1024 pixels, so tests of horizontal scrolling should be conducted at 1024 x 768 screen resolution, or on a higher resolution screen with a background image that shows these boundaries. See Browser and System Requirements for the rationale behind this limit.
• Usability studies show user errors when elements are scrolled off screen, so horizontal scrolling should only be permitted when there is no other viable alternative.
• To avoid horizontal scrolling, redesign page content so that it fits well within the 1024 pixel-wide window, including allowances for vertical scroll bars, translation, etc. If necessary, redistribute content over several pages to avoid both horizontal scrolling and page clutter.
• The following conditions can cause horizontal scrolling:
  • Too many tabs in the tab bar
  • Too many global buttons
  • Table contains too many columns to fit width of page
• When too many tabs are present within a tab bar, the tabs extend beyond the width of the browser window along with other navigation components such as global buttons and global headers. Page level action/navigation buttons do not extend but remain in view based on the in browser window size.
• When too many global buttons are present, they extend beyond the width of the browser window along with other navigation components such as the tab bar and global headers. Page level action/navigation buttons do not extend but remain in view based on the browser window size.
• When table contents are less than or equal to 100% of browser window, table controls and table columns at each end align.
  Note: It may be appropriate to set a table width to less than 100% if there is not a lot of data in the table.
• When table contents exceed width of browser window, the table columns will extend outside of table controls and beyond the browser window. Page level action/navigation buttons only extend to the width of the browser window. The user will scroll the browser window horizontally to view the extended columns.

  Visual Examples of Horizontal Scrolling From Various Components

  

  Open/Closed Issues

  Open Issues

  
  00.00.00 - issue
  

  Closed Issues

  
  00.00.00 - issue