user experience best practices - amazon s3€¦ · implement the latest validated design. ui...
TRANSCRIPT
User Experience Best Practices:
How to Build Force.com Apps
Users Will Love
Sati HillyerSr. Technical Alliances Mgr.
salesforce.com
Ian SwinsonSr. Mgr. Platform & Analytics UI
salesforce.com
Safe Harbor
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,
risks associated with possible mergers and acquisitions, 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, our limited history reselling non-salesforce.com products, 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 the most recent fiscal year ended January 31,
2010. This document and others 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.
Objectives
What is USER EXPERIENCE and
why is it IMPORTANT?
Learn about Salesforce’s USER
EXPERIENCE PROCESS
Discover METHODS for understanding
your users
Learn user experience BEST PRACTICES with
Force.com
Start creating GREAT USER
EXPERIENCES!
What are we going to discuss?
Why User Experience Matters?
User Experience Process Methodology
Types of Apps on Force.com
User Experience with Force.com
Key Takeaways
Q&A
Why User Experience
Matters?
Why Can’t Business Software
be as Easy as the Consumer Web?
User ExperienceA phrase used to describe the overall experience and
satisfaction a user has when using a product or system.
Definition
UsabilityA qualitative attribute that assesses how easy user
interfaces are to use.
• Learnability
• Efficiency
• Memorability
• Errors
• Satisfaction
• Utility
Definition
Why Care About User Experience?
•Demos
•Trials
•Learnability
•Productivity•Support calls
•Satisfaction
Bottom Line = When UX is Great, so is the ROI
Every $1 invested in ease of use
returns $10 to $100.
“Cost justifying ease of use”
95% of web users do not read 80%
of your content
Minds Eye Web Design, Inc.
UX Fund Matures, Up 39.3%Companies focused on the entire User Experience
( Nov 1, 2006 – Nov 1, 2007)
User Experience
Process Methodology
Product Owner
User Researcher
UI Designer
Usability Visual DesignerAccessibility
Developers QA
Documentation
Shared Resources
Development Team Structure
UE
DEV
QA
UE
DEV
QA
Overview of the Entire Process
Overview of the Entire Process
User Research
• Who are my users?
• What are my users doing?
• What are their needs and pain points?
• What are they passionate about?
• User Requirements != Business Requirements
The first step to creating
exceptional user experiences is understanding
your users’ needs.
THE USER IS THE FOCUS!
Understand the Big Picture
User ResearchUnderstand the Big Picture
Gather Requirements: PersonasUser Research
Gather Requirements: User Stories
“As an X, I need Y so that I can……”
For example, Edit Approval Process feature:
As an Admin, I need to quickly insert a new step
into an existing Approval Process AND in the
right sequence.
User Research
Business ValidationIf you build it, will anyone come?
Is there a valid business case for your product or feature?
• What kind of customers? Companies?
• Are target customers interested in the feature concept?
• Does this feature fill a high priority customer need?
• Do I have enough resources (time, money, talent) to build it?
• What initial feature scope is required for success?
• What’s the long term product vision?
Business Validation
Business Validation
Creating an
approval process:
7 steps
Creating a single
approval step:
3 steps
Creating a single
approval action:
1 step
Create Process with 1 Step and 1 Action: 11 Pages
Create Process with 3 Steps and 3 Actions: 17 Pages
If you build it, will anyone come?
Design IdeationGood Design takes Time
• Design Principles
• Patterns
• Low Fidelity Prototyping
• Early-Stage Validation
Begins once there’s a clear product idea, user requirements and scope. This phase utilizes:
Design and Evaluate: Key Values
Fail fast, fail early
Involve the end-user, not the buyer
If you are talking, you are not listening
Expect to find problems, not validate or sell designs
Iterate, Iterate, Iterate!
Design Ideation
Design: Some User-Interface Basics
1. Visibility of system status
2. Match between system and
the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose,
.and recover from errors
10. Help and documentation
Jakob Nielsen, http://www.useit.com/papers/heuristic/heuristic_list.html
Design Ideation
1. Visibility of system status
2. Match between system and
the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose,
.and recover from errors
10. Help and documentation
Jakob Nielsen, http://www.useit.com/papers/heuristic/heuristic_list.html
Design: Some User-Interface BasicsDesign Ideation
Patterns: Visualforce
Components
– Consistency
– Time savings
– Customizable
Design Ideation
Design IdeationGood Design takes Time
Utility ValidationBuild it in the Right Increments
Show high-level design ideas to the target users to assess its utility and
general direction.
• What can you build and ship that provides real value?
• Would they use it? If yes, how?
• How do you see this feature fitting into their daily routine?
• Does it compete or compare with any of their existing solutions?
• What is the minimum functionality they need for this feature to be useful?
• What are the deal breakers?
Utility ValidationBuild it in the Right Increments
PrototypingInteractivity is worth > 1000 words
Once the utility, and basic usability, is established you can start building a prototype. Issues are always more
apparent when the design is interactive.
How interactive does my
prototype need to be for this round
of usability testing?
What are the key user stories and flows that users will need to be prototyped?
What prototyping tool will best help me accomplish these goals?
PrototypingInteractivity is worth > 1000 words
Usability TestingTest and Iterate to UI Perfection
Assess a feature’s
Learnability Efficiency Effectiveness Satisfaction
Focus on perfecting the design.
Sample Usability Report
Test Results
Scorecard
Usability Testing
“Oh yeah, I can tell just by looking at it… this is one of the
things in practice, especially if you're doing something
sophisticated, you have a state diagram in hand. This is
very recognizable… this is good stuff, I really do like the
visual elements of it.”
“I think overall, it's a great concept and to put a graphical
face on the approval process. Take my example of the 9
step one, I would really like to show someone that on
paper, this is what you need to get your contract signed.”
“Ahh, here. This is perfect, I'm not even saying this to be
nice. Our users would really eat this up.”
"So if I can use this as documentation, right off
the bat, that would be an improvement for me. It
writes better than I could write a flow chart. It
totally makes sense: I really, really like this
stuff." - salesforce.com Administrator
Test and Iterate to UI Perfection
Front-end Implementation
The whole team collaborates to implement the latest validated design.
UI development shouldn't start before the design is validated.
Design compromises may have to be re-validated with the users or an expert.
Prototype specification
Design alternatives
Usability test early code
Make the Vision a Reality
Front-end ImplementationMake the Vision a Reality
Types of Apps on
Force.com
Billing
IT Governance/Project Mgmt Human Resources Franchise Management
IT Governance and
Change Control
Built in 6 weeks
Project Management
Less than 10 Weeks
Shipping & Fulfillment ERP/Accounting
Commercial
Accounting
Built in 6 months
Custom ERP and
Shipping System
Built in 7 months
Sample Management
Less than 6 months
Distribution &
Shipping
Less than 3 months
Quoting, Licensing &
Billing
Less than 10 weeks
Custom Billing
Less than 6 weeks
Franchise
Management
60 days
Franchise &Training
Management
Less than 6 months
Recruiting and
Training Application
Less than 6 months
Performance & Time
Off
Less than 5 weeks
Over 160,000 apps built on Force.com
LegalB2C Websites/eCommerce Distribution
Inventory and
Distribution
Built in 6 months
Inventory and
Shipping System
Built in 7 months
Pledge 5
Less than 22 days
Public Train Website
Less than 3 months
Contract Mgt
Less than 10 weeks
Digital Rights Mgt
Less than 6 weeks
High TechTravel and Transportation Life Sciences
Commercial
Accounting
Built in 6 months
Custom ERP and
Shipping System
Built in 7 months
Sample
Management
Less than 6 months
Distribution &
Shipping
Less than 3 months
Quoting, Licensing
& Billing
Less than 10 weeks
Custom Billing
Application
Less than 6 weeks
Communications
Financial Services Health Care Retail and Distribution
IT Governance and
Change Control
Built in 6 weeks
Manufacturing Business Services
Commercial
Accounting
Built in 6 months
Custom ERP and
Shipping System
Built in 7 months
Sample
Management
Less than 6 months
Distribution &
Shipping
Less than 3 months
Quoting, Licensing
& Billing
Less than 10 weeks
Custom Billing
Application
Less than 6 weeks
Franchise
Management
60 days
Franchise &Training
Mgt
Less than 6 months
Recruiting and
Training
Less than 6 months
Performance &
Time Off
Less than 5 weeks
Recruiting and
Training
Less than 6 months
Over 160,000 apps built on Force.com (cont.)
Avon – Makeup on Force.com
Built on Force.com
Look and feel of
Target audience was
teens/young adult
females
Fast adoption through
compelling UX
Fully mobile enabled
FinancialForce – Accounting on Force.com
Built on Force.com
Consistent and
familiar UX with
Salesforce
Target audience is
existing Salesforce
customers
Leverage many
Force.com standard
components
BMC ServiceDesk – Help Desk on Force.com
Built on Force.com
Unique UX that
follows similar patterns
(tabs, list views, sidebar
components, etc.)
Target audience is
non-Salesforce
customers
Focused on the user -
Help Desk Agent
User Experience with
Force.com
User Experience with Force.com
Force.com provides many features and best practices for developers and partners
Fundamentals
Installation
Onboarding
Feedback
DEMO
Giving Warehouse Management a compelling
User Experience
http://developer.force.com/workbook
User Experience Design Considerations
Fundamentals
Define the User
Define the Goal
Stick to Standards
Out-of-the-box vs. Build from scratch
Installation
Configuration Guide
Use latest packaging features (i.e. Button
Overrides and Remote Sites)
If you use plug-ins, be sure to include in
installation experience
Setup guides and videos open should
open in new windows
Onboarding
Start before the app
Getting Started Page (include short videos:
1-4 mins)
Splash Pages, Tool Tips, Custom Help
Start the Trial immediately – include
sample data
Feedback
Do LOTS of testing
Test with various users
Include Feedback link
Key Takeaways
Key Takeaways
Know your User and
Goal
Be Consistency and
Stick to Standards
Leverage the Platform
Incorporate Graphics
Provide Tooltips and
Custom Help
Create a Getting Started
Experience
Error Prevention and
Recovery
Aesthetic and Minimalist
Design
Be Efficient and Flexible
Test and Gather
Feedback
Learn More
Visit http://developer.force.com to learn more about Salesforce and Force.com technologies.
Interested in Usability Testing? Send an email to [email protected] and we’ll include you in
our next round.
Thank You!