Patterns, Components, and Code, Oh My!

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

what I’m covering
Patterns: What they are and why you should care
Standards, Guidelines and Brand: Where this fits
Components: How they are different from patterns
Code: Mapping a code library to a pattern library
Frameworks and toolkits: Bringing them all together

Brief
History

Christopher Alexander: architect

Brief
History
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”

Brief
History
Patterns In Software Computing
Ward Cunningham & Kent Beck use Christopher Alexander
1987 as a model to develop a small pattern language for SmallTalk

1995 Gang of Four publish Design Patterns Book

Patterns In User Experience Design
Jenifer Tidwell presents an interaction pattern library, called
1997 Common Ground, at CHI
Martin Van Welie, releases the his pattern library, one of the first to
2000 bring it online
Design of Sites is published by Douglas Van Duyne,
2002 James A Landay and Jason Hong
2004 Internal Yahoo! Pattern Library started

Brief
Historycont.
Patterns In User Experience Design
Jenifer Tidwell publishes Designing Interfaces
2005
Yahoo! brings their interaction pattern library open
2006 along with the YUI component library

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

Designing Social Interfaces, by Erin Malone and
2009 Christian Crumlish

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

Pace
Layers

Stewart Brand
How 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

Content
Front End Code
Interaction Specs
Interaction Patterns
Visual Design
Infrastructure / Platforms

“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

“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

Nayabashi Bridge : Nagoya, Japan

Sacré Coeur Cathedral : Paris, France

The Coliseum Nayabashi Bridge Sacré Coeur
Rome, Italy Nagoya, Japan Paris, France

What do these structures have in common?

The Coliseum Nayabashi Bridge Sacré Coeur
Rome, Italy Nagoya, Japan Paris, France The Arch

What do these structures have in common?

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

The Arch

...as used on the Nayabashi Bridge

Patterns are optimal
solutions to common
problems in a context.

Pattern Definition for Interaction Design

Patterns are optimal solutions to
common problems in a context.

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

Solution
Overview panel
Detail pane

Pattern Definition for Interaction Design

Problem
What does the user want?

5 parts of a design pattern

WHAT


WHAT
Examples
An archetypal example of the solution


WHAT
Examples
Context
When to use it


WHAT
Examples
USE WHEN
When to use it


WHAT
Examples
USE WHEN
When to use it
Solution
How to meet the user’s needs


WHAT
Examples
USE WHEN
When to use it
HOW


WHAT
Examples
USE WHEN
When to use it
HOW
Rationale
Why is this a good solution?


WHAT
Examples
USE WHEN
When to use it
HOW
WHY
Why is this a good solution?


WHAT
Examples
USE WHEN
HOW
WHY


Comparison of Pattern Fields of Information
Internal Yahoo! Yahoo! Pattern Jared Spools UI Patterns Martin van
Pattern Library Library Pattern Template Template Template
Template

Title Title Name Title Title Title
Attribution
Rating Rating
Problem Summary Problem Summary Description What Problem Summary Problem
Sensitizing Example Sensitizing Example Sensitizing Example Example Example
Use When Use When Context of Use Use When Usage Use When
Template Fields

Solution Solution How It Works How Solution Solution
How
Co-requisites
Rationale Rationale Why Rationale Why
History

Special Cases Also Known As

Accessibility Accessibility
Supporting Research Usability Results and Literature
User Feedback
Related Patterns Related Patterns Related Patterns
Code Examples Code Examples Source Code Code Examples
As Used on Yahoo! Competitive Ap- Examples More Examples More Examples
proaches
Comments Blog Link Discussion Discussion

Pattern Templates in the wild

What
User 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.

Sign In

What
The 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.

Buddy List

What
A 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.

Tag an Object

What
A 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

Accordian

Common Sources
• Research Findings
• Product Specifications
• Audits

1. Do research

Screenshots serve as “Sensitizing Examples”

Picture = 1000 Words
Helps 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

2. Capture a screenshot

Come up with a
“to-do” list for the
solution
Back up statements
in the HOW field
as necessary

3. Make a checklist

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

4. Give context and differentiate

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!

5. Make it findable

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

6. Flesh it out

Not the last word
but a great place
to start

What about Specs & Guidelines?
Distinction Patterns Specs & Guidelines

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

the ONE way you are going to
Interpretation can be interpreted multiple ways implement
may change frequently depending
Rate of Change have a slow rate of change on changes in technology and
branding
abstracted from any specific skin, finished within one visual system,
Brand Adherence and flexible to adapt to many although variations may be
visual treatments defined
generally taking advantage of a
Technology technology agnostic technology (i.e. flash or ajax or
java)
is an INSTANCE of the design,
represents how a design should inclusive of the tradeoffs and
work, under ideal conditions
How It Works (discusses considerations based constraints established by
on various contexts i.e. tradeoffs) company, brand and technical
goals

What about Specs & Guidelines?
Distinction Patterns Specs & Guidelines

Specificity a generalized set of considerations detailed instructions that define

ing
the solution

the ONE way you are going to

nk
Interpretation can be interpreted multiple ways implement

sed
may change frequently depending

thi
Rate of Change have a slow rate of change on changes in technology and

Ba
branding
abstracted from any specific skin, finished within one visual system,
Brand Adherence res
and flexible to adapt to many although variations may be

le
visual treatments defined
qui

Ru
generally taking advantage of a
Technology technology agnostic technology (i.e. flash or ajax or
java)
Re

is an INSTANCE of the design,
represents how a design should inclusive of the tradeoffs and
work, under ideal conditions
How It Works (discusses considerations based constraints established by
on various contexts i.e. tradeoffs) company, brand and technical
goals

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)

Interaction
Design
Pattern
(what / when /
why / how)

Research

Patterns inherently should be
backed up by research

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

Interaction
Design
Pattern
(what / when /
why / how)

Research

Patterns inherently should be
backed up by research

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 prescriptive
specifications for behaviors, formats, editorial,
visual style, and variable treatments.

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

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

What is a component?

Components versus Patterns
Distinction Patterns Components

Could be a page chunk (log in module),
flow (shopping from product to cart to
Types checkout to receipt), behavior (e.g., Always a chunk of page or screen design
autocomplete), or something else

Globally applicable across a range of Specific to one design system, including
Specificity contexts, even if elements are similar layout, color, type, and behaviors

Up to the designer to appropriately apply Targeted to specific location(s) within a
Location principles and locate within a screen
design page layout, based on approved usage

Abstracted from any specific skin, and Finished within one visual system, although
Style flexible to adapt to many visual
treatments variations may be defined

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

While starter code may be available, it Ideally represented by formalized html,
Markup & Code needs to be tailored to fit the system javascript, and CSS if the library is built

Represents how a design should work, Represents how a design does work,
How It Works under preferred conditions (but may
suggest how to cope with tradeoffs)
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/

Sign In Module
Logo

Lifestyle Image and Tagline
Sign
Up
Module
Benefits Module CTA Button

Single
Column Press &
Benefits Testimonials
Modules

Footer

Logo Sign In Module

TabSet

Lifestyle Image and Benefits

Sign
Workshop Video Up
Module Benefits Module
Modules CTA Button

News Blog
Module Modules

Press &
Testimonials

Footer

Sign In Module
Logo Search Module
Sign Up Module
Ticker
CTA Button

Real
Who’s Time
Here Stream
Signs Module
of Life
Module

Footer

Sign In Module

More Details

Component examples - as wireframe snips

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 2 3
Item Title 1 Item Title 2 Item Title 3
Subtitle 1 Subtitle 2 Subtitle 3

>> View all

Tab 1 Tab 2 Tab 3

Field Label:

Instructional text associated with this field
Primary Secondary
Error Title
Field Label: Recovery instructions
Instructional text associated with this field
appear in this space
Primary Secondary
Subtext Subtext

Design stencils for wireframing

Stencils can be specific to the tool:
Components libraries in Axure
EightShapes Unify for InDesign
Konigi’s stencils for Omnigraffle Or some combination
guuui Stencils for Visio
of all these types

Specific to a library: Specific to a company:
Yahoo! Pattern Library stencils Yahoo!, eBay, SalesForce.com,
for Omnigraffle, Illustrator, SAP, Sears, Comcast etc.
Fireworks, Axure, etc.

Use the tool that helps your team be more efficient!

Stencils or “instances” of the patterns
Components in the library for the

Interaction
Design
Pattern
(what / when /
why / how)

Research Code

Patterns inherently should be Code library mapped to the
backed up by research patterns and components
where possible

ui controls matrix
Carousel / Coverflow

Fisheye / Spotlight

Progress Indicator
Collapsible Panels

Feedback / Status

Table / Data Grid

WYSIWYG Editor
Vertical Browser
Dynamic Filters

Help/Quick Tip

Record Locator
Auto Complete

Scoped Search
Drag and Drop

Hover Details
Hover Action

View Toggle
Date Picker
Combo box

Inline Edit

Sparklines
Hot Keys
Docking
Dialogs

Toolbar
Gauges

Rating
Charts

Slider

Zoom
Dojo x x x x x x x x x x x x x x x x x x x x x x
JQuery 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
Ext JS x x x x x x x x x x x x x x x x x x x x x x
YUI x x x x x x x x x x x x x x x x x x x x
MooTools x x x x x x x x x x x x x x x x x x x x x x x x
Backbase x x x x x x x x x x x x x x x x x x x x x x
Script.aculo.us x x x x x x x x x x x x x x x x x x x x
Laszlo x x x x x x x x x x x x x x x x x x x x x x x
Flex 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
Silverlight 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 x
MochaUI x x x x x x x x x x x x x x x x x x x x x x
Google 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 x
Other x x x x x x x x x x x x x x x x
http://theresaneil.wordpress.com/2009/02/04/30-essential-controls/

Define events for each element of the design

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

Value/Range
Slide Control Track Value Markers and Labels
Indicators
Set value of Set value of Set value of Set value of
closest slide closest slide closest slide closest slide
click Nothing happens control to click control to clicked control to click control to clicked
point value point marker or label
1. Move along
track 2. Update Cannot drag Cannot drag
drag value of slide Cannot drag track Cannot drag value indicators markers and labels
control & value/
range indicator
mouseOver Set cursor to hand Set cursor to hand Set cursor to hand Set cursor to hand Set cursor to hand

Set cursor to Set cursor to Set cursor to Set cursor to Set cursor to
mouseOut normal normal normal normal normal

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

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

Define events for each element of the design

Behavior Constraints
Define basic rules for each element of the design
Explain interaction options
Detail the way elements work with together

1. Values displayed to user may be strings or numbers
Values
2. Balance sliders display a neutral (zero) value at the midpoint

Slide 1. Movement only parallel to track
Control 2. Cannot move beyond track boundaries
Single 3. Should indicate where value is derived from (center or edges)

1. All rules for single slide controls apply
2. Two controls may occupy the same value
Slide 3. Moving slide controls past one another
Control a. Moving slide control A past slide control B pushes slide control B immediately past the
Multiple 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

Bringing it
all together

Elgin County Archives

“instances” of the patterns
Stencils or in the library for the
Components

Interaction
Design
Pattern
(what / when /
why / how)

Research Code

where possible

Specific instructions for interaction designer
building the UI as defined Components
through mocks or
prototypes using Visual specs
components and/or CSS for
Visual Skin components,
UI Specs or CSS for page types &
Component atomic
elements
Interaction
Design
Pattern
(what / when /
why / how)

Research Code

where possible

๏ 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

Bringing it together

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
Foundational items reviews
(page template, grid structures, screen type)

A framework approach defined by process or page

Data Browse

Forms
Full Chart Title Goes Here

Transactions
Subtitle appears here if it exists

Category A
50%

Category B
13%

Category C
12%

Category D

Multi-column
25%

Data Browse Dashboard
Landing
Pages Sign In
Data Search Filtering
Results

1 2 3
Spreadsheet

Wizard NEXT >
Content
Search
Results

A handful of defined screen, page types or processes

Content
with
Sign In User Cards Call to Action

just a few
examples
Sign In

Activity
Stream
Polls

Accordian

Search

Content

Carousel Calendar Picker

A set of components with code

Pattern + Component + Code
= Very strong building block

Specific instructions for interaction designer
building the UI as defined Components
through mocks or
prototypes using Visual specs
components and/or CSS for
Visual Skin components,
UI Specs or CSS for page types &
Component atomic
elements
Interaction
Design
Pattern
(what / when /
why / how)

Research Code

Patterns inherently should be Code library mapped to
backed up by research the patterns and
components where
possible

thanks
Find me
twitter: @emalone
email: erin@tangible-ux.com
blog: http://www.emdezine.com/deziningInteractions

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

the book
http://www.designingsocialinterfaces.com

References
Books
A Pattern Language, Christopher Alexander, et al, Oxford University Press
A Timeless Way of Building, Christopher Alexander, Oxford University
Press
Designing Interfaces, Jenifer Tidwell, O’Reilly Media
Designing Web Interfaces, Theresa Neil and Bill W. Scott, O’Reilly Media
Designing Gestural Interfaces, Dan Saffer, O’Reilly Media
Designing Social Interfaces, Erin Malone and Christian Crumlish, O’Reilly
Media
Design Patterns, Elements of Reusable Object-Oriented Software, Erich
Gamma, Richard Helm, Ralph Johnson and John Vlissides, Addison-Wesley
Professional Computing Series
The 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

References
Some Pattern Libraries
Martin Van Welie http://www.welie.com/
UI Patterns http://ui-patterns.com/
http://design.yahoo.com (for now)
Yahoo! Pattern Library
(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

References
Some Code Component Libraries
jQuery http://jquery.com/
YUI http://developer.yahoo.com/yui/
dojo http://www.dojotoolkit.org/
http://www.sencha.com/signup/extjs.php?
Ext JS gclid=CNS48onA8KICFQVZiAodjUfkhg
mootools http://mootools.net/
script.aculo.us http://script.aculo.us/
Laszlo http://www.laszlosystems.com/
Flex http://www.adobe.com/products/flex/
Flash and Flex Component http://developer.yahoo.com/flash/
Library (ASTRA)
Silverlight http://www.silverlight.net/
MochaUI http://mochaui.org/
Google Web Toolkit http://code.google.com/webtoolkit/
IT Mill http://itmill.com/

Patterns, Components, and Code, Oh My!

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Patterns, Components, and Code, Oh My!

Ähnlich wie Patterns, Components, and Code, Oh My! (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Patterns, Components, and Code, Oh My!