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 [EMAIL PROTECTED]
Software Designer, Fluid Project http://fluidproject.org
Adaptive Technology Resource Centre / University of Toronto
_______________________________________________
fluid-work mailing list
[email protected]
http://fluidproject.org/mailman/listinfo/fluid-work
Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
[EMAIL PROTECTED]
cell (510)847-0308
_______________________________________________
fluid-work mailing list
[email protected]
http://fluidproject.org/mailman/listinfo/fluid-work
Daphne Ogle
Senior Interaction Designer
University of California, Berkeley
Educational Technology Services
[EMAIL PROTECTED]
cell (510)847-0308
_______________________________________________
fluid-work mailing list
[email protected]
http://fluidproject.org/mailman/listinfo/fluid-work
Allison Bloodworth
Senior User Interaction Designer
Educational Technology Services
University of California, Berkeley
(415) 377-8243
[EMAIL PROTECTED]
_______________________________________________
fluid-work mailing list
[email protected]
http://fluidproject.org/mailman/listinfo/fluid-work
