Locator Element: Record and Page Navigation

Last Updated 09-Jun-2004

General Description

Navigation through records of data in a table (by choosing Previous and Next links), and navigation through steps of a task or application (by choosing Next and Back buttons) have similar interaction properties, but are rendered differently in the UI to distinguish their functions.

When an HGrid or Tree control contains a large number of records within a single node (usually more than 10), these components also provide Previous and Next links modeled on Table record navigation. Technical Note: Hierarchical record navigation locators for large data sets and updateable page locators will be included in a forthcoming revision of the UIX framework.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Nute, Mervyn Dennehy
UI Models - all models
Example Products - all products
Related Guidelines - Tables, Action/Navigation Buttons, Tabs (Level 3), Interapplication Navigation Methods, Locator Element: Train, Step by Step Page Templates, Step by Step Page Flows, HGrid Templates, Tree, Master/Detail Templates, Batch Detail Templates

Interaction and Usage Specifications

Common Interaction Principles Between Record Navigation - Previous/Next Links and Page Navigation - Back/Next Buttons


Record navigation is commonly used to navigate through records of data (typically in a table) by selecting the Previous/Next links. When selected, the current page is redrawn to display the next set of records. The Back/Next buttons are used to navigate between related pages in a process, a sequence of pages, or through individual line details (Batch Detail Mode).

Interaction Principles of Record Navigation - Previous/Next Links


When a user chooses a Previous or Next link in a table, the page is redrawn with the previous or next record set, such as records 26 through 50 of 223. For more examples of record navigation with a table component, see the Table Guideline

Record Navigation in a Table
Table showing number of current record and total number of records

Record Navigation with View Only Information
next/previous picture

Interaction principles for record navigation are as follows: Record Navigation in a Table with a Choice List
Table showing number of current record and total number of records, and a choice list to select another set of records

Record Navigation Using PPR
Record Navigation and PPR

Navigation Through Numbered Records with a Choice List
next/previous picture

Navigation Through Dates with a Choice List
next/previous picture

For more information on using a choice list to navigate through dates, see the Date Picker (Calendar) guideline.

Record Navigation with Show All Records


In certain cases, when the total number of records of a table is low, and a user wants to see all records versus viewing the records in sets, an optional item may be added to the record navigation choice list to allow the user to see all records. Below are heuristics for usage of this element: Record Navigation with "Show All [TotalRowNumer]" in the Choice List
Record Nav choice list with Show All

Flow: "Show All [TotalRowNumer]" in Record Navigation
Record Nav choice list with Show All Flow

"Show All [TotalRowNumer]" Can Not be Used with "More..." in Record Navigation
Show All cannot be used with More

Table Record Navigation with Large Data Sets


Record navigation choice lists should not exceed 30 entries. When large data sets are retrieved, choice lists display the first group of 29 record sets followed by "More..." If the user selects "More...", the page, or table (if PPR is used), refreshes showing record set #30 in the choice list field, and corresponding data in the table. When the user reopens the choice list, it refreshes with up to 30 entries, depending on the number of remaining record sets: The following series of images illustrates use of a choice list to navigate through a large set of records.

1. The user opens the choice list to select and view each record set from the first group of 29 record sets.   2. After viewing the 29th record set, the user reopens the choice list, and chooses "More..." to continue to the next record set.
next/previous picture with large data set   next/previous picture with the selection More...
   
3. The page is redrawn with the 30th record set. The user then reopens the choice list to display the next group of record sets; the list scrolls to display the current record set at the top.   4. To review one of the prior record sets, the user reopens the choice list, scrolls up to the top, and selects "Previous...".
next/previous picture with second group of record sets   next/previous picture with the selection Previous...
   
5. The last record set in the first group (#29) is now displayed. If the user reopens the choice list, the list now displays the first group of record sets, and is scrolled to display the current record set in the next-to-last position. The user can now select any of the record sets from the first group, or choose "More..." to select record sets from the second group.    
next/previous picture showing last record from first group of record sets    

HGrid and Tree Record Navigation with Large Data Sets


HGrid and Tree components are used to display hierarchical data. When a node contains many children at the same level, it is not practical to display the entire list within the HGrid or Tree at the same time. In this case the BLAF standard is to display sets of records and to provide record navigation controls within the hierarchy to move forward and back through the record sets. The same record navigation model is used for both HGrid and Tree components.

Navigation within an HGrid Record Set


General Principles of HGrid and Tree Record Navigation:
Navigation within a Tree Record Set
(Homogeneous employee hierarchy where number of records is known)

HGrid/Tree Record Navigation Syntax: The following syntax is used for all active record navigation links. Usage and exceptions are noted below:

{ParentName[/ObjectType]:} {Next | Previous} [SetRange] [of TotalRecords]

Examples:
USA/States: Next 11-20 of 50 (full syntax)
Northeast/Trips: Previous 21-30 of 75 (full syntax)
Renault Clio/Engines: Next 11-15 of 15 (full syntax)
Mary Black: Previous 1-10 of 12 (homogeneous hierarchy -- "employee" object type not included)
Mary Black: Next (homogeneous hierarchy -- unknown number of records)
Product Marketing: Next (homogeneous hierarchy of employees -- unknown number of records)

Syntax Usage Notes:

Tree without Record Set Total
(Branch of homogeneous tree hierarchy where number of "contacts" is NOT known)


HGrid Showing Last Record Set
(Heterogeneous HGrid where total number of records is known)


The following example sequence shows the order in which links and records are displayed. Note that this sequence is drawn from the "Car Division" example shown in the image above. The same order would apply if this data were displayed in a Tree control.
  1. When the user expands the "Car Division" node, which contains 26 children, the HGrid or Tree displays:
  2. When the user selects the next record set, the HGrid or Tree displays:
  3. When the user selects the last record set, the HGrid or Tree displays:
HGrid with Two Levels of Record Navigation
(Heterogeneous HGrid with record navigation at both parent and child levels)

Interaction Principles of Page Navigation - Back/Next Buttons


Page navigation buttons are commonly used in step by step processes (2 step and 3+ steps), and may be used in processes that are non-linear (using side navigation). They are also used for viewing detail pages in sequential or non-sequential mode, in certain Master/Detail pages, or Batch Detail Mode. In each case the buttons navigate to another page.

The page navigation - Back/Next buttons follow the same principles as other page level action/navigation buttons, including standard order layout. See the Action/Navigation Buttons guideline for details on Page Level Button Order and Visual Specifications of the directional button shape used for Next and Back buttons.

Page Navigation Locator Options


The page navigation locator element (between the Next and Back buttons) can be view-only text or updateable (a choice list), depending on the type of template and the number of steps/pages in the process.

Example of Next and Back Navigation Buttons with Read Only Step Indicator in Step by Step Process

back/next buttons picture

Example of Next and Back Navigation Buttons with Updateable Step Indicator in Step by Step Process

back/next buttons picture with choice list

Either View-only or Updateable Back/Next locators may be used in Step by Step (3+) templates, Batch Detail templates, and Master/Detail templates. Only View-only Back/Next locators should be used with Object templates with Side Navigation, as these templates contain persistent links. The following table shows the contexts in which the two types of page locators should be used with each template:

Template Number of Steps/Pages Type of Locator Contents of Choice List
Step by Step (3+) Four or less View-only n/a
Five or six View-only or updateable, depending on complexity of step dependencies All visited steps and Next step
Seven or more Updateable (recommended), or view-only, depending on complexity of step dependencies All visited steps and Next step
Master/Detail and Batch Detail Mode Four or less View-only n/a
Five or six View-only or updateable, depending on what is used elsewhere in the application Up to 29 records, and "More..." link if the total exceeds 29
Seven or more Updateable Up to 29 records, and "More..." link if the total exceeds 29
Object Template with Side Nav. n/a View-only (Side Nav already provides persistent links) n/a


Note: The guidelines for use of Updateable Next/Back locators in step by step processes also apply to train interaction. If a step by step process features an Updateable Next/Back locator, it should also feature an interactive train, and vice versa.

Page Navigation Locator Syntaxes: The syntax used in page locators depends on the type of template and the context in which it is used. For any given template/context, the syntax remains the same regardless of whether the page locator is view-only or updateable. The following table shows all syntax forms:

Template Context Syntax Examples
Step by Step (3+) Linear step by step (wizard) "Step {Number} of {TotalNumber} [: Shortened Page Title]" "Step 2 of 9: Select Employees"
Non-linear process "Page {Number} of {TotalNumber}: {Shortened Page Title}" "Page 2 of 14: Part XYZ"
Master/Detail and Batch Detail Mode If object names are very long "Page {Number} of {TotalNumber}" "Page 2 of 134"
If object name can be displayed "{ObjectName} ({Number} of {TotalNumber})" "Model XS19W (14 of 132)"
If no total number is available "{ObjectName} ({Number})" "Model XS19W (14)"
Object Template with Side Nav. All "Page {Number} of {TotalNumber}" "Page 7 of 9"


Page Navigation Locator Implementation Details:

Detailed Page Navigation Button Configuration for Step by Step Processes


Note: For details on save model behavior in a step by step process, see the Save Model guideline.

Step by Step Next-Back Button Configuration


Step by Step Next-Back Button Configuration with Choice List


Example of Page Navigation (Next/Back Buttons) Used in a Step by Step/Linear Task Template
The next and back buttons are used in conjunction with the Locator Element: Train component to navigate a user through steps in a linear or sequential process. See Step by Step Page Templates and Step by Step Page Flows guidelines for more examples.
step by step template, next/back buttons with train

In Master/Detail and Batch Detail Mode

Page level navigation buttons including a "Cancel", "Back", "Next" and "Finish" button to allow the user to navigate between single master objects or detail objects. (The page level button configuration is repeated at the top and bottom of the page. There may be other page level action/navigation buttons depending on the context. Additional buttons are located between the "Cancel" and "Back" buttons. Choice list content options are shown below:

Example Option when Object Names are too Long


Example Option with Object Names


Example Option with Object Names but without Total Number


For more information on Master/Detail Templates and Batch Detail Templates, see the relevant guidelines.

Next/Back Buttons Used with Side (Level 3) Navigation


Next and Back buttons can be used in conjunction with side navigation. The task flow in this example is linear in nature, but may not necessarily be a forced linear process. The next/back buttons help imply linearity to a set of steps in a task, but do not necessarily force a user through the sequence. For more information about navigation options, see Tab/Navigation.

Example of Next/Back with Side Navigation
Image of Level 3, Step by Step navigation method

Visual Specifications

Note: Next/Back/Skip/Continue/Review Buttons are the only Action/Navigation Buttons that are not rounded on both sides. See Action/Navigation Button guideline for details.

Text Styles and Colors



Below are text styles and colors for the Next and Previous locator element. Note that choice list text in the updateable locator conforms to choice list standards.
  Active Disabled Text Size/Style
Next/Previous Text Color Brown (Text will be a link); #663300 Very Dark Beige; #999966 Arial, 9pt (CSS), Regular
Next/Back Buttons Action/Navigation Button with Active Look disabled button do not appear for page navigation Action/Navigation Button text standards
View Only Step or Record Number
(i.e., "Step 2 of 5", or "1-25 of 275")
Dark Blue; #336699 n/a Arial, 9pt (CSS), Regular

Open/Closed Issues