The document discusses design patterns and pattern libraries, emphasizing their role in providing solutions to common design problems and standardizing design practices. It details the construction of a pattern library at RDVO, categorizing various design patterns and documenting their implementation for consistent use. Challenges in defining and including patterns in libraries are also addressed, highlighting the importance of clarity in design terminology.

1. Building Pattern Libraries January 30, 2009

2. What is a design pattern?

3. Design Patterns Solutions to common design problems, tailored to the situation at hand” – Jennifer Tidwell Page elements that have become industry standards

5. What is a pattern library?

6. Pattern Library A handbook of design patterns Definitions, implementation guidelines, and examples of existing implementations The purpose is to capture industry best practices, and to formally define in-house creations, for consistent future use Design patterns can also be encoded and used in wireframes as “shorthand” It’s an interaction design toolkit for everyone, to streamline and reuse ideas There is no authoritative, universal Pattern Library; pattern libraries are community-based and depend on intended use

7. Pattern Libraries at RDVO

8. Pattern Libraries at RDVO: A Case Study Challenges: Started with extensive list of client-requested design patterns for library These patterns had varying: Levels of complexity Environments (web, desktop, mobile, etc.) However, the goal was to create a simple library Our Approach: Consulted several famous pattern libraries: Welie, Tidwell, Yahoo! Categorized patterns: Control, Compound, Behavior, Best Practice Attempted to trim or modify patterns not related to the client’s UI

9. Our Design Pattern Categories

10. Control Patterns Textbook patterns, agreed on widely by experts Named Control because design patterns are widely based on, and originated as, UI controls

11. Compound Patterns When a pattern utilizes other common patterns, it is Compound Is a Compound pattern still a pattern?

12. Behavior Patterns Behavior patterns act in the background, are unrelated to user actions, or simply add a detail or affordance rather than provide new information

13. Best Practice Pattern Best Practice patterns are what they sound like: industry best practices that we wanted to call out as almost imperative in certain situations

14. Our Pattern Library Structure

15. Our Pattern Library Structure Word documents: two types of document for each design pattern Design Pattern Document Descriptive; meant for information architects or others using design patterns for planning purposes Interaction Design Specification Technical; includes implementation details, meant for developers implementing the design patterns

16. Our Pattern Library Structure Design Pattern Document: Description, appropriate uses, considerations, rationale, and examples

17. Our Pattern Library Structure Interaction Design Specifications Technical drawings, behaviors, attributes, accessibility, and future considerations notes

18. Related Topics

19. Patterns vs. Components From Nathan Curtis’s “Components Versus Patterns” Design patterns offer a variety of basic implementation options and guidelines for design solutions 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

20. General Pattern Library Challenges How do you know when something is a design pattern? Are IA tools, such as breadcrumbs, design patterns? Are development tools, such as lazy load scrollbar, design patterns? What happens when different experts use the same term differently, and vice versa? Progressive Disclosure: experts define this term slightly differently How do you know when a pattern is dying? Or emerging? Follow the trends, or throw a stake in the ground?

21. General Pattern Library Challenges Deciding what goes into a particular pattern library We’re a Web shop – should we include desktop patterns? Naming (and renaming) patterns We renamed Pop-out Panel to Hover Panel based on trigger action Reckoning with our categories: Behavior Patterns We need to make sure this distinction remains relevant over time Implementation: what is the purpose and intended use of a particular library? Static reference tool or toolkit full of code? Which software is best?

22. Our Design Patterns (so far) Progressive Disclosure Inline Editing Transitions Invitations Auto Complete Forgiving Format Toolbox Search Results Dynamic Query Photo Editor Navigation Bar Toolbar Advanced Search Doormat Navigation Double Tab Navigation Flyout Menu Tabbed Navigation Trail Navigation Annotated Scrollbar Breadcrumbs Sequence Map Pagination Table Sort Tree Navigation Tree Table Accordian Panel Collapsible Panel Modal Panel Movable Panel Card Stack 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

23. More information? Contact: Ben Zipkin Director RDVO, Inc. 20 Holland Street, Suite 403 Somerville, MA 02144 617-629-9990 [email_address]