Last Updated 09.28.03
Contextual Information is view only label/data information that is displayed on a page or
pages of a process. The information displayed is based on a selection or selections made on
a previous page and is helpful to the user to retain context of the selection while continuing
TECHNICAL NOTE: Contextual information is not automated as part of the cabo framework,
but can easily be generated by using label/form layout and a separator line components.
Spec Version # - 3.1
Spec Contributors - Betsy Nute; Mervyn Dennehy
UI Models - all
Example Products - All products
Related Guidelines - Standard Web
Widgets, Content Layout, Separator
Line, Page Stamps
Interaction and Usage Specifications
- Contextual Information consists of:
- View only label/data pair(s) of information
- A Separator Line separating the context
from the specific page content.
- Contextual information is placed directly below the Page Title (first header) on the
page, and is applicable to the entire page.
- Contextual information is content that is based on a user's selection from a previous page. The information help users complete the task as they move from page to page, and ensure that they are acting on the appropriate object.
- Contextual information may not be needed if the related data is concatenated into the page title. For example, if the page title includes a customer name, then there is no need for contextual information with the customer name.
- Contextual information should only be displayed if it is absolutely necessary for a user to
see context (from a previous selection) while performing a task or process. Too much information on the page can
produce clutter and distract the user from completing the task at hand.
- It is recommended to display from 1-3 identifying label/data pairs. It is recommended not to exceed 5-7 label/data pairs to avoid cluttering the page with unnecessary information.
- Label/data pairs may be placed in 2 columns to minimize use of vertical space.
- Contextual information should not be redundant or obvious information. For instance, users do not need to see excessive details about themselves.
Note: Contextual information may appear to the left
of repeating Action/Navigation buttons, which are right-aligned. Depending
on the number of repeating buttons and the length of labels and data, two
column layouts of Contextual Information may be pushed down the page to
allow space for Action/Navigation buttons. See Action
Navigation Buttons for the Entire Page for details on button placement.
- On an Object List Template, a user selects 3 rows/objects to act on. During the
subsequent pages of the process/task, the 3 selected object names appear as contextual information.
- On an Object List, a user selects one row/object to act on. During the subsequent page(s) of the process some of that object's principal attributes are displayed as contextual information.
For example, a manager selects an employee to promote. In the contextual information area on the subsequent page(s) of the task, a few label/data pairs regarding the selected employee are displayed, such as the employee's name, title, and possibly current salary. This context
helps the manager make promotion decisions regarding that employee.
Contextual Information vs. Page Stamps
Contextual information should only be used within a process. Use Page
Stamps for other view-only information, such as user login data, current
date, or space remaining. Page stamps can also be used in place of contextual
information when the number of label/data pairs does not exceed three per
page. The Page Stamps guideline contains a chart comparing these two page
Example Page with Contextual Information
Contextual Information Shown on Step by Step Flow (based on Selection of Row in Object List.)
Contextual Information Shown on Single Page Object (based on Selection of Row in Object List.)
00.00.00 - issue