0
Real World Design Patterns
A History of Creating & Using Design Patterns at eBay



James Reffell & Micah Alpern
User Expe...
Design Patterns | Why are we here?


• Talk with you about design patterns!
• History of design patterns at eBay
• Share l...
Design Patterns | Who are we?


         • eBay user:
         • Working at eBay since 11/1/02
         • UI Designer
    ...
People

4
Design Patterns | eBay Marketplace’s UED Group



• 5 disciplines
  – User Experience
    Research
  – Content Management
...
Design Patterns | In the beginning …


• There were a lot fewer of us in 2002!
• But we already needed something:
    – To...
Design Patterns | … there was the book.




7
Design Patterns | … there was the book.




8
Design Patterns | … the book (cont’d)


• The book didn’t work!
     – Obsolete the day it was printed.
     – Actively da...
Patterns

10
Design Patterns | Patterns


   • Example: Buttons!

Inconsistent style for
graphical buttons does not
reinforce the eBay ...
Design Patterns | Patterns




12
Design Patterns | Patterns


• The patterns worked … a little bit.
     – A few important patterns got nailed down
     – ...
Code

14
Design Patterns | Code




                                                     <table border=quot;0quot; cellpadding=quot...
Design Patterns | Code


• The code worked … better.
     – Working with developers and code made patterns deeper
     – S...
Process

17
Design Patterns | Process




18
Design Patterns | Process




19
Design Patterns | Putting It Together




20
Final Thoughts

21
Design Patterns | Now



• What we’ve got now
     – Patterns
     – Process
     – (cross-functional) People
        • UI...
Design Patterns | What Have We Learned?


• What to do
     – Have process, patterns, people, & code
     – Move quickly a...
Example Pattern

24
Sell Your Item




                 • No longer static
                   – The application grows
                     wit...
How you’re selling: Experienced




26
Sample pattern: Input




27
Sample pattern: Input




28
Sample pattern: Input




                         Title
                         Data
                        Actions



...
Sample pattern: Input




                                         Required
                                 Title        ...
Sample pattern: Input




                                         Required
                                 Title        ...
Sample pattern: Input




                                         Required
                                 Title        ...
Sample pattern: Input



                   Title
                   Data
                  Actions




33
Sample pattern: Input



                   Title
                   Data
                  Actions




34
Sample pattern: Input


                                                Required   Controls   Fees
                       ...
Sample pattern: Input



                       Input
                               Title
                               ...
Sample pattern: Group


Group
Two or more inputs with some kind of relationship
Group: Compound input


                  ...
Keep building…



Build chunks of functionality..   And assemble chunks into pages

How Your Selling                  Page...
Sample pattern




39
Developing a pattern language helps you
     – Think structurally
     – See relationships
     – Create a predictable UI
...
Design Patterns | Inspiration & Thanks


• Many thanks to:
     – eBay UED, and the UED Platform Team (past and present),
...
Design Patterns | Questions?


Questions about
     – the history?
     – design patterns?
     – input pattern?


Contact...
Upcoming SlideShare
Loading in...5
×

Real World Design Patterns

1,752

Published on

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.

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

No Downloads
Views
Total Views
1,752
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Real World Design Patterns"

  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’ 9 • Some things were just wrong
  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; <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. 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 Title Subtitle Data Toolbar Actions Prefix Data Suffix Prefix Data Suffix 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×