Another pager design - the start of the One Demo to Rule Them All?

[Jonathan Hung]

Hi everyone,

After discussions with Colin, Jess, and Jen Bourey, I have created a new
design for Pager. The scenario presented is an inventory system for a
hardware store where the user can browse the items currently in stock, and
find out the price, quantity, and specs for each item. Attached is an image
depicting the general overview of the interface to accompany the description
of the design below.

Your feedback is very much appreciated, especially since this is a
significant departure from our existing Pager demo.


Notable features of this design:
- Annotated pager links, including a graphical tooltip showing small
thumbnails of the first and last item on that page.
- Data driven model which updates dynamically.
- Delete function which removes an item from the database, and the UI
updating accordingly
- Tabular "Detailed View" and non-tabular "Thumbnail View" showcasing how to
use pager in a table and in any other container.
- Ability to sort items by different criteria.
- Sorting by selecting the column header in Detailed View, or by selecting
the sort order in a drop-down selector in Thumbnail View.
- User selectable items per page (10, 20 or All items).
- Mixed content in pager data: images and text.

The interface is divided into 3 main logical components:
- View control that switches between a thumbnail view and a detailed view.
- Pager control that shows the list of page links and items to display per
page.
- Data region which displays the items

The View control and Pager control are consistent regardless of the view the
user has selected - located in the same place and performs the same action
each time. The Data region, however, changes depending on the selected
view.

In the thumbnail view, the Data region is composed of two parts: the item
grid, and the item details pane. In the item grid, each item is presented as
an image (i.e. the record entry for a hammer will appear as a 65x65 pixel
image of a hammer). If displaying 10 items per page, the item grid will show
10 thumbnails of items. Selecting an item from the item grid will display
that item's record entry in the item details pane. So if the user has
selected the hammer from the thumbnails, the details pane will show it's
name, quantity, price, and specifications. Selecting a different item will
replace the previous item in the details pane. Only one item can be selected
at a time. At the bottom corner of the details pane is a Delete link which
will remove the item from the system, and the interface will update itself
to show the change. At any time the user can change the sort order of the
thumbnails according to name, quantity, or price by using a drop-down
selector.

The other view available, the detailed view, is more like your traditional
implementation of pager using a table presentation. The columns are: Name,
Quantity, Price, and Specification. Each row will represent an item in the
database and will show the image of the item, the name, quantity, price, and
specification. A special final column will have a link to delete the item /
row from the table (i.e. each row will have a Delete link).

The page links will feature annotations if hovered or focused with the
keyboard and the content of the tooltip will change depending on the sort
order.
- If the data is sorted by name, the annotation will show a tooltip that
includes the names of the first and last items in the page, as well as the
two thumbnails for the items.
- If the data is sorted by quantity, the tooltip will show the quantity of
the first and last item on the page (i.e. "Quantities 24 to 32").
- If the data is sorted by price, it will show the price of the first and
last item on the page (i.e. "Prices $1.99 to $4.99").


Future possibilities. The Uber Demo!
Going much further ahead, this demo can be extended to incorporate many
other Infusion components:
- inline edit to change record information
- progress to simulate deletion (and a chance for the user to cancel a
delete)
- reorderable columns in the Detailed View
- ability to add new items to the database and use the Uploader to attach
images
- keyboard plugin to help navigate the grid of thumbnails and perhaps even
switch between pages.

Can anyone else think of other Fluid components we can incorporate into this
design? :)

Once again, feedback is appreciated.

Have a great day everyone!

- 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/20101110/0c3f29a8/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Inventory-Pager.png
Type: image/png
Size: 166658 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101110/0c3f29a8/attachment.png>