Your SlideShare is downloading. ×
0
Copyright 2013 Carrie Buckingham, Erica Decker
NOT YOUR PARENTS’
PATTERN
LIBRARY 1Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
CARRIE
BUCKINGHAM
España, te
amo!
- translation by Babelfish
Copyright 2013...
Copyright 2013 Carrie Buckingham, Erica Decker
ERICA DECKER
¡Necesito cafés
más grandes!
- translation by Babelfish
3Wedne...
Copyright 2013 Carrie Buckingham, Erica Decker
4Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
113,000,000+ USERS
80+ DESIGNERS
COUNTLESS PROJECT TEAMS
WEB
ANDROID
TABLET...
Copyright 2013 Carrie Buckingham, Erica Decker
PATTERNS are recurring solutions
that solve common design problems.
PATTERN...
Copyright 2013 Carrie Buckingham, Erica Decker
7Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
8Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
RULESWE NEEDED ‘EM!
9Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
10Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
pat·tern
/ˈpatərn/
Definition
Interaction design patterns are a way to desc...
Copyright 2013 Carrie Buckingham, Erica Decker
12Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Examples of other
pattern libraries?
The world libraries lived
in at the ti...
Copyright 2013 Carrie Buckingham, Erica Decker
Pricing Style Pattern
When displaying pricing, two things should be conside...
Copyright 2013 Carrie Buckingham, Erica Decker
Discrete Selector
/disˈkrēt səˈlektər/
Definition
A discrete selector is a ...
Copyright 2013 Carrie Buckingham, Erica Decker
16Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Real
WORLD
SPEAK
COLOR PICKER
17Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
DON’T
REALLY
MATTER...?
Maybe the definitions
18Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
19Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
RESPECTthe pattern
20Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
21Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
No personality
Copyright 2013 Carrie Buckingham, Erica Decker
22Wednesday, ...
Copyright 2013 Carrie Buckingham, Erica Decker
KEEP CALM
AND
USE THE PATTERN
23Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
eBay has a weird
interface.
Every time I go there I
feel like eBay doesn’t
...
Copyright 2013 Carrie Buckingham, Erica Decker
TANKINGBAD ECONOMY, HEAVY COMPLEXITY, NEW COMPETITORS
25Wednesday, July 3, ...
Copyright 2013 Carrie Buckingham, Erica Decker
“Like meteors, other dominant internet
stars burned with dazzling brillianc...
Copyright 2013 Carrie Buckingham, Erica Decker
“It was clear that the
world had innovated
around eBay, and eBay
had stayed...
Copyright 2013 Carrie Buckingham, Erica Decker
How do we...
BECOME AGENTS OF
CHANGE?
28Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Dudes.
This way.
29Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
WARNINGTHE FOLLOWING SLIDES ASKS REALLY HARD
QUESTIONS. FREQUENT SIDE EFFEC...
Copyright 2013 Carrie Buckingham, Erica Decker
Are
PATTERN LIBRARIES
OUTDATED?
31Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
32Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
SHIFT
33Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
34Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Keep it
HUMAN
Copyright 2013 Carrie Buckingham, Erica Decker
35Wednesday, J...
Copyright 2013 Carrie Buckingham, Erica Decker
Know your
AUDIENCE
36Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
REDUCE THE LEARNING CURVE
Copyright 2013 Carrie Buckingham, Erica Decker
37...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
38Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Pricing Style Pattern
When displaying pricing, two things should be conside...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
40Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
41Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
42Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Research
Code
Visual Design
Specs
Brand
ContentAccessibility
Interactions
B...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
44Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Close
Bid confirmation
13d 20h
US $ 125.50
$15.00 Ground
US $ 125.50
$
Time...
Copyright 2013 Carrie Buckingham, Erica Decker
Lorem ipsum
Dolor sit amet
Consectetur
Adipiscing elit
Phasellus tempor
Iac...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
47Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Stay
RELATABLE
48Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
49Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
RESEARCH
TEAM
PROJECT
MANAGERS
DOMAIN
DESIGNERS
PATTERNS.
Copyright 2013 Ca...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
51Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
FollowFollowed!
52Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
RATIONALE!
METRICS!
DESIGN!
BEHAVIOR!
TESTING!
CODE!
SPECS!
53Wednesday, Ju...
Copyright 2013 Carrie Buckingham, Erica Decker
54Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Sweat the DETAILS
55Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
56Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
TIMELINESS and
RELEVANCE
57Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
When is something officially a pattern?
58Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
When is it not a pattern anymore?
59Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
BREAKOUR OWN RULES!
60Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
I cant r
e
ad t his
Type what you see or we won’t let you do anything
61Wed...
Copyright 2013 Carrie Buckingham, Erica Decker
Show us that you’re human by sliding from left to right
62Wednesday, July 3...
Copyright 2013 Carrie Buckingham, Erica Decker
Option one
Option two
Option three
And on
And on
And on
To infinity
Is this ...
Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker
64Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Go beyond
PATTERNS
65Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
PATTERNS (foundations & collective knowledge)
Patterns in
context drive
evo...
Copyright 2013 Carrie Buckingham, Erica Decker
Patterns in
context drive
evolution
SITE-WIDE PRODUCT
RELEASE
Innovate
&
Ev...
Copyright 2013 Carrie Buckingham, Erica Decker
Real
WORLD
SPEAK
Patterns rock.
(consistent usage is critical to user succe...
Copyright 2013 Carrie Buckingham, Erica Decker
Order information View order details
Default Table without Zebra Striping
i...
Copyright 2013 Carrie Buckingham, Erica Decker
Patterns in
context drive
evolution
SITE-WIDE PRODUCT
RELEASE
Innovate
&
Ev...
Copyright 2013 Carrie Buckingham, Erica Decker
Real
WORLD
SPEAK
Guidelines are
tried-n-true tips.
(they keep our 10,000ft ...
Copyright 2013 Carrie Buckingham, Erica Decker
72Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
N U M B E R O F F E A T U R E S
USERHAPPINESS
“NICE, BUT I WISH I COULD DO ...
Copyright 2013 Carrie Buckingham, Erica Decker
Patterns in
context drive
evolution
SITE-WIDE PRODUCT
RELEASE
Innovate
&
Ev...
Copyright 2013 Carrie Buckingham, Erica Decker
Real
WORLD
SPEAK
Frameworks = do this.
(but you can shift it a little if yo...
Copyright 2013 Carrie Buckingham, Erica Decker
REFINEEVERYTHING NAVIGATE THINGS
Support both way-finding to thing-finding ...
Copyright 2013 Carrie Buckingham, Erica Decker
Patterns in
context drive
evolution
SITE-WIDE PRODUCT
RELEASE
Innovate
&
Ev...
Copyright 2013 Carrie Buckingham, Erica Decker
78Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
Browse by
category I’m looking for... Search in all
Daily dealsHi! Sign in ...
Copyright 2013 Carrie Buckingham, Erica Decker
Product experience will help you INNOVATE.
Frameworks should EVOLVE and sta...
Copyright 2013 Carrie Buckingham, Erica Decker
NEVER STOP
EVOLVING
...like, ever.
81Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
THIS SEEMS LIKE A LOT OF WORK...
Copyright 2013 Carrie Buckingham, Erica De...
Copyright 2013 Carrie Buckingham, Erica Decker
83Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
84Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
85Wednesday, July 3, 13
Copyright 2013 Carrie Buckingham, Erica Decker
The new eBay, which is rolling out across the U.S. starting today, sports a...
Copyright 2013 Carrie Buckingham, Erica Decker
RECOVERINGUPDATED GOALS, FRESH DESIGN, FOCUS ON INNOVATION
87Wednesday, Jul...
Copyright 2013 Carrie Buckingham, Erica Decker
Think about your audience, and cater to them.
Centralize your tools and mak...
Copyright 2013 Carrie Buckingham, Erica Decker
THANK YOU AND SOURCES
• All product images are from ebay.com
• All screensh...
Copyright 2013 Carrie Buckingham, Erica Decker
THANKSfor listening
clbuckingham@yahoo.com
ericajoydecker@gmail.com
90Wednes...
Upcoming SlideShare
Loading in...5
×

Not Your Parents' Pattern Library: A Fresh Approach in Defining Corporate Design Standards

8,234

Published on

Originally presented at WebVisions Barcelona, 2013
Presented next at EuroIA 2013 in Edinburgh, Scotland

Think pattern libraries are outdated? Think again. We'd like to challenge the perception of what makes a pattern and a pattern library. In this talk, Carrie and Erica will discuss the fading relevance of traditional pattern libraries and show you what they've done to reinvigorate the Design Standards hub at eBay, making it more engaging and maximizing its usefulness.

Carrie and Erica will also talk about pattern libraries as not only agents of change, but also products of change, and how extending the purpose of eBay's own pattern library has increased adoption and understanding of design standards across the company.

This talk will be powerful for anyone developing design guidelines or looking to create design efficiencies within their company. Attendees will walk away with a fresh perspective on how to create relevant and approachable design standards.

Transcript of "Not Your Parents' Pattern Library: A Fresh Approach in Defining Corporate Design Standards"

  1. 1. Copyright 2013 Carrie Buckingham, Erica Decker NOT YOUR PARENTS’ PATTERN LIBRARY 1Wednesday, July 3, 13
  2. 2. Copyright 2013 Carrie Buckingham, Erica Decker CARRIE BUCKINGHAM España, te amo! - translation by Babelfish Copyright 2013 Carrie Buckingham, Erica Decker 2Wednesday, July 3, 13
  3. 3. Copyright 2013 Carrie Buckingham, Erica Decker ERICA DECKER ¡Necesito cafés más grandes! - translation by Babelfish 3Wednesday, July 3, 13
  4. 4. Copyright 2013 Carrie Buckingham, Erica Decker 4Wednesday, July 3, 13
  5. 5. Copyright 2013 Carrie Buckingham, Erica Decker 113,000,000+ USERS 80+ DESIGNERS COUNTLESS PROJECT TEAMS WEB ANDROID TABLET IPHONE ~20 STAKEHOLDERS PER PROJECT 40 COUNTRIESSO MANY AGENCIES 10,000+ EMPLOYEES 5Wednesday, July 3, 13
  6. 6. Copyright 2013 Carrie Buckingham, Erica Decker PATTERNS are recurring solutions that solve common design problems. PATTERN LIBRARIES house collections of those patterns. 6Wednesday, July 3, 13
  7. 7. Copyright 2013 Carrie Buckingham, Erica Decker 7Wednesday, July 3, 13
  8. 8. Copyright 2013 Carrie Buckingham, Erica Decker 8Wednesday, July 3, 13
  9. 9. Copyright 2013 Carrie Buckingham, Erica Decker RULESWE NEEDED ‘EM! 9Wednesday, July 3, 13
  10. 10. Copyright 2013 Carrie Buckingham, Erica Decker 10Wednesday, July 3, 13
  11. 11. Copyright 2013 Carrie Buckingham, Erica Decker pat·tern /ˈpatərn/ Definition Interaction design patterns are a way to describe solutions to common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and accomplish their tasks. 11Wednesday, July 3, 13
  12. 12. Copyright 2013 Carrie Buckingham, Erica Decker 12Wednesday, July 3, 13
  13. 13. Copyright 2013 Carrie Buckingham, Erica Decker Examples of other pattern libraries? The world libraries lived in at the time. YUI/ Welie 13Wednesday, July 3, 13
  14. 14. Copyright 2013 Carrie Buckingham, Erica Decker Pricing Style Pattern When displaying pricing, two things should be considered: 1. What type of pricing it is 2. How to show it Pricing type dictates style The type of pricing that's being communicated can translate into one of three pricing style categories: Quick Scan Style Quick Scan is a representation of an item for sale in a format that enables quick scanning of multiple items. User engagement is limited, so only essential pricing information is displayed. The purpose: To enable quick scanning of basic pricing information. Places where the Quick Scan style is typically used: Homepage, Search results, Landing pages (Verticals, Coupons), My eBay, Daily Deals, Merchandising) Pricing information can include: • Base item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping • Incentive(s) and discount(s) lure Hierarchy is established as: First Tier: Base item price (BIN) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Seller Incentive (Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Seller Incentive (next Richest Offer) Focus Style Focus is a detailed representation of an item for sale in a format that enables focus and engagement on one item. Significant real estate is utilized by displaying larger image(s), price information and item title. The purpose: Communicate, in depth, the pricing and incentive offers for the item. Places where the Focus style is typically used: View Item, Daily Deals, Product Detail and Search Preview Pricing information can include: • Base or Modified item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping Incentives and discounts explained Hierarchy is established as: First Tier: Base Item Price (BIN) or Modified Item Price, Incentive (Richest Offer callout and details) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Incentive (next Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Incentive (next Richest Offer) Review Style Review is a point a flow where the user is able to review, in full detail, a comprehensive summary of item(s) before or after purchase. Often displayed in an invoice-like format, pricing information is aligned right. The purpose: Confirmation and re-assurance. Copyright 2013 Carrie Buckingham, Erica Decker 14Wednesday, July 3, 13
  15. 15. Copyright 2013 Carrie Buckingham, Erica Decker Discrete Selector /disˈkrēt səˈlektər/ Definition A discrete selector is a representative portion; a sample. 15Wednesday, July 3, 13
  16. 16. Copyright 2013 Carrie Buckingham, Erica Decker 16Wednesday, July 3, 13
  17. 17. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK COLOR PICKER 17Wednesday, July 3, 13
  18. 18. Copyright 2013 Carrie Buckingham, Erica Decker DON’T REALLY MATTER...? Maybe the definitions 18Wednesday, July 3, 13
  19. 19. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 19Wednesday, July 3, 13
  20. 20. Copyright 2013 Carrie Buckingham, Erica Decker RESPECTthe pattern 20Wednesday, July 3, 13
  21. 21. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 21Wednesday, July 3, 13
  22. 22. Copyright 2013 Carrie Buckingham, Erica Decker No personality Copyright 2013 Carrie Buckingham, Erica Decker 22Wednesday, July 3, 13
  23. 23. Copyright 2013 Carrie Buckingham, Erica Decker KEEP CALM AND USE THE PATTERN 23Wednesday, July 3, 13
  24. 24. Copyright 2013 Carrie Buckingham, Erica Decker eBay has a weird interface. Every time I go there I feel like eBay doesn’t know me at all. “ Copyright 2013 Carrie Buckingham, Erica Decker 24Wednesday, July 3, 13
  25. 25. Copyright 2013 Carrie Buckingham, Erica Decker TANKINGBAD ECONOMY, HEAVY COMPLEXITY, NEW COMPETITORS 25Wednesday, July 3, 13
  26. 26. Copyright 2013 Carrie Buckingham, Erica Decker “Like meteors, other dominant internet stars burned with dazzling brilliance before turning shareholder dollars to ash.” - New York Times 26Wednesday, July 3, 13
  27. 27. Copyright 2013 Carrie Buckingham, Erica Decker “It was clear that the world had innovated around eBay, and eBay had stayed with the same formula.” - John Donahoe, eBay CEO 27Wednesday, July 3, 13
  28. 28. Copyright 2013 Carrie Buckingham, Erica Decker How do we... BECOME AGENTS OF CHANGE? 28Wednesday, July 3, 13
  29. 29. Copyright 2013 Carrie Buckingham, Erica Decker Dudes. This way. 29Wednesday, July 3, 13
  30. 30. Copyright 2013 Carrie Buckingham, Erica Decker WARNINGTHE FOLLOWING SLIDES ASKS REALLY HARD QUESTIONS. FREQUENT SIDE EFFECTS INCLUDE NAUSEA, DIZZINESS, OR FATIGUE. 30Wednesday, July 3, 13
  31. 31. Copyright 2013 Carrie Buckingham, Erica Decker Are PATTERN LIBRARIES OUTDATED? 31Wednesday, July 3, 13
  32. 32. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 32Wednesday, July 3, 13
  33. 33. Copyright 2013 Carrie Buckingham, Erica Decker SHIFT 33Wednesday, July 3, 13
  34. 34. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 34Wednesday, July 3, 13
  35. 35. Copyright 2013 Carrie Buckingham, Erica Decker Keep it HUMAN Copyright 2013 Carrie Buckingham, Erica Decker 35Wednesday, July 3, 13
  36. 36. Copyright 2013 Carrie Buckingham, Erica Decker Know your AUDIENCE 36Wednesday, July 3, 13
  37. 37. Copyright 2013 Carrie Buckingham, Erica Decker REDUCE THE LEARNING CURVE Copyright 2013 Carrie Buckingham, Erica Decker 37Wednesday, July 3, 13
  38. 38. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 38Wednesday, July 3, 13
  39. 39. Copyright 2013 Carrie Buckingham, Erica Decker Pricing Style Pattern When displaying pricing, two things should be considered: 1. What type of pricing it is 2. How to show it Pricing type dictates style The type of pricing that's being communicated can translate into one of three pricing style categories: Quick Scan Style Quick Scan is a representation of an item for sale in a format that enables quick scanning of multiple items. User engagement is limited, so only essential pricing information is displayed. The purpose: To enable quick scanning of basic pricing information. Places where the Quick Scan style is typically used: Homepage, Search results, Landing pages (Verticals, Coupons), My eBay, Daily Deals, Merchandising) Pricing information can include: • Base item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping • Incentive(s) and discount(s) lure Hierarchy is established as: First Tier: Base item price (BIN) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Seller Incentive (Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Seller Incentive (next Richest Offer) Focus Style Focus is a detailed representation of an item for sale in a format that enables focus and engagement on one item. Significant real estate is utilized by displaying larger image(s), price information and item title. The purpose: Communicate, in depth, the pricing and incentive offers for the item. Places where the Focus style is typically used: View Item, Daily Deals, Product Detail and Search Preview Pricing information can include: • Base or Modified item price (Bid/BIN/both) • Perceived value via strikethrough, amount saved or % off • Shipping Incentives and discounts explained Hierarchy is established as: First Tier: Base Item Price (BIN) or Modified Item Price, Incentive (Richest Offer callout and details) Second Tier: Base item price (BID if both BIN and BID available), Perceived value (Amount saved and/or % off), Incentive (next Richest Offer) Third Tier: Shipping (Including free), Perceived value (Strikethrough price), Incentive (next Richest Offer) Review Style Review is a point a flow where the user is able to review, in full detail, a comprehensive summary of item(s) before or after purchase. Often displayed in an invoice-like format, pricing information is aligned right. The purpose: Confirmation and re-assurance. Copyright 2013 Carrie Buckingham, Erica Decker 39Wednesday, July 3, 13
  40. 40. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 40Wednesday, July 3, 13
  41. 41. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 41Wednesday, July 3, 13
  42. 42. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 42Wednesday, July 3, 13
  43. 43. Copyright 2013 Carrie Buckingham, Erica Decker Research Code Visual Design Specs Brand ContentAccessibility Interactions Business Goals Test Results Other Patterns PATTERN History Employee Feedback Industry Standards 43Wednesday, July 3, 13
  44. 44. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 44Wednesday, July 3, 13
  45. 45. Copyright 2013 Carrie Buckingham, Erica Decker Close Bid confirmation 13d 20h US $ 125.50 $15.00 Ground US $ 125.50 $ Time Left Current Bid Shipping Your max bid Increase max bid 45Wednesday, July 3, 13
  46. 46. Copyright 2013 Carrie Buckingham, Erica Decker Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Sit amet scelerisque Ipsum tincidunt Pharetra Aliquam erat Category label See more searches Clear Eames Rosewood Lounge antique clock mid century modern Recent searches Label Another label Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Lorem ipsum Dolor sit amet Consectetur Adipiscing elit Phasellus tempor Iaculis tellus Adipiscing elit Back to Search Results Home Dolor Sit amet Consecetur Browse by category I’m looking for... Search in all Daily dealsHi! Sign in or register Customer SupportCommunitySellMy eBay Copyright 2013 Carrie Buckingham, Erica Decker 46Wednesday, July 3, 13
  47. 47. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 47Wednesday, July 3, 13
  48. 48. Copyright 2013 Carrie Buckingham, Erica Decker Stay RELATABLE 48Wednesday, July 3, 13
  49. 49. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 49Wednesday, July 3, 13
  50. 50. Copyright 2013 Carrie Buckingham, Erica Decker RESEARCH TEAM PROJECT MANAGERS DOMAIN DESIGNERS PATTERNS. Copyright 2013 Carrie Buckingham, Erica Decker 50Wednesday, July 3, 13
  51. 51. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 51Wednesday, July 3, 13
  52. 52. Copyright 2013 Carrie Buckingham, Erica Decker FollowFollowed! 52Wednesday, July 3, 13
  53. 53. Copyright 2013 Carrie Buckingham, Erica Decker RATIONALE! METRICS! DESIGN! BEHAVIOR! TESTING! CODE! SPECS! 53Wednesday, July 3, 13
  54. 54. Copyright 2013 Carrie Buckingham, Erica Decker 54Wednesday, July 3, 13
  55. 55. Copyright 2013 Carrie Buckingham, Erica Decker Sweat the DETAILS 55Wednesday, July 3, 13
  56. 56. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 56Wednesday, July 3, 13
  57. 57. Copyright 2013 Carrie Buckingham, Erica Decker TIMELINESS and RELEVANCE 57Wednesday, July 3, 13
  58. 58. Copyright 2013 Carrie Buckingham, Erica Decker When is something officially a pattern? 58Wednesday, July 3, 13
  59. 59. Copyright 2013 Carrie Buckingham, Erica Decker When is it not a pattern anymore? 59Wednesday, July 3, 13
  60. 60. Copyright 2013 Carrie Buckingham, Erica Decker BREAKOUR OWN RULES! 60Wednesday, July 3, 13
  61. 61. Copyright 2013 Carrie Buckingham, Erica Decker I cant r e ad t his Type what you see or we won’t let you do anything 61Wednesday, July 3, 13
  62. 62. Copyright 2013 Carrie Buckingham, Erica Decker Show us that you’re human by sliding from left to right 62Wednesday, July 3, 13
  63. 63. Copyright 2013 Carrie Buckingham, Erica Decker Option one Option two Option three And on And on And on To infinity Is this usable? 63Wednesday, July 3, 13
  64. 64. Copyright 2013 Carrie Buckingham, Erica DeckerCopyright 2013 Carrie Buckingham, Erica Decker 64Wednesday, July 3, 13
  65. 65. Copyright 2013 Carrie Buckingham, Erica Decker Go beyond PATTERNS 65Wednesday, July 3, 13
  66. 66. Copyright 2013 Carrie Buckingham, Erica Decker PATTERNS (foundations & collective knowledge) Patterns in context drive evolution RESPEK! SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) 66Wednesday, July 3, 13
  67. 67. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 67Wednesday, July 3, 13
  68. 68. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Patterns rock. (consistent usage is critical to user success) 68Wednesday, July 3, 13
  69. 69. Copyright 2013 Carrie Buckingham, Erica Decker Order information View order details Default Table without Zebra Striping iPhone 5 Black iPhone 5 White w/ Cover iPhone 5 Black iPhone 5 White w/ Cover iPhone 5 Black iPhone 5 White w/ Cover $499 $519 $499 $519 $499 $519 2 2 2 2 2 2 FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver FedEx Express Saver Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th Apr. 24th - Apr. 25th $998.00 $519.00 $998.00 $519.00 $998.00 $519.00 Shipping cost $29.00 Order information View order details Item title Price Qty Shipping & handling Expected delivery Total price Default Table Interaction Layered Design - DS3 Tables Copyright 2013 Carrie Buckingham, Erica Decker 69Wednesday, July 3, 13
  70. 70. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 70Wednesday, July 3, 13
  71. 71. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Guidelines are tried-n-true tips. (they keep our 10,000ft view) 71Wednesday, July 3, 13
  72. 72. Copyright 2013 Carrie Buckingham, Erica Decker 72Wednesday, July 3, 13
  73. 73. Copyright 2013 Carrie Buckingham, Erica Decker N U M B E R O F F E A T U R E S USERHAPPINESS “NICE, BUT I WISH I COULD DO MORE” “I’M SO GLAD THEY ADDED THIS” “GUESS I BETTER LOOK AT THE MANUAL” “I RULE!” “HEY, WHERE THE F... DID THEY PUT THAT?!” “NOW I CAN’T EVEN DO THE ONE SIMPLE THING I BOUGHT THIS FOR...” “I SUCK!” KATHY SIERRA THE FEATURITIS CURVE HAPPY USER PEAK 73Wednesday, July 3, 13
  74. 74. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 74Wednesday, July 3, 13
  75. 75. Copyright 2013 Carrie Buckingham, Erica Decker Real WORLD SPEAK Frameworks = do this. (but you can shift it a little if you need to) 75Wednesday, July 3, 13
  76. 76. Copyright 2013 Carrie Buckingham, Erica Decker REFINEEVERYTHING NAVIGATE THINGS Support both way-finding to thing-finding by serving up the right tools at the right time along a user’s shopping course. Our NAVIGATION PHILOSOPHY 76Wednesday, July 3, 13
  77. 77. Copyright 2013 Carrie Buckingham, Erica Decker Patterns in context drive evolution SITE-WIDE PRODUCT RELEASE Innovate & Evolve (It’s go time!) (beta to validate!) FRAMEWORKS (patterns & best practices) GUIDELINES (more of our 10,000ft view) PATTERNS (foundations & collective knowledge) 77Wednesday, July 3, 13
  78. 78. Copyright 2013 Carrie Buckingham, Erica Decker 78Wednesday, July 3, 13
  79. 79. Copyright 2013 Carrie Buckingham, Erica Decker Browse by category I’m looking for... Search in all Daily dealsHi! Sign in or register CartNotificationsCustomer SupportCommunitySellMy eBay 3 HOLY STREAMLINED! Copyright 2013 Carrie Buckingham, Erica Decker 79Wednesday, July 3, 13
  80. 80. Copyright 2013 Carrie Buckingham, Erica Decker Product experience will help you INNOVATE. Frameworks should EVOLVE and stay FLEXIBLE. Share a 10,000 FOOT VIEW with guidelines. Don’t forget that PATTERNS are the FOUNDATIONS. 80Wednesday, July 3, 13
  81. 81. Copyright 2013 Carrie Buckingham, Erica Decker NEVER STOP EVOLVING ...like, ever. 81Wednesday, July 3, 13
  82. 82. Copyright 2013 Carrie Buckingham, Erica Decker THIS SEEMS LIKE A LOT OF WORK... Copyright 2013 Carrie Buckingham, Erica Decker 82Wednesday, July 3, 13
  83. 83. Copyright 2013 Carrie Buckingham, Erica Decker 83Wednesday, July 3, 13
  84. 84. Copyright 2013 Carrie Buckingham, Erica Decker 84Wednesday, July 3, 13
  85. 85. Copyright 2013 Carrie Buckingham, Erica Decker 85Wednesday, July 3, 13
  86. 86. Copyright 2013 Carrie Buckingham, Erica Decker The new eBay, which is rolling out across the U.S. starting today, sports a cleaner and more streamlined design. - Fast Company The design is cleaner with less text and better suited to scale for mobile and the upcoming onslaught of touchscreens. - Engadget eBay is pulling its old clunky site into the modern age with a major redesign and new features inspired by its younger, buzzier tech rivals. - CNN Money eBay's newly refreshed site certainly feels cleaner than ever before, with refinements to the company's search, product and checkout pages, but the overall experience should not be different enough to confuse users. - The Next Web “ 86Wednesday, July 3, 13
  87. 87. Copyright 2013 Carrie Buckingham, Erica Decker RECOVERINGUPDATED GOALS, FRESH DESIGN, FOCUS ON INNOVATION 87Wednesday, July 3, 13
  88. 88. Copyright 2013 Carrie Buckingham, Erica Decker Think about your audience, and cater to them. Centralize your tools and make them easy to use. Stay relatable to everyone you work with. And then build credibility by extending your reach. 88Wednesday, July 3, 13
  89. 89. Copyright 2013 Carrie Buckingham, Erica Decker THANK YOU AND SOURCES • All product images are from ebay.com • All screenshots are from ebay.com, the old Pattern Library, or the new Design Systems Library • Out-of-touch Professor photo: doblelol.com/funny-teacher.htm • Millenials photo: free-stockphotos.com/download-free-couple-holding-blank-banner-images • John Donahoe photo: investors.com/image/IT1b1016_1c081015.jpg.cms • Jason Fried photo: thegreatdiscontent.com/jason-fried by Marc Garrett • Dancing Silhouettes: free-hdwallpapers.com/wallpaper/abstract/dancers-abstract-dancers-silhouette/ 257162 • Cockpit photo: flickr.com/photos/jbgeronimi/6363087361/ • Hands photo: antibludoman.ru/arxivy • So Much Work photo: managers.org.uk/practical-support/management-community/blogs/how-important- clean-desk • Fonts are Mission Gothic and Mission Script (thanks, Lost Type Co-op!) • And finally, thanks to Dorelle Rabinowitz for being our sounding board as we put together our first conference presentation. 89Wednesday, July 3, 13
  90. 90. Copyright 2013 Carrie Buckingham, Erica Decker THANKSfor listening clbuckingham@yahoo.com ericajoydecker@gmail.com 90Wednesday, July 3, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×