Your SlideShare is downloading. ×
UX Edmonton - Pattern Libraries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UX Edmonton - Pattern Libraries

282

Published on

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

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
282
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Design Pattern Libraries User Experience Edmonton @uxyeg http://uxedmonton.com/ https://www.facebook.com/profile.php?id=59071219138 From Yahoo
  • 2. Hi! From Yahoo
  • 3. Interaction Design Patterns  Many different definitions for design patterns  We’ll be talking specifically about interaction design patterns From Yahoo
  • 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. 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. 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. A Catchy Name & Description From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
  • 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. 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. 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. Why use this pattern From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html  Justification for use
  • 12. Visual/Interactive Example From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures  Show is better than tell
  • 13. Full Pattern From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
  • 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. Interaction Patterns: Content- Rich Mouseover (or click) From Yahoo
  • 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. 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. 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. 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. Use Patterns  Behaviors, tasks and activities users perform independent of technology. ◦ How do users act  Offer clues to applying interaction pattern From Yahoo
  • 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. 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. 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. 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. 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. 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. 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. 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. What patterns can help us?  Cyclic ◦ Wizard ◦ Next/Previous Buttons ◦ Progress bars  Entering Data ◦ Field validation ◦ Drop downs ◦ Help text From Yahoo
  • 30. What patterns can help us? From Yahoo Progress Bar Next Previous Buttons Wizard Field Validation Help text
  • 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. 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. 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. Should you bother building your own library? From Yahoo
  • 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. 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. Free Tools!  The Not-so Good ◦ Very simple ◦ Focus on basic patterns ◦ Limited examples ◦ Organizational issues ◦ Not “yours” From Yahoo
  • 38. Free Tools!  The Not-so Good ◦ Very simple ◦ Focus on basic patterns ◦ Limited examples ◦ Organizational issues ◦ Not “yours” From Yahoo
  • 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. 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. 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. Why you should build your own  Can be much more specific (http://ux.mailchimp.com/patterns/tabl es) From Yahoo
  • 43. Why you should build your own  Reuse  Don’t reinvent the wheel  Learn from past successes and failures From Yahoo
  • 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. 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. 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. Questions? From Yahoo
  • 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. From Yahoo

×