real world design patterns
DESCRIPTION
James Reffell and Micah Alpern from the User Experience & Design Group at eBay Marketplaces share lessons they have learned working with design patterns over the past few years.TRANSCRIPT
![Page 1: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/1.jpg)
Real World Design PatternsA History of Creating & Using Design Patterns at eBay
James Reffell & Micah AlpernUser Experience & Design Group, eBay MarketplacesMarch 25, 2006
![Page 2: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/2.jpg)
2
Design Patterns | Why are we here?
• Talk with you about design patterns!
• History of design patterns at eBay
• Share lessons we’ve learned
• Show an example pattern
• Lively discussion!
![Page 3: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/3.jpg)
3
Design Patterns | Who are we?
• eBay user:
• Working at eBay since 11/1/02
• UI Designer– User Experience & Design, eBay Marketplaces– My group focuses on Tailored Shopping Experiences
(e.g. Half.com, Kijiji, eBay Express)
• eBay user:
• Working at eBay since 6/30/03
• UI Designer– Selling Team & Disruptive Technologies, User Experience
& Design, eBay Marketplaces
![Page 4: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/4.jpg)
4
People
![Page 5: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/5.jpg)
5
Design Patterns | eBay Marketplace’s UED Group
• 5 disciplines– User Experience
Research– Content Management– Creative Design– Prototyping– UI Design
• Buying
• Selling
• Platform & International
![Page 6: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/6.jpg)
6
Design Patterns | In the beginning …
• There were a lot fewer of us in 2002!
• But we already needed something:– Too many designers & too much complexity
• “just talking” wasn’t working any more– Doing lots of design very, very quickly– Designs were (unintentionally) inconsistent– People were always reinventing the wheel
![Page 7: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/7.jpg)
7
Design Patterns | … there was the book.
![Page 8: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/8.jpg)
8
Design Patterns | … there was the book.
![Page 9: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/9.jpg)
9
Design Patterns | … the book (cont’d)
• The book didn’t work!– Obsolete the day it was printed.– Actively dangerous within 6 months– Now a collector’s item
• Why didn’t it work?– Obvious:
• Static (printed)
• Hard to use (big & unwieldy)– Less obvious
• Too general (well-lit path)
• Too specific (5-pixel padding)
• Not a lot of ‘just right’
• Some things were just wrong
![Page 10: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/10.jpg)
10
Patterns
![Page 11: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/11.jpg)
11
Design Patterns | Patterns
• Example: Buttons!
Inconsistent style forgraphical buttons does notreinforce the eBay brand.
Multiple undifferentiatedbuttons with inconsistentpositioning of primary actiondo not prioritize the actionsfor the user.
![Page 12: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/12.jpg)
12
Design Patterns | Patterns
![Page 13: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/13.jpg)
13
Design Patterns | Patterns
• The patterns worked … a little bit.– A few important patterns got nailed down– Made some important discoveries– Those were used … when designers remembered to– Good design habits
• Why didn’t it work better?– Obvious:
• PowerPoint (static)
• No knowledge management system– Less obvious
• Investigations were slow, long, and included too much vetting
• Little or no user research
• Hard to get into actual designs
![Page 14: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/14.jpg)
14
Code
![Page 15: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/15.jpg)
15
Design Patterns | Code
Logic Toolbox
EML<eml:title> Sell Your Item: Enter Payment & Shipping</eml:title>
<table border="0" cellpadding="0"cellspacing="0" width="100%"bgcolor="#D6DEFF"><tr><tdcolspan="5"bgcolor="#9999CC"><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="2"width="1"></td></tr><tr><td><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/leftLine_16x3.gif,DanaInfo=toolbox.corp.ebay.com+"width="13" height="3"align="center"></td><td><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="25" width="6"></td><tdwidth="100%"><bxmlns:fo="http://www.w3.org/1999/XSL/Format"><font face="arial,sans-serif" size="+1">Sell Your Item:Enter Payment &Shipping</font></b></td><td><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="1"width="6"></td></tr><tr><tdcolspan="5"bgcolor="#9999CC"><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="2"width="1"></td></tr></table>
Data
![Page 16: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/16.jpg)
16
Design Patterns | Code
• The code worked … better.– Working with developers and code made patterns deeper– Some designers picked it up – even non-techies– Used extensively in certain site areas– Encouraged reuse
• Why didn’t it work better?– Done in “spare time” by 1 designer & 1 developer– XML language required training and was not a transferable skill.– We made it too hard to be flexible– The what without the how and the why can be frustrating
![Page 17: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/17.jpg)
17
Process
![Page 18: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/18.jpg)
18
Design Patterns | Process
![Page 19: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/19.jpg)
19
Design Patterns | Process
![Page 20: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/20.jpg)
20
Design Patterns | Putting It Together
![Page 21: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/21.jpg)
21
Final Thoughts
![Page 22: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/22.jpg)
22
Design Patterns | Now
• What we’ve got now– Patterns– Process– (cross-functional) People
• UI, visual design, content,research, development,product
– Code• Developer-led, designer
adoption optional
![Page 23: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/23.jpg)
23
Design Patterns | What Have We Learned?
• What to do– Have process, patterns, people, & code– Move quickly and don’t think too hard– Incent mass documentation– Allow and acknowledge messiness– Document the pattern and the specification and the code
• This is worth it!– Organic adoption– Joy of watching team solve hard problems– Great design (which is the point)
![Page 24: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/24.jpg)
24
Example Pattern
![Page 25: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/25.jpg)
25
Sell Your Item
• No longer static– The application grows
with sellers experience
• Rich & deep– Many many possible
features– 27 countries with
regional differences
![Page 26: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/26.jpg)
26
How you’re selling: Experienced
![Page 27: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/27.jpg)
27
Sample pattern: Input
![Page 28: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/28.jpg)
28
Sample pattern: Input
![Page 29: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/29.jpg)
29
Sample pattern: Input
Title
Data
Actions
![Page 30: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/30.jpg)
30
Sample pattern: Input
Title
DataPrefix
Required Control
![Page 31: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/31.jpg)
31
Sample pattern: Input
Title
DataPrefix
Required Control
![Page 32: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/32.jpg)
32
Sample pattern: Input
Title
DataPrefix
Required Control
![Page 33: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/33.jpg)
33
Sample pattern: Input
TitleData
Actions
![Page 34: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/34.jpg)
34
Sample pattern: Input
TitleData
Actions
![Page 35: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/35.jpg)
35
Sample pattern: Input
TitleData
Actions
TitleSubtitleToolbar
Required Controls Fees
Data
Data
Data
Actions
Prefix
Prefix
Prefix
Suffix
Suffix
Suffix
![Page 36: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/36.jpg)
36
Sample pattern: Input
TitleData
Actions
Input
Lets keep building…
GroupTwo or more inputs with some kind of relationship
![Page 37: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/37.jpg)
37
Sample pattern: Group
Input Input
Input Input
Group: Compound input
GroupTwo or more inputs with some kind of relationship
Group: Related inputs
Group: Parent / Child
Input
Input
![Page 38: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/38.jpg)
38
Keep building…
How Your Selling Page
Build chunks of functionality.. And assemble chunks into pages
![Page 39: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/39.jpg)
39
Sample pattern
![Page 40: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/40.jpg)
40
Developing a pattern language helps you– Think structurally– See relationships– Create a predictable UI– Manage complexity
![Page 41: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/41.jpg)
41
Design Patterns | Inspiration & Thanks
• Many thanks to:– eBay UED, and the UED Platform Team (past and present),
especially Larry Cornett, Jamie Hoover, Luke Wroblewski, &Peter Stahl
– IA Summit organizers
Inspiration from:– The Yahoo Design Pattern Library and Platform team
http://developer.yahoo.com/ypatterns/– Jared Spool, “Elements of a Design Pattern”
http://www.uie.com/articles/elements_of_a_design_pattern/– “The Design of Sites”, Van Duyne, Landay, and Hong
http://www.designofsites.com/
![Page 42: Real World Design Patterns](https://reader036.vdocuments.site/reader036/viewer/2022081400/54c76e824a7959f3038b4606/html5/thumbnails/42.jpg)
42
Design Patterns | Questions?
Questions about– the history?– design patterns?– input pattern?
Contact:– [email protected]– [email protected]