ux edmonton - pattern libraries

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

Upload: bob-evans

Post on 27-Jan-2015

119 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: UX Edmonton - Pattern Libraries

From Yahoo

Design Pattern LibrariesUser Experience Edmonton@uxyeghttp://uxedmonton.com/https://www.facebook.com/profile.php?id=59071219138

Page 2: UX Edmonton - Pattern Libraries

From Yahoo

Hi!

Page 3: UX Edmonton - Pattern Libraries

From Yahoo

Interaction Design PatternsMany different definitions for

design patternsWe’ll be talking specifically about

interaction design patterns

Page 4: UX Edmonton - Pattern Libraries

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

Page 5: UX Edmonton - Pattern Libraries

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.

Page 6: UX Edmonton - Pattern Libraries

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

Page 7: UX Edmonton - Pattern Libraries

A Catchy Name & Description

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

Page 8: UX Edmonton - Pattern Libraries

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

Page 9: UX Edmonton - Pattern Libraries

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

Page 10: UX Edmonton - Pattern Libraries

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

Page 11: UX Edmonton - Pattern Libraries

Why use this pattern

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

Justification for use

Page 12: UX Edmonton - Pattern Libraries

Visual/Interactive Example

From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures

Show is better than tell

Page 13: UX Edmonton - Pattern Libraries

Full Pattern

From Wikipedia http://en.wikipedia.org/wiki/List_of_legendary_creatures

Page 14: UX Edmonton - Pattern Libraries

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

Page 15: UX Edmonton - Pattern Libraries

From Yahoo

Interaction Patterns: Content-Rich Mouseover (or click)

Page 16: UX Edmonton - Pattern Libraries

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

Page 17: UX Edmonton - Pattern Libraries

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

Page 18: UX Edmonton - Pattern Libraries

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

Page 19: UX Edmonton - Pattern Libraries

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

Page 20: UX Edmonton - Pattern Libraries

From Yahoo

Use PatternsBehaviors, tasks and activities

users perform independent of technology.◦How do users act

Offer clues to applying interaction pattern

Page 21: UX Edmonton - Pattern Libraries

From Yahoo

Use Patterns: An Example List

Navigating Large Data SetsSearchingEntering DataInformation at a GlanceGuidance/HelpSocial InteractionsCommerce

Page 22: UX Edmonton - Pattern Libraries

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

Page 23: UX Edmonton - Pattern Libraries

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

Page 24: UX Edmonton - Pattern Libraries

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

Page 25: UX Edmonton - Pattern Libraries

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

Page 26: UX Edmonton - Pattern Libraries

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

Page 27: UX Edmonton - Pattern Libraries

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

Page 28: UX Edmonton - Pattern Libraries

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

Page 29: UX Edmonton - Pattern Libraries

From Yahoo

What patterns can help us?

Cyclic◦Wizard◦Next/Previous Buttons◦Progress bars

Entering Data◦Field validation◦Drop downs◦Help text

Page 30: UX Edmonton - Pattern Libraries

From Yahoo

What patterns can help us?

Progress Bar

Next Previous Buttons

Wizard

Field Validation

Help text

Page 31: UX Edmonton - Pattern Libraries

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

Page 32: UX Edmonton - Pattern Libraries

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

Page 33: UX Edmonton - Pattern Libraries

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.

Page 34: UX Edmonton - Pattern Libraries

From Yahoo

Should you bother building your own library?

Page 35: UX Edmonton - Pattern Libraries

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)

Page 36: UX Edmonton - Pattern Libraries

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

Page 37: UX Edmonton - Pattern Libraries

From Yahoo

Free Tools!The Not-so Good

◦Very simple◦Focus on basic patterns◦Limited examples◦Organizational issues◦Not “yours”

Page 38: UX Edmonton - Pattern Libraries

From Yahoo

Free Tools!The Not-so Good

◦Very simple◦Focus on basic patterns◦Limited examples◦Organizational issues◦Not “yours”

Page 39: UX Edmonton - Pattern Libraries

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

Page 40: UX Edmonton - Pattern Libraries

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

Page 41: UX Edmonton - Pattern Libraries

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

Page 42: UX Edmonton - Pattern Libraries

From Yahoo

Why you should build your own

Can be much more specific (http://ux.mailchimp.com/patterns/tables)

Page 43: UX Edmonton - Pattern Libraries

From Yahoo

Why you should build your own

ReuseDon’t reinvent the wheelLearn from past successes and

failures

Page 44: UX Edmonton - Pattern Libraries

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

Page 45: UX Edmonton - Pattern Libraries

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

Page 46: UX Edmonton - Pattern Libraries

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

Page 47: UX Edmonton - Pattern Libraries

From Yahoo

Questions?

Page 48: UX Edmonton - Pattern Libraries

From Yahoo

ExerciseLook at this site, identify as many

patterns as possiblehttp://www.study.cam.ac.uk/undergraduate/courses/subjects.html

Page 49: UX Edmonton - Pattern Libraries

From Yahoo