UX Edmonton - Pattern Libraries

Design Pattern Libraries
User Experience Edmonton
@uxyeg
http://uxedmonton.com/
https://www.facebook.com/profile.php?id=59071219138
From Yahoo

Interaction Design Patterns
 Many different definitions for design
patterns
 We’ll be talking specifically about
interaction design patterns
From Yahoo

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

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

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

A Catchy Name & Description
From Yahoo! Design Pattern Library
http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html

Problem to solve
 One or two sentences
 Sum up what the problem is

When to use
 List the conditions that this pattern
should be used in

What’s the solution
 Description of the solution
 How to implement it

Why use this pattern
 Justification for use

Visual/Interactive Example
From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
 Show is better than tell

Full Pattern

Many, Many, Many Patterns
 Hundreds and hundreds of possible
patterns
 Simple to complex
 Simple
◦ Global navigation, Hyperlinks, Text
boxes, Radio buttons
 Complex
◦ Rich mouse-overs, carousels, drawers

Interaction Patterns: Content-
Rich Mouseover (or click)
From Yahoo

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

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

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

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

Use Patterns
 Behaviors, tasks and activities users
perform independent of technology.
◦ How do users act
 Offer clues to applying interaction
pattern
From Yahoo

Use Patterns: An Example List
 Navigating Large Data Sets
 Searching
 Entering Data
 Information at a Glance
 Guidance/Help
 Social Interactions
 Commerce
From Yahoo

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

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

Use Pattern Example
Use Pattern:
Cyclic
Open
contact
window
Gather
Contact
Info
Enter
contact
information
Save
contact
window
From Yahoo

Use Pattern Example
Use Pattern:
Cyclic
Open
contact
window
Gather
Contact
Info
Enter
contact
information
Save
contact
window
From Yahoo
Use Pattern:
Entering Data

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

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

What patterns can help us?
 Cyclic
◦ Wizard
◦ Next/Previous Buttons
◦ Progress bars
 Entering Data
◦ Field validation
◦ Drop downs
◦ Help text
From Yahoo

What patterns can help us?
From Yahoo
Progress Bar
Next Previous Buttons
Wizard
Field Validation
Help text

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

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

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

Should you bother building
your own library?
From Yahoo

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

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

Free Tools!
 The Not-so Good
◦ Very simple
◦ Focus on basic patterns
◦ Limited examples
◦ Organizational issues
◦ Not “yours”
From Yahoo

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

 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

 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

 Can be much more specific
(http://ux.mailchimp.com/patterns/tabl
es)
From Yahoo

 Reuse
 Don’t reinvent the wheel
 Learn from past successes and
failures
From Yahoo

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

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

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

Exercise
 Look at this site, identify as many
patterns as possible
From Yahoo
http://www.study.cam.ac.uk/undergraduate/
courses/subjects.html

UX Edmonton - Pattern Libraries

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to UX Edmonton - Pattern Libraries

Similar to UX Edmonton - Pattern Libraries (20)

Recently uploaded

Recently uploaded (20)

UX Edmonton - Pattern Libraries