Finishing the Layout Customizer

Thu May 15 20:26:29 UTC 2008

These look great Gary!

I like the visual representation of locked portlets in the first few  
screens (slight variation in color from unlocked with the lock in  
place of the menu).  It's different enough to get attention but not so  
different that it seems like completely different than a portlet.

Nice job!

-Daphne

On May 14, 2008, at 2:39 PM, Gary Thompson wrote:

> I posted mockups for the keyboard interaction:
>
> Layout Customizer Mockups
> http://wiki.fluidproject.org/x/9Q8a
>
> See if this helps answer your questions.
>
> I am planning on changing the drag and drop mockups to have a  
> different color (green) for the drop target.  At the same time, I'd  
> like to make a final decision on the visual presentation of locked  
> portlets.
>
> For anyone new to that discussion, it seems that there does not need  
> to be any indication that a portlet is locked until a user tries to  
> move or remove it.  Upon one of those interactions, the user needs  
> to be made aware that the portlet is locked and cannot be moved or  
> removed - which seems best done by an error message (a la Facebook).
>
> In the mockups for the Layout customizer, I have explored some  
> alternate visual presentations of locked portlets.  The idea is to  
> provide the user with a constant visual reminder that the portlet is  
> locked, but I am not sure I like having the reminder be *constant*.   
> Therefore, I am leaning toward having locked portlets visually be no  
> different than unlocked portlets, with perhaps the one change of  
> replacing the remove icon (the red X) with a lock icon.  Still, the  
> constant alternate presentation of locked portlets does tend to  
> reinforce their locked-ness.
>
> Let me know what you think,
>
> Gary
>
> Daphne Ogle wrote:
>> Thanks Erin and Anastasia!  I should have given more context to  
>> what I  was looking for.  More questions below :)
>>
>> -Daphne
>>
>> On May 14, 2008, at 6:10 AM, Anastasia Cheetham wrote:
>>
>>
>>> On 14-May-08, at 12:21 AM, Erin Yu wrote:
>>>
>>>
>>>> On 13-May-08, at 7:33 PM, Daphne Ogle wrote:
>>>>
>>>>
>>>>> - is the keyboard interaction specified anywhere?   I was looking
>>>>> for it earlier and couldn't find it.
>>>>>
>>>>>
>>>> On the demo page:
>>>> http://build.fluidproject.org/sakai-imagegallery-tool/fluid-components/html/Lightbox.html
>>>> it states:
>>>> "To use the keyboard:
>>>> Select an image using i, k, m or j, or the arrow keys.
>>>> View an image by pressing Enter.
>>>> Move an image using CTRL + a direction key."
>>>>
>>> This is right on: the keyboard interaction is the same as the  
>>> keyboard
>>> interaction of the Lightbox, since both use the same underlying
>>> Reorderer. The Reorderer allows the keystrokes to be customized, but
>>> the ones Erin described are the default sets.
>>>
>>> The use of Ctrl+arrow keys is defined in the behavioural spec:
>>> http://wiki.fluidproject.org/download/attachments/327783/Lightbox+Behavioral+Spec_5.doc?version=1
>>> (pages 20-21).
>>>
>>
>> Right.  I actually wrote that spec :).   I was looking for  
>> something  like the this for the layout customizer (but  
>> specifically just the  keyboard interaction piece).  I need to send  
>> it off to someone so they  can understand how it's supposed to  
>> behave (with an assumption that  this is their introduction to the  
>> component).  Does anything like that  exist?
>>
>>>
>>>>> - we didn't specify a "selected" visual effect for the lightbox.
>>>>> Should we?
>>>>>
>>> The styles currently used are based on the behavioural specification
>>> (see the link above), page 20.
>>> Were these not the correct specifications?
>>>
>>>
>>>>> I just went into the demo and it is not easy (almost
>>>>> impossible) to see which thumbnail you are in as you tab (except  
>>>>> the
>>>>> titles are part of the sequence and it's a little easier to see  
>>>>> when
>>>>> on the title).
>>>>>
>>>> It seems we do have defined "selected" effect.
>>>> If you tab to the items, you will see that the focus is indicated  
>>>> by
>>>> the dark grey outline and light grey fill. The mouse-over focus  
>>>> looks
>>>> slightly different: black outline and no fill (once you click,  
>>>> it  then
>>>> shows the grey outline and light grey fill).
>>>>
>>> This is what I see when I use the Lightbox. In the *portlet*  
>>> example,
>>> these styles are not implemented yet - there is only a faint grey
>>> border to indicated the selected portlet. Is this what you're  
>>> seeing,
>>> Daphne?
>>>
>> Weird...I was actually looking at the daily build, Sakai Fluid  
>> Demo  and the "container" around the images were not displaying so  
>> as I  arrowed through the thumbnail was first in focus and then the  
>> title,  then the next thumbnail and then it's title and so on.   
>> There was a  faint grey outline (browser default I think) around  
>> the item in  focus.   I thought something had changed in the  
>> behavior that I  missed.  Today it seems to be working as expected, http://build.fluidproject.org/portal/site/Test
>>
>>
>>> -- 
>>> Anastasia Cheetham                   a.cheetham at utoronto.ca
>>> Software Designer, Fluid Project    http://fluidproject.org
>>> Adaptive Technology Resource Centre / University of Toronto
>>>
>>> _______________________________________________
>>> 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
>>
>>
>>
>> _______________________________________________
>> 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