Sakai UI Design PatternsSakai UI Design Patterns
Design Patterns WG: Marc Brierley, Colin Clark, Kathy Moore,
Daphne Ogle, Judy Stern, (also Tim Archer, Kristol Hancock)
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
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?
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."
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
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
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)
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
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
Interaction consistency with design flexibility
Style Guide Design 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
Facilitate sharing of design knowledge & common language Style Guide Design 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.
Facilitate sharing of design knowledge & common language Style Guidemany details
Design PatternsOne focus per pattern
Many details One clear focus
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 example
• Resource Viewer v5 (Harriet Truscott) – related solution
References• See word doc for useful references
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 Tidwell
• Confluence:• http://issues.sakaiproject.org/confluence/display/DESPAT/Library
• Daphne’s Old Presentation• Colin’s Blog page 08/06
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)
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
Roadmap
• Determine full set of patterns we want for the Sakai DP library
• Chunk up related patterns