Real World Design Patterns

Real World Design PatternsA History of Creating & Using Design Patterns at eBay

James Reffell & Micah AlpernUser Experience & Design Group, eBay MarketplacesMarch 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!

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

4

People

5

Design Patterns | eBay Marketplace’s UED Group

• 5 disciplines– User Experience

Research– Content Management– Creative Design– Prototyping– UI Design

• Buying

• Selling

• Platform & International

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

7

Design Patterns | … there was the book.

8

Design Patterns | … there was the book.

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

10

Patterns

11

Design Patterns | Patterns

• Example: Buttons!

Inconsistent style forgraphical buttons does notreinforce the eBay brand.

Multiple undifferentiatedbuttons with inconsistentpositioning of primary actiondo not prioritize the actionsfor the user.

12

Design Patterns | Patterns

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

14

Code

15

Design Patterns | Code

Logic Toolbox

EML<eml:title> Sell Your Item: Enter Payment &amp; Shipping</eml:title>

<table border="0" cellpadding="0"cellspacing="0" width="100%"bgcolor="#D6DEFF"><tr><tdcolspan="5"bgcolor="#9999CC"><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="2"width="1"></td></tr><tr><td><imgborder="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><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="25" width="6"></td><tdwidth="100%"><bxmlns:fo="http://www.w3.org/1999/XSL/Format"><font face="arial,sans-serif" size="+1">Sell Your Item:Enter Payment &amp;Shipping</font></b></td><td><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="1"width="6"></td></tr><tr><tdcolspan="5"bgcolor="#9999CC"><imgborder="0"src="https://titan.corp.ebay.com/ui/en_us/default/images/spacer.gif,DanaInfo=toolbox.corp.ebay.com+"height="2"width="1"></td></tr></table>

Data

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

17

Process

18

Design Patterns | Process

19

Design Patterns | Process

20

Design Patterns | Putting It Together

21

Final Thoughts

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

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)

24

Example Pattern

25

Sell Your Item

• No longer static– The application grows

with sellers experience

• Rich & deep– Many many possible

features– 27 countries with

regional differences

26

How you’re selling: Experienced

27

Sample pattern: Input

28

Sample pattern: Input

29

Sample pattern: Input

Title

Data

Actions

30

Sample pattern: Input

Title

DataPrefix

Required Control

31

Sample pattern: Input

Title

DataPrefix

Required Control

32

Sample pattern: Input

Title

DataPrefix

Required Control

33

Sample pattern: Input

TitleData

Actions

34

Sample pattern: Input

TitleData

Actions

35

Sample pattern: Input

TitleData

Actions

TitleSubtitleToolbar

Required Controls Fees

Data

Data

Data

Actions

Prefix

Prefix

Prefix

Suffix

Suffix

Suffix

36

Sample pattern: Input

TitleData

Actions

Input

Lets keep building…

GroupTwo or more inputs with some kind of relationship

37

Sample pattern: Group

Input Input

Input Input

Group: Compound input

GroupTwo or more inputs with some kind of relationship

Group: Related inputs

Group: Parent / Child

Input

Input

38

Keep building…

How Your Selling Page

Build chunks of functionality.. And assemble chunks into pages

39

Sample pattern

40

Developing a pattern language helps you– Think structurally– See relationships– Create a predictable UI– Manage complexity

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/

42

Design Patterns | Questions?

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

Contact:– malpern@ebay.com– jreffell@ebay.com