jutta treviranus, director, adaptive technology resource centre, university of toronto daphne ogle,...
TRANSCRIPT
![Page 1: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/1.jpg)
Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto
Daphne Ogle, Fluid Project Design Lead, UC Berkeley
Colin Clark, Fluid Project Technical Lead, Adaptive Technology Resource Centre, University of Toronto
An Introduction to the Fluid Project
![Page 2: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/2.jpg)
Topics We’ll Cover
• Project vision and goals• The Fluid community• Improving the user experience• Technology framework• Timelines and road map• How to get involved
![Page 3: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/3.jpg)
Project Vision and Goals
![Page 4: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/4.jpg)
Vision
• Advance status of UI development and design in academic community source projects
• …so that they can fulfill their potential as platforms for innovation
UI = user interface, user interaction, user experience, usability and accessibility
![Page 5: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/5.jpg)
Problem
• Systemic problem of poor and inconsistent UI• Frequently left to programmers• Tackled at the end• Redundantly developed• Inadequately tested and refined• UX designers not well integrated into development culture• And….
![Page 6: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/6.jpg)
“You say tomato, I say tomato, lets call the whole thing off”
• Academic communities are very diverse • We differ greatly in our preferences, needs, habits,
concepts, comforts, convictions….
![Page 7: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/7.jpg)
“Different strokes for different folks…”
• Institutional preferences and branding• Conventions of academic discipline• Cultural differences• Linguistic differences• Differences related to age• Differences related to role and perspective• Different teaching approaches• Different learning approaches• Disability and environmental constraints
![Page 8: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/8.jpg)
Differences related to academic discipline
Differ with respect to:• language (e.g., the meaning of color)• values and notions of quality• tools• environment• modes of interaction and academic engagement
In academia we foster and thrive on diversity.
![Page 9: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/9.jpg)
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
![Page 10: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/10.jpg)
UI most critical to any discipline that is:
• Not involved in creating application• Not a discipline familiar to those creating the user
interface
![Page 11: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/11.jpg)
Accessibility
• Legal commitment to equal access• No system-wide strategy, band-aid approach at
greater and greater cost• Guidelines seen to constrain creativity
![Page 12: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/12.jpg)
Three approaches to accessibility
1. Single compliant resource approach
2. Media rich plus “accessible alternative” approach
3. Personalization approach
![Page 13: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/13.jpg)
Goal: Consistent User Experience
• Growing number of tools• Growing number of developers
• A consistent identifiable look• Intuitiveness and transparency of design
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
![Page 14: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/14.jpg)
Consistent User Experience vs.Accommodating Differences
• Do we need to choose?• Or can we have our cake and eat it too?
QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this p icture.QuickTime™ and aTIFF (Uncompressed) decompressor
are needed to see this picture.
![Page 15: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/15.jpg)
Proposal: “Flexible User Interface”
• Swappable styles• Swappable UI components• Either runtime transformation for unique needs of
individual• Or customization at configuration
![Page 16: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/16.jpg)
2 Interwoven Approaches
1. Address systemic or process shortcomings as well as education and awareness
2. Address barriers related to the software, architecture and tools
![Page 17: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/17.jpg)
Overarching Goal
• To support the precarious values of usability, accessibility, internationalization/localization, quality assurance and security
![Page 18: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/18.jpg)
Supporting Objectives
To develop:• Architectural framework for a flexible UI• Living library of robust, usable, accessible UI components• Community processes that support innovative, high quality
user experience design and development• Tools and processes for developing and implementing
modular, sharable UI components• Mechanisms for refining components
![Page 19: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/19.jpg)
The Fluid Community
![Page 20: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/20.jpg)
The Context for Fluid
• Poor usability & accessibility are a significant barrier 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 Sakai, uPortal, Kuali Student, and Moodle
![Page 21: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/21.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 22: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/22.jpg)
Participating Projects
• Sakai– Collaboration and learning environment– Teaching, research, and group collaboration
• uPortal– Enterprise portal system– Aggregates personalized content
• Moodle– Learning management system– Strong focus on pedagogy
• Kuali Student– Upcoming, next generation student system– Viable alternative to high-cost commercial products
![Page 23: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/23.jpg)
Fluid’s Relationship to Sakai
• Fluid is a movement within the community• We’re all committed contributors to Sakai• Everyone is welcome• 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 24: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/24.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 25: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/25.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– Personas and profiles– Scenarios– UI Design patterns
• U-Camps• Iterative UI design and testing
![Page 26: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/26.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
– Components are more than widgets
• A new component framework built specifically to improve usability
• Semantics and specifications• Integration with open source projects
![Page 27: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/27.jpg)
User Experience & the Designer’s Toolkit
![Page 28: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/28.jpg)
Fluid Deliverables
![Page 29: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/29.jpg)
Designer’s Toolkit
• UI Design Patterns– Help grow the current Sakai library
– Extend to uPortal and Moodle
• Component library– Iterative design and testing
– Component design artifacts
– Design Patterns as taxonomy / folksonomy
![Page 30: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/30.jpg)
More About the Designer’s Toolkit
• UX Inspections– Prioritize improvements
– Protocol
• Persona Library– Leverage the Sakai design patterns library
• Design/Development Process• U-Camps
![Page 31: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/31.jpg)
User Experience Inspections
• Goals– Identify pain points– Identify “componentizable” solutions– Drive component work priority– Create shared protocol & process– Provide baseline for future evaluation
• Protocol– Usability & accessibility heuristics– Cognitive walkthroughs
• Organic process
![Page 32: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/32.jpg)
UX Inspection Plan
• Define protocol: we need your help!• Identify functionality “chunks” within applications
– Iterative: focus on highest-used areas first
• Define and share report templates• Subgroup Inspections
– Sakai, Moodle, uPortal, Accessibility
– Synthesize across groups
• Identify issues – Common issues = common components
![Page 33: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/33.jpg)
Inspection Subgroup Work Plan
• Subgroup– 3 to 5 evaluators– 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 34: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/34.jpg)
Components
• Components are recurring interactions:– Navigation
– Forms and data
– Direct manipulation of objects
– Workflows, wizards, and sequences
![Page 35: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/35.jpg)
Component Design
• User centered process• Based on real user research• Looking across communities and applications• Agile, iterative process• Close and constant communication with
development• Closely related to design patterns
![Page 36: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/36.jpg)
![Page 37: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/37.jpg)
We Need Your Help!
• UX Inspection– Join a subgroup– Attend the next meeting
• User research of development communities– Define developer and integrator needs for components
• Sakai Design Library WG– Join the group– Weekly meetings
• Future - component design– Stay tuned to the mailing lists
![Page 38: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/38.jpg)
Technology
![Page 39: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/39.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 40: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/40.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 41: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/41.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 42: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/42.jpg)
Transformation
![Page 43: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/43.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 44: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/44.jpg)
Anatomy of a Component
![Page 45: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/45.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 46: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/46.jpg)
The Fluid Framework
• Framework infrastructure– lifecycle supports, server-side communication, etc.
• Components themselves• Transformation engine• Server-side binding and delivery
![Page 47: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/47.jpg)
The Fluid Framework
![Page 48: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/48.jpg)
![Page 49: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/49.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 50: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/50.jpg)
Binding to Presentation Frameworks
• Reality: there are a lot of different presentation frameworks in use today across applications– At least 5 in use within Sakai
• 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
• We’ll continue to revisit this decision over time• Feel free to help add support to your framework of choice
![Page 51: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/51.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
![Page 52: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/52.jpg)
First Component: Lightbox
• Image Gallery: a mini iPhoto for Sakai• 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
![Page 53: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/53.jpg)
The Lightbox
![Page 54: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/54.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 55: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/55.jpg)
Lightbox Demo
![Page 56: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/56.jpg)
Project Road Map
![Page 57: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/57.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 58: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/58.jpg)
Where We’re Going Next
• Comprehensive usability evaluations of Sakai, uPortal, and Moodle
• 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 Sakai
![Page 59: Jutta Treviranus, Director, Adaptive Technology Resource Centre, University of Toronto Daphne Ogle, Fluid Project Design Lead, UC Berkeley Colin Clark,](https://reader035.vdocuments.mx/reader035/viewer/2022062518/56649dca5503460f94ac0d5e/html5/thumbnails/59.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!