1 / 27

FLUID Project: Enhancing Community Source UX Design

Join us in improving the user experience of Sakai, uPortal, Kuali Student, and Moodle through cross-project collaboration on new UI development tools and social community building efforts. Explore our design deliverables and technology to get involved.

zaide
Télécharger la présentation

FLUID Project: Enhancing Community Source UX Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. uPortal and the FLUID Project Colin Clark FLUID Project Technical Lead ATRC, University of Toronto

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

  3. The 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

  4. FLUID 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

  5. 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

  6. 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

  7. Presentation 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

  8. 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

  9. FLUID 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

  10. 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 • Also advanced customization based on user preferences

  11. FLUID 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

  12. Ideas 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

  13. 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

  14. Configuration

  15. Transformation

  16. Core Architecture • Component framework • Repository of shared components • Semantics and specifications • Integration

  17. Component 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

  18. Integration • Early and often • Heuristics to measure improvements • Project integration as soon as possible • Requires regular collaboration with you! • Litmus test of project usefulness

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

  20. Milestones & 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

  21. First 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

  22. DnD 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

  23. Ideas 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

  24. Summary • 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!

  25. Questions & Discussion • Ideas for starting points in uPortal • Individual portlets • uP3 framework • Challenges of AJAX in portlets • AJAX toolkit preferences? • Architectural suggestions

More Related