Your SlideShare is downloading. ×
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Design Patterns - IA Summit 2006
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Design Patterns - IA Summit 2006

628

Published on

Real world design patterns - a history of creating and using design patterns at eBay. Presented by James Reffell and Micah Alpern at the 2006 IA Summit in Vancouver.

Real world design patterns - a history of creating and using design patterns at eBay. Presented by James Reffell and Micah Alpern at the 2006 IA Summit in Vancouver.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 4. People 4
  • 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
  • 7. Design Patterns | … there was the book. 7
  • 8. Design Patterns | … there was the book. 8
  • 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 9
  • 10. Patterns 10
  • 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
  • 12. Design Patterns | Patterns 12
  • 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
  • 14. Code 14
  • 15. Design Patterns | Code <table border=quot;0quot; cellpadding=quot;0quot; cellspacing=quot;0quot; width=quot;100%quot; EML bgcolor=quot;#D6DEFFquot;><tr><td colspan=quot;5quot; bgcolor=quot;#9999CCquot;><img <eml:title> border=quot;0quot; Sell Your Item: Enter Toolbox Data Logic src=quot;https://titan.corp.ebay.com/ui/en Payment &amp; Shipping _us/default/images/spacer.gif,DanaI </eml:title> nfo=toolbox.corp.ebay.com+quot; height=quot;2quot; width=quot;1quot;></td></tr><tr><td><img border=quot;0quot; src=quot;https://titan.corp.ebay.com/ui/en _us/default/images/leftLine_16x3.gif, DanaInfo=toolbox.corp.ebay.com+quot; width=quot;13quot; height=quot;3quot; align=quot;centerquot;></td><td><img border=quot;0quot; src=quot;https://titan.corp.ebay.com/ui/en _us/default/images/spacer.gif,DanaI nfo=toolbox.corp.ebay.com+quot; 15 height=quot;25quot; width=quot;6quot;></td><td width=quot;100%quot;><b xmlns:fo=quot;http://www.w3.org/1999/X SL/Formatquot;><font face=quot;arial,sans-
  • 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
  • 17. Process 17
  • 18. Design Patterns | Process 18
  • 19. Design Patterns | Process 19
  • 20. Design Patterns | Putting It Together 20
  • 21. Final Thoughts 21
  • 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
  • 24. Example Pattern 24
  • 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
  • 26. How you’re selling: Experienced 26
  • 27. Sample pattern: Input 27
  • 28. Sample pattern: Input 28
  • 29. Sample pattern: Input Title Data Actions 29
  • 30. Sample pattern: Input Required Title Control Prefix Data 30
  • 31. Sample pattern: Input Required Title Control Prefix Data 31
  • 32. Sample pattern: Input Required Title Control Prefix Data 32
  • 33. Sample pattern: Input Title Data Actions 33
  • 34. Sample pattern: Input Title Data Actions 34
  • 35. Sample pattern: Input Required Controls Fees Title Subtitle Title Toolbar Data Actions Prefix Suffix Data Prefix Suffix Data 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
  • 38. Keep building… Build chunks of functionality.. And assemble chunks into pages How Your Selling Page 38
  • 39. Sample pattern 39
  • 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
  • 42. Design Patterns | Questions? Questions about – the history? – design patterns? – input pattern? Contact: – malpern@ebay.com – jreffell@ebay.com 42

×