Building Pattern Libraries January 30, 2009
What is a design pattern?
Design Patterns <ul><li>Solutions to common design problems, tailored to the situation at hand” – Jennifer Tidwell </li></...
 
What is a pattern library?
Pattern Library <ul><li>A handbook of design patterns </li></ul><ul><ul><li>Definitions, implementation guidelines, and ex...
Pattern Libraries at RDVO
Pattern Libraries at RDVO: A Case Study <ul><li>Challenges: </li></ul><ul><li>Started with extensive list of client-reques...
Our Design Pattern Categories
Control Patterns <ul><li>Textbook patterns, agreed on widely by experts </li></ul><ul><li>Named Control because design pat...
Compound Patterns <ul><li>When a pattern utilizes other common patterns, it is Compound </li></ul><ul><li>Is a Compound  p...
Behavior Patterns <ul><li>Behavior patterns act in the background, are unrelated to user actions, or simply add a detail o...
Best Practice Pattern <ul><li>Best Practice patterns are what they sound like: industry best practices that we wanted to c...
Our Pattern Library Structure
Our Pattern Library Structure <ul><li>Word documents: two types of document for each design pattern </li></ul><ul><ul><li>...
Our Pattern Library Structure <ul><li>Design Pattern Document:  </li></ul><ul><li>Description, appropriate uses, considera...
Our Pattern Library Structure <ul><li>Interaction Design Specifications </li></ul><ul><li>Technical drawings, behaviors, a...
Related Topics
Patterns vs. Components <ul><li>From Nathan Curtis’s  “Components Versus Patterns” </li></ul><ul><li>Design patterns offer...
General Pattern Library Challenges <ul><li>How do you know when something is a design pattern? </li></ul><ul><ul><li>Are I...
General Pattern Library Challenges <ul><li>Deciding what goes into a particular pattern library </li></ul><ul><ul><li>We’r...
Our Design Patterns (so far) <ul><li>Progressive Disclosure  </li></ul><ul><li>Inline Editing  </li></ul><ul><li>Transitio...
More information? <ul><li>Contact: </li></ul><ul><li>Ben Zipkin </li></ul><ul><li>Director </li></ul><ul><li>RDVO, Inc. </...
Upcoming SlideShare
Loading in …5
×

RDVO - Building UX Pattern Libraries

3,957 views

Published on

RDVO's approach for planning, implementing, and communicating UX design pattern libraries for complex interactive applications.

Published in: Design, Technology, Education
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,957
On SlideShare
0
From Embeds
0
Number of Embeds
103
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • RDVO - Building UX Pattern Libraries

    1. 1. Building Pattern Libraries January 30, 2009
    2. 2. What is a design pattern?
    3. 3. Design Patterns <ul><li>Solutions to common design problems, tailored to the situation at hand” – Jennifer Tidwell </li></ul><ul><li>Page elements that have become industry standards </li></ul>
    4. 5. What is a pattern library?
    5. 6. Pattern Library <ul><li>A handbook of design patterns </li></ul><ul><ul><li>Definitions, implementation guidelines, and examples of existing implementations </li></ul></ul><ul><li>The purpose is to capture industry best practices, and to formally define in-house creations, for consistent future use </li></ul><ul><li>Design patterns can also be encoded and used in wireframes as “shorthand” </li></ul><ul><li>It’s an interaction design toolkit for everyone, to streamline and reuse ideas </li></ul><ul><li>There is no authoritative, universal Pattern Library; pattern libraries are community-based and depend on intended use </li></ul>
    6. 7. Pattern Libraries at RDVO
    7. 8. Pattern Libraries at RDVO: A Case Study <ul><li>Challenges: </li></ul><ul><li>Started with extensive list of client-requested design patterns for library </li></ul><ul><li>These patterns had varying: </li></ul><ul><ul><li>Levels of complexity </li></ul></ul><ul><ul><li>Environments (web, desktop, mobile, etc.) </li></ul></ul><ul><li>However, the goal was to create a simple library </li></ul><ul><li>Our Approach: </li></ul><ul><li>Consulted several famous pattern libraries: Welie, Tidwell, Yahoo! </li></ul><ul><li>Categorized patterns: Control, Compound, Behavior, Best Practice </li></ul><ul><li>Attempted to trim or modify patterns not related to the client’s UI </li></ul>
    8. 9. Our Design Pattern Categories
    9. 10. Control Patterns <ul><li>Textbook patterns, agreed on widely by experts </li></ul><ul><li>Named Control because design patterns are widely based on, and originated as, UI controls </li></ul>
    10. 11. Compound Patterns <ul><li>When a pattern utilizes other common patterns, it is Compound </li></ul><ul><li>Is a Compound pattern still a pattern? </li></ul>
    11. 12. Behavior Patterns <ul><li>Behavior patterns act in the background, are unrelated to user actions, or simply add a detail or affordance rather than provide new information </li></ul>
    12. 13. Best Practice Pattern <ul><li>Best Practice patterns are what they sound like: industry best practices that we wanted to call out as almost imperative in certain situations </li></ul>
    13. 14. Our Pattern Library Structure
    14. 15. Our Pattern Library Structure <ul><li>Word documents: two types of document for each design pattern </li></ul><ul><ul><li>Design Pattern Document </li></ul></ul><ul><ul><ul><li>Descriptive; meant for information architects or others using design patterns for planning purposes </li></ul></ul></ul><ul><ul><li>Interaction Design Specification </li></ul></ul><ul><ul><ul><li>Technical; includes implementation details, meant for developers implementing the design patterns </li></ul></ul></ul>
    15. 16. Our Pattern Library Structure <ul><li>Design Pattern Document: </li></ul><ul><li>Description, appropriate uses, considerations, rationale, and examples </li></ul>
    16. 17. Our Pattern Library Structure <ul><li>Interaction Design Specifications </li></ul><ul><li>Technical drawings, behaviors, attributes, accessibility, and future considerations notes </li></ul>
    17. 18. Related Topics
    18. 19. Patterns vs. Components <ul><li>From Nathan Curtis’s “Components Versus Patterns” </li></ul><ul><li>Design patterns offer a variety of basic implementation options and guidelines for design solutions </li></ul><ul><li>Components specify the implementation details of the patterns used, as well as specific design styles used, to create documentation of the UI developed across the pages </li></ul>
    19. 20. General Pattern Library Challenges <ul><li>How do you know when something is a design pattern? </li></ul><ul><ul><li>Are IA tools, such as breadcrumbs, design patterns? </li></ul></ul><ul><ul><li>Are development tools, such as lazy load scrollbar, design patterns? </li></ul></ul><ul><li>What happens when different experts use the same term differently, and vice versa? </li></ul><ul><ul><li>Progressive Disclosure: experts define this term slightly differently </li></ul></ul><ul><li>How do you know when a pattern is dying? Or emerging? </li></ul><ul><ul><li>Follow the trends, or throw a stake in the ground? </li></ul></ul>
    20. 21. General Pattern Library Challenges <ul><li>Deciding what goes into a particular pattern library </li></ul><ul><ul><li>We’re a Web shop – should we include desktop patterns? </li></ul></ul><ul><li>Naming (and renaming) patterns </li></ul><ul><ul><li>We renamed Pop-out Panel to Hover Panel based on trigger action </li></ul></ul><ul><li>Reckoning with our categories: Behavior Patterns </li></ul><ul><ul><li>We need to make sure this distinction remains relevant over time </li></ul></ul><ul><li>Implementation: what is the purpose and intended use of a particular library? </li></ul><ul><ul><li>Static reference tool or toolkit full of code? Which software is best? </li></ul></ul>
    21. 22. Our Design Patterns (so far) <ul><li>Progressive Disclosure </li></ul><ul><li>Inline Editing </li></ul><ul><li>Transitions </li></ul><ul><li>Invitations </li></ul><ul><li>Auto Complete </li></ul><ul><li>Forgiving Format </li></ul><ul><li>Toolbox </li></ul><ul><li>Search Results </li></ul><ul><li>Dynamic Query </li></ul><ul><li>Photo Editor </li></ul><ul><li>Navigation Bar </li></ul><ul><li>Toolbar </li></ul><ul><li>Advanced Search </li></ul><ul><li>Doormat Navigation </li></ul><ul><li>Double Tab Navigation </li></ul><ul><li>Flyout Menu </li></ul><ul><li>Tabbed Navigation </li></ul><ul><li>Trail Navigation </li></ul><ul><li>Annotated Scrollbar </li></ul><ul><li>Breadcrumbs </li></ul><ul><li>Sequence Map </li></ul><ul><li>Pagination </li></ul><ul><li>Table Sort </li></ul><ul><li>Tree Navigation </li></ul><ul><li>Tree Table </li></ul><ul><li>Accordian Panel </li></ul><ul><li>Collapsible Panel </li></ul><ul><li>Modal Panel </li></ul><ul><li>Movable Panel </li></ul><ul><li>Card Stack </li></ul>Titled Sections Responsive Disclosure Responsive Enabling In-context Menu Two-panel Selector One-window Drill Down Canvas and Palette Date Selector Carousel Action Panel Slider Faceted Search Hover Panel Header List Builder Search Panel Shopping Cart Error Message Progress Bar Tag Creation Tag Cloud Search Box Advanced Search Row Striping Overview and Detail Alphanumeric Filter Table Filter Input Hint Input Prompt CAPTCHA Console Fill in the Blank Country Selector Language Selector Rich Text Editor File Upload System Busy Spinner Ratings Drag & Drop Auto Complete Inline Tips for Forms Form Field Header Search Control Global Navigation Footer Lazy Load Scrollbar Password Strength Indicator Clear Entry Points Color-coded Sections Illustrated Choices Sensible Defaults Smart Selection Headerless Menu Utility Navigation Teaser Menu Hover Menu Login Register Product Comparison Product Configurator Store Locator Form Map Navigator Poll User Review Font Enlarger
    22. 23. More information? <ul><li>Contact: </li></ul><ul><li>Ben Zipkin </li></ul><ul><li>Director </li></ul><ul><li>RDVO, Inc. </li></ul><ul><li>20 Holland Street, Suite 403 </li></ul><ul><li>Somerville, MA 02144 </li></ul><ul><li>617-629-9990 </li></ul><ul><li>[email_address] </li></ul>

    ×