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

[James William Yoon]

Hi Jon,

The demo looks good! I have a couple of questions though:

1. What motivated the (many) changes between your last pager demo design and
this one? (especially wrt all the new features introduced in this demo;
e.g., range tooltip, detail area in the thumbnail view, multiple view modes,
etc.)
2. Could you elaborate on your thoughts on moving toward a single demo
incorporating many/most/all of the Infusion components? Is the suggestion to
ultimately have a single demo instead of multiple ones?

James

On Wed, Nov 10, 2010 at 4:17 PM, Jonathan Hung <jhung at ocad.ca> 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 ocad.ca <jhung.utoronto at gmail.com>
> IDRC - Interaction Designer / Researcher
> Tel: (416) 977-6000 x3959
> Fax: (416) 977-9844
>
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20101111/ec778674/attachment.htm>