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

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

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

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

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?

"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”

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

Y! example

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

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

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

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

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

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

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)

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

Futures

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

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

References Christopher Alexander bio A Pattern Language Yahoo Design Pattern Library Jenifer Tidwell’s Designing Interfaces UC Berkeley Web Patterns

Sakai References Design Pattern WG site (confluence) Sakai Style Guide Colin’s pithy blog post patterns.html patterns.html

Discussion