An Introduction to the Fluid Project
description
Transcript of An Introduction to the Fluid Project
![Page 1: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/1.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/3.jpg)
Project Vision and Goals
![Page 4: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/7.jpg)
The Fluid Community
![Page 8: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/10.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/13.jpg)
User Experience & the Designer’s Toolkit
![Page 14: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/14.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/16.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/20.jpg)
Technology
![Page 21: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/21.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/23.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/24.jpg)
Transformation
![Page 25: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/25.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/26.jpg)
Anatomy of a Component
![Page 27: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/27.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/28.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/29.jpg)
The Fluid Framework
![Page 30: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/30.jpg)
![Page 31: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/31.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/32.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/33.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/34.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/35.jpg)
The Lightbox
![Page 36: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/36.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/37.jpg)
Lightbox Demo
![Page 38: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/38.jpg)
Project Road Map
![Page 39: An Introduction to the Fluid Project](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/39.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/40.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022062410/56815a9a550346895dc8161a/html5/thumbnails/41.jpg)
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!