Pardon me if this seems off or naive. I'm not sure I've processed
everything that's been said on this thread -- quite complex!
The one thing that jumps out at me is that it seems like the tabs and
the arrow keys are acting opposite of the way they do in the
lightbox. In the lightbox it seems like tabs take users between
larger pieces of the interface (I call them panes) and arrows take
them between individual items within the pane (thumbnails for
instance). The proposal here seems to say arrows jump the user
between chunks of interface (portlets) and tabs move between the
individual items (fields and links). I realize the issue with users
seeing the entire page as one "webpage" rather than chunks of
interface further complicates this. Sounds like a really candidate
for user testing :)
-Daphne
On Jan 15, 2008, at 1:45 PM, Shaw-Han Liem wrote:
Hi Everyone,
We are currently working on preparing the Fluid Reorderer for
integration with the latest version of uPortal. Today, the ATRC
team had
an interesting discussion about the keyboard interaction for re-
ordering
portlets in a portal environment. It raised a couple of questions
about
the interaction that I'd like to put out to the community.
Our current mouse interaction is based on the Yahoo Drag and Drop
Modules pattern. Check it out here:
- The Pattern: http://tinyurl.com/k9mpy
- An example implementation: http://my.yahoo.com
Our challenge is to come up with an equivalent set of keyboard
interactions that access this functionality.
In our previous implementation of the Reorderer (the lightbox image
organizer), we treated the "set of reorderable items" as a grouped
element. The user tabs through the page until they reach the group of
items, and then uses arrow keys within the list to select which image
they would like to act on (similar to the keyboard interaction for
a menu).
When dealing with a portal, the issue becomes a little more
complicated.
Each portlet has arbitrary html content (links, images - perhaps even
another reorderer) that the user will need to navigate through.
Further,
the user may not percieve the portlets as 'seperate spaces' at all,
but
expect to be able to tab through all portlet contents as on a simple
static website.
Here is our initial thought about how this interaction might work with
the keyboard:
- Tab key works as it does on My Yahoo or uPortal currently, focusing
first on the portlet's container, and then each internal link in
sequence. For the purposes of the reorderer, if a link within a
portlet
is in focus, we treat that portlet as 'selected'. When the last
link in
a portlet is focused, and the tab key is pressed, we should move to
the
first link in the next portlet.
- When a portlet is selected, the arrow keys are used to select
adjacent
portlets. When a new portlet is selected, we change focus to the
portlet
container.
- When a portlet is selected, ctrl+arrow is used to move portlets
as in
the lightbox.
We are not changing the tab behaviour here on the assumption that
users
expect a portal to function as a 'normal' website does. The arrow keys
act as short-cuts that allow the user to skip to the next portlet, and
also facilitate the 'move' action.
I'll be working on some mockups over the next day or so to help
illustrate this, but I wanted to post these thoughts to the
community in
order to get some input on the interaction before we got too far into
the implementation.
Also, for anyone on the list who is newish to ARIA and DHTML
accessibility (as I am), I've updated the "UX Resources" wiki page
with
some links I found particularly useful in my research.
http://wiki.fluidproject.org/x/hAIa
Thanks,
Shaw-Han
--
Shaw-Han Liem
Adaptive Technology Resource Centre
University of Toronto
[EMAIL PROTECTED] / 416-946-0423
_______________________________________________
fluid-work mailing list
fluid-work@fluidproject.org
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
fluid-work@fluidproject.org
http://fluidproject.org/mailman/listinfo/fluid-work
