An Introduction to the Fluid Project

41
Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre, University of Toronto Clayton Lewis, Professor of Computer Science, University of Colorado at Boulder An Introduction to the Fluid Project

description

An Introduction to the Fluid Project. Colin Clark , Fluid Project Technical Lead, Adaptive Technology Resource Centre, University of Toronto Clayton Lewis , Professor of Computer Science, University of Colorado at Boulder. Topics We’ll Cover. Project vision and goals The Fluid community - PowerPoint PPT Presentation

Transcript of An Introduction to the Fluid Project

Page 1: An Introduction to the Fluid Project

Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre, University of Toronto

Clayton Lewis, Professor of Computer Science, University of Colorado at Boulder

An Introduction to the Fluid Project

Page 2: An Introduction to the Fluid Project

Topics We’ll Cover

• Project vision and goals• The Fluid community• Improving the user experience• Technology framework• Road map• How to get involved

Page 3: An Introduction to the Fluid Project

Project Vision and Goals

Page 4: An Introduction to the Fluid Project

Vision

• Advance the status of UI development and design in academic community source projects

• …so that they can fulfill their potential as platforms for innovation

• Create a community of UX expertise• Build a presentation layer across applications that

can support the diversity of needs within higher education

• Support the precarious values of usability, accessibility, internationalization, security, and QA

Page 5: An Introduction to the Fluid Project

The Context for Fluid

• Issues of usability & accessibility are significant for community and open source software

• Now is the time to address the concerns of our communities

• Our goal is to incrementally improve the overall user experience of uPortal, Sakai, Kuali Student, and Moodle

Page 6: An Introduction to the Fluid Project

The Fluid Approach

• Cross-project collaboration• Take a holistic approach by combining both

technology and UX design• A two-fold path:

– Social: build a community around UX– Technical: new UI development tools

Page 7: An Introduction to the Fluid Project

The Fluid Community

Page 8: An Introduction to the Fluid Project

Participating Projects

• uPortal– Enterprise portal system– Aggregates personalized content

• Sakai– Collaboration and learning environment– Teaching, research, and group collaboration

• Moodle– Learning management system– Strong focus on pedagogy

• Kuali Student– Upcoming, next generation student system– Viable alternative to high-cost commercial products

Page 9: An Introduction to the Fluid Project

Fluid’s Relationship to uPortal

• Fluid is a movement within the community• We are committed participants in uPortal• Everyone is welcome to join Fluid• We bring:

– New resources specifically for UX improvements– Lots of technical, usability and accessibility expertise– Cross-project community source collaboration– Fresh ideas

• We’re not doing the only UX work within the community, and that’s a good thing.

Page 10: An Introduction to the Fluid Project

Who is Involved?

• Partnership among several universities and corporations

• Toronto, UBC, UC Berkeley, York, Cambridge, MSU, and others

• IBM, Sun, and Mozilla Foundation• Broad range of experience

Page 11: An Introduction to the Fluid Project

Design Deliverables

• Start with heuristic and usability reviews• Baseline for usability and accessibility

– Know where we need to improve

– Prioritize the pain points

• Designer’s Toolkit: shared design resources for usability and accessibility

• Iterative UI design and testing

Page 12: An Introduction to the Fluid Project

What are we going to build?

• A living library of flexible UI components that can be used across applications– Easy to wire up and customize

• A new component framework built specifically to improve usability

• Semantics and specifications• Integration with open source projects

Page 13: An Introduction to the Fluid Project

User Experience & the Designer’s Toolkit

Page 14: An Introduction to the Fluid Project

Designer’s Toolkit

• Component library• UI Design Patterns

– Good advice when designing UIs– Take material from Tidwell, Yahoo!, Sakai patterns– Apply to the uPortal context

• UX Walk-Throughs– Driven by the communities, but collaborative– Reusable protocol

• User Persona Library– Leverage the design patterns library

Page 15: An Introduction to the Fluid Project

UX Walk-Throughs

• Goals– Identify pain points

– Identify “componentizable” solutions

– Drive component work priority

– Provide baseline for future evaluation

– Create shared protocol & process for usability and accessibility

• …that fits smoothly into ongoing development processes

Page 16: An Introduction to the Fluid Project

Challenges/Opportunities

• Checking an application for – usability – access for a screen reader user, screen magnifier user– access for someone who can’t use a mouse

could require different evaluators, multiple passes… is this essential?

• Can we bring accessibility walkthroughs to the level of maturity of usability walkthroughs?

• Can we adapt walkthroughs to components rather than applications?

• Can we combine “walkthroughs” and “heuristic evaluations”?

Page 17: An Introduction to the Fluid Project

Walkthrough Work Plan

• Working group– 3 to 5 evaluators on each project, eg uPortal– Usability and accessibility focus

• Define process and priorities:– Iterative – user profiles– scenarios of use for cognitive walkthroughs

• Perform individual evaluations• Synthesize evaluations and prioritize• Brainstorm design solutions• Collaborate with participating communities

Page 18: An Introduction to the Fluid Project

Components

• Components are recurring interactions:– Navigation

– Forms and data

– Direct manipulation of objects

– Workflows, wizards, and sequences

• Choosing components will be based on – analysis of existing applications across projects

– applications in “the outside world”, like FaceBook

– ?analysis of user experience

Page 19: An Introduction to the Fluid Project

We Need Your Help!

• UX Walk-throughs– Join the uPortal working group

– Paul Zablosky can help get you started

• Identifying and designing new components• Your thoughts on how your UX work can be more

effectively supported• We’re planning U-Camps

– Work-learn sessions at conferences focused on UX

Page 20: An Introduction to the Fluid Project

Technology

Page 21: An Introduction to the Fluid Project

A bit about the technology

• Unique challenge: how to enable support for very diverse presentation technologies?

• Based on JavaScript, DHTML, and AJAX• Thin binding layer between client and RESTful,

largely stateless server• Loose coupling, works across applications• In translation:

– Web 2.0 made more usable & accessible

Page 22: An Introduction to the Fluid Project

Fluid Accessibility

• Web 2.0 will be accessible– it’s just a matter of time

• ARIA: Accessible Rich Internet Applications (W3C)• AccessForAll for component metadata• Ongoing toolkit accessibility support

– Dojo, YUI, others?

• Design specific alternatives• Fluid: Accessibility from the ground up

Page 23: An Introduction to the Fluid Project

Flexibility & Customization

• Fluid will be a highly flexible UI layer• At configuration-time:

– Appearance, branding, style, page text

– Locale, reading level, density

– Functionality and user experience

• At run-time:– Swap in accessible controls

– Re-styling for higher contrast, etc.

– Components built for specific disciplines or user needs

Page 24: An Introduction to the Fluid Project

Transformation

Page 25: An Introduction to the Fluid Project

What is a Reusable Component?

• On the client-side, a Fluid component consists of:– One or more HTML templates

– One or more layers of CSS

– JavaScript for behavioural logic

– Accessibility metadata (control, presentation, etc)

• And on the server-side:– A set of conventions for accessing service logic

– The ability to deliver the appropriate markup, metadata, and user preferences

Page 26: An Introduction to the Fluid Project

Anatomy of a Component

Page 27: An Introduction to the Fluid Project

Component Architecture

1. Markup-driven components are general:– Server delivers fully-rendered HTML– JavaScript manipulates DOM based on id contract– Greater flexibility and reuse, but greater server dependency

2. Data-driven components are smarter but slower:– Handle their own template processing– Require multiple round-trips to the server for data– Allow for less dependency on server-side presentation

framework

• We’ll support both for different contexts as necessary

Page 28: An Introduction to the Fluid Project

The Fluid Framework

• Framework infrastructure– lifecycle supports, server-side communication, etc.

• Components themselves• Transformation engine• Server-side binding and delivery

Page 29: An Introduction to the Fluid Project

The Fluid Framework

Page 30: An Introduction to the Fluid Project
Page 31: An Introduction to the Fluid Project

RESTfulness

• REST: not just a buzzword.• General principle: use the Web’s natural architecture

– Client statefulness, server statelessness– Meaningful URLs– Emphasize named resources over actions– Don’t invent new messaging APIs: use HTTP!

• Benefits:– Back button friendly– Bookmark-ability– Light weight web services– Natural integration point with diverse presentation frameworks– Extract and generalize for reuse

Page 32: An Introduction to the Fluid Project

Binding to Presentation Frameworks

• Reality: there are a lot of different presentation frameworks in use today across applications

• Our approach:– Move appropriate logic and state from server to client– Support the best frameworks– Try to make it easy to bind to other frameworks

• Start with two server-side frameworks:– RSF– Spring Portlet MVC + JSP

• We’ll continue to revisit this decision over time• Feel free to help add support to your framework of choice

Page 33: An Introduction to the Fluid Project

First Component: Lightbox

• Image Gallery: a mini iPhoto tool• Some clear UX problems to solve

– No way to re-order or sort images in albums

• Plans– Build components for reorganizing images

– Create accessible controls

– Test in Sakai and uPortal

Page 34: An Introduction to the Fluid Project

Component Road Map

• Prioritize based on usability research• Start with specific solutions in context

– Lightbox: organizing images

• Build general solutions over time• Lightbox leads to all kinds of resource organization

components:– Drag and drop– Folders and hierarchies– Re-ordering and rearranging items

• Yale drag and drop preferences

Page 35: An Introduction to the Fluid Project

The Lightbox

Page 36: An Introduction to the Fluid Project

Drag & Drop Accessibility

• What does accessibility mean here?– Keyboard access

– Support for magnification and linearization

• Focus on the goal, not the task– Re-ordering images

– Doesn’t necessarily look like DnD

– What alternatives are available on the desktop?

– Cut and paste-style interactions

Page 37: An Introduction to the Fluid Project

Lightbox Demo

Page 38: An Introduction to the Fluid Project

Project Road Map

Page 39: An Introduction to the Fluid Project

Short Term Goals

• Plan heuristic evaluations• Foster a vibrant community• Evaluate technology in practice

– Develop real components with candidate technology

• Create prototype component components– Design, develop, integrate, test, iterate

– Create accessible alternatives or equivalents

• Plan ongoing architecture and design

Page 40: An Introduction to the Fluid Project

Where We’re Going Next

• Implementation of new components that improve high-priority UX problems

• Definition of new AccessForAll branch for UI components:– Metadata

– Preferences

• Integration and expansion of framework• Helping to make real improvements in uPortal

Page 41: An Introduction to the Fluid Project

In Summary

• For more information, visit the Fluid Project web site:

www.fluidproject.org

• Design and development work is ramping up• Goal: incremental, achievable improvements• Join our community, we need your input!