IxDA09 - Postcard Patterns

Ian SwinsonLead User Interface Designer

[email protected]

Postcard PatternsAn Agile UI Pattern Creation Process

Safe Harbor Statement

“Safe harbor” statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements including but not limited to statements concerning the potential market for our existing service offerings and future offerings. All of our forward looking statements involve risks, uncertainties and assumptions. If any such risks or uncertainties materialize or if any of the assumptions proves incorrect, our results could differ materially from the results expressed or implied by the forward-looking statements we make.

The risks and uncertainties referred to above include - but are not limited to - risks associated with possible fluctuations in our operating results and cash flows, rate of growth and anticipated revenue run rate, errors, interruptions or delays in our service or our Web hosting, our new business model, our history of operating losses, the possibility that we will not remain profitable, breach of our security measures, the emerging market in which we operate, our relatively limited operating history, our ability to hire, retain and motivate our employees and manage our growth, competition, our ability to continue to release and gain customer acceptance of new and improved versions of our service, customer and partner acceptance of the AppExchange, successful customer deployment and utilization of our services, unanticipated changes in our effective tax rate, fluctuations in the number of shares outstanding, the price of such shares, foreign currency exchange rates and interest rates.

Further information on these and other factors that could affect our financial results is included in the reports on Forms 10-K, 10-Q and 8-K and in other filings we make with the Securities and Exchange Commission from time to time. These documents are available on the SEC Filings section of the Investor Information section of our website at www.salesforce.com/investor. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements, except as required by law.

Agenda

1.Salesforce.com – A Brief History

2.Patternforce 1.0 – A Cautionary Tale

3.Patternforce 2.0 – A New Beginning

• May the force be with us!

4.Patternforce 3.0 – The Future

5.Q & A

Our Applications & Platform

51,800+Customers

1,200,000+Subscribers

200 MillionTransactions Each Day

UE in 2004

UE in 2004

Me

UE in 2009

Almost here…

R&D in 2009

“Houston, we have a problem…”

Quality Assurance

DocumentationUser Experience

ProductManagement

Development

Customers & Partners

Friends, Family & Ex’s

We need to retain consistency We already have multiple versions Can we choose one and move on? Comments added to the “bad” code

New employees need to get up to speed quickly We need insight into other teams’ solutions A consistent, universally available location We don’t have designers for every feature

Developers, Designers and PM’s are always asking questions We need to minimize distractions for the Designers

Consistency

Efficiency

We Need a Pattern Library?

So, how do you build a Pattern Library?

Apple Tidwell Yahoo! Welie Oracle

Structure of a Single Pattern

This can get complicated

Structure of a Single Pattern

This can get complicated

Scale of a Single Pattern

How to make a Printable View…

Scale of a Single Pattern

How to make a Printable View…

This bit

Our valiant attempt…

We worked

We slept

We worked some more

We carefully rehydrated

We worked some more

We ate, we traveled, we had babies

And after a little more work we asked…

How did we do?

Oh, that’s not good

2* patterns in6 months

<5 percent

*Note: They weren’t even done

Clearly, this is not going to work

What did we do wrong?

1. External Research Only – We looked at examples but didn’t validate them internally

2. Detail & Scale – We went way too deep, way too early

3. Scope Creep – “Oooh, and wouldn’t it be cool?!”

4. Incomplete Taxonomy – We didn’t have a complete

idea of what we needed to document

5. No Prioritization – Printable View? The number one

pattern in our app? Um, no.

6. Deaf Ears – We didn’t listen to our designers

Back to work…but with agility

The Agile Manifesto

Individuals and interactions

Working software

Customer collaboration

Responding to change

over

over

over

over

processes and tools

comprehensive documentation

contract negotiation

following a plan

* Excerpted from “Subject to Change” by Adaptive Path

Agile Pattern Creation

Individuals and interactions

Working software

Customer collaboration

Responding to change

We need to talk to each other, the developers, PM’s, etc.

We need to work together (Pattern Blitzes)


Start small

Go wide, get coverage across all patterns

Add detail when necessary


Check progress regularly

Share with our intended audience and make changes

Listen to suggestions


Create something nimble – easy to create and easy to update

Software changes all the time

Designs change all the time

The High-Level Taxonomy

FlowsFlows

PagesPages

Page ModulesPage Modules

Pop-ups & Overlays

Pop-ups & Overlays

Messages & Dialogs

Messages & Dialogs

Widgets & Controls

Widgets & Controls

Patternforce Taxonomy

We ended up with a large,but relatively flat, list.

Enter “Postcard Patterns”

Dear Mom & Dad,Having a great time.Miss you both.Met a girl, getting married.

Love, John

The Smiths1 Main StreetSpringfield, ID64006

What Makes a Good Postcard Pattern?

Use the “Goldilocks” Principle

If the pattern doesn’t fit on a single page, consider breaking it apart or reducing the amount of detail

You can always add detail later

If the pattern doesn’t fill a single page, consider grouping it with other similar elements – e.g. common web form elements

You can always break it apart later

Rule #1: Must fit on a single 8.5” x 11” page

Pattern - Anatomy of A Pattern

Title

Summary

Category

Author &ModificationDate

Variations(optional)

Candidacy:Redesign?Componentize?

GraphicsScreenshotsIllustrations

Enter “Blitzes”

Intense, face-to-face collaboration

The Web Site

How did we do this time?

Hey, that’s more like it!

Before

After2

43

6

3

<5

95

# Mo %

What did we do right?

1. Research First – Talk to your audience, show them examples

2. Complete Taxonomy – Sure, it’ll grow but we knew the scale

3. Time-Box – Blitzes & weekly deadlines

4. Validation – Weekly meetings to review progress and

sign-of

5. Centrally Located – Everyone loved a single starting

point

6. Ownership – You’re the author. Have a question,

contact the author

Patternforce 3.0 – Ongoing Challenges

Flexibility for customers

Taxonomy – multi-faceted, multi-layered & tagged

Integrate visual design & code specs & examples

Convert from PDF to Google Docs

Show screenshots of Patternforce

Internal marketing – emails, updates, detail

Component model

Q & A

Links

Pattern Libraries

Apple

Yahoo!

Oracle

Jenifer Tidwell

Martijn Welie

Tools FreeMind

Google Spreadsheets

Omnigraffle (OSX)

O’Reilly: Designing Interfaces

Browser Look and Feel Guidelines

Apple Human Interface Guidelines

Welie.com

Yahoo! Design Pattern Library

freemind/sourceforge.net

Google Docs

The Omni Group - OmniGraffle

Links

Resources The GUI Bloopers series

Johnson, Jeff

10 Commandments of DesignRams, Dieter

Eight Golden Rules of Interface DesignShneiderman, Ben

The 10 Commandments of Information DesignBuchholz, Garth A.

Eight Golden Rules (link)

10 Commandments of Design (link)

http://www.gui-bloopers.com/

10 Commandments of Info Design (link)