User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI...

57
User Experience Best Practices: How to Build Force.com Apps Users Will Love

Transcript of User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI...

Page 1: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User Experience Best Practices:

How to Build Force.com Apps

Users Will Love

Page 2: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Sati HillyerSr. Technical Alliances Mgr.

salesforce.com

Ian SwinsonSr. Mgr. Platform & Analytics UI

salesforce.com

Page 3: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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.

Page 4: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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!

Page 5: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 6: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Why User Experience

Matters?

Page 7: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Why Can’t Business Software

be as Easy as the Consumer Web?

Page 8: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User ExperienceA phrase used to describe the overall experience and

satisfaction a user has when using a product or system.

Definition

Page 9: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

UsabilityA qualitative attribute that assesses how easy user

interfaces are to use.

• Learnability

• Efficiency

• Memorability

• Errors

• Satisfaction

• Utility

Definition

Page 10: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Why Care About User Experience?

•Demos

•Trials

•Learnability

•Productivity•Support calls

•Satisfaction

Page 11: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Bottom Line = When UX is Great, so is the ROI

Page 12: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Every $1 invested in ease of use

returns $10 to $100.

“Cost justifying ease of use”

Page 13: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

95% of web users do not read 80%

of your content

Minds Eye Web Design, Inc.

Page 14: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

UX Fund Matures, Up 39.3%Companies focused on the entire User Experience

( Nov 1, 2006 – Nov 1, 2007)

Page 15: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User Experience

Process Methodology

Page 16: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Product Owner

User Researcher

UI Designer

Usability Visual DesignerAccessibility

Developers QA

Documentation

Shared Resources

Development Team Structure

Page 17: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

UE

DEV

QA

Page 18: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

UE

DEV

QA

Page 19: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Overview of the Entire Process

Page 20: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Overview of the Entire Process

Page 21: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 22: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User ResearchUnderstand the Big Picture

Page 23: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Gather Requirements: PersonasUser Research

Page 24: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 25: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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?

Page 26: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Business Validation

Page 27: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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?

Page 28: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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:

Page 29: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 30: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 31: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 32: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have
Page 33: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Patterns: Visualforce

Components

– Consistency

– Time savings

– Customizable

Design Ideation

Page 34: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Design IdeationGood Design takes Time

Page 35: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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?

Page 36: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Utility ValidationBuild it in the Right Increments

Page 37: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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?

Page 38: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

PrototypingInteractivity is worth > 1000 words

Page 39: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Usability TestingTest and Iterate to UI Perfection

Assess a feature’s

Learnability Efficiency Effectiveness Satisfaction

Focus on perfecting the design.

Page 40: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Sample Usability Report

Test Results

Scorecard

Page 41: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 42: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 43: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Front-end ImplementationMake the Vision a Reality

Page 44: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Types of Apps on

Force.com

Page 45: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 46: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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.)

Page 47: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Avon – Makeup on Force.com

Built on Force.com

Look and feel of

Facebook

Target audience was

teens/young adult

females

Fast adoption through

compelling UX

Fully mobile enabled

Page 48: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 49: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 50: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User Experience with

Force.com

Page 51: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

User Experience with Force.com

Force.com provides many features and best practices for developers and partners

Fundamentals

Installation

Onboarding

Feedback

Page 53: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 54: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Key Takeaways

Page 55: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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

Page 56: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

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.

Page 57: User Experience Best Practices - Amazon S3€¦ · implement the latest validated design. UI development shouldn't start before the design is validated. Design compromises may have

Thank You!