UX Edmonton - Pattern Libraries

Download UX Edmonton - Pattern Libraries

Post on 27-Jan-2015

103 views

Category:

Design

0 download

DESCRIPTION

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

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 Well 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. Whats 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 Shouldnt 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? Its boring Its 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? Users 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 Dont 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 Dont 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