Date post: | 17-Aug-2014 |
Category: |
Design |
Upload: | erin-malone |
View: | 9,594 times |
Download: | 1 times |
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
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?
5 parts of a design pattern
WHATWhat does the user want?
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
ContextWhen to use it
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
USE WHENWhen to use it
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
USE WHENWhen to use it
SolutionHow to meet the user’s needs
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
USE WHENWhen to use it
HOWHow to meet the user’s needs
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
USE WHENWhen to use it
HOWHow to meet the user’s needs
RationaleWhy is this a good solution?
5 parts of a design pattern
WHATWhat does the user want?
ExamplesAn archetypal example of the solution
USE WHENWhen to use it
HOWHow to meet the user’s needs
WHYWhy is this a good solution?
5 parts of a design pattern
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
Interaction Design Pattern
(what / when / why / how)
Components
Research
Patterns inherently should be backed up by research
Interaction Design Pattern
(what / when / why / how)
Research
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
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/
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/
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
Code
Research
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
Research
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
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
Set value of closest slide
control to click point
Set value of closest slide
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
Set cursor to normal
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
Research
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
Code
Code library mapped to the patterns and components where possible
Research
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
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
Code library mapped to the patterns and components where possible
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
Patterns inherently should be backed up by research
Stencils or Components
These are the working “instances” of the patterns in the library for the interaction designer
Interaction Design Pattern
(what / when / why / how)
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
Code library mapped to the patterns and components where possible
questions?
thanksFind metwitter: @emaloneemail: [email protected]: http://www.emdezine.com/deziningInteractions
slides: http://www.aneventapart.com/2010/minneapolis/slides/
the bookhttp://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
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/