Pagination User Experience Documentation

Author: Jindrich Dinga

1. Introduction

This document is the user experience specification for the JavaFX Pagination control.

2. Overview

Pagination is a control that is used for navigation between pages of a single content, which has been divided into smaller parts.

On Desktop, this type of control is usually used in web applications (e.g. for displaying search results or showing mails in a mailbox) to avoid long lists that server and browser would not be able to handle. On other platforms, e.g. touch, page navigation can be used for browsing through single pages of an article or navigation between screens.

3. Interaction Design

Pagination control consists from buttons that represent the content that has been divided into separate pages. Users can switch between pages by tapping number buttons or by tapping Previous and Next buttons. On the first page, Previous button must always be disabled. Once users are on a page other than the first one, Previous button becomes enabled. Similarly to Previous button, Next button must be disabled when users reach the last page.

Figure 1 Navigation represented by numbers

The following picture shows states of buttons used in Page navigation control.

Figure 2 Page navigation states

Since this type of navigation can be used in so many ways, e.g. on touch platform for navigating between screens, application developers must be allowed to use other page indication (e.g. dots, rectangles, or other shape) instead of numbers.

Figure 3 Navigation represented by dots

Note that Pagination control is capable of showing tooltip above the page buttons as well as PageInfo that informs users what page users are on and what is the total number of pages. The PageInfo format is as follows: selected page/total number of pages. In case the total number of pages is unknown three dots (...) appear.

Figure 4 Tooltip and Info page

For page buttons represented by numbers the default setting is: Tooltip OFF, PageInfo ON. For page buttons represented by dots the default setting is: Tooltip ON, PageInfo ON. Application developers are allowed to change this settings as well as change alignment of PageInfo.

If the tooltip is enabled, it should appear over a selected page button immediately after the page is selected. The tooltip should fade in and stay visible for a short time (e.g. 3 seconds), then it should fade out.

On touch platforms, users switch between pages by swiping their finger across the screen in the desired direction or by tapping dots or rectangles.

Note that Touch devices can rotate. Because of this, sizes of Pagination should adjust automatically based on the available mode (Landscape or Portrait).

When using Pagination control, application developers must be able to specify what part of content should fit in one page. Also, application developers must be able to specify how many page buttons should appear in Page navigation. The default number is 10, however, the developer should be allowed to override this number. If end-users resize a window, which contains Pagination control, and the specified number of page buttons cannot fit in the Page navigation shows as many page buttons as can fit. Note that selected page must always be visible in the Page navigation. If there are fewer pages available, the Page navigation must show page buttons just for available pages.

4. Navigation

Mouse Support

The following table describes actions that are performed when users click on:

Touch Support

The following table describes actions that are performed when users tap on:

In case users swipe their finger across the screen:

Directional Keys + OK/Select

The following table describes actions that are performed when users navigate to the page navigation using the arrows keys and press:

Keyboard Support

The following table describes what happens when users press the following keys when the page navigation is focused: