Design Patterns - IA Summit 2006

829 views

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.

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

  • Be the first to like this

No Downloads
Views
Total views
829
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design Patterns - IA Summit 2006

  1. 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. 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. 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. 4. People 4
  5. 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. 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. 7. Design Patterns | … there was the book. 7
  8. 8. Design Patterns | … there was the book. 8
  9. 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. 10. Patterns 10
  11. 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. 12. Design Patterns | Patterns 12
  13. 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. 14. Code 14
  15. 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. 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. 17. Process 17
  18. 18. Design Patterns | Process 18
  19. 19. Design Patterns | Process 19
  20. 20. Design Patterns | Putting It Together 20
  21. 21. Final Thoughts 21
  22. 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. 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. 24. Example Pattern 24
  25. 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. 26. How you’re selling: Experienced 26
  27. 27. Sample pattern: Input 27
  28. 28. Sample pattern: Input 28
  29. 29. Sample pattern: Input Title Data Actions 29
  30. 30. Sample pattern: Input Required Title Control Prefix Data 30
  31. 31. Sample pattern: Input Required Title Control Prefix Data 31
  32. 32. Sample pattern: Input Required Title Control Prefix Data 32
  33. 33. Sample pattern: Input Title Data Actions 33
  34. 34. Sample pattern: Input Title Data Actions 34
  35. 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. 36. Sample pattern: Input Input Title Data Actions Lets keep building… Group Two or more inputs with some kind of relationship 36
  37. 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. 38. Keep building… Build chunks of functionality.. And assemble chunks into pages How Your Selling Page 38
  39. 39. Sample pattern 39
  40. 40. Developing a pattern language helps you – Think structurally – See relationships – Create a predictable UI – Manage complexity 40
  41. 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. 42. Design Patterns | Questions? Questions about – the history? – design patterns? – input pattern? Contact: – malpern@ebay.com – jreffell@ebay.com 42

×