From Yahoo
Design Pattern LibrariesUser Experience Edmonton@uxyeghttp://uxedmonton.com/https://www.facebook.com/profile.php?id=59071219138
From Yahoo
Hi!
From Yahoo
Interaction Design PatternsMany different definitions for
design patternsWe’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 PatternA catchy name and a brief
descriptionThe problem you are trying to
solve.When this pattern should be
implemented.How to implement the patternA visual or interactive example
A Catchy Name & Description
From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
Problem to solve
From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
One or two sentencesSum up what the problem is
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
What’s the solution
From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
Description of the solutionHow to implement it
Why use this pattern
From Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html
Justification for use
Visual/Interactive Example
From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
Show is better than tell
Full Pattern
From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
Many, Many, Many Patterns
From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures
Hundreds and hundreds of possible patterns
Simple to complexSimple
◦Global navigation, Hyperlinks, Text boxes, Radio buttons
Complex◦Rich mouse-overs, carousels,
drawers
From Yahoo
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 ComplexityStop reinventing the wheel –
leverage shared knowledgeSmaller chunks make design
seem less overwhelmingCreates 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 systemLowers barriers to adoption
From Yahoo
Pattern LibrariesHow we actually organize
patternsMake it simpler to navigate
through patternsShouldn’t use patterns just
becauseDesign should be a top-down
process
From Yahoo
Use PatternsBehaviors, 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 SetsSearchingEntering DataInformation at a GlanceGuidance/HelpSocial InteractionsCommerce
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
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
Use Pattern ExampleYou 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
From Yahoo
Use Pattern ExampleYou 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 ExampleYou 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
Use Pattern: Entering Data
From Yahoo
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?
Progress Bar
Next Previous Buttons
Wizard
Field Validation
Help text
From Yahoo
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 Customize
d
From Yahoo
Benefits of Identifying Use PatternsTools 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 PatternsMisapplicationPeople stop believing that
testing is necessaryMisconceptions
◦“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
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
Why you should build your own
Great way to organize access to your code◦Your patterns should contain as much
practical information possibleFocal point for your past projectsPatterns should include
◦Links to wireframes/mockups◦Prototype code◦Links to your code base◦Ties to your past research
From Yahoo
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
Why you should build your own
Can be much more specific (http://ux.mailchimp.com/patterns/tables)
From Yahoo
Why you should build your own
ReuseDon’t reinvent the wheelLearn from past successes and
failures
From Yahoo
ExamplesUse 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 OwnSharePoint, drupal or other
customizable team toolsPatternry (http://patternry.com/)
◦Built specifically for organizing design patterns
◦Great feature set◦Not cheap
From Yahoo
Building Your OwnForm 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
Questions?
From Yahoo
ExerciseLook at this site, identify as many
patterns as possiblehttp://www.study.cam.ac.uk/undergraduate/courses/subjects.html
From Yahoo
Top Related