Locator Element: Record and Page Navigation

General Description

• Common Interaction Principles
• Record Navigation - with Previous/Next links
  • Table Record Navigation with "Show All" Records
  • Table Record Navigation with Large Data Sets
  • HGrid and Tree Record Navigation with Large Data Sets
• Page Navigation - with Back/Next buttons
  • Page Locator Options
  • In Step by Step Processes
  • In Master/Detail and Batch Detail Mode
  • With Side (Level 3) Navigation
• Text Styles and Colors

Guideline Attributes

Interaction and Usage Specifications

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

• Between each navigation method (Previous/Next links or Back/Next Buttons) there may be a locator that specifies the record set or step/page currently being displayed.
• The locator for the current record set or step/page can be either view only text, or include a choice list to move to a different record set or step/page.

Interaction Principles of Record Navigation - Previous/Next Links

• At the first record, the "Previous" text is not a link, the left arrow is disabled, and the record set number is not displayed.
• At the last record, the "Next" text is not a link, the right arrow is disabled, and the record set number is not displayed.
• All other records in the set have active links and arrow icons. Both links and corresponding arrow icons have the same function -- to redraw the page to the previous or next record set of the table.
• When the total number of records is known, the number of rows in the record set appears to the right of the "Previous" and "Next" link. (e.g., "Previous 25" or "Next 25")
• When the next to last record set is displayed, and there are less than 25 rows left, the "Next" link should specify the exact number remaining. (e.g., "Next 14," if only 14 row sets remain.)
• The number of records shown per record set varies depending on predefined application settings and user preferences (the typical default is 25).
• When the total number of records is not known, no numbers will appear with the "Next" and "Previous" links. Totals may not be possible to calculate in certain situations where there may be a performance overhead.
• When a table displays less than the set maximum number of rows (all records are in view), record navigation should be omitted.
• If a choice list is provided for selecting another record set, the table redraws with the selected record set when the user closes the choice list (without requiring the user to press a Go button -- this is an exception to normal BLAF principles). Note that in ADA mode this choice list is replaced by view-only text to avoid shifting screen reader focus back to the top of the page -- replacing the choice list does not violate ADA requirements, as users have alternative methods for navigating to other record sets.
• If the application uses Partial Page Rendering (PPR) technology, the full page is not redrawn when the user chooses the Previous or Next links, or an entry in a choice list. Instead only the table is redrawn. Note that when applications are running in Accessibility mode or in older browsers, PPR is disabled, and the full page is redrawn.
• Record navigation through large data sets in an HGrid or Tree control follows the same general principles as in Tables, but does not include the option to choose from a list of available record sets, and uses vertical arrow icons (instead of horizontal). See HGrid and Tree Record Navigation with Large Data Sets below.

Record Navigation with Show All Records

• The "Show All [TotalRowNumber]" (i.e., "Show All 94") should only be shown when:
• The total number of records is known.
• The total number of records does not exceed 100, or a number that will cause a performance problem when trying to render the page with a table with so many rows and data.
• "Show All [TotalRowNumber]" is NOT defaulted in the record navigation choice list, but is optional.
• When a user first navigates to a page with a table with this feature, the table defaults to showing in sets. The user may select "Show All [TotalRowNumber]" from the record navigation choice list if he/she desires. "Show All [TotalRowNumber]" is the first item in the choice list, but is not the default.
• The show all functionality should NOT be available if it will cause performance problems to render the table with all the records shown on one page.
• Show all, when used, should be the first item in the choice list. (Note: It is not the default, the default should be the first record set when the user first comes to the page.)
• Show all may not be used with large record sets and the "More..." functionality described below.

Table Record Navigation with Large Data Sets

• The list scrolls to show the current record set (#30) at the top; the current record is selected by default.
• Scroll up one entry to display "Previous...", the first entry in the list.
• If the number of remaining record sets does not exceed 28, all remaining record sets are appended
• If the number of remaining record sets exceeds 28, the list includes the next 27 record sets, with "Previous..." at the top, and "More..." at the bottom.

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.
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...".
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.

HGrid and Tree Record Navigation with Large Data Sets

• HGrid and Tree record navigation is modeled on table behavior, and uses "Next" and "Previous" links to move from one set to another.
• The number of records to include in each set may vary depending on application requirements. However, to avoid excessive vertical scrolling or excessive link navigation, the recommended number is ten children per set.
• If the remaining number of records is known, then record navigation links should indicate both the set range, such as 11-20, and the total number of records.
• If the total number of records is not known, then the number in the next set also cannot be predicted. In this case, the set range and total numbers of records are omitted from the links.
• Users may expand more than one parent node containing large record sets. To ensure that the user does not mistake one node for another, record navigation links should include the name of the parent node. See below for exact syntax.
• HGrids and Trees may consist of heterogeneous hierarchies (containing different types of objects, such as regions, vehicles, and trips) or homogeneous hierarchies (all objects have the same type, such as employees). In heterogeneous hierarchies, record navigation links should specify the object type wherever possible.
• For consistency with table record navigation, the first set range should be preceded by a disabled "Previous" link, and last set range should be followed by a disabled "Next" link. In both of these cases, no records can be displayed.

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:

• "ParentName" is required except for:
  • The highest root in the hierarchy.
  • Disabled "Previous" and "Next" links.
• "ObjectType" is optional depending on context.
  • In heterogeneous hierarchies: The object type is required unless:
    • The parent is a container, named after the object type. For example, if the container is named "Purchase Orders" and the children are all purchase orders.
    • The parent contains multiple object types, such as "Purchase Orders", and "Purchase Requests". In this case, use a generic term whenever possible; otherwise use the term "Content" or "Children", depending on which is more acceptable in the context. If none of these options is acceptable, omit the "ObjectType" term.
    • Excessive link length precludes display of more significant data.
  • The object type may be omitted in homogeneous hierarchies.
• "Next" or "Previous" is mandatory.
  • "Previous" always appears at the beginning of a record set range.
  • "Next" always appears at the end of a record set range.
• "SetRange" is required except for:
  • The disabled "Previous" link at the beginning of the first record set range.
  • "Next" links if the number of records is not known.
  • The disabled "Next" link at the end of the last record set range.
• "of TotalRecords" is required except for:
  • The disabled "Previous" link at the beginning of the first record set range.
  • "Next" links if the number of records is not known.
  • "Previous" links if the number of records is not known. In this case show only "SetRange", such as "Previous 21-30"
  • The disabled "Next" link at the end of the last record set range.

1. When the user expands the "Car Division" node, which contains 26 children, the HGrid or Tree displays:
   • A disabled "Previous" link with disabled arrow
   • Car brands 1 through 10
   • The active link "Car Division/Brands: Next 11-20 of 26" with enabled arrow
2. When the user selects the next record set, the HGrid or Tree displays:
   • The active link "Car Division/Brands: Previous 1-10 of 26" with enabled arrow
   • Car brands 11 through 20
   • The active link "Car Division/Brands: Next 21-26 of 26" with enabled arrow
3. When the user selects the last record set, the HGrid or Tree displays:
   • An active "Car Division/Brands: Previous 11-20 of 26" link with enabled arrow
   • Car brands 21 through 26
   • A disabled "Next" link with disabled arrow

Interaction Principles of Page Navigation - Back/Next Buttons

• Page navigation buttons are commonly used with the train component in step by step or linear task flows. See Locator Element: Train, and Step by Step Templates for details and examples.
• Page navigation buttons may also be used with the side navigation (of the tab/navigation component) for a task based process. See Tab/Navigation for details regarding the side navigation.
• Page navigation buttons may also be used in Batch Detail Mode and certain Master/Detail templates.

Page Navigation Locator Options

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:

• The syntaxes for updateable and view-only page navigation locators are the same for each template type and context.
• When a user closes the choice list in an updateable locator, the selected step/page is displayed directly (without requiring the user to press a Go button -- note that this is an exception to standard BLAF principles).
• Next/Back Locator choice lists are replaced by view-only text in accessibility mode to avoid shifting screen reader focus back to the top of the page -- disabling the choice list does not violate accessibility requirements, as users have alternative methods for navigating to other steps/pages.
• Step-by-step Templates:
  • Page titles in page locators usually must be shortened (not truncated) to avoid over-wide choice lists or view-only locators; in general retain only the trailing section of the page title to distinguish it from other pages in the process. The same short page titles may be required for step labels/links in the train at the top of the page.
  • Shortened page titles are optional in view-only page locators, but are required in updateable locators to identify target pages.
  • Next/Back Locator choice lists display all previous steps, the current step, and the next step, but do not show later steps unless the user has jumped back to a prior step. For example, if the current page is step 4 of 10, then the choice list includes steps 1 through 5, but does not include steps 6 through 10. However, if the user jumps back to step 2, the choice list may continue to display steps 1 through 5, since they have been visited.
  • User choices can cause one or more subsequent steps in a process to be skipped. In this case, the skipped steps should not appear in the locator choice list.
  • When the user jumps back more than one step and makes a change, data dependencies may invalidate choices already made in subsequent steps. If processes have such data dependencies, developers must either handle the dependency with a combination of Warnings and Tips, or not allow jumps of more than one step. See the Step by Step (3+) Template guideline for details on data dependencies.
• Master/Detail and Batch Detail Templates:
  • Updateable locator choice lists contain a list of master objects in Master/Detail pages, or a list of detail objects in Batch Detail mode.
  • The choice list can contain up to 29 objects/items, and a "More..." link. When the user selects the "More..." link, the page is redrawn to the 30th object, and the 30th item is shown in the choice list. The choice list now contains: a "Previous..." item as the first item in the list, the next 29 items, and "More...". If there are less than 29 items in the list, the "More..." item does not show in the list.
  • Note the similarities between this choice list behavior and record navigation through large data sets in a table (described above in this guideline)

Detailed Page Navigation Button Configuration for Step by Step Processes

• First Step in Process
  • A "Return to 'X'" link takes the user back to the initiation point of the step by step process. The link is dynamically generated, so will not reflect the hierarchy in the breadcrumbs if the user initiated the process from a different page.
  • Back - does not appear on the first step. "Return to 'X'" is used instead.
  • Step/Page 1 of X - This is display only or choice list text letting the user know the page or step they are on, and how many more are left in the process.
  • Next - This takes the user to the next step in the process.
  • If it is applicable to Submit or Finish the process at the first step, place the Submit or Finish button at the right of other action/nav buttons. See "Final Step in Process" below for details. Also, see the Language in UI guideline for recommended usage of "Submit" and "Finish".
• During the Steps in a Process
  • Cancel - This button cancels the step by step process and all work that has been done, and takes the user back to the initiation point of the process (not the first step.)
  • Back - This takes the user back one step in the process. This may or may not be the last viewed page, depending on whether or not the user last selected a sub page from the step (a button on the step that took them to one other page, and then returned them to the step) or a global button flow from the step (user selected a global button to a global section then returned to the step.)
  • Step/Page 2 of X - This is display only or choice list text letting the user know the page or step they are on, and how many more are left in the process.
  • Next - This takes the user to the next step in the process.
  • If it is applicable to Submit or Finish the process at any step, place the Submit or Finish button at the right of other action/nav buttons. See "Final Step in Process" below for details.
• Final Step in Process (PRIOR to confirmation):
  • Cancel - This button cancels the step by step process and all work that has been done, and takes the user back to the initiation point of the process (not the first step.)
  • Back - This takes the user back one step in the process. This may or may not be the last viewed page, depending on whether or not the user last selected a sub page from the step (a button on the step that took them to one other page, and then returned them to the step) or a global button flow from the step (user selected a global button to a global section then returned to the step.)
  • Step/Page X of X - This is display only or choice list text letting users know they are at the last step in the process.
  • Next - does not appear on the final step prior to confirmation. The "Submit" or "Finish" button is used instead.
  • Submit or Finish - A "Submit" or "Finish" button is used in place of the Next button at the last step in the process. These buttons submit the data to workflow and/or the database. The user is then taken to the confirmation messaging page, unless the completed transaction is obvious in the subsequent page. For example, if the transaction returns the user to a page with a new table row in view, then no confirmation page is necessary.
• Confirmation Page
  (This is a Messaging Template and not part of the process.)
  • "Return to 'X'" - A "Return to 'X'" link takes the user back to the initiation point of the step by step process. The link is dynamically generated, so will not reflect the hierarchy in the breadcrumbs if the user initiated the process from a different page.
  • Printable Page (Action/Navigation Button)- if the page is printable, then this button appears. It takes the user to the printable page flow. See printable page flow guideline for details.
  • Action/Navigation Button - Depending on the context of the application, and/or whether or not the step by step process was initiated from within an application, from another application (like the portal) or from an overview page within the application, it may be appropriate to have a context specific action/navigation button on this page that navigates the user to a specific area that is appropriate for the user task model. This is not the same place as the "Return to 'X'" link.

In Master/Detail and Batch Detail Mode

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

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

Open/Closed Issues

Open Issues




Closed Issues

02-Jun-2004: The "Return to X" link can be dynamically generated, and so may not match breadcrumb hierarchy.