An Agile User Interface Pattern Creation Process  Ian Swinson Lead UI Designer Jason Winters UI Manager, Applications
Safe Harbor Statement <ul><li>Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This prese...
Agenda <ul><li>Salesforce:  A Brief History </li></ul><ul><li>Patternforce V1:  A Cautionary Tale </li></ul><ul><li>Patter...
With the power of Salesforce applications and the Force.com platform, you can  run your entire business on the Internet. “ ”
43,600+ Customers
1,000,000+ Subscribers
150 Million Transactions Each Day
2004 <100 2 1 1 Feature Teams / Waterfall 2008 500+ 28 12 8+ ADM / Scrum R&D User Experience Locations Applications Proces...
“ Houston, we have a problem…” Quality  Assurance Documentation User Experience Product Management Development Customers  ...
Popular Pattern Libraries Apple Tidwell Yahoo!  Welie Oracle
Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
Scale of a Single Pattern Page 1 Page 2 Page 3 Page 4
How Did We Do? <ul><li>2 *  in 6 months </li></ul><ul><li>< 5 percent </li></ul>*Note: They weren’t even done
The Realization
Define Our Audience
Our Customers Pattern Library User Experience Team Development Customers Partners User Experience Community Product Manage...
What Did We Learn? <ul><li>Development has some unique requirements: </li></ul><ul><li>To avoid writing HTML </li></ul><ul...
What Did We Learn? <ul><li>Everyone wants: </li></ul><ul><li>An online, centrally located, easy to access and easy to shar...
What Did We Learn? <ul><li>User Interface Designers want: </li></ul><ul><li>To spend time doing design work </li></ul>
Deconstructing Our Application
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Organize the Data
Organize the Data Create affinity diagram to identify themes Create categories and sort the cards
Our Structure 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>
Postcard Pattern Creation
A Postcard Pattern
Why It’s Agile <ul><li>Satisfy the customer  –  Postcards are easy and quick to author, and answer 80% of the highest prio...
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...
Does it Work? <ul><li>Before </li></ul><ul><li>After </li></ul>2 43 6 3 < 5 95 # Mo %
Workshop! Vacation postcard
Workshop! <ul><li>Some Pointers </li></ul><ul><li>Paper is not interactive  - You’ll have to use your memory and imaginati...
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
×

Postcard Patterns : An Agile User Interface Pattern Creation Process

6,008
-1

Published on

Published in: Economy & Finance, Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,008
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
92
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Postcard Patterns : An Agile User Interface Pattern Creation Process

    1. 1. An Agile User Interface Pattern Creation Process Ian Swinson Lead UI Designer Jason Winters UI Manager, Applications
    2. 2. Safe Harbor Statement <ul><li>Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. </li></ul><ul><li>The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for our fiscal year ended January 31, 2008, our quarterly report on Form 10-Q for our fiscal quarter ended April 30, 2008, and in other filings with the Securities and Exchange Commission . These documents are available on the SEC Filings section of the Investor Information section of our Web site. </li></ul><ul><li>Any unreleased services or features referenced in this or other press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements. </li></ul>
    3. 3. Agenda <ul><li>Salesforce: A Brief History </li></ul><ul><li>Patternforce V1: A Cautionary Tale </li></ul><ul><li>Patternforce V2: A New Beginning </li></ul><ul><ul><li>Who is our audience? </li></ul></ul><ul><ul><li>How do we deconstruct our application? </li></ul></ul><ul><ul><li>How do we document our application? </li></ul></ul><ul><li>Workshop: Time to Play </li></ul><ul><li>Presentation: Show us your “Postcard” </li></ul><ul><li>Wrap Up: Thank you! </li></ul>
    4. 4. With the power of Salesforce applications and the Force.com platform, you can run your entire business on the Internet. “ ”
    5. 5. 43,600+ Customers
    6. 6. 1,000,000+ Subscribers
    7. 7. 150 Million Transactions Each Day
    8. 8. 2004 <100 2 1 1 Feature Teams / Waterfall 2008 500+ 28 12 8+ ADM / Scrum R&D User Experience Locations Applications Process 1 12 Databases
    9. 9. “ Houston, we have a problem…” Quality Assurance Documentation User Experience Product Management Development Customers & Partners
    10. 10. Popular Pattern Libraries Apple Tidwell Yahoo! Welie Oracle
    11. 11. Structure of a Single Pattern <ul><li>This can get complicated </li></ul>
    12. 12. Scale of a Single Pattern Page 1 Page 2 Page 3 Page 4
    13. 13. How Did We Do? <ul><li>2 * in 6 months </li></ul><ul><li>< 5 percent </li></ul>*Note: They weren’t even done
    14. 14. The Realization
    15. 15. Define Our Audience
    16. 16. Our Customers Pattern Library User Experience Team Development Customers Partners User Experience Community Product Management
    17. 17. What Did We Learn? <ul><li>Development has some unique requirements: </li></ul><ul><li>To avoid writing HTML </li></ul><ul><li>To avoid creating new UI </li></ul><ul><li>To re-use code (components) </li></ul><ul><li>To avoid reading lengthy, detailed, convoluted specifications </li></ul>
    18. 18. What Did We Learn? <ul><li>Everyone wants: </li></ul><ul><li>An online, centrally located, easy to access and easy to share library of common design elements </li></ul><ul><li>Up to date information </li></ul><ul><li>A shared vocabulary </li></ul><ul><li>Improved communication </li></ul><ul><li>A more efficient process </li></ul><ul><li>More visuals and less text </li></ul><ul><li>Get new hires up to speed rapidly </li></ul>
    19. 19. What Did We Learn? <ul><li>User Interface Designers want: </li></ul><ul><li>To spend time doing design work </li></ul>
    20. 20. Deconstructing Our Application
    21. 37. Organize the Data
    22. 38. Organize the Data Create affinity diagram to identify themes Create categories and sort the cards
    23. 39. Our Structure Flows Pages Page Modules Pop-ups & Overlays Messages & Dialogs Widgets & Controls
    24. 43. Patternforce Taxonomy <ul><li>We ended up with a large, but relatively flat, list. </li></ul>
    25. 44. Postcard Pattern Creation
    26. 45. A Postcard Pattern
    27. 46. Why It’s Agile <ul><li>Satisfy the customer – Postcards are easy and quick to author, and answer 80% of the highest priority questions. </li></ul><ul><li>Changing requirements – Easy to create, means easy to edit and iterate. </li></ul><ul><li>Face-to-face – The most productive authoring sessions involved a half-dozen team members “blitzing” in a room together, all crafting patterns. Meetings with developers are more efficient with visual aids. </li></ul><ul><li>Simplicity – Easy to create and easy to read. If you have a question get face-to-face with the author. </li></ul><ul><li>Self-organizing teams – Choose which pattern you author. Keep the taxonomy fluid and all documents completely transparent to the team. </li></ul><ul><li>Reflection – Regular meetings to check progress, priorities, innovations, holes, deprecations, etc. </li></ul>
    28. 47. 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
    29. 48. Pattern - Anatomy of A Pattern Title Summary Category Author & Modification Date Variations (optional) Candidacy: Redesign? Componentize? Graphics Screenshots Illustrations
    30. 49. Does it Work? <ul><li>Before </li></ul><ul><li>After </li></ul>2 43 6 3 < 5 95 # Mo %
    31. 50. Workshop! Vacation postcard
    32. 51. Workshop! <ul><li>Some Pointers </li></ul><ul><li>Paper is not interactive - You’ll have to use your memory and imagination for the examples. </li></ul><ul><li>Audience – You and your new team are the audience. </li></ul><ul><li>Taxonomy – Don’t worry about it at this point. Work up to it. </li></ul><ul><li>Pattern – Choose something relevant, interesting or challenging. </li></ul><ul><li>“ Postcard” It – Keep it on one page. </li></ul><ul><li>Have fun! </li></ul>
    33. 52. 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
    34. 53. 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)
    1. A particular slide catching your eye?

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

    ×