Patterns
                                     Components
                                  & Code: Oh My!
erin malone :: a...
what I’m covering
Patterns: What they are and why you should care
Standards, Guidelines and Brand: Where this fits
Compone...
Brief
 History



  Christopher Alexander: architect
Brief
  History
1977 / 1978 publishes
Identified patterns in
architecture
Approaches building in a
human/e way
Considers c...
Brief
 History
  Patterns In Software Computing
         Ward Cunningham & Kent Beck use Christopher Alexander
  1987   as...
Brief
 Historycont.
 Patterns In User Experience Design
        Jenifer Tidwell publishes Designing Interfaces
 2005
     ...
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
a...
Content
                                          Front End Code
                                          Interaction Spe...
“Don’t embed services in
structure, otherwise you
have to tear the house
down to fix them when
they break.
A design welcom...
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 structu...
The Coliseum   Nayabashi Bridge   Sacré Coeur
    Rome, Italy    Nagoya, Japan     Paris, France   The Arch




What do th...
•   A pattern for weight distribution
   •   Reusable in different contexts
   •   An underlying component
   •   A starti...
...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
               ...
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 ...
WHAT
 What does the user want?
 Examples
 An archetypal example of the solution
 USE WHEN
 When to use it




5 parts of a...
WHAT
 What does the user want?
 Examples
 An archetypal example of the solution
 USE WHEN
 When to use it
 Solution
 How t...
WHAT
 What does the user want?
 Examples
 An archetypal example of the solution
 USE WHEN
 When to use it
 HOW
 How to mee...
WHAT
 What does the user want?
 Examples
 An archetypal example of the solution
 USE WHEN
 When to use it
 HOW
 How to mee...
WHAT
 What does the user want?
 Examples
 An archetypal example of the solution
 USE WHEN
 When to use it
 HOW
 How to mee...
WHAT
 Examples
 USE WHEN
 HOW
 WHY


5 parts of a design pattern
Comparison  of  Pattern  Fields  of  Information
                   Internal  Yahoo!       Yahoo!  Pattern        Jared  S...
What
User wants to access their personalized
information or an application that is stored on
the host site.
Use When
• Use...
What
The user wants a distinct list of people
she knows (friends, coworkers, family)
to communicate with in real time.

Us...
What
A user wants to attach their own
keyword to an object for organization
and later retrieval.

Use When
• Use when a us...
What
A person wants to access a large
amount of related information
without losing context (i.e. stay on
the same page)

U...
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 ...
Come up with a
  “to-do” list for the
  solution
 Back up statements
  in the HOW field
  as necessary




3. Make a check...
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-frie...
Document open questions and special cases
  •   Open questions can help in research planning
  •   Special cases = known e...
Not the last word
 but a great place
           to start
What about Specs & Guidelines?
Distinction       Patterns                            Specs & Guidelines


Specificity     ...
What about Specs & Guidelines?
Distinction       Patterns                            Specs & Guidelines


Specificity     ...
So Now
What?
Why use patterns?
๏   understand the variety of interaction problems and various contexts of use
๏   gives you all the rat...
Interaction
  Design
  Pattern
(what / when /
  why / how)
Interaction
                                  Design
                                  Pattern
                           ...
Components
Interaction
                                  Design
                                  Pattern
                           ...
These are the working
                                 Stencils or      “instances” of the patterns
                      ...
A reusable, design system-specific chunk of a page.

Also known as modules, chunks, portlets, widgets, blocks, or
other la...
Components versus Patterns
Distinction     Patterns                                                     Components

      ...
Sign In Module
  Logo


Lifestyle Image and Tagline
                                    Sign
                             ...
Logo                      Sign In Module

       TabSet

Lifestyle Image and Benefits


                                 S...
Sign In Module
Logo       Search Module
                               Sign Up Module
 Ticker
                            ...
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 can be specific to the tool:
 Components libraries in Axure
 EightShapes Unify for InDesign
 Konigi’s stencils fo...
Code
These are the working
                                 Stencils or      “instances” of the patterns
                      ...
These are the working
                                 Stencils or      “instances” of the patterns
                      ...
ui controls matrix
                                  Carousel / Coverflow




                                            ...
Define events for each element of the design


Interesting Moments
 Explain what happens to each element at key moments of...
Define events for each element of the design


Behavior Constraints
Define basic rules for each element of the design
Expl...
Bringing it
all together


Elgin County Archives
These are the working
                                                  “instances” of the patterns
                      ...
These are the working
                                                           “instances” of the patterns
             ...
๏   Design and development work together to map
     patterns, components and code
 ๏   Design specifies the behavior cons...
A process or page
                                                          made up of a
                                 ...
Data Browse


                         Forms
                                                      Full Chart Title Goes H...
Content
                                                             with
       Sign In                      User Cards  ...
Pattern + Component + Code
= Very strong building block
These are the working
                                                           “instances” of the patterns
             ...
questions?
thanks
Find me
twitter: @emalone
email: erin@tangible-ux.com
blog: http://www.emdezine.com/deziningInteractions

slides: h...
References
Books
 A Pattern Language, Christopher Alexander, et al, Oxford University Press
 A Timeless Way of Building, C...
References
Some Pattern Libraries
Martin Van Welie         http://www.welie.com/
UI Patterns              http://ui-patter...
References
Some Code Component Libraries
jQuery                     http://jquery.com/
YUI                        http://d...
Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!
Patterns, Components, and Code, Oh My!
Upcoming SlideShare
Loading in...5
×

Patterns, Components, and Code, Oh My!

9,436

Published on

The talk I gave at An Event Apart, Minneapolis, 2010.

In which I discuss identifying interaction design patterns, writing design patterns, creating a pattern library, creating a component library and code libraries. The three elements - patterns, components and code - are unified as a toolkit for design and development teams.

Published in: Design
1 Comment
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,436
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
492
Comments
1
Likes
44
Embeds 0
No embeds

No notes for slide

Patterns, Components, and Code, Oh My!

  1. 1. Patterns Components & Code: Oh My! erin malone :: an event apart :: minneapolis 2010 @emalone
  2. 2. 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
  3. 3. Brief History Christopher Alexander: architect
  4. 4. 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”
  5. 5. 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
  6. 6. 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)
  7. 7. Pace Layers Stewart Brand How Buildings Learn
  8. 8. “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
  9. 9. 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
  10. 10. “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
  11. 11. Identifying Patterns
  12. 12. The Coliseum : Rome, Italy
  13. 13. Nayabashi Bridge : Nagoya, Japan
  14. 14. Sacré Coeur Cathedral : Paris, France
  15. 15. The Coliseum Nayabashi Bridge Sacré Coeur Rome, Italy Nagoya, Japan Paris, France What do these structures have in common?
  16. 16. The Coliseum Nayabashi Bridge Sacré Coeur Rome, Italy Nagoya, Japan Paris, France The Arch What do these structures have in common?
  17. 17. • A pattern for weight distribution • Reusable in different contexts • An underlying component • A starting point The Arch
  18. 18. ...as used on the Coliseum
  19. 19. ...as used on the Nayabashi Bridge
  20. 20. ...as used at Sacré Coeur
  21. 21. The Structure of Patterns
  22. 22. Patterns are optimal solutions to common problems in a context. Pattern Definition for Interaction Design
  23. 23. 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
  24. 24. Problem What does the user want? 5 parts of a design pattern
  25. 25. WHAT What does the user want? 5 parts of a design pattern
  26. 26. WHAT What does the user want? Examples An archetypal example of the solution 5 parts of a design pattern
  27. 27. WHAT What does the user want? Examples An archetypal example of the solution Context When to use it 5 parts of a design pattern
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. WHAT Examples USE WHEN HOW WHY 5 parts of a design pattern
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 6 Steps to Write A Pattern
  40. 40. Common Sources • Research Findings • Product Specifications • Audits 1. Do research
  41. 41. 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
  42. 42. Come up with a “to-do” list for the solution Back up statements in the HOW field as necessary 3. Make a checklist
  43. 43. Where is this solution appropriate? How is it different from other, similar patterns? 4. Give context and differentiate
  44. 44. 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
  45. 45. 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
  46. 46. Not the last word but a great place to start
  47. 47. 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
  48. 48. 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
  49. 49. So Now What?
  50. 50. 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
  51. 51. Interaction Design Pattern (what / when / why / how)
  52. 52. Interaction Design Pattern (what / when / why / how) Research Patterns inherently should be backed up by research
  53. 53. Components
  54. 54. Interaction Design Pattern (what / when / why / how) Research Patterns inherently should be backed up by research
  55. 55. 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
  56. 56. 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?
  57. 57. 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/
  58. 58. Sign In Module Logo Lifestyle Image and Tagline Sign Up Module Benefits Module CTA Button Single Column Press & Benefits Testimonials Modules Footer
  59. 59. 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
  60. 60. Sign In Module Logo Search Module Sign Up Module Ticker CTA Button Real Who’s Time Here Stream Signs Module of Life Module Footer
  61. 61. Sign In Module More Details
  62. 62. Component examples - as wireframe snips
  63. 63. 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
  64. 64. 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!
  65. 65. Code
  66. 66. 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
  67. 67. 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
  68. 68. 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/
  69. 69. 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
  70. 70. 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
  71. 71. Bringing it all together Elgin County Archives
  72. 72. 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
  73. 73. 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
  74. 74. ๏ 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
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. Pattern + Component + Code = Very strong building block
  79. 79. 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
  80. 80. questions?
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×