Finishing the Layout Customizer
gary at unicon.net
Wed May 14 21:39:45 UTC 2008
I posted mockups for the keyboard interaction:
Layout Customizer Mockups
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,
Daphne Ogle wrote:
> Thanks Erin and Anastasia! I should have given more context to what I
> was looking for. More questions below :)
> 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:
>>> 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:
>> (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
>>>> - 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
>>> 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,
> 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
> 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
More information about the fluid-work