Drag and drop behaviour for the Layout Customizer

Wed Apr 16 23:54:06 UTC 2008

Thanks Colin!

Looking at the results it does look like users had difficulty  
understanding where the portlet would land based on the summary:

"Drop Target Indicators:

     * Green bar is too small and not being noticed enough.
     * Maybe make it thicker and with an arrow indicating where  
portlet will go."

Perhaps we could include the bar and make it thicker along with the  
igoogle dotted outline pattern?  Not being involved in the testing,  
it's difficult to understand exactly where the hang up was for  
participants.

It looks like the link is broken to the original designs (off the  
testing page Colin identified below).   Assuming we have it someplace,  
we could do some additional testing with the new design and an updated  
version of the old one.  Since so much changed between designs I'm  
concerned that testing just the new design won't give us very good  
comparison information.

That said, our current iteration is very full so we could sure use  
some volunteer help doing the testing if we decide to go that route?   
And takers?  We could do pretty low intensive "hallway" testing so I  
wouldn't expect it to take more than a day but we'd have to look at it  
closer to see what is required.

-Daphne

On Apr 16, 2008, at 4:38 PM, Colin Clark wrote:

> 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
>

Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
daphne at media.berkeley.edu
cell (510)847-0308