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.
- More information about the Lightbox
- Demo of the Image Gallery and Lightbox:
- In Sakai 2.5 Log in as demo/demo and choose the "Fluid Demo" tab.
- Gallery source code: Sakai Tool | JSR-168 Portlet
- ATutor Photo Gallery & Fluid Lightbox
- Lightbox source code
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.
- More information about the Reorderer
- Mockup of sortable tabs in uPortal using the Reorderer
- Reorderer source code
- ATutor theme using Reorderer
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.
- Screenshot of More Sites UI Before Fluid
- Design notes
- More sites running in Sakai 2.5 Log in as demo/demo.
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.
- Overview of Design Patterns
- Our current patterns to date These are currently for Sakai, but will be broadened and re-purposed for uPortal and Moodle.
- Drag and drop: an example of how Fluid components and design patterns relate to each other.
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.