May 2007 Short Term Road Map

Fluid Project Short-term Road Map

Colin Clark, May 2007

As the Fluid Project ramps up and work begins on our first user interface component, I'd like to take an opportunity to update everyone on our planning, usability, and technical activities. As we move forward, I encourage you to contribute your ideas, designs, and code to whatever aspect of the project you're interested in. We particularly need help with heuristic evaluations, AJAX toolkit evaluation, and ongoing testing of the first Fluid UI component.

Here's an overview of the work we're currently doing in Fluid:

  • Designing and building our first Fluid component
  • Planning heuristic evaluations of Sakai, uPortal, and Moodle
  • Evaluating JavaScript toolkits
  • Expanding Sakai's UI design patterns
  • Presenting at Conferences and U-Camp
  • Incremental architecture of the Fluid framework

Designing and Building the First Fluid Component

Members of the Fluid team from several institutions are collaborating to create the first Fluid component. We're working with the new Image Gallery tool for Sakai, which is increasingly becoming a priority for Berkeley and other schools. Gallery is, for the moment, a fairly simple tool that allows users to create collections of images and share them with other Sakai users. Currently, the Gallery tool doesn't offer users the ability to organize their images in meaningful ways. To help improve it, Fluid is creating a new rich, client-side UI component that will enable users to easily re-order images within a collection in an intuitive and accessible way.

This first component offers an opportunity to explore initial design and technical strategies in a quick and iterative way, gaining valuable feedback and experience along the way. We're using it as an opportunity to start work on several important areas of the project:

Technical Evaluation of JavaScript Toolkits
First, the technical team needs to evaluate the range of available open source JavaScript/AJAX toolkits and determine which one(s) are most appropriate to build our framework with. I strongly believe that the best way to judge a technology is to use it in real-world projects. To this end, we'll be creating a version of the Gallery image organizer component using each of the toolkits under consideration, beginning with Dojo and moving on YUI and at least one other. We'll use this experience to compare each toolkit against a set of criteria determined by the Fluid community, including accessibility support, responsible use of namespacing, portal compatibility, and more. If you have experience with AJAX and JavaScript, we welcome your feedback on the fluid-work mailing list.

Define an Effective Design/Development Process
Fluid has an ambitious mandate to improve the user experience of community source software. To be successful in this, we need to ensure that designers and developers work closely together to build solutions that are responsive to user needs. The Gallery tool component affords us the opportunity to refine a user-centered design process and find the most effective ways to collaborate as a distributed team. We'll be providing more documentation and insights into our agile design/development process in the coming weeks.

Making Incremental Improvements to Usability and Accessibility
The ultimate goal of Fluid is to provide meaningful improvements to the usability and accessibility of Sakai and uPortal. While there is much planning and groundwork still to be done, we want to start by delivering small, useful designs in an incremental way. By applying the Fluid architecture to real-world components early, we are able to learn more quickly and be responsive to the needs and priorities of our users.

Why the Gallery Tool Image Organizer?

We chose to start by building an image organization component within the Sakai Gallery tool for a number of reasons. In particular, our first component:

  • Aligns with local partner priorities
  • Has a simple, known design
  • Offers manageable technical challenges
  • Explores important accessibility issues
  • Will be generalizable to other contexts within both Sakai and uPortal

Aligns with Local Partner Priorities
These are still early days for the Fluid Project. Many of us are still in the process of hiring new staff for the project and shifting our work priorities towards Fluid, even while we continue to contribute to other areas within Sakai and uPortal. Given this, we chose to select an initial component that is complimentary to the work our partners are already doing. Given Berkeley's commitment to user-centered design within the new Gallery tool and Cambridge's involvement with RSF, the Gallery seemed like and ideal place to start. It's small, simple, and offers a safe place to explore both design and technical approaches to the Fluid framework. We're investigating similar components within uPortal as well.

Extensive Existing Design Research
A significant amount of effort was put into designing and planning the Gallery tool as part of UCB's user-centered design process before the Fluid Project started. Daphne Ogle has already compiled a useful set of personas, scenarios, and wireframes for the Gallery tool. This means that we will be able to more quickly coordinate with designers to build new UI components for Gallery.

Manageable Technical Challenges and Interesting Accessibility Issues
The functionality of the first Fluid component is simple and focussed, ensuring that we can quickly implement it and refine our work based on design and testing feedback. It also provides some substantial and meaningful accessibility issues to consider during development: What is the keyboard-accessible equivalent for drag and drop when organizing images? How can the layout best scale itself for users who need larger magnifications? What kinds of short cuts can optimize the experience for non-mouse users?

Generalizable Solutions
The Gallery image organizer component is an opportunity for us to explore rich, accessible interactions for directly manipulating resources using drag-and-drop and the keyboard. Our approach is to design for the specific context—reorganizing images in Sakai—to ensure that we create a component that is focussed and effective, and then to generalize based on common patterns across applications. We expect that refinements of this component will be more broadly applicable to other contexts within both Sakai and uPortal. This component is the first step towards an accessible, reusable drag-and-drop solution for both applications.

What About Components for uPortal?

Our first component is designed to work with a Sakai tool, but rest assured we're also thinking about the uPortal community. The University of Toronto team is hiring an interaction designer who will be available to help out the uPortal community with usability, accessibility, and design. In the meantime, we've found ourselves spread a bit thin on the design side of the project. Gary Thompson has been invaluable in suggesting areas within that we might be able help out with in the short term, and we're planning to work on new Fluid components within the context of uPortal this summer. At the recent uPortal Developer's Workshop in Baltimore we did some brainstorming with the development community about possible UX improvements for uPortal. This evolving list is documented on the uPortal wiki at

Planning Heuristic Evaluations of Sakai, uPortal, and Moodle

One of the first design activities we are working on in the Fluid project is to identify current user "pain points" by performing heuristic evaluation and cognitive walk-throughs of uPortal, Sakai and Moodle.

"Heuristic evaluation is a discount usability engineering method for quick, cheap, and easy evaluation of a user interface design" (Jacob Nielson, Design, usability, and accessibility experts will engage in systematic inspections of the the user interface with the goal of identifying usability and accessibility problems based on recognized principles ("heuristics"). Our particular technique will combine heuristic evaluations with cognitive walk-throughs of the user interface so that we also look at expected user flows through the system and identify potential work flow problems. Heuristic evaluation isn't, however, meant to be a replacement for watching real users' activity on a system, so we intend to use heuristics in conjunction with user testing.

These evaluations will help us identify areas of the user interface that are most in need of improvement. We can thus prioritize our work on the most important usability and accessibility problems. Based on the findings of these evaluations, we will focus on UI issues that can be solved by designing well-tested, user-centered UI components. These components will encompass common interactions that can be reused within and across community source applications. On the other hand, we don't expect that all problems can be solved by creating UI components. We'll also ensure that findings and identified solutions outside the component realm will be shared with the communities. Heuristic evaluations and walk-throughs will identify areas of focus; we will engage in solid user-centered design practices and user testing to create the right solution.

The working list of heuristics and cognitive walk-through questions for the Fluid project is being compiled at the UX Walkthrough Protocol wiki page. We welcome your input, and would very much appreciate additional volunteers to help with the evaluation process.

Expanding Sakai's UI Design Patterns

We've been hard at work adding new accessibility information and techniques to each of the Sakai UI Design Patterns. We hope to have this material finished in time for the Sakai Amsterdam conference in June, and plan to help out with new patterns after that.

We're also looking forward to expanding this work to include new patterns for both the uPortal and Moodle communities soon.

Presentations and BOFs at the JA-SIG and Sakai Conferences

We've got a busy month in June with presentations, birds of a feather (BOF) sessions, and meetings at the Sakai conference in Amsterdam and the JA-SIG conference in Denver. Several Fluid participants will be co-leading the second U-Camp in Amsterdam along with other members of the Sakai community. For more information about the proposed agenda for the U-Camp, please check out the U-Camp planning space at

Going forward...

Over the next several months Fluid will continue our usability and design work, refine the framework architecture, build new user interface components, and offer our time and energy to improving the user experience of Moodle, uPortal, and Sakai. Some of the activities we'll be busy working on include:

  • Defining and communicating a comprehensive project plan and road map
  • Performing comprehensive heuristic evaluations and usability studies of uPortal, Sakai, and Moodle
  • Implementing UX improvements with the uPortal community
  • Designing and building new Fluid components
  • Working with the communities to communicate and prioritize the results of our usability research
  • Designing usability and accessibility improvements for uPortal, Moodle, and Sakai
  • Continuing to compile the results of our design process into a Designer's Toolkit for Moodle, Sakai, and uPortal