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

Identifying Patterns

The Coliseum : Rome, Italy

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 Coliseum

...as used on the Nayabashi Bridge

...as used at Sacré Coeur

The Structure of Patterns

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 does the user want? 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution Context When to use it 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it Solution How to meet the user’s needs 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the user’s needs 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the user’s needs Rationale Why is this a good solution? 5 parts of a design pattern

WHAT What does the user want? Examples An archetypal example of the solution USE WHEN When to use it HOW How to meet the user’s needs WHY Why is this a good solution? 5 parts of a design pattern

WHAT Examples USE WHEN HOW WHY 5 parts of a design pattern

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

6 Steps to Write A Pattern

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

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)

Interaction Design Pattern (what / when / why / how) Research Patterns inherently should be backed up by research

Components

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!

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

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

These are the working “instances” of the patterns Stencils or in the library for the interaction designer Components 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

These are the working “instances” of the patterns Stencils or in the library for the 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 the backed up by research patterns and components 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

These are the working “instances” of the patterns Stencils or in the library for the 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

questions?

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/

http://www.usercentered.de	94
http://www.emdezine.com	70
http://uxwatt.blogspot.it	54
http://www.techgig.com	30
http://www.felgner.ch	12
http://simpleandopen.blogspot.com	11
http://static.slidesharecdn.com	6
http://www.martin-koser.de	4
http://simpleandopen.blogspot.de	2
http://feeds2.feedburner.com	1

Patterns, Components, and Code, Oh My!

by erin malone on Aug 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 284

Statistics

Patterns, Components, and Code, Oh My! — Presentation Transcript