Keyboard Interaction for Re-ordering Portlets

[Daphne Ogle]

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
> shawhan.liem at utoronto.ca / 416-946-0423
>
> _______________________________________________
> 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



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20080116/aa9b04c0/attachment.htm>