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.
Independent Garulia Escorts ✔ 9332606886✔ Full Night With Room Online Booking...
Real World Design Patterns
1. Real World Design Patterns
A History of Creating & Using Design Patterns at eBay
James Reffell & Micah Alpern
User Experience & Design Group, eBay Marketplaces
March 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!
2
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
3
5. Design Patterns | eBay Marketplace’s UED Group
• 5 disciplines
– User Experience
Research
– Content Management
– Creative Design
– Prototyping
– UI Design
• Buying
• Selling
• Platform & International
5
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
6
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’
9 • Some things were just wrong
11. Design Patterns | Patterns
• Example: Buttons!
Inconsistent style for
graphical buttons does not
reinforce the eBay brand.
Multiple undifferentiated
buttons with inconsistent
positioning of primary action
do not prioritize the actions
for the user.
11
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
13
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
16
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
22
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)
23
25. Sell Your Item
• No longer static
– The application grows
with sellers experience
• Rich & deep
– Many many possible
features
– 27 countries with
regional differences
25
35. Sample pattern: Input
Required Controls Fees
Title
Title Subtitle
Data Toolbar
Actions Prefix Data Suffix
Prefix Data Suffix
Prefix Data Suffix
Actions
35
36. Sample pattern: Input
Input
Title
Data
Actions
Lets keep building…
Group
Two or more inputs with some kind of relationship
36
37. Sample pattern: Group
Group
Two or more inputs with some kind of relationship
Group: Compound input
Input Input
Group: Related inputs
Input Input
Group: Parent / Child
Input
Input
37
40. Developing a pattern language helps you
– Think structurally
– See relationships
– Create a predictable UI
– Manage complexity
40
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/
41
