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

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)

FuturesFutures

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

Q & AQ & A