Finishing the Layout Customizer
Allison Bloodworth
abloodworth at berkeley.edu
Tue May 20 19:06:07 UTC 2008
Nice work! I like these as well. It's nice that the user has 2-3
different visual cues (some more subtle than others) which can help
them understand that these portlets are different from the others.
At first glance I actually find the visual style of the second set of
portlets easier to parse -- I think the fact that the top "handle" of
the portlet was white made it easier for me to see the lock icon. It
might also be slightly more "accessible" since colorblind users might
not see the distinction between the two blues, but I believe could
see the differences in contrast between the white and the blue.
However, it may be helpful to see what multiple locked portlets on a
page look like, as perhaps then it would be harder to scan the
headings with significantly different "handles" on the non-moveable
portlets.
Another idea: what if the lock bottom was red instead of yellow, both
so users could map that the red X has been replaced by the red lock,
and the fact that a red lock might be more attention-getting than the
yellow lock (which I find sort of merges with the yellow magnifying
glass at a quick glance).
Finally, was it intentional that these portlets be square with no
shadow as opposed to rounded with a shadow like the others? That
distinction is so subtle I'm not sure it's absolutely necessary, but
maybe you are thinking it indicates the portlet is more one-
dimensional and therefore not moveable?
Thanks again for your work on these!
Allison
On May 15, 2008, at 1:26 PM, Daphne Ogle wrote:
> 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
>
>
>
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work
Allison Bloodworth
Senior User Interaction Designer
Educational Technology Services
University of California, Berkeley
(415) 377-8243
abloodworth at berkeley.edu
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20080520/18f73e52/attachment.html>