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
Real World Design PatternsA History of Creating & Using Design Patterns at eBay
James Reffell & Micah AlpernUser Experience & Design Group, eBay MarketplacesMarch 25, 2006
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!
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
4
People
5
Design Patterns | eBay Marketplace’s UED Group
• 5 disciplines– User Experience
Research– Content Management– Creative Design– Prototyping– UI Design
• Buying
• Selling
• Platform & International
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
7
Design Patterns | … there was the book.
8
Design Patterns | … there was the book.
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
10
Patterns
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.
12
Design Patterns | Patterns
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
14
Code
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
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
17
Process
18
Design Patterns | Process
19
Design Patterns | Process
20
Design Patterns | Putting It Together
21
Final Thoughts
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
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)
24
Example Pattern
25
Sell Your Item
• No longer static– The application grows
with sellers experience
• Rich & deep– Many many possible
features– 27 countries with
regional differences
26
How you’re selling: Experienced
27
Sample pattern: Input
28
Sample pattern: Input
29
Sample pattern: Input
Title
Data
Actions
30
Sample pattern: Input
Title
DataPrefix
Required Control
31
Sample pattern: Input
Title
DataPrefix
Required Control
32
Sample pattern: Input
Title
DataPrefix
Required Control
33
Sample pattern: Input
TitleData
Actions
34
Sample pattern: Input
TitleData
Actions
35
Sample pattern: Input
TitleData
Actions
TitleSubtitleToolbar
Required Controls Fees
Data
Data
Data
Actions
Prefix
Prefix
Prefix
Suffix
Suffix
Suffix
36
Sample pattern: Input
TitleData
Actions
Input
Lets keep building…
GroupTwo or more inputs with some kind of relationship
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
38
Keep building…
How Your Selling Page
Build chunks of functionality.. And assemble chunks into pages
39
Sample pattern
40
Developing a pattern language helps you– Think structurally– See relationships– Create a predictable UI– Manage complexity
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/
42
Design Patterns | Questions?
Questions about– the history?– design patterns?– input pattern?
Contact:– [email protected]– [email protected]