Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Edmonton - Pattern Libraries

Presentation on design pattern libraries presented at UX Edmonton's March Meet-up.

  • Login to see the comments

UX Edmonton - Pattern Libraries

  1. 1. Design Pattern Libraries User Experience Edmonton @uxyeg http://uxedmonton.com/ https://www.facebook.com/profile.php?id=59071219138 From Yahoo
  2. 2. Hi! From Yahoo
  3. 3. Interaction Design Patterns  Many different definitions for design patterns  We’ll be talking specifically about interaction design patterns From Yahoo
  4. 4. What is an Pattern?  Component of functionality or style that can be reused between solutions  A way to describe how a design element should look, act and be used in a design From Yahoo
  5. 5. What is an Pattern?  “… Recurring solutions for common problems”  Problem: ◦ Users need to be able to get to the most common areas of a site at any time.  Solution: ◦ Global Navigation. From Yahoo
  6. 6. Basic Elements of a Pattern  A catchy name and a brief description  The problem you are trying to solve.  When this pattern should be implemented.  How to implement the pattern  A visual or interactive example From Yahoo
  7. 7. A Catchy Name & Description From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
  8. 8. Problem to solve From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html  One or two sentences  Sum up what the problem is
  9. 9. When to use From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html  List the conditions that this pattern should be used in
  10. 10. What’s the solution From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html  Description of the solution  How to implement it
  11. 11. Why use this pattern From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html  Justification for use
  12. 12. Visual/Interactive Example From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures  Show is better than tell
  13. 13. Full Pattern From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
  14. 14. Many, Many, Many Patterns From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures  Hundreds and hundreds of possible patterns  Simple to complex  Simple ◦ Global navigation, Hyperlinks, Text boxes, Radio buttons  Complex ◦ Rich mouse-overs, carousels, drawers
  15. 15. Interaction Patterns: Content- Rich Mouseover (or click) From Yahoo
  16. 16. Interaction Patterns: The Non- Exhaustive List  Dual function buttons  Builders  Smart Menus  Multi-Level Undo  Sandbox  Inspector  In-Page Tabs  Content-Rich Mouse-overs  Drawer  Inline Actions  Side-by-side Comparisons  Filtered Hierarchies  Multi-Attribute Table Filtering  Tree Table  Column Filtering  Sort  Filter  Customize Data Table Display  Attribute-Based Search  Search Forms  Context Search  Attribute Results Refinement  Results Volume Control  Completion Suggestion  Visual Preview  Save for Later  Builders  Guide Me  Header Segment  Interactive Visualizations  Dashboards  Composite System Messages  In-Context Help  Guide Me  Rate  Promote  Status  Follow From Yahoo
  17. 17. Why Patterns are Good for Complexity  Stop reinventing the wheel – leverage shared knowledge  Smaller chunks make design seem less overwhelming  Creates a common language for discussion From Yahoo
  18. 18. Patterns are Good for Users!  Users feel safe/like familiar things ◦ Cars have the same basic elements for the dashboards.  Easier to learn a system  Lowers barriers to adoption From Yahoo
  19. 19. Pattern Libraries  How we actually organize patterns  Make it simpler to navigate through patterns  Shouldn’t use patterns just because  Design should be a top-down process From Yahoo
  20. 20. Use Patterns  Behaviors, tasks and activities users perform independent of technology. ◦ How do users act  Offer clues to applying interaction pattern From Yahoo
  21. 21. Use Patterns: An Example List  Navigating Large Data Sets  Searching  Entering Data  Information at a Glance  Guidance/Help  Social Interactions  Commerce From Yahoo
  22. 22. Interaction Patterns: The Non- Exhaustive List  Dual function buttons  Builders  Smart Menus  Multi-Level Undo  Sandbox  Inspector  In-Page Tabs  Content-Rich Mouse-overs  Drawer  Inline Actions  Side-by-side Comparisons  Filtered Hierarchies  Multi-Attribute Table Filtering  Tree Table  Column Filtering  Sort  Filter  Customize Data Table Display  Attribute-Based Search  Search Forms  Context Search  Attribute Results Refinement  Results Volume Control  Completion Suggestion  Visual Preview  Save for Later  Builders  Guide Me  Header Segment  Interactive Visualizations  Dashboards  Composite System Messages  In-Context Help  Guide Me  Rate  Promote  Status  Follow From Yahoo
  23. 23. THECOMBINED POWER OF USE AND INTERACTION PATTERNS  Cyclic ◦ Dual function buttons ◦ Builders  Exploration ◦ Forgiveness  Smart Menus  Multi-Level Undo  Sandbox ◦ Revealing Meta Data  Inspector  In-Page Tabs  Content-Rich Mouse- overs  Drawer  Inline Actions  Side-by-side Comparisons  Navigating Large Data Sets ◦ Filtered Hierarchies ◦ Multi-Attribute Table Filtering ◦ Tree Table ◦ Column Filtering ◦ Sort ◦ Filter ◦ Customize Data Table Display  Targeted Searching ◦ Attribute-Based Search ◦ Search Forms ◦ Context Search ◦ Attribute Results Refinement ◦ Results Volume Control  Entering/Editing Data ◦ Completion Suggestion ◦ Visual Preview ◦ Save for Later ◦ Builders ◦ Guide Me  Information at a Glance ◦ Header Segment ◦ Interactive Visualizations ◦ Dashboards  Guidance/Help ◦ Composite System Messages ◦ In-Context Help ◦ Guide Me  Community/Social Interactions ◦ Rate ◦ Promote ◦ Status ◦ Follow From Yahoo
  24. 24. Use Pattern Example  You are opening a family cell phone account online. You need to add other people to the account: Open contact window Gather Contact Info Enter contact information Save contact window
  25. 25. Use Pattern Example  You are opening a family cell phone account online. You need to add other people to the account: Use Pattern: Cyclic Open contact window Gather Contact Info Enter contact information Save contact window From Yahoo
  26. 26. Use Pattern Example  You are opening a family cell phone account online. You need to add other people to the account: Use Pattern: Cyclic Open contact window Gather Contact Info Enter contact information Save contact window From Yahoo Use Pattern: Entering Data
  27. 27. What would a design look like for a “cyclic pattern”?  What do we know from our diagram? ◦ This is a repetitive behavior  What might be of concern to user about this activity? ◦ It’s boring ◦ It’s tedious ◦ User wants the process to be as quick as possible From Yahoo
  28. 28. What would a design look like for a “Entering Data”?  What might be of concern to user about this activity? ◦ Entering data correctly ◦ Entering data quickly From Yahoo
  29. 29. What patterns can help us?  Cyclic ◦ Wizard ◦ Next/Previous Buttons ◦ Progress bars  Entering Data ◦ Field validation ◦ Drop downs ◦ Help text From Yahoo
  30. 30. What patterns can help us? From Yahoo Progress Bar Next Previous Buttons Wizard Field Validation Help text
  31. 31. How do these types of patterns fit together? User’s Goal: Find blue hiking shoe, size 11 Pattern of Use: Searching Interaction Pattern: Attributes-Based Search Interaction Pattern Customized From Yahoo
  32. 32. Benefits of Identifying Use Patterns  Tools for comprehension ◦ Focus on the design problem before working out a solution  Aid in connecting the dots between research data and design  Use and Interaction Patterns speed up design process From Yahoo
  33. 33. The Dark Side of Patterns  Misapplication  People stop believing that testing is necessary  Misconceptions ◦ “Patterns stop us from being innovative”  Patterns running stale is a huge problem, new implementations of patterns need to be constantly developed and improved. From Yahoo
  34. 34. Should you bother building your own library? From Yahoo
  35. 35. Free Tools!  Yahoo! Pattern Library (http://developer.yahoo.com/ypatterns)  UI Patterns (http://ui-patterns.com/)  Patternry (http://patternry.com/)  Quince (http://quince.infragistics.com) From Yahoo
  36. 36. Free Tools!  The Good ◦ Great for design inspiration ◦ Updated by a large community ◦ Most of the leg work has been done for you ◦ Great for smaller organizations From Yahoo
  37. 37. Free Tools!  The Not-so Good ◦ Very simple ◦ Focus on basic patterns ◦ Limited examples ◦ Organizational issues ◦ Not “yours” From Yahoo
  38. 38. Free Tools!  The Not-so Good ◦ Very simple ◦ Focus on basic patterns ◦ Limited examples ◦ Organizational issues ◦ Not “yours” From Yahoo
  39. 39. Why you should build your own  Can organize them in whatever way you want ◦ Use your own use patterns  Customizable ◦ Use your own text From Yahoo
  40. 40. Why you should build your own  Great way to organize access to your code ◦ Your patterns should contain as much practical information possible  Focal point for your past projects  Patterns should include ◦ Links to wireframes/mockups ◦ Prototype code ◦ Links to your code base ◦ Ties to your past research From Yahoo
  41. 41. Why you should build your own  Style Guides ◦ Patterns can include  Header styles  Typography  Backgrounds  Other design decisions… ◦ Define and enforce style decisions ◦ More comprehensive than a simple style guide ◦ More flexible and easier to update From Yahoo
  42. 42. Why you should build your own  Can be much more specific (http://ux.mailchimp.com/patterns/tabl es) From Yahoo
  43. 43. Why you should build your own  Reuse  Don’t reinvent the wheel  Learn from past successes and failures From Yahoo
  44. 44. Examples Use Pattern Information at a Glance Pattern Name Summary Calendar What Problem Does this Solve? The user needs to quickly view a month's upcoming events. When to Use Pattern? * When there are less than 10 events to display * Users will not need to filter or sort a list of events * Users will need only a title or brief description of the event What's the Solution? 1. Present a small calendar control that consumes a small area of the page 2. Display a month's upcoming events in abbreviated form. Why Use This Pattern? A roll-up calendar can be placed on a page that displays upcoming events in an abbreviated form without consuming too much real-estate. Code Resources SharePoint - SharePoint MOSS 2007 Calendar Control Wireframe Resources Visio - Visio Template Library Prototypes HTML Prototype - HTML Prototype Library From Yahoo
  45. 45. Building Your Own  SharePoint, drupal or other customizable team tools  Patternry (http://patternry.com/) ◦ Built specifically for organizing design patterns ◦ Great feature set ◦ Not cheap From Yahoo
  46. 46. Building Your Own  Form a committee ◦ Meet once a week or month ◦ Propose new patterns ◦ Review/edit old patterns ◦ Don’t let your patterns get stale ◦ Include developers, project managers, designers and UX From Yahoo
  47. 47. Questions? From Yahoo
  48. 48. Exercise  Look at this site, identify as many patterns as possible From Yahoo http://www.study.cam.ac.uk/undergraduate/ courses/subjects.html
  49. 49. From Yahoo

×