Infusion Pager demo update - requesting feedback prior to implementation.

[Jonathan Hung]

Hi everyone,

I have attached images of an updated design for the current Pager demo (link
to current demo:
http://build.fluidproject.org/infusion/demos/pager/html/pager.html). The
functionality remains the same but the context of use is a bit more
specific. Notable changes:

- Emphasized the context of student records.
- Increased the number of records being displayed to better demonstrate
gapped paging ability.
- Removed editable text field.
- Annotated page links.
- Sortable records and columns.

This demo closely resembles the design solution featured on the Pager
component page:
http://wiki.fluidproject.org/display/fluid/Pager+Design+Overview

The file Pager-01.png shows the overall design and the interaction
specifically related to selecting columns and sorting.
The file Pager-02.png shows implementation details such as CSS styling and
layout.

Detailed description of sorting selecting and columns:

The demo features tabular data in multiple columns. Each column can be
selected to become the key in which all results are sorted, and sort the
results in ascending / descending order.

- If user selects column header, and column is already used to sort
results, then nothing happens.
- If the user selects the sort order icon on a column currently used to sort
results, then the ordering of results revereses based on that column.
- If user selects the header area (not the sort icon) of a column and that
column is not used to sort, then focus will be changed to that new column
header, and the rows be sorted by that column’s existing sort direction.
- If user selects the change sort order icon on a column that isn’t
currently being used to sort, then focus will be changed to the sort order
icon in that column, and the sort order will reverse according to that
column.

These interactions are the same for both mouse and keyboard.

Please let me know what you think of this design (issues, thoughts,
concerns). We hope to start work on implementing this shortly after getting
feedback!

- Jonathan.

---
Jonathan Hung / jhung at ocad.ca <jhung.utoronto at gmail.com>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101108/a65b9617/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Pager-01.png
Type: image/png
Size: 127839 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101108/a65b9617/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Pager-02.png
Type: image/png
Size: 78594 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101108/a65b9617/attachment-0001.png>