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