uPortal and the FLUID Project

uPortal and the FLUID Project

Colin ClarkFLUID Project Technical LeadATRC, University of Toronto

Colin ClarkFLUID Project Technical LeadATRC, University of Toronto

SummarySummary

• Project goals and philosophy• Who is involved?• Design deliverables• Technology• Timelines and first steps• How to get involved• Discussion

• Project goals and philosophy• Who is involved?• Design deliverables• Technology• Timelines and first steps• How to get involved• Discussion

The Context for FLUIDThe Context for FLUID

• Poor usability & accessibility are a significant barrier for community source

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

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

• Poor usability & accessibility are a significant barrier for community source

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

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

FLUID in Community SourceFLUID in Community Source

• 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

• 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

Who is Involved?Who is Involved?

• Partnership among several universities and corporations

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

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

• Partnership among several universities and corporations

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

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

Design DeliverablesDesign 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• Personas and profiles• Scenarios• UI Design patterns

• U-Camps• Iterative UI design and testing

• 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• Personas and profiles• Scenarios• UI Design patterns

• U-Camps• Iterative UI design and testing

Presentation TechnologiesPresentation Technologies

• The last thing community source needs is yet another presentation technology

• To be different, the technology needs to be fundamentally driven by user needs

• FLUID will integrate with the best existing technologies

• The last thing community source needs is yet another presentation technology

• To be different, the technology needs to be fundamentally driven by user needs

• FLUID will integrate with the best existing technologies

What are we going to build?What are we going to build?

• A living library of flexible UI components that can be used across applications

• A new component framework built specifically to improve usability

• Easy to wire up new components or customize properties of existing ones

• Components are more than widgets

• A living library of flexible UI components that can be used across applications

• A new component framework built specifically to improve usability

• Easy to wire up new components or customize properties of existing ones

• Components are more than widgets

FLUID in a Portal EnvironmentFLUID in a Portal Environment

• Components capture recurring patterns• Reuse: UI layer consistency• Can be reused across different portlets• Build FLUID into cross-cutting areas such

as portal navigation• Personalization: UI customizability for

institutions and individuals• Focus on JSR-168/286 and uP3 framework

• Components capture recurring patterns• Reuse: UI layer consistency• Can be reused across different portlets• Build FLUID into cross-cutting areas such

as portal navigation• Personalization: UI customizability for

institutions and individuals• Focus on JSR-168/286 and uP3 framework

A bit about the technologyA 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• Also advanced customization based

on user preferences

• 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• Also advanced customization based

on user preferences

FLUID AccessibilityFLUID Accessibility

• AJAX 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

• AJAX 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

Ideas for ComponentsIdeas for Components

• Resource organization:• Drag and drop• Folders and hierarchies• Re-ordering and rearranging items

• Navigation:• Breadcrumbs• Paging• Affordances for external content

• Composite, domain-specific:• Users, groups, permissions• Calendars

• Add your suggestions here

• Resource organization:• Drag and drop• Folders and hierarchies• Re-ordering and rearranging items

• Navigation:• Breadcrumbs• Paging• Affordances for external content

• Composite, domain-specific:• Users, groups, permissions• Calendars

• Add your suggestions here

Flexibility & CustomizationFlexibility & 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

• 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

ConfigurationConfiguration

TransformationTransformation

Core ArchitectureCore Architecture

• Component framework• Repository of shared components• Semantics and specifications• Integration

• Component framework• Repository of shared components• Semantics and specifications• Integration

Component FrameworkComponent Framework

• Component model and APIs• JavaScript, CSS, HTML

• Component container• JavaScript, AJAX toolkit integration

• Runtime Transformation Engine• Finds and aggregates alternatives

• Server-side binding layer• REST-based specification +

implementation

• Component model and APIs• JavaScript, CSS, HTML

• Component container• JavaScript, AJAX toolkit integration

• Runtime Transformation Engine• Finds and aggregates alternatives

• Server-side binding layer• REST-based specification +

implementation

IntegrationIntegration

• Early and often• Heuristics to measure improvements• Project integration as soon as possible• Requires regular collaboration with

you!• Litmus test of project usefulness

• Early and often• Heuristics to measure improvements• Project integration as soon as possible• Requires regular collaboration with

you!• Litmus test of project usefulness

Criteria for Initial ComponentsCriteria for Initial Components

• Align with project needs/priorities• Simple, known design• Complex technically• Test AJAX accessibility• Generalizable• Addresses “pain point”• Accessible alternatives• Learn early!

• Align with project needs/priorities• Simple, known design• Complex technically• Test AJAX accessibility• Generalizable• Addresses “pain point”• Accessible alternatives• Learn early!

Milestones & Short Term GoalsMilestones & Short Term Goals

• Choose technology frameworks: May• Evaluate technology in practice

• Develop real components with candidate technology

• Create prototype image gallery components • Design, develop, integrate, test, iterate• Create accessible alternatives or equivalents

• Find other components to get started with• Aim for a demo at the June conferences

• JA-SIG• Sakai

• Choose technology frameworks: May• Evaluate technology in practice

• Develop real components with candidate technology

• Create prototype image gallery components • Design, develop, integrate, test, iterate• Create accessible alternatives or equivalents

• Find other components to get started with• Aim for a demo at the June conferences

• JA-SIG• Sakai

First Component: Drag and DropFirst Component: Drag and Drop

• Image Gallery: a mini iPhoto for the Web• Currently a simple tool written in RSF• Some clear UX problems to solve

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

• Plans• Build components for reorganizing images• Move to JSR-168• Create accessible equivalents• Test in Sakai and uPortal

• Image Gallery: a mini iPhoto for the Web• Currently a simple tool written in RSF• Some clear UX problems to solve

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

• Plans• Build components for reorganizing images• Move to JSR-168• Create accessible equivalents• Test in Sakai and uPortal

DnD AccessibilityDnD Accessibility

• What does accessibility mean here?• Keyboard access• Low vision• Single switch/on-screen keyboard

• 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, etc.

• We’re starting on research and testing to find out the best alternative solutions

• What does accessibility mean here?• Keyboard access• Low vision• Single switch/on-screen keyboard

• 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, etc.

• We’re starting on research and testing to find out the best alternative solutions

Ideas for uPortal Starting PointsIdeas for uPortal Starting Points

• Jen’s drag and drop preferences?• Help with interaction design & testing• Improvements to tab editing• Refactor into FLUID components• Accessibility support & alternatives

• uP3 framework?• Administrative tools• Other interfaces Eric & co. are working on

• Jen’s drag and drop preferences?• Help with interaction design & testing• Improvements to tab editing• Refactor into FLUID components• Accessibility support & alternatives

• uP3 framework?• Administrative tools• Other interfaces Eric & co. are working on

SummarySummary

• The FLUID Project is a reality:

www.fluidproject.org

• Design and development work is ramping up• Goal: incremental, achievable

improvements• We’re here to help with your work• Join our community, we need your input!

• The FLUID Project is a reality:

www.fluidproject.org

• Design and development work is ramping up• Goal: incremental, achievable

improvements• We’re here to help with your work• Join our community, we need your input!

Questions & DiscussionQuestions & Discussion

• Ideas for starting points in uPortal• Individual portlets• uP3 framework

• Challenges of AJAX in portlets• AJAX toolkit preferences?• Architectural suggestions

• Ideas for starting points in uPortal• Individual portlets• uP3 framework

• Challenges of AJAX in portlets• AJAX toolkit preferences?• Architectural suggestions