Postcard Patterns : An Agile User Interface Pattern Creation Process
-
Upload
steve-greene -
Category
Economy & Finance
-
view
5.794 -
download
0
Transcript of Postcard Patterns : An Agile User Interface Pattern Creation Process
![Page 1: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/1.jpg)
An Agile User Interface
Pattern Creation Process
Ian SwinsonLead UI Designer
Jason WintersUI Manager, Applications
![Page 2: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/2.jpg)
Safe Harbor Statement
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.
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.
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.
![Page 3: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/3.jpg)
Agenda
1. Salesforce: A Brief History
2. Patternforce V1: A Cautionary Tale
3. Patternforce V2: A New Beginning
• Who is our audience?
• How do we deconstruct our application?
• How do we document our application?
4. Workshop: Time to Play
5. Presentation: Show us your “Postcard”
6. Wrap Up: Thank you!
![Page 4: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/4.jpg)
With the power of Salesforce applications and the Force.com platform, you can run your entire business on the Internet.
“
”
![Page 5: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/5.jpg)
43,600+Customers
![Page 6: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/6.jpg)
1,000,000+
Subscribers
![Page 7: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/7.jpg)
150 Million
Transactions Each Day
![Page 8: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/8.jpg)
2004
<100
2
1
1
Feature Teams / Waterfall
2008
500+
28
12
8+
ADM / Scrum
R&D
User Experience
Locations
Applications
Process
1 12Databases
![Page 9: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/9.jpg)
“Houston, we have a problem…”
Quality Assurance
Documentation User Experience
ProductManagement
Development
Customers & Partners
![Page 10: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/10.jpg)
Popular Pattern Libraries
Apple Tidwell Yahoo! Welie Oracle
![Page 11: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/11.jpg)
Structure of a Single Pattern
This can get complicated
![Page 12: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/12.jpg)
Scale of a Single Pattern
Page 1
Page 2
Page 3
Page 4
![Page 13: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/13.jpg)
How Did We Do?
2* in 6 months
<5 percent*Note: They weren’t even done
![Page 14: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/14.jpg)
The Realization
![Page 15: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/15.jpg)
Define Our Audience
![Page 16: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/16.jpg)
Our Customers
Pattern LibraryPattern Library
User Experience TeamUser Experience Team
DevelopmentDevelopment
CustomersCustomers
PartnersPartners
User Experience CommunityUser Experience Community
Product ManagementProduct Management
![Page 17: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/17.jpg)
What Did We Learn?
Development has some unique requirements:
To avoid writing HTML
To avoid creating new UI
To re-use code (components)
To avoid reading lengthy, detailed, convoluted specifications
![Page 18: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/18.jpg)
What Did We Learn?
Everyone wants: An online, centrally located, easy to access and easy to
share library of common design elements Up to date information A shared vocabulary Improved communication
A more efficient process
More visuals and less text
Get new hires up to speed rapidly
![Page 19: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/19.jpg)
What Did We Learn?
User Interface Designers want:
To spend time doing design work
![Page 20: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/20.jpg)
Deconstructing Our Application
![Page 21: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/21.jpg)
![Page 22: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/22.jpg)
![Page 23: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/23.jpg)
![Page 24: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/24.jpg)
![Page 25: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/25.jpg)
![Page 26: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/26.jpg)
![Page 27: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/27.jpg)
![Page 28: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/28.jpg)
![Page 29: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/29.jpg)
![Page 30: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/30.jpg)
![Page 31: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/31.jpg)
![Page 32: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/32.jpg)
![Page 33: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/33.jpg)
![Page 34: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/34.jpg)
![Page 35: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/35.jpg)
![Page 36: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/36.jpg)
![Page 37: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/37.jpg)
Organize the Data
![Page 38: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/38.jpg)
Organize the Data
Create affinity diagram to identify themes
Create categories and sort the cards
![Page 39: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/39.jpg)
Our Structure
FlowsFlows
PagesPages
Page ModulesPage Modules
Pop-ups & Overlays
Pop-ups & Overlays
Messages & Dialogs
Messages & Dialogs
Widgets & Controls
Widgets & Controls
![Page 40: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/40.jpg)
![Page 41: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/41.jpg)
![Page 42: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/42.jpg)
![Page 43: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/43.jpg)
Patternforce Taxonomy
We ended up with a large,but relatively flat, list.
![Page 44: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/44.jpg)
Postcard Pattern Creation
![Page 45: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/45.jpg)
A Postcard Pattern
![Page 46: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/46.jpg)
Why It’s Agile
Satisfy the customer – Postcards are easy and quick to author, and answer 80% of the highest priority questions.
Changing requirements – Easy to create, means easy to edit and iterate.
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.
Simplicity – Easy to create and easy to read. If you have a question get face-to-face with the author.
Self-organizing teams – Choose which pattern you author. Keep the taxonomy fluid and all documents completely transparent to the team.
Reflection – Regular meetings to check progress, priorities, innovations, holes, deprecations, etc.
![Page 47: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/47.jpg)
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
![Page 48: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/48.jpg)
Pattern - Anatomy of A Pattern
Title
Summary
Category
Author &ModificationDate
Variations(optional)
Candidacy:Redesign?Componentize?
GraphicsScreenshotsIllustrations
![Page 49: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/49.jpg)
Does it Work?
Before
After2
43
6
3
<5
95
# Mo %
![Page 50: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/50.jpg)
Workshop!Vacation postcard
![Page 51: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/51.jpg)
Workshop!
Some Pointers Paper is not interactive - You’ll have to use your memory
and imagination for the examples.
Audience – You and your new team are the audience.
Taxonomy – Don’t worry about it at this point. Work up to it.
Pattern – Choose something relevant, interesting or challenging.
“Postcard” It – Keep it on one page.
Have fun!
![Page 52: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/52.jpg)
LinksPattern 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
![Page 53: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/53.jpg)
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)
![Page 54: Postcard Patterns : An Agile User Interface Pattern Creation Process](https://reader036.fdocuments.us/reader036/viewer/2022062418/554ce4e5b4c905cc488b5480/html5/thumbnails/54.jpg)