Real World Design Patterns

  • 1,699 views
Uploaded on

James Reffell and Micah Alpern from the …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,699
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
51
Comments
0
Likes
2

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’ 9 • Some things were just wrong
  • 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; <eml:title> bgcolor=quot;#9999CCquot;><img Sell Your Item: Enter border=quot;0quot; Data Logic Toolbox src=quot;https://titan.corp.ebay.com/ui/en Payment &amp; Shipping </eml:title> _us/default/images/spacer.gif,DanaI 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 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
  • 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