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

Post on 20-May-2020

3 views 0 download

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

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

Facebook

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

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 tester@salesforce.com and we’ll include you in

our next round.

Thank You!