Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Warningpanel
titleThis Design is Still In Progress

These designs are still a work in progress, and are actively being worked on. While discussion and comments are welcome, please treat this material as such.

Description

Allow
Section
borderfalse
Column
width65%
borderColor#42773F
bgColor#F4F7F2
borderStylesolid
Section
Column

Image Added

Column

Pager

Excerpt

The Pager allows users to break up long lists of items into separate pages.

 

They

should be able to decide if
  • Allow users to decide how many to show on each page, allowing them to break up long lists of information into several pages..  The best option will depend on a variety of dynamic circumstances (how many in list, what they are doing with the items, whether they need to see the items globally...). Allow users to "show all." Remember users last setting (from previous session).  This should be specific to the instance of the paginator. (see #1 above)
  • Allow users to "jump to"

    may decide whether or not they want paging, and how many results are displayed per page.

    Sakai has page navigation now -- "List Navigator UI Component" in the Sakai style guide.  The default for how many items to show on a page varies.  How many makes sense depends on context, how many total items, what type of items, etc.  The idea here is to make this navigator remember the users last setting (across sessions).  That way they set if for what makes sense given the current situation and it is persistent.  As things change for them they simply change the setting to meet current needs and again it's persistent until they need to change it again.  Currently this is a "one size fits all" default and many users have to change it every time they visit a particular page.

    Problems with current Sakai widget 

    Problem

    Potential Solutions

    Often users change the default # of items to show every time they visit a particular page/tool.

    1. Have Sakai remember the # of items set by a user on each page.

    There is not a good way to jump to an item in an alphabetical list

    2. Create an alphabetical pager, or single page with all items & "jump to" links at the top of the page (e.g. http://ist.berkeley.edu/services/alphabetical.html)

    Users cannot filter to reduce the size of the list

    3. Determine & implement needed filters on individual lists.

    Current widget is displayed even if the number of items is less than is required for paging

    Do not show widget when there is only 1 page.

    Widget takes up significant (extremely valuable) real estate at top of page.

    Make widget smaller.

    Use Cases / Requirements for new component

    Features

    • Allow users to change the number of items shown per page
    • Allow users to jump to the first, last, and the "middle" pages easily
    • Allow users to jump to an item or a certain set of records (e.g. students with a last name starting with "G")
    . (see #2 above)Provide other methods of filtering large sets of records into smaller sub-sets (e.g. associated filter) (see #3 above)
    • Be aware of the length of list and do not display widget when there is only one page
    • Show users how many items there are and where they are in the list (i.e. viewing 11 - 20 of 2,356)

    References / Competitive Analysis

    Note: See attachment: Paging-Design-Examples.pdf

    Note:   Many of the below are for search navigation so should be used strictly as a reference for more robust web application pages where users need to actually do something with the items in a list (other than just choose one).

    Item Navigation (long list of items users may need to do something with) 

    • Sakai's "List Navigator UI Component" in style guide & Item Pagination design pattern in the Sakai Design Pattern Library
    • "Item Pagination" - Yahoo design pattern, http://developer.yahoo.com/ypatterns/pattern.php?pattern=itempagination#
    • gmail paging
    • netflix.com - no paging is just a long scrolling list
    • In this case we are probably giving the user the wrong thing when we think of giving them a list that big.  If they are looking for something
      in a huge list, things like a user or site or email, probably the first step should be to offer them a way to search or filter the list to help
      them narrow things down and find what they need, without having to wait for whole thing to load up.  I suppose there might be some cases where
      they do want a whole long list, maybe to print the enrollment list for their course, but then paging can make that more difficult as well. - Peter Knoop

    Search Navigation

    Informal User Survey

    Since I (Erin) don't have easy access to Sakai users, I surveyed my friends to get some perspective on paging other than my own. This may be a skewed view from a more tech-savvy set of users who aren't familiar with Sakai at all (but are with web in general and paging specifically). With that said, here are my findings.

    In summary, many users finds it bothersome to click through multiple pages to view a list of items. Users will often set the number of items per page to the maximum to see more items at once. In a list where newer items gets added to the top of the list (email inbox, announcement pages, etc.) users tend to care less about the number if items displayed per page, because they are typically only concerned with the new items, which are all shown in one page. In a list such as the search results, where users are looking for particular items, more items per page is preferred. In an alphabetically ordered list (roster, address book, etc.), allow filtering (narrowing down the list as user types in more characters), unless paging by alphabet can be provided (problematic when the user re-sorts with a different column).

    Wiki Markup
    •    \[Referring to their email inbox\] "I think by default it was 25 or something.... and I think that's too little."
    •    "I don't like having to scroll thru multiple pages ever...I like seeing everything at once"
    •    "I set it to whatever's the maximum."
    •    "I leave it at the default."
    •    "Have u used the Google Reader? RSS. I like that. Loads more dynamically as you scroll down."
    •    "I put eBay to the max of 200. It is by default 50 and I hated it. GMail I do not care about the size of 50 because I do not get more then 50 emails a day and they are sorted by most recent first. On eBay there are more then 50 new listings each day."
    •    "I personally prefer long list on one page to multiple pages."

    Page Navigation Design

    Paging Rules 

    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  >

    Wiki Markup
    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)

    Design Mockups 

    Design1:
    Image Removed

    Design 2: the total number of pages is shown
    Image Removed

    Design 3: the first two and last two pages are always shown
    Image Removed

    Design 4: text box allows user to type in the page they want to get to. Total number of pages is shown.
    Image Removed

    Slider design: The number of items per page can be adjusted by stretching/shrinking the slider OR selecting a number from the dropdown at the top right.
    Image Removed

    Discussions and Open-ended Questions

    • User would like to see how many students (or announcements, assignments, etc.) there are, rather than how many pages of those items there are
    • Symbols such as |<, <, >, >| are frequently used in paging. But are they sufficient, or do they need to be accompanied by wordings such as "Previous" and "Next"? If so, what do we call |< and >|?
      Depending on the context, |< could be called either "First" or "Newest", >| could be called either "Last" or "Oldest". Are there any other cases?
    • Should each list remember what the user set as the preferred page size (number of items per page)? Or should there be a global setting for this that would affect all of the tables?

     Where Page Navigation is Currently Used/Needed within Sakai

    Announcements:
    Image Removed

    Resources:
    Image Removed

    Assignments:
    Image Removed

    Quiz & Survey
    Image Removed

    Gradebook:
    -Overview:
    Image Removed
    -Roster:
    Image Removed

    Email Archive:
    Image Removed

    Forums:
    -Class Responses:
    Image Removed

    -Statistics:
    Image Removed

    Column
    width35%
    Panel
    borderColor#321137
    bgColor#fff
    titleBGColor#c1b7c3
    titleTable of Contents
    borderStylesolid
    Table of Contents
    • Remember users' paging settings and save it across visits to the site
    Section
    Column
    width65%
    Include Page
    Progress Indicator - Pager
    Progress Indicator - Pager
    Column
    width35%
    Panel
    borderColor#321137
    bgColor#fff
    titleBGColor#aab597
    borderStylesolid
    titleStatus

    This component is in Preview status

    Panel
    borderColor#848484
    bgColor#EFEFEF
    titleBGColor#CCCCCC
    borderStylesolid

    Design

    Integration

    Demos

    Latest Stable Release (v1.2)

    Nightly Build