Showcase of Work from Fluid Project 2008-2009

The Lightbox

The Lightbox is the first user interface component developed by the Fluid Project. Built originally for the Sakai Image Gallery tool, the Lightbox provides a keyboard-accessible way to directly reorder image collections. It is intended to work well with screen magnifiers, low screen resolutions, and linear layouts.

The Lightbox is reusable within most Web applications, providing a simple markup-based contract between client and server. Templates are provided for the RSF presentation framework, and could easily be extended for use in Spring MVC, Wicket, PHP, or other technologies.

The Reorderer

The Reorderer is a set of JavaScript objects that can be used by developers to create rich, accessible user interfaces that allow users to directly move around and re-arrange content on the page. The Reorderer supports mouse-based drag and drop as well as fully keyboard-accessible controls as well.

It is designed to be flexible and will handle a variety of markup and layout types. Clear extension points are provided to customize its behaviour for new layouts, connection strategies, and contexts.

Sakai More Sites

For the Sakai 2.5 release, Fluid collaborated with Indiana University and others in the Sakai community to deliver improvements to the portal's site-based navigation scheme. This work included designing a tab-based metaphor and new drop-down menu for listing sites.

This work will be refined, expanded, and harmonized with improvements Fluid is making for the upcoming uPortal 3 release. The end product will be a new NavigationTabs component which encapsulates this behaviour into a set of accessible and reusable JavaScript objects.

Design Patterns

User interface design patterns provide advice and guidance for designers and developers. Patterns embody a proven solution to a problem in context, serving as a kind of recipe for creating effective new user interfaces.

UI design patterns also serve as a jumping off point for information about how to use Fluid components, with example screenshots and links to useful CSS and markup.

UX Walkthroughs

UX Walkthroughs are a combination of usability and accessibility heuristic evaluations with cognitive walkthroughs. The goal of Fluid's walkthroughs is to identify current user "pain points" in uPortal, Sakai and Moodle and ultimately to prioritize user interface improvements that will address these issues.

UX Walkthroughs are widely applicable. Fluid's UX Toolkit provides instructions and advice on how application developers can perform their own UX walkthroughs to identify usability and accessibility problems and solutions.