Ian Swinson Lead User Interface Designer [email_address] Postcard Patterns An Agile UI Pattern Creation Process
Safe Harbor Statement “ Safe harbor” statement under the Private Securities Litigation Reform Act of 1995: This presentati...
Agenda <ul><li>Salesforce.com –  A Brief History </li></ul><ul><li>Patternforce 1.0 –   A Cautionary Tale </li></ul><ul><l...
Our Applications & Platform
51,800+ Customers
1,200,000+ Subscribers
200 Million Transactions 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 Documentation User Experience Product Management Development Customers  ...
<ul><li>We need to retain consistency </li></ul><ul><ul><li>We already have multiple versions </li></ul></ul><ul><ul><li>C...
So, how do you build a Pattern Library? Apple Tidwell Yahoo!  Welie Oracle
Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
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 <ul><li>2 *   patterns in </li></ul><ul><li>6 months </li></ul><ul><li>< 5 percent </li></ul>*Note: Th...
Clearly, this is not going to work
What did we do wrong? <ul><li>External Research Only –  We looked at examples but didn’t validate them internally </li></u...
Back to work…but with  agility
The Agile Manifesto Individuals and interactions Working software Customer collaboration Responding to change over over ov...
Agile Pattern Creation Individuals and interactions Working software Customer collaboration Responding to change We need t...
Agile Pattern Creation Start small Go wide, get coverage across all patterns Add detail when necessary
Agile Pattern Creation Check progress regularly Share with our intended audience and make changes Listen to suggestions
Agile Pattern Creation Create something nimble – easy to create and easy to update Software changes all the time Designs c...
The High-Level Taxonomy Flows Pages Page Modules Pop-ups & Overlays Messages & Dialogs Widgets & Controls
Patternforce Taxonomy <ul><li>We ended up with a large, but relatively flat, list. </li></ul>
Enter “Postcard Patterns” Dear Mom & Dad, Having a great time. Miss you both. Met a girl, getting married. Love, John The ...
What Makes a Good Postcard Pattern? <ul><li>Use the “Goldilocks” Principle </li></ul><ul><li>If the pattern doesn’t fit on...
Pattern - Anatomy of A Pattern Title Summary Category Author & Modification Date Variations (optional) Candidacy: Redesign...
 
 
 
 
 
 
Enter “Blitzes” Intense, face-to-face collaboration
The Web Site
How did we do this time?
Hey, that’s more like it! <ul><li>Before </li></ul><ul><li>After </li></ul>2 43 6 3 < 5 95 # Mo %
What did we do right? <ul><li>Research First –  Talk to your audience, show them examples </li></ul><ul><li>Complete Taxon...
Patternforce 3.0 – Ongoing Challenges <ul><li>Flexibility for customers </li></ul><ul><li>Taxonomy – multi-faceted, multi-...
Q & A
Links <ul><li>Pattern Libraries </li></ul><ul><li>Apple </li></ul><ul><li>Yahoo! </li></ul><ul><li>Oracle </li></ul><ul><l...
Links <ul><li>Resources </li></ul><ul><li>The GUI Bloopers series Johnson, Jeff </li></ul><ul><li>10 Commandments of Desig...
Upcoming SlideShare
Loading in …5
×

IxDA09 - Postcard Patterns

5,976 views

Published on

Using Agile methodologies to create a user interface pattern library. Presented at IxDA09 in Vancouver, British Columbia.

Published in: Design
2 Comments
26 Likes
Statistics
Notes
  • Jogando.net/mu - 14

    Olá, venho divulgar o melhor servidor de MU on-line do
    Brasil.
    -Season 6 Ep. 3 em todos os Servers. Sendo 7 servers diferenciados proporcionando sua diversão,
    VEJA ALGUMAS NOVIDADES :
    - NOVOS KITS : DEVASTATOR e SUPREMO DIAMOND V2 com Rings e Pendat Mysthical ;
    - Novos Shields Power v3 18 opts;
    - Novas Asas, Rings e Shields JDiamonds;
    - Novas compras com troca de asas e shields para asas e shields JDiamond.
    - Conheça também o site de Animes Cloud: http://www.animescloud.com, mais de 20.000 videos online.
    E NÃO PERCA ~> 1ª Mega Maratona Jogando.net ~> MAIS DE 30 DIAS DE EVENTOS .
    ENTRE JÁ NO SITE : http://www.jogando.net/mu/ >> CADASTRE-SE E GANHE 5 DIAS DE VIP
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice presentation i really like the content and makes pattern libraries more readable and manageable.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,976
On SlideShare
0
From Embeds
0
Number of Embeds
320
Actions
Shares
0
Downloads
121
Comments
2
Likes
26
Embeds 0
No embeds

No notes for slide
  • IxDA09 - Postcard Patterns

    1. 1. Ian Swinson Lead User Interface Designer [email_address] Postcard Patterns An Agile UI Pattern Creation Process
    2. 2. 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.
    3. 3. Agenda <ul><li>Salesforce.com – A Brief History </li></ul><ul><li>Patternforce 1.0 – A Cautionary Tale </li></ul><ul><li>Patternforce 2.0 – A New Beginning </li></ul><ul><ul><li>May the force be with us! </li></ul></ul><ul><li>Patternforce 3.0 – The Future </li></ul><ul><li>Q & A </li></ul>
    4. 4. Our Applications & Platform
    5. 5. 51,800+ Customers
    6. 6. 1,200,000+ Subscribers
    7. 7. 200 Million Transactions Each Day
    8. 8. UE in 2004
    9. 9. UE in 2004 Me
    10. 10. UE in 2009 Almost here…
    11. 11. R&D in 2009
    12. 12. “ Houston, we have a problem…” Quality Assurance Documentation User Experience Product Management Development Customers & Partners Friends, Family & Ex’s
    13. 13. <ul><li>We need to retain consistency </li></ul><ul><ul><li>We already have multiple versions </li></ul></ul><ul><ul><li>Can we choose one and move on? </li></ul></ul><ul><ul><li>Comments added to the “bad” code </li></ul></ul><ul><li>New employees need to get up to speed quickly </li></ul><ul><li>We need insight into other teams’ solutions </li></ul><ul><li>A consistent, universally available location </li></ul><ul><li>We don’t have designers for every feature </li></ul><ul><ul><li>Developers, Designers and PM’s are always asking questions </li></ul></ul><ul><ul><li>We need to minimize distractions for the Designers </li></ul></ul>Consistency Efficiency We Need a Pattern Library?
    14. 14. So, how do you build a Pattern Library? Apple Tidwell Yahoo! Welie Oracle
    15. 15. Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
    16. 16. Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
    17. 17. Scale of a Single Pattern How to make a Printable View…
    18. 18. Scale of a Single Pattern How to make a Printable View… This bit
    19. 19. Our valiant attempt…
    20. 20. We worked
    21. 21. We slept
    22. 22. We worked some more
    23. 23. We carefully rehydrated
    24. 24. We worked some more
    25. 25. We ate, we traveled, we had babies
    26. 26. And after a little more work we asked…
    27. 27. How did we do?
    28. 28. Oh, that’s not good <ul><li>2 * patterns in </li></ul><ul><li>6 months </li></ul><ul><li>< 5 percent </li></ul>*Note: They weren’t even done
    29. 29. Clearly, this is not going to work
    30. 30. What did we do wrong? <ul><li>External Research Only – We looked at examples but didn’t validate them internally </li></ul><ul><li>Detail & Scale – We went way too deep, way too early </li></ul><ul><li>Scope Creep – “Oooh, and wouldn’t it be cool?!” </li></ul><ul><li>Incomplete Taxonomy – We didn’t have a complete idea of what we needed to document </li></ul><ul><li>No Prioritization – Printable View? The number one pattern in our app? Um, no. </li></ul><ul><li>Deaf Ears – We didn’t listen to our designers </li></ul>
    31. 31. Back to work…but with agility
    32. 32. 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
    33. 33. 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)
    34. 34. Agile Pattern Creation Start small Go wide, get coverage across all patterns Add detail when necessary
    35. 35. Agile Pattern Creation Check progress regularly Share with our intended audience and make changes Listen to suggestions
    36. 36. Agile Pattern Creation Create something nimble – easy to create and easy to update Software changes all the time Designs change all the time
    37. 37. The High-Level Taxonomy Flows Pages Page Modules Pop-ups & Overlays Messages & Dialogs Widgets & Controls
    38. 38. Patternforce Taxonomy <ul><li>We ended up with a large, but relatively flat, list. </li></ul>
    39. 39. Enter “Postcard Patterns” Dear Mom & Dad, Having a great time. Miss you both. Met a girl, getting married. Love, John The Smiths 1 Main Street Springfield, ID 64006
    40. 40. What Makes a Good Postcard Pattern? <ul><li>Use the “Goldilocks” Principle </li></ul><ul><li>If the pattern doesn’t fit on a single page, consider breaking it apart or reducing the amount of detail </li></ul><ul><ul><li>You can always add detail later </li></ul></ul><ul><li>If the pattern doesn’t fill a single page, consider grouping it with other similar elements – e.g. common web form elements </li></ul><ul><ul><li>You can always break it apart later </li></ul></ul>Rule #1: Must fit on a single 8.5” x 11” page
    41. 41. Pattern - Anatomy of A Pattern Title Summary Category Author & Modification Date Variations (optional) Candidacy: Redesign? Componentize? Graphics Screenshots Illustrations
    42. 48. Enter “Blitzes” Intense, face-to-face collaboration
    43. 49. The Web Site
    44. 50. How did we do this time?
    45. 51. Hey, that’s more like it! <ul><li>Before </li></ul><ul><li>After </li></ul>2 43 6 3 < 5 95 # Mo %
    46. 52. What did we do right? <ul><li>Research First – Talk to your audience, show them examples </li></ul><ul><li>Complete Taxonomy – Sure, it’ll grow but we knew the scale </li></ul><ul><li>Time-Box – Blitzes & weekly deadlines </li></ul><ul><li>Validation – Weekly meetings to review progress and sign-of </li></ul><ul><li>Centrally Located – Everyone loved a single starting point </li></ul><ul><li>Ownership – You’re the author. Have a question, contact the author </li></ul>
    47. 53. Patternforce 3.0 – Ongoing Challenges <ul><li>Flexibility for customers </li></ul><ul><li>Taxonomy – multi-faceted, multi-layered & tagged </li></ul><ul><li>Integrate visual design & code specs & examples </li></ul><ul><li>Convert from PDF to Google Docs </li></ul><ul><li>Show screenshots of Patternforce </li></ul><ul><li>Internal marketing – emails, updates, detail </li></ul><ul><li>Component model </li></ul>
    48. 54. Q & A
    49. 55. Links <ul><li>Pattern Libraries </li></ul><ul><li>Apple </li></ul><ul><li>Yahoo! </li></ul><ul><li>Oracle </li></ul><ul><li>Jenifer Tidwell </li></ul><ul><li>Martijn Welie </li></ul><ul><li>Tools </li></ul><ul><li>FreeMind </li></ul><ul><li>Google Spreadsheets </li></ul><ul><li>Omnigraffle (OSX) </li></ul>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
    50. 56. Links <ul><li>Resources </li></ul><ul><li>The GUI Bloopers series Johnson, Jeff </li></ul><ul><li>10 Commandments of Design Rams, Dieter </li></ul><ul><li>Eight Golden Rules of Interface Design Shneiderman, Ben </li></ul><ul><li>The 10 Commandments of Information Design Buchholz, Garth A. </li></ul>Eight Golden Rules (link) 10 Commandments of Design (link) http://www.gui-bloopers.com/ 10 Commandments of Info Design (link)

    ×