UI Options carousel research

Jonathan Hung jhung at ocadu.ca
Mon May 6 10:17:01 EDT 2013


Hi everyone,

In our push to implement the updated UI Options design, Heidi and I have
been doing research into carousel content sliders so it will match these
wireframes:
http://wiki.fluidproject.org/display/fluid/%28Floe%29+UI+Options+Design+High+Fidelity%2C+C.1

For the UI Options carousel, the following are requirements:

   - ability to specify a number of items to be displayed
   - navigation of carousel using keyboard, gestures, and pointing
   - show a fragment of the next or previous item if more content is
   outside the view of the carousel


In our research, we investigated the following jQuery plugins: Coda
Slider<http://kevinbatdorf.github.io/codaslider/>
 / Liquid Slider <http://liquidslider.kevinbatdorf.com/>, jCarousel
Lite<http://gmarwaha.com/jquery/jcarousellite/>,
and Hans Hillen's accessible jQuery
UICarousel<http://hanshillen.github.io/jqtest/#goto_carousel>
.

Of these plugins, Hans Hillen's accessible jQuery UI Carousel looks the
most promising because it has a natural keyboard interaction, and
appropriate ARIA markup (tested this in Voice Over and NVDA).

For gesture based navigation, we will need to investigate adding a
component that supports this interaction (i.e. jQuery mobile swipe).

For displaying panel fragments of the next / previous item in the
carousel view,
we can use CSS styling on the left and right arrows to imitate these
fragments. This will make implementation simpler and be visually similar to
our wireframes. The disadvantage with this approach is that the fragment
will not show any actual content of the next or previous panel, so clipping
icons and text as seen in the wireframe will not be seen. We talked with
Joanna Vass about this approach and she said it should be okay.

We have begun testing jCarousel in an actual UI Options implementation to
see how it performs. The ongoing work can be found in this branch:
https://github.com/jhung/infusion/commits/FLUID-4972

If you have feedback or suggestions, please let us know!

- Jon

-- 

*JONATHAN HUNG*

INCLUSIVE DESIGNER, IDRC****

** **

*T:* 416 977 6000 x3951****

*F:* 416 977 9844****

*E:* jhung at ocadu.ca****

** **

*OCAD UNIVERSITY*****

Inclusive Design Research Centre****

205 Richmond Street W, Toronto, ON, M5V 1V3****

** **

www.ocadu.ca****

www.idrc.ocad.ca
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20130506/9585bf54/attachment.html>


More information about the fluid-work mailing list