Preliminary redesign of the list reorderer demo

Jonathan Hung jhung at
Thu Oct 28 19:53:01 UTC 2010

Hi everyone,

The list reorderer is due for some TLC in this upcoming Infusion release.

The interaction and the context of use is essentially the same as the
existing demo: someone is planning an event and the planner can change
priority of to-do items by reordering them with the keyboard or mouse.

Notable changes between existing and updated design:
- clearer scenario / context of use.
- When mouse dragging an item, only a shaded box is shown being dragged
along the mouse pointer.
- Keyboard instructions should be presented to the user (the exact design is
still being worked out).
- "grab bars" to imply a sense of items being reorderable.

About the keyboard instructions:

In this design, when keyboard instructions are revealed, the contents of the
page shift down to make room. I'm not particularly set or keen on this
idea. However, having the instructions prominently displayed at the top may
give the wrong impression that the interaction is keyboard only.

Conversely, if the keyboard instructions at at the bottom of the demo, it's
not apparent right away that there is a keyboard option for interaction.

Anyone have thoughts or comments about how best to handle keyboard
instructions, or about this demo's design in general?

- Jonathan.

Jonathan Hung / jhung at <jhung.utoronto at>
IDRC - Interaction Designer / Researcher
Tel: (416) 977-6000 x3959
Fax: (416) 977-9844
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: list-reorderer.png
Type: image/png
Size: 70885 bytes
Desc: not available
URL: <>

More information about the fluid-work mailing list