Finishing the Layout Customizer

[Gary Thompson]

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
>