Design Patterns - IA Summit 2006

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Favorites, Groups & Events

    Design Patterns - IA Summit 2006 - Presentation 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=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" EML bgcolor=\"#D6DEFF\"><tr><td colspan=\"5\" bgcolor=\"#9999CC\"><img <eml:title> border=\"0\" Sell Your Item: Enter Toolbox Data Logic src=\"https://titan.corp.ebay.com/ui/en Payment &amp; Shipping _us/default/images/spacer.gif,DanaI </eml:title> nfo=toolbox.corp.ebay.com+\" height=\"2\" width=\"1\"></td></tr><tr><td><img border=\"0\" src=\"https://titan.corp.ebay.com/ui/en _us/default/images/leftLine_16x3.gif, DanaInfo=toolbox.corp.ebay.com+\" width=\"13\" height=\"3\" align=\"center\"></td><td><img border=\"0\" src=\"https://titan.corp.ebay.com/ui/en _us/default/images/spacer.gif,DanaI nfo=toolbox.corp.ebay.com+\" 15 height=\"25\" width=\"6\"></td><td width=\"100%\"><b xmlns:fo=\"http://www.w3.org/1999/X SL/Format\"><font face=\"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

    + jreffelljreffell, 12 months ago

    custom

    449 views, 0 favs, 0 embeds more stats

    Real world design patterns - a history of creating more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 449
      • 449 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories