1. Sakai UI Design Patterns Design Patterns WG 12-Jun-2007, 14:05 Marc Brierley

2. Agenda Origins of the current effort What is a Design Pattern? Benefits of Design Patterns Tour of Draft Sakai DP Library for Forms Challenges Futures Roadmap Discussion

3. Team Boston Univ –Kathy Moore Charles Sturt Univ –Tim Archer Stanford Univ –Marc Brierley –Jackie Mai –Julie Mai UC Berkeley –Daphne Ogle –Judy Stern Univ Toronto –Colin Clark –Michelle D'Souza –Jonathan Hung

4. Origins of the current effort Need to update (the content) of the Sakai Style Guide Need a more collaborative design standard “document” Need a way to improve designer/developer communication

5. What is a Design Pattern? A shared language for ideas and solutions to commonly recurring design problems A formal structure for representing these solutions and a body of literature A source of guidance and experience while building A generalized solution within a context –What are the goals of the design? –What are the constraints?

6. "Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.” –Christopher Alexander, author of “A Pattern Language”

7. Pattern Format Examples Alexander A Pattern Language (architecture) –Name, Example, Context, Problem, Solution Gang of Four (GoF) Design Patterns (software) –Name, Intent, Motivation, Structure, Participants, Collaborations, Consequences, Implementation, Sample Code, Known Uses, Related Patterns Tidwell Designing Interfaces (user interface) –What, Use When, Why, How, Examples

8. Y! example

9. More on Patterns Patterns should be used like a chef uses a recipe: –Define critical ingredients and proportions –Allow for personalization Not intended to be used literally or with precise conformance They don't address consistency, nor do they grant authority to a single design Are intended to be usable by all development participants, not just trained designers

10. Patterns are not… "They aren't off-the-shelf components; each implementation of a pattern differs a little from every other. They aren't simple rules or heuristics either. And they won't walk you step-by-step through an entire set of design decisions—if you're looking for a complete step-by-step description of how to design an interface, a pattern catalog isn't the place!" –Jennifer Tidwell

11. Benefits of Design Patterns Increased interaction consistency, but still allow design flexibility Facilitate sharing of design knowledge & common language

12. Patterns in Sakai A source of solutions to common problems in the Sakai design world General UI solutions based in the context and examples of our problem space Provide an opportunity for rethinking and renewing a style guide

13. Sakai DP Format Problem Summary, Example, Solution, Use When, Why, Accessibility, Other Examples, References, Related Patterns Our goal: emphasize a simple, easy-to- reference structure that captures sufficient detail

14. Tour of Draft Sakai DP Library for Forms Patterns format Show forms patterns

15. Challenges DP are becoming common in industry, but newer to higher-ed IT Getting to a shared understanding of DP (e.g. is it really a suggestion?) Gaining traction in Sakai community Resources –People/time to finish first comprehensive set –Build/adapt Sakai UI components (code)

16. Recent Progress A few more form-related patterns New accessibility information Larger team going forward (+4!)

17. Futures

18. Roadmap Review (e.g other external DPs) test (usability, accessibility, acceptance (Sakai community)) current patterns Determine full set of patterns we want for the Sakai DP library Chunk up related patterns Expand team

19. Join us! Use the patterns and make comments for revisions Help us author more patterns –Wanted: Ux Designers Help us revise the patterns we have –Wanted: Copy editor Help connect the patterns to UI components –Wanted: UI Developers

20. References Christopher Alexander bio http://en.wikipedia.org/wiki/Christopher_Alexander http://en.wikipedia.org/wiki/Christopher_Alexander A Pattern Language http://downlode.org/etext/patterns http://downlode.org/etext/patterns Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/ypatterns/ Jenifer Tidwell’s Designing Interfaces http://designinginterfaces.com/ http://designinginterfaces.com/ UC Berkeley Web Patterns http://harbinger.sims.berkeley.edu/ui_designpatterns/ http://harbinger.sims.berkeley.edu/ui_designpatterns/

21. Sakai References Design Pattern WG site (confluence) http://issues.sakaiproject.org/confluence/display/DESPAT/Library http://issues.sakaiproject.org/confluence/display/DESPAT/Library Sakai Style Guide http://issues.sakaiproject.org/confluence/display/UI/Style+Guide http://issues.sakaiproject.org/confluence/display/UI/Style+Guide Colin’s pithy blog post http://codescents.blogspot.com/2006/08/user-interface-design- patterns.html http://codescents.blogspot.com/2006/08/user-interface-design- patterns.html

22. Discussion