Pager Design Rules

Mid-range Display Rules

Purpose

• Display the entire range of pages
• Provide quicker access to pages in the middle
• Display more pages around the current page
• Space out pages that are far away from the current page in a logarithmic fashion
• It would look something like this (the .'s being the page links and | being the current page):
  .          .         .       .   .  . ..|.. .  .    .        .           .               .                        .

Rules

• Always provide page links to the first and last pages
  • 1, T(last)    where T = total number of pages
• Always display the current page as a static text, and provide links to the two pages previous to and the two pages next to the current page
  • n-2, n-1, n, n+1, n+2     where n = current page
• Divide the total number of pages by 6 and round up the number to one of: 5, 10, 20, 50, 100, and 200, to use as the increment. Let's call this increment I, and make i=the next smaller increment below it (e.g. if I=50, i=20). ((( note to self: need to specify how this rounding happens )))
• Display the closest multiple of i smaller than n-2 and larger than n+2. If I is not a multiple of i (e.g. 50 and 20), and if there is a multiple of I that is closer to n-2 or n+2.
• Display the multiples of I on either side of the current page.
• Display all multiples of I ? T.
• The complete list is meant to look like this:
  • 1   I   2I   3I  ...  p    n-2  n-1  n  n+1  n+2    q  ...  xI   (x+1)I   T(last)
  • p = multiple of i or I, whichever is closest to and less than n-2
  • q = multiple of i or I, whichever is closest to and greater than n+2
  • p and q simulate the 'logarithmic' feel without having to actually implement log or complicating the rules further in other ways. Open to other ideas of course.

Spacing Rules

• Place 1 space between a pair of consecutive numbers
• Place 4 spaces between p and n-2, and n+2 and q
• Place 4 spaces between the biggest multiple of I and T
• Place 6 spaces elsewhere

Examples

For example, if you are on page 34 of 193 pages,
193/6 = 32.2 ? 50
I = 50, i = 20
1    20    32 33 34 35 36   40     50    100    150    193

Page 21 of 94 pages,
94/6 = 15.7 ? 20
so our I = 20, i = 10
1   10   19 20 21 22 23   30   40    60    80   94
1   10   15  19 20 21 22 23   25    30   40    50   94

Page 181 of 940
940/6 = 156.7 ? 200
I = 200, i = 100
1    100    179 180 181 182 183     200    400    600    800    940

Page 45 of 96
96/6 = 16 ? 20
I = 20, i = 10
1    20    40   43 44 45 46 47   50    60    80    96

Design Goals

• Allow users to sort the list
• Allow users to filter and view a sub-set of the list
• Minimize screen real estate taken up

Paging Rules (Old)

1) Display 9 page numbers at a time. If the current page is > 5, show the page in the middle and show 4 pages before and after the page. If there are more pages previous/after the 9 pages, show ".."
i.e.
|<  <  1  2  3  4  5  6  7  8  9  ..  >  >|
|<  <  .. 3  4  5  6  7  8  9  10  11 ..  >  >|

2) Current page is NOT a link, shown in black, and bold.

3) Alt text for the symbols are:
|<  Go to first page
>|  Go to last page
<  Previous
>  Next

3) Don't show the |< and >| if all pages are shown
i.e.
<  1  2  3  4  5  6  7  >

4) Allow user to change the page size.
i.e.
Show [dropdown: 10, 20, 50, 100, All] items per page

5) Show where the user is in the list.
i.e.
Viewing 1 - 20 of 1348 wines

6) Place this paging widget at the top and bottom of the page

7) If the total number of items in the list is less than the number of items per page, don't show the page widget.

8) For a roster or any other alphabetically-ordered static list, use filters (described below).

9) Lists that update (e.g. Announcements, Quiz & Surveys, Email Archive) are sorted by date (descending order) by default.

10) When the user sorts the table by another column, the first page of the re-sorted list is displayed.

Filtering Rules 

1) As the user starts typing in the textbox on top of the table, it displays all entries (first/last names) that start with the entered character(s) as a dropdown below the textbox.
2) If there are more than 10 items to be displayed (as user types), display a "more" option at the bottom of the dropdown
3) When the user hits enter, all entries that start with the entered character(s) get displayed in the main table with refreshed paging
4) When the filtered subset is displayed, clicking on a column header will re-sort within the subset
5) Clicking on 'Back to All' link takes the user back to the non-filtered whole set
6) Clearly indicate to the user that they are viewing a subset by explicitly stating (i.e. Results for "mi") AND changing the colour of the page (note: look into other instances where colour is used within Sakai)