Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Panelwarning
borderColor
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.

What is the Pager?

#42773F
bgColor#F4F7F2
borderStylesolid
width65%

What problem are we solving?

Section
Column

Image Added

Allow
Column

Pager

Excerpt

Image Removed

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

 

They

should be able to decide if

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

Currently in Sakai

Sakai has page navigation called "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.

Who are we designing for?

Persona goes here.

Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minLevel2
Section
Column
width50%

Screenshots

Image Removed Image Removed

Column
width50%
Info
title"Pager Demo"

The demo for Pager is not yet available.

Section
Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleInteraction Design
borderStylesolid

Wireframes

Context storyboards

Design pattern

Functional requirements

User testing

Story cards

User Modeling

  • links to relevant Personas used

Accessibility

Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleTechnical Information
borderStylesolid

API

Integration

  • links to integration content. Use excerpts if possible.

Demos

  • links to usable demos and implementations.

Testing

  • nothing yet.

What needs are we meeting?

...

Functional Requirements - Use Cases

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")
  • 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)
  • Remember users' paging settings and save it across visits to the site

How are we meeting the needs?

Additional Information

Roadmap, Known issues, and Task List

  • 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?
  • How do we determine real estate available for page links?
  • How should we calculate page links to display for the mid-range.
  • Where does save function live in cases like gradebook where data has been edited but perhaps not saved before user pages forward?
  • Meta data type formatting -- is this just a configuration for integrators or do we make suggestions?

Working Pages

Technical Working Pages

Design Working Pages

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