Drag and drop behaviour for the Layout Customizer
Colin Clark
colin.clark at utoronto.ca
Wed Apr 16 22:33:05 UTC 2008
Hello designers,
We've been doing a lot of review and testing of the Layout Customizer
component in preparation for the Fluid Infusion 0.3 release. One of
the things we've been thinking about is the behaviour of drag and drop
in this component.
A couple of months ago, Gary and Shaw-Han did a great job of putting
together some detailed mockups. They're available at:
http://wiki.fluidproject.org/display/fluid/Portlet+Reorderer+Mockups
If you notice, these mockups specify an approach that is very similar
to myYahoo's news portal, available at http://cm.my.yahoo.com/. The
noteworthy features of this approach are:
* the use of a small drag "avatar" (the thing that follows your
mouse during a drag operation)
* a coloured, horizontal bar representing the drop target (the spot
where the thing will land when you let go of the mouse)
Another approach to drag and drop layouts is documented in the Fluid
design pattern for Layout Preview:
http://wiki.fluidproject.org/display/fluid/Drag+and+Drop+-+Layout+Preview
This approach is similar to iGoogle, http://www.google.com/ig.
Noteworthy features include:
* the use of a full-sized, transparent drag avatar that shows the
whole portlet
* a full-sized outlined box for the drop target
* other portlets on the page shift out of the way to show a
realistic preview of how the layout will look
What's the best approach? I'm thinking this is one of those "it
depends" questions. When portlets are similar in size and closely
spaced, the myYahoo approach is probably simpler and easier to
control. When portlets are more widely spaced and may have different
sizes, a full preview of the layout seems more useful.
At the time of the original designs, it's my understanding that we
went with the myYahoo-style interaction because it was immediately
similar to some existing code we have in the Reorderer. On the other
hand, the Reorderer is highly customizable. The dev team tells me that
implementing both behaviours should be relatively straightforward. It
may impact our release date a bit, but should we consider taking the
time to provide an option that will allow for the iGoogle-style of
preview?
I'd really appreciate opinions and advice from designers in the
community.
Colin
---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org
More information about the fluid-work
mailing list