Layout reorderer redesign - "Gadget" portal

Jonathan Hung jhung at
Fri Oct 29 16:35:54 UTC 2010

Hi everyone,

I have started designing an update to the existing Layout Reorderer demo (
This new design takes the example further by putting it in context of a
portal website with locked and movable portlets, complete with mock content,
ads, links, and images (basically content you would expect to find in a
portal site).

The interaction stays essentially the same as in the existing demo:
- the user can drag and drop portlets around the page.
- the user can use the keyboard to focus different portlets, and move them.
- content can not be placed above locked portlets.

Please take a look at the attached design and let me know your thoughts. In

1. Do you think it's clear that some portlets are movable and locked?
2. Are keyboard instructions logical and easy to follow?

Note: There are some interactions not shown yet (i.e. what happens if the
user attempts to move a portlet above locked content).

I will send updates to this design to the mailing list.

Thanks all!

- 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: Layour-reorderer.png
Type: image/png
Size: 167990 bytes
Desc: not available
URL: <>

More information about the fluid-work mailing list