1. Sakai UI Design Patterns Design Patterns WG: Marc Brierley, Colin Clark, Kathy Moore, Daphne Ogle, Judy Stern, (also Tim Archer, Kristol Hancock)

2. Agenda Origins of the current effort What is a Design Pattern? (Colin) Benefits of Design Patterns (Kathy) Tour of Draft Sakai DP Library for Forms Challenges Futures Roadmap Q & A

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

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

5. Christopher Alexander "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."

6. Alexander’s Thinking There are fundamental flaws in architectural design and methods –need to balance individual, societal, and ecological needs –lack of a human scale and purpose –aesthetic and functional failure in adapting to social and physical environments –creation of artifacts that people don't like This is true, too, for software design

7. Pattern Formats Alexander –Name, Example, Context, Problem, Solution GOF –Name, Intent, Motivation, Structure, Participants, Collaborations, Consequences, Implementation, Sample Code, Known Uses, Related Patterns Tidwell –What, Use When, Why, How, Examples Our goal: emphasize a simple, easy-to-reference structure that captures sufficient detail

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

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

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

11. Benefits of Design Patterns Interaction consistency with design flexibility Facilitate sharing of design knowledge & common language A design pattern applied to a current Sakai design problem

12. Interaction consistency with design flexibility Style GuideDesign Patterns “Do this.” Reader may ask “why?” “Do this if…” “Here’s one solution.” Solutions are presented in the context of a design problem Rules may be unresponsive to unexpected contexts, new solutions. Designer/implementer chooses solution most appropriate to problem and context Requires conformance? Offers solutions Seems to rule out new solutions, unexpected contexts. Designer chooses solution most appropriate to problem and context

13. Facilitate sharing of design knowledge & common language Style GuideDesign Patterns Sets out page or screen category, elaborates specifics within category; hard to sum up. “Side-by-Side list elements” “Forms View” Does what I have map onto this? Should it? A pattern presents one problem and one solution; easy to grasp and summarize. “Responsive Disclosure” “Multistep Indicator” Tight focus makes patterns easy to grasp and share in an email that offers a url to the pattern or an example of its use.

14. Facilitate sharing of design knowledge & common language Style Guide many details Design Patterns One focus per pattern Many detailsOne clear focus

15. A design pattern applied to a current Sakai design problem: Multi-step indicator New Sakai Tool, in development: Resource Viewer Early mockups Pattern: Multi-step indicator: - Sakai - Berkeley - A favorite exampleSakaiBerkeleyA favorite example Resource Viewer v5 (Harriet Truscott) – related solutionResource Viewer v5 (Harriet Truscott)

16. References See word doc for useful references Style Guide Style Guide Good multi-step indicator: https://www.emusic.com/registration/1.html?fref=700626&refrsrc=spirevision Berkeley: http://harbinger.sims.berkeley.edu/ui_designpatterns/webpatterns2/webpatterns/pattern.php?id=7 http://developer.yahoo.com/ypatterns/ http://designinginterfaces.com/ Jenifer Tidwellhttp://designinginterfaces.com/ Confluence: http://issues.sakaiproject.org/confluence/display/DESPAT/Library Daphne’s Old Presentation Colin’s Blog page 08/06

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

18. 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)

19. Futures

20. Roadmap Post-mortem: refine process for pattern production Form team for round 2 Review (e.g other external DPs) test (usability, accessibility, acceptance (Sakai community)) current patterns

21. Roadmap Determine full set of patterns we want for the Sakai DP library Chunk up related patterns

22. Q & A