Drag and drop behaviour for the Layout Customizer

[Colin Clark]

Daphne,

Sorry for the confusion; we haven't renamed all the wiki pages to  
reflect the new Layout Customizer name. The user test results are  
located here:

http://wiki.fluidproject.org/display/fluid/Portlet+Layout+Manager+Results

The results, as I read them, suggest that some participants had  
difficulty determining exactly where their portlet would land. On the  
other hand, this test was performed with a prerelease version of the  
component that was a bit buggier in some respects.

Hope this helps,

Colin

On 16-Apr-08, at 7:33 PM, Daphne Ogle wrote:
> Does anyone know where the user testing results for the layout  
> customizer are?  There doesn't seem to be a link off the main page  
> for the component and I haven't had luck with search (probably don't  
> know what terms to use).
>
> Thanks!
>
> -Daphne
>
> On Apr 16, 2008, at 3:33 PM, Colin Clark wrote:
>
>> 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
>>
>> _______________________________________________
>> fluid-work mailing list
>> fluid-work at fluidproject.org
>> http://fluidproject.org/mailman/listinfo/fluid-work
>
> Daphne Ogle
> Senior Interaction Designer
> University of California, Berkeley
> Educational Technology Services
> daphne at media.berkeley.edu
> cell (510)847-0308
>
>
>

---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org