patterns, components, and code, oh my!

Patterns Components

& Code: Oh My!erin malone :: an event apart :: minneapolis 2010 @emalone

Patterns: What they are and why you should careStandards, Guidelines and Brand: Where this fitsComponents: How they are different from patternsCode: Mapping a code library to a pattern libraryFrameworks and toolkits: Bringing them all together

what I’m covering

Christopher Alexander: architect

HistoryBrief

mailto:[email protected]


1977 / 1978 publishes

Identified patterns in architecture

Approaches building in a human/e way

Considers context of use for every solution

It’s a design vocabulary, hence “pattern language”

HistoryBrief

HistoryBrief

Patterns In Software ComputingPatterns In Software ComputingPatterns In Software Computing

1987Ward Cunningham & Kent Beck use Christopher Alexander as a model to develop a small pattern language for SmallTalk

1995 Gang of Four publish Design Patterns Book

Patterns In User Experience DesignPatterns In User Experience DesignPatterns In User Experience Design

1997Jenifer Tidwell presents an interaction pattern library, called Common Ground, at CHI

2000Martin Van Welie, releases the his pattern library, one of the first to bring it online

2002Design of Sites is published by Douglas Van Duyne, James A Landay and Jason Hong

2004 Internal Yahoo! Pattern Library started

HistoryBrief

Patterns In User Experience DesignPatterns In User Experience DesignPatterns In User Experience Design2005 Jenifer Tidwell publishes Designing Interfaces

2006Yahoo! brings their interaction pattern library open along with the YUI component library

2008Designing Web Interfaces, by Theresa Neil and Bill Scott and Designing Gestural Interfaces, by Dan Saffer

2009Designing Social Interfaces, by Erin Malone and Christian Crumlish

2010Explosion of pattern libraries on the web for web and mobile (list in appendix slides)

cont.

PaceLayers

Stewart BrandHow Buildings Learn

“The fast parts learn, propose, and absorb shocks; the slow parts remember, integrate, and constrain. The fast parts get all the attention. The slow parts have all the power.”

Steward Brand, The Long Now Foundation

“The fast parts learn, propose, and absorb shocks; the slow parts remember, integrate, and constrain. The fast parts get all the attention. The slow parts have all the power.”

Steward Brand, The Long Now Foundation

Visual DesignInfrastructure / Platforms

Interaction Patterns

Interaction SpecsFront End CodeContent

“Don’t embed services in structure, otherwise you have to tear the house down to fix them when they break. A design welcomes change or fights it.”

~ pixelcharmer

Identifying Patterns

The Coliseum : Rome, Italy

Nayabashi Bridge 納屋橋 : Nagoya, Japan

Sacré Coeur Cathedral : Paris, France

Nayabashi BridgeNagoya, Japan

The ColiseumRome, Italy

Sacré CoeurParis, France

What do these structures have in common?

What do these structures have in common?

The ArchSacré CoeurParis, France

Nayabashi BridgeNagoya, Japan

The ColiseumRome, Italy

The Arch

• A pattern for weight distribution• Reusable in different contexts• An underlying component• A starting point

...as used on the Coliseum

...as used on the Nayabashi Bridge

...as used at Sacré Coeur

The Structure of Patterns

Pattern Definition for Interaction Design

Patterns are optimal solutions to common problems in a context.

Pattern Definition for Interaction Design

ProblemLarge amounts of data. User needs to see details but wants context of overview data

SolutionOverview panelDetail pane

Patterns are optimal solutions to common problems in a context.

5 parts of a design pattern

ProblemWhat does the user want?


WHATWhat does the user want?



ExamplesAn archetypal example of the solution




ContextWhen to use it




USE WHENWhen to use it





SolutionHow to meet the user’s needs





HOWHow to meet the user’s needs






RationaleWhy is this a good solution?






WHYWhy is this a good solution?


WHATExamplesUSE WHENHOWWHY

Pattern Templates in the wild

Comparison of Pattern Fields of InformationTemplate Fields

Internal Yahoo! Pattern Library

Yahoo! Pattern Library

Jared Spools Pattern Template Template

UI Patterns Template

Martin van

TemplateTemplate in Gestural Interfaces

Title Title Name Title Title Title Title

Attribution

Rating Rating

Problem Summary Problem Summary Description What Problem Summary Problem What

Sensitizing Example Sensitizing Example Sensitizing Example Example Example Examples

Use When Use When Context of Use Use When Usage Use When Use When

Solution Solution How It Works How Solution Solution

How How

Co-requisites

Rationale Rationale Why Rationale Why Why

History

Special Cases Also Known As

Accessibility Accessibility

Supporting Research Usability Results and

User Feedback

Literature

Related Patterns Related Patterns Related Patterns

Code Examples Code Examples Source Code Code Examples

As Used on Yahoo! Competitive Ap-

proaches

Examples More Examples More Examples

Comments Blog Link Discussion Discussion

Sign In

WhatUser wants to access their personalized information or an application that is stored on the host site. Use When• Use when personal data needs to be stored

or when there is customization or personalization unique to the particular user.

• Use when there is user generated content and the submissions or files need to be identified and/or managed by the author.

• Use when there are security or privacy concerns.

How• Provide an input field for the login name.• Provide an input field for the password.• Provide a clear way to retrieve the user name if it is forgotten.

• Provide a clear way to retrieve the password if it is forgotten.

• Provide a clearly labeled Sign In button.

Buddy List

WhatThe user wants a distinct list of people she knows (friends, coworkers, family) to communicate with in real time.

Use When• Use this pattern when offering just-

in-time communications, such as instant messaging.

How• The buddy list is a list of people a user wants to keep track of.

• Indicate which users are currently online (see Presence or OPI).

• Indicate which users are offline.• Indicate when a user may be busy and not taking messages but is still online.

• Consider indicating when a user is idle, which often indicates that the user is not at the computer or is engaged in another task.

Tag an Object

WhatA user wants to attach their own keyword to an object for organization and later retrieval.

Use When• Use when a user is collecting a large

amount of unstructured data, like photos.

• Use when a user wants to manage a large collection of items, like books.

• Use to blend user generated labels and keywords with structured metadata.

How• Allow users to add their own tags to

an object.• Allow users to delete tags they have

associated with an object. This allows for deletion of duplicates or mis-spellings.

• Provide very clear instructions for how to separate distinct tags.

Accordian

WhatA person wants to access a large amount of related information without losing context (i.e. stay on the same page)

Use When• the number of options is large• the space is constrained• the list of items can be logically

grouped into smaller, roughly equal sized chunks.

How• Stack panels vertically or horizontally and open up one panel at the time while collapsing the other panels

• Only 1 panel is open at one time.• Users can select other panels by clicking on the panel header

6 Steps to Write A Pattern

1. Do research

Common Sources•Research Findings•Product Specifications•Audits

2. Capture a screenshot

Screenshots serve as “Sensitizing Examples”

Picture = 1000 WordsHelps generate ideas for checklist

Immediately see what the pattern is about

If ambitious, capture an animation to show the interaction in action with a video clip

3. Make a checklist

Come up with a “to-do” list for the solution

Back up statements in the HOW field as necessary

4. Give context and differentiate

Where is this solution appropriate?How is it different from other, similar patterns?

5. Make it findable

Write a problem statement• Why does the user care?• What is the user trying to accomplish?

Create a designer-friendly title• What would your co-workers call this?• What is it called in the larger ux community?

• How does it fit in the larger collection?

In the collection - assign a category• Cross-reference code• Note related visual standards and patterns

Publish it!

6. Flesh it out

Document open questions and special cases• Open questions can help in research planning

• Special cases = known exceptions

Add links to supporting research

Cross reference related patterns

Not the last wordbut a great place

to start

Distinction Patterns Specs & Guidelines

Specificity a generalized set of considerations detailed instructions that define the solution

Interpretation can be interpreted multiple ways the ONE way you are going to implement

Rate of Change have a slow rate of changemay change frequently depending on changes in technology and branding

Brand Adherenceabstracted from any specific skin, and flexible to adapt to many visual treatments

finished within one visual system, although variations may be defined

Technology technology agnosticgenerally taking advantage of a technology (i.e. flash or ajax or java)

How It Works represents how a design should work, under ideal conditions (discusses considerations based on various contexts i.e. tradeoffs)

is an INSTANCE of the design, inclusive of the tradeoffs and constraints established by company, brand and technical goals

What about Specs & Guidelines?

Distinction Patterns Specs & Guidelines

Specificity a generalized set of considerations detailed instructions that define the solution

Interpretation can be interpreted multiple ways the ONE way you are going to implement

Rate of Change have a slow rate of changemay change frequently depending on changes in technology and branding

Brand Adherenceabstracted from any specific skin, and flexible to adapt to many visual treatments

finished within one visual system, although variations may be defined

Technology technology agnosticgenerally taking advantage of a technology (i.e. flash or ajax or java)

How It Works represents how a design should work, under ideal conditions (discusses considerations based on various contexts i.e. tradeoffs)

is an INSTANCE of the design, inclusive of the tradeoffs and constraints established by company, brand and technical goals

What about Specs & Guidelines?

Rule

Base

d

Requ

ires t

hink

ing

So Now What?

Why use patterns?๏ understand the variety of interaction problems and various contexts of use

๏ gives you all the rationale you need, with research and examples, to back up your decisions and know that you are starting with a usable solution

๏ builds consensus, and captures shared knowledge

๏ provides an integrated vision of the interface across the company - exemplifies product excellences

๏ can inform developers and other cross-functional team members about settled design solutions so that the design team isn’t needed for every piece of a project

๏ all design team members can contribute to an agreed upon behavioral vocabulary for the company’s products

๏ can rationalize multiple variants of a design, can refine outdated decisions and solutions and can help new employees come up to speed and get on the same page as the rest of the team in a quick and timely fashion

Interaction Design Pattern

(what / when / why / how)

Research

Patterns inherently should be backed up by research



Components

Research




Research


Stencils or Components

These are the working “instances” of the patterns in the library for the interaction designer



A reusable, design system-specific chunk of a page.

Also known as modules, chunks, portlets, widgets, blocks, or other labels depending on the design context - are put together - like building blocks to create an entire page.

Components might have a specific application within a page grid and usually have prescriptivespecifications for behaviors, formats, editorial, visual style, and variable treatments.

In a pattern library, the component is often the reference design.

What is a component?http://www.!ickr.com/photos/donsolo/2362796995/

http://www.flickr.com/photos/donsolo/2362796995/

http://www.flickr.com/photos/donsolo/2362796995/

Components versus PatternsDistinction Patterns Components

TypesCould be a page chunk (log in module), flow (shopping from product to cart to checkout to receipt), behavior (e.g., autocomplete), or something else

Always a chunk of page or screen design

Specificity Globally applicable across a range of contexts, even if elements are similar

Specific to one design system, including layout, color, type, and behaviors

LocationUp to the designer to appropriately apply principles and locate within a screen design

Targeted to specific location(s) within a page layout, based on approved usage

Style Abstracted from any specific skin, and flexible to adapt to many visual treatments

Finished within one visual system, although variations may be defined

Editorial Perhaps some basic editorial guidance Specific data, formats, guideline, style/tone, and even defined feed

Markup & Code While starter code may be available, it needs to be tailored to fit the system

Ideally represented by formalized html, javascript, and CSS if the library is built

How It Works Represents how a design should work, under preferred conditions (but may suggest how to cope with tradeoffs)

Represents how a design does work, inclusive of the tradeoffs and constraints established during the design process

From the article Components Versus Patterns by Nathan Curtis of EightShapes http://www.uie.com/articles/components_vs_patterns/

http://www.uie.com/articles/components_vs_patterns/

http://www.uie.com/articles/components_vs_patterns/

Logo Sign In Module

Single Column Benefits Modules

Benefits Module

Lifestyle Image and Tagline

Footer

Press & Testimonials

Sign Up

ModuleCTA Button

Logo Sign In Module

Video Benefits Modules

Lifestyle Image and Benefits

Footer

Press & Testimonials

Sign Up

ModuleCTA Button

TabSet

News Module

Blog Modules

Workshop Module

Sign Up Module

LogoSign In Module

Search Module

Ticker

Real Time

Stream Module

CTA Button

Who’s HereSigns of Life Module

Footer

Sign In Module

More Details

Component examples - as wireframe snips

Design stencils for wireframing

Design stencils provide a visualization of the pattern in an instance: a component

Design stencils also provide atomic elements for “realizing” a design from the pattern

Container Title Goes Here

1

Item Title 1

Subtitle 1

2

Item Title 2

Subtitle 2

3

Item Title 3

Subtitle 3

>> View all

Field Label:

Instructional text associated with this field

Error Title

Recovery instructions appear in this space

Field Label:

Instructional text associated with this field

Primary Secondary

PrimarySubtext

SecondarySubtext

Tab 2Tab 1 Tab 3

Use the tool that helps your team be more efficient!

Stencils can be specific to the tool:

Components libraries in Axure

EightShapes Unify for InDesign

Konigi’s stencils for Omnigraffle

guuui Stencils for Visio

Specific to a library:

Yahoo! Pattern Library stencils for Omnigraffle, Illustrator, Fireworks, Axure, etc.

Specific to a company:

Yahoo!, eBay, SalesForce.com, SAP, Sears, Comcast etc.

Or some combination of all these types

Research






Research






Code

Code library mapped to the patterns and components where possible

ui controls matrix

Dojo x x x x x x x x x x x x x x x x x x x x x xJQuery x x x x x x x x x x x x x x x x x x x x x x x x x xExt JS x x x x x x x x x x x x x x x x x x x x x xYUI x x x x x x x x x x x x x x x x x x x xMooTools x x x x x x x x x x x x x x x x x x x x x x x xBackbase x x x x x x x x x x x x x x x x x x x x x xScript.aculo.us x x x x x x x x x x x x x x x x x x x xLaszlo x x x x x x x x x x x x x x x x x x x x x x xFlex x x x x x x x x x x x x x x x x x x x x x x x x x x xSilverlight x x x x x x x x x x x x x x x x x x x x x x x x x x x xMochaUI x x x x x x x x x x x x x x x x x x x x x xGoogle Web Toolkit x x x x x x x x x x x x

IT Mill x x x x x x x x x x x x x xOther x x x x x x x x x x x x x x x x

Auto

Com

plet

e

Caro

usel

/ C

over

flow

Char

ts

Colla

psib

le P

anel

s

Com

bo b

ox

Date

Pic

ker

Dial

ogs

Dock

ing

Drag

and

Dro

p

Dyna

mic

Filt

ers

Feed

back

/ S

tatu

s

Fish

eye

/ Sp

otlig

ht

Gaug

es

Help

/Qui

ck T

ip

Hot

Keys

Hove

r Ac

tion

Hove

r De

tails

Inlin

e Ed

it

Prog

ress

Ind

icat

or

Rati

ng

Reco

rd L

ocat

or

Slid

er

Scop

ed S

earc

h

Spar

klin

es

Tabl

e /

Data

Gri

d

Tool

bar

Vert

ical

Bro

wse

r

View

Tog

gle

WYS

IWYG

Edi

tor

Zoom

http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/



Define events for each element of the design

Interesting MomentsSlide Control Track Value Value/Range

Indicators Markers and Labels

click Nothing happensSet value of closest slide

control to click point

Set value of closest slide

control to clicked value


control to click point


control to clicked marker or label

drag

1. Move along track 2. Update value of slide

control & value/range indicator

Cannot drag track Cannot drag value Cannot drag indicators

Cannot drag markers and labels

mouseOver Set cursor to hand Set cursor to hand Set cursor to hand Set cursor to hand Set cursor to hand

mouseOut Set cursor to normal

Set cursor to normal




mouseDown Slide control glows n/a n/a n/a n/a

mouseUp End slide control glow n/a n/a n/a n/a

Explain what happens to each element at key moments of useMay be bound to code-based events or user initiated actions

Define events for each element of the design

Behavior Constraints

Values1. Values displayed to user may be strings or numbers

2. Balance sliders display a neutral (zero) value at the midpoint

Slide Control

Single

1. Movement only parallel to track

2. Cannot move beyond track boundaries

3. Should indicate where value is derived from (center or edges)

Slide ControlMultiple

1. All rules for single slide controls apply

2. Two controls may occupy the same value

3. Moving slide controls past one another

a. Moving slide control A past slide control B pushes slide control B immediately past the

value of slide control A

b. Moving slide control A past slide control B fixes the position of slide control B

3. Value range displayed between slide controls

Track 1. Shows the scope of values that can be accessed by the slide control

Define basic rules for each element of the designExplain interaction optionsDetail the way elements work with together

Bringing it all together

Elgin County Archives

http://www.flickr.com/people/ccontill/

http://www.flickr.com/people/ccontill/

Research






Code


Research






Code

UI SpecsVisual Skin or CSS for

Component

Specific instructions for building the UI as defined through mocks or prototypes using components

Visual specs and/or CSS for components, page types & atomic elements


Bringing it together

๏Design and development work together to map patterns, components and code

๏Design specifies the behavior constraints and interesting moments

๏Create a rapid prototyping toolkit for user testing and proof of concept

๏Low fidelity - wireframes, paper๏Hi fidelity - code, visual skins

Foundational items(page template, grid structures, screen type)

A framework approach defined by process or page

A process or page made up of a suite of patterns and components

i.e.

Purchase Process

Sign Up / Registration

Create Content

Search / Results

Item Details - w/ratings and reviews

A handful of defined screen, page types or processes

Full Chart Title Goes HereSubtitle appears here if it exists

Category A50%

Category B13%

Category C12%

Category D25%

NEXT >

1 2 3

Data Browse

Multi-column Data Browse

Content Search Results

Wizard

Forms

Landing Pages

Spreadsheet

Data Search Results

Sign In

Transactions

Dashboard

Filtering

A set of components with code

Carousel

Accordian

Sign In

Sign In

User Cards

Activity Stream

Polls

Content withCall to Action

Content

Search

Calendar Picker

just a few examples

Pattern + Component + Code = Very strong building block

Research






Code

UI SpecsVisual Skin or CSS for

Component

Specific instructions for building the UI as defined through mocks or prototypes using components

Visual specs and/or CSS for components, page types & atomic elements


questions?

thanksFind metwitter: @emaloneemail: [email protected]: http://www.emdezine.com/deziningInteractions

slides: http://www.aneventapart.com/2010/minneapolis/slides/

the bookhttp://www.designingsocialinterfaces.com



http://www.designingsocialinterfaces.com

http://www.designingsocialinterfaces.com

ReferencesBooksBooksA Pattern Language, Christopher Alexander, et al, Oxford University Press

A Timeless Way of Building, Christopher Alexander, Oxford University PressDesigning Interfaces, Jenifer Tidwell, O’Reilly MediaDesigning Web Interfaces, Theresa Neil and Bill W. Scott, O’Reilly MediaDesigning Gestural Interfaces, Dan Saffer, O’Reilly MediaDesigning Social Interfaces, Erin Malone and Christian Crumlish, O’Reilly MediaDesign Patterns, Elements of Reusable Object-Oriented Software, Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides, Addison-Wesley Professional Computing SeriesThe Design of Sites, Douglas K. Van Duyne, James A. Landay and Jason I. Hong, Prentice Hall

How Buildings Learn: What Happens After They’re Built, Stewart Brand, Penguin

ReferencesSome Pattern LibrariesSome Pattern LibrariesMartin Van Welie http://www.welie.com/UI Patterns http://ui-patterns.com/

Yahoo! Pattern Libraryhttp://design.yahoo.com (for now)

(coming soon at http://uipatterns.org)ID Patterns for Games http://www.helpyouplay.com/wiki/index.php5?title=Main_Page

Social Design Patterns http://www.designingsocialinterfaces.com/patternswiki

Mobile Design Patterns http://patterns.design4mobile.com/index.php/Main_Page

AJAX Patterns http://ajaxpatterns.org/

Search Patterns http://www.findability.org/archives/000194.php

RIA Patterns http://designingwebinterfaces.com/

Behavior Patterns http://www.danlockton.com/dwi/Main_Page

Endeca Pattern Library http://patterns.endeca.com/content/library/en/home.html

Quince http://quince.infragistics.com/UX-Design-Patterns.aspx

http://www.welie.com

http://www.welie.com

http://ui-patterns.com

http://ui-patterns.com

http://ui

http://ui

http://www.helpyouplay.com/wiki/index.php5?title=Main_Page


http://www.designingsocialinterfaces.com/patternswiki


http://patterns.design4mobile.com/index.php/Main_Page


http://ajaxpatterns.org

http://ajaxpatterns.org

http://www.findability.org/archives/000194.php


http://designingwebinterfaces.com

http://designingwebinterfaces.com

http://www.danlockton.com/dwi/Main_Page


http://patterns.endeca.com/content/library/en/home.html

http://patterns.endeca.com/content/library/en/home.html

http://quince.infragistics.com/UX-Design-Patterns.aspx

http://quince.infragistics.com/UX-Design-Patterns.aspx

ReferencesSome Code Component LibrariesSome Code Component LibrariesjQuery http://jquery.com/

YUI http://developer.yahoo.com/yui/dojo http://www.dojotoolkit.org/

Ext JS http://www.sencha.com/signup/extjs.php?gclid=CNS48onA8KICFQVZiAodjUfkhg

mootools http://mootools.net/script.aculo.us http://script.aculo.us/

Laszlo http://www.laszlosystems.com/

FlexFlash and Flex Component Library (ASTRA)

http://www.adobe.com/products/flex/http://developer.yahoo.com/flash/

Silverlight http://www.silverlight.net/

MochaUI http://mochaui.org/

Google Web Toolkit http://code.google.com/webtoolkit/

IT Mill http://itmill.com/

http://jquery.com

http://jquery.com

http://developer.yahoo.com/yui/

http://developer.yahoo.com/yui/

http://www.dojotoolkit.org

http://www.dojotoolkit.org









http://www.laszlosystems.com

http://www.laszlosystems.com





http://www.silverlight.net

http://www.silverlight.net



http://code.google.com/webtoolkit/

http://code.google.com/webtoolkit/

http://itmill.com

http://itmill.com