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

Justin Obara obara.justin at
Wed Nov 10 21:39:24 UTC 2010

Hi Jonathan,

This looks like an interesting take on paged data.

I'm just wondering about your Future possibilities.

> - keyboard plugin to help navigate the grid of thumbnails and perhaps even switch between pages. 

I think we should make sure that the new demo is keyboard accessible with this upcoming release. Also the page links are probably already keyboard accessible if they are just links. 

- Justin

On 2010-11-10, at 4:17 PM, Jonathan Hung wrote:

> 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
> IDRC - Interaction Designer / Researcher
> Tel: (416) 977-6000 x3959
> Fax: (416) 977-9844
> <Inventory-Pager.png>_______________________________________________________
> fluid-work mailing list - fluid-work at
> To unsubscribe, change settings or access archives,
> see

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list