User Experience 101 for Developers is a presentation about user experience (UX) design for developers. It discusses the importance of UX design for business success and easier development. The presentation covers the key aspects of UX design: research to understand user needs, ideation to generate design concepts, and evaluation through user testing to improve designs. It provides examples and tips for each stage of the UX design process.

1. User Experience 101 for Developers
Research, Ideation and Evaluation
Ross Belmont, Appiphony, Chief Experience Designer
@rossbelmont

2. 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 product or service availability, 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, new products and services, 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 outcome of
intellectual property and other litigation, 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-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others
containing important disclosures 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 presentations, 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.

3. What is User Experience?

4. What is User Experience?
Let’s start with a visual analogy.

5. What is User Experience?
Let’s start with a visual analogy.
 Because bullets don’t cut it.

6. Product

7. User Interface

8. User Experience

9. User Experience (UX) Design: My definition
UX design boils down to:
 understanding what users
need to accomplish
 adjusting the interface so
that they can get it done in
the best possible way

10. User Experience (UX) Design: My definition
UX design boils down to:
 understanding what users
need to accomplish
 adjusting the interface so
that they can get it done in
the best possible way
Feasible

11. User Experience (UX) Design: My definition
UX design boils down to:
 understanding what users
need to accomplish
 adjusting the interface so
that they can get it done in
the best possible way
Feasible
Desirable

12. User Experience (UX) Design: My definition
UX design boils down to:
 understanding what users
need to accomplish
 adjusting the interface so
that they can get it done in
the best possible way
Feasible
Desirable Profitable

13. User Experience (UX) Design: My definition
UX design boils down to:
 understanding what users
need to accomplish
 adjusting the interface so
that they can get it done in
the best possible way
Feasible
Desirable Profitable
★

14. User Experience Design is NOT about…

15. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”)

16. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”)
Craig Villamor, Principal Design Architect at Salesforce.com

17. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Craig Villamor, Principal Design Architect at Salesforce.com

18. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Sketching at Bean Around The World by freshbrewed on flickr.com
Craig Villamor, Principal Design Architect at Salesforce.com

19. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Sketching at Bean Around The World by freshbrewed on flickr.com
Craig Villamor, Principal Design Architect at Salesforce.com
One specific platform

20. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Sketching at Bean Around The World by freshbrewed on flickr.com
Craig Villamor, Principal Design Architect at Salesforce.com
One specific platform

21. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Sketching at Bean Around The World by freshbrewed on flickr.com
Craig Villamor, Principal Design Architect at Salesforce.com
One specific platform
✓

22. User Experience Design is NOT about…
Super fancy graphics (“jazz hands”) Coffee shop inspiration
Sketching at Bean Around The World by freshbrewed on flickr.com
Craig Villamor, Principal Design Architect at Salesforce.com
One specific platform
✓ ✓

23. Why care about the User Experience?

24. Why care about the User Experience?

25. Why care about the User Experience?

26. Good User Experience Business Success

27. Good User Experience Business Success

28. Good User Experience Business Success

29. Planning the design makes development easier
Cohesive design

30. Planning the design makes development easier
Cohesive design
Data layer

31. Planning the design makes development easier
Cohesive design
Server side code
Data layer

32. Planning the design makes development easier
Cohesive design
Server side code
Data layer
Client side code

33. Planning the design makes development easier
Cohesive design
Server side code
Data layer
Client side code
View components

34. Planning the design makes development easier
Cohesive design
Server side code
Data layer
Client side code
View components View styling

35. Planning the design makes development easier
Cohesive design
Server side code
Data layer
Client side code
View components View styling
✓

36. Planning the design improves estimates
Design completeness
Estimateaccuracy

37. Want to know how?

38. Want to know how?
Which Should I choose? by buttersponge on flickr.com

39. User Experience Design in Three Easy Steps
Research
Learn what your users are trying to accomplish.1
Ideation
Work through different ideas that would meet those goals.2
Evaluation
Test prototypes with users, and iterate when you find issues.3

40. The usual approach to discovery Research
On a scale of 1-10, how painful was your
last requirements gathering session?

41. The usual approach to discovery Research
On a scale of 1-10, how painful was your
last requirements gathering session?

42. The usual approach to discovery Research
On a scale of 1-10, how painful was your
last requirements gathering session?

43. Activity: Story-based interview Research
Think back to the last time you checked the weather.
Why did you need to know?
What did you do next?
post-interview by Bennett 4 Senate on flickr.com

44. Problem: sometimes you can’t “just ask” Research
Users don’t absorb everything in their path and can’t recall it.
Driving home one night by Fellowship of the Rich on flickr.com

45. Learning what users actually do Research

46. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com

47. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Posted by Benjamin Voss on wordpress.com

48. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com

49. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com

50. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com
Worrying by Jaypeg on flickr.com

51. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com
Worrying by Jaypeg on flickr.com

52. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com
Worrying by Jaypeg on flickr.com

53. Learning what users actually do Research
Ride shotgun with them.
Riding shotgun by mmcnabb3 on flickr.com
Notice the stickies on
the monitor.
Posted by Benjamin Voss on wordpress.com
Worrying by Jaypeg on flickr.com

54. Affinity Diagram Research
affinity diagram by Sean Munson on flickr.com
Related notes grouped together

55. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow

56. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
User Behaviors

57. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
User Behaviors

58. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
User Behaviors

59. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
Features that
support them
User Behaviors

60. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
Features that
support them
User Behaviors

61. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
Features that
support them
User Behaviors

62. Mental Models Research
Mental Model Diagrams by Indi Young and Brad Colbow
Features that
support them
User Behaviors

63. Real Understanding Research

64. User Experience Design in Three Easy Steps
Research
Learn what your users are trying to accomplish.1
Ideation
Work through different ideas that would meet those goals.2
Evaluation
Test prototypes with users, and iterate when you find issues.3

65. Requirements: the usual approach Ideation

66. Requirements: the usual approach Ideation

67. Requirements: the usual approach Ideation
Requirements-Driven Software Development Must Die by Fred Beecher

68. Requirements: the usual approach Ideation
Requirements-Driven Software Development Must Die by Fred Beecher
Beta

69. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager

70. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager
Run Joined
Report

71. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager
Run Joined
Report

72. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager
Run Joined
Report
Send to
manager

73. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager
Run Joined
Report
Send to
manager

74. Requirements are an Input Ideation
Run Tabular
Report
Export to
Excel
Manipulate
data by hand
Send to
manager
Run Joined
Report
Send to
manager
Riding shotgun by mmcnabb3 on flickr.com

75.  Standard layouts and Visualforce tags
 Twitter Bootstrap, jQuery UI, etc.
 UI elements described in Design Pattern Libraries
Pre-built design solutions can help Ideation

76.  Standard layouts and Visualforce tags
 Twitter Bootstrap, jQuery UI, etc.
 UI elements described in Design Pattern Libraries
Pre-built design solutions can help Ideation

77. Create new design concepts by sketching Ideation
Sketch multiple possibilities on paper before coding.

78. A few words on sketching Ideation
 Think you can’t draw? Start with templates and simple shapes.
 This is not art. You’re not expressing your feelings.
 Sketches don’t need to be beautiful.
 Stick to four colors or less: black, red, blue and (eventually) grey.

79. Plan flows: Interactive Sketching Notation Ideation
Use Interactive Sketching Notation to work out
the user’s flow—all the way to their end goal.

80. Stuck on sketching? Wireframe it. Ideation
Use tools like Balsamiq Mockups for low fidelity renderings.

81. Wireframes can work, but... Ideation
 Don’t forget to try multiple ideas
 The focus shifts to individual screens,
not the whole flow
 They can be time consuming to create

82. Wireframes can work, but... Ideation
 Don’t forget to try multiple ideas
 The focus shifts to individual screens,
not the whole flow
 They can be time consuming to create
Use whatever works!

83. Got flows? Now build a prototype! Ideation

84. Got flows? Now build a prototype! Ideation

85. Got flows? Now build a prototype! Ideation

86. Got flows? Now build a prototype! Ideation
Print each screen to visualize
the flows more easily.

87. Got flows? Now build a prototype! Ideation
Print each screen to visualize
the flows more easily.
Posted by Coleen Baik on Twitter's blog

88. User Experience Design in Three Easy Steps
Research
Learn what your users are trying to accomplish.1
Ideation
Work through different ideas that would meet those goals.2
Evaluation
Test prototypes with users, and iterate when you find issues.3

89. The usual approach to evaluation Evaluation
On a scale of 1-10, how painful was your
last User Acceptance Testing session?

90. The usual approach to evaluation Evaluation
On a scale of 1-10, how painful was your
last User Acceptance Testing session?

91. The usual approach to evaluation Evaluation
On a scale of 1-10, how painful was your
last User Acceptance Testing session?

92. The concept of UAT is broken Evaluation

93. The concept of UAT is broken Evaluation
Requirements-Driven Software Development Must Die by Fred Beecher

94. The concept of UAT is broken Evaluation
Requirements-Driven Software Development Must Die by Fred Beecher
Beta

95.  Show prototypes to stakeholders
 Step through the flow you’ve planned and
show how the user will meet their goals
 Prepare for change requests, though
most will be cosmetic
 If changes are non-trivial, ask how it ties
back to the user’s goal
 Once you build up trust and goodwill, try
walking through your sketch
Get feedback along the way Evaluation
Posted by Coleen Baik on Twitter's blog

96.  Show prototypes to stakeholders
 Step through the flow you’ve planned and
show how the user will meet their goals
 Prepare for change requests, though
most will be cosmetic
 If changes are non-trivial, ask how it ties
back to the user’s goal
 Once you build up trust and goodwill, try
walking through your sketch
Get feedback along the way Evaluation
Posted by Coleen Baik on Twitter's blog

97.  Introduce the prototype to the user.
 Ask them to click through and try to
accomplish their goal.
 Don’t be a “talking manual.”
 Tell them you’re testing the software,
not them.
 Ask them to “think out loud.”
 Take notes on what happens.
 Adjust the UI where necessary
Usability Testing Evaluation
Posted by Coleen Baik on Twitter's blog
Usability Test by l-i-n-k on flickr.com

98. User Experience Design in Three Easy Steps
Research
Learn what your users are trying to accomplish.1
Ideation
Work through different ideas that would meet those goals.2
Evaluation
Test prototypes with users, and iterate when you find issues.3

99. Quick story: checking the weather

100. Quick story: checking the weather

101. Quick story: checking the weather

102. Quick story: checking the weather

103. Quick story: checking the weather

104. Quick story: checking the weather

105. Quick story: checking the weather

106. Quick story: checking the weather

107. Quick story: checking the weather

108. Quick story: checking the weather

109. What if I was going skiing?

110. What if I was packing for Disneyworld?

111. User Experience Design in Three Easy Steps
Research
Learn what your users are trying to accomplish.1
Ideation
Work through different ideas that would meet those goals.2
Evaluation
Test prototypes with users, and iterate when you find issues.3

112. Ross Belmont
Chief Experience Designer
@rossbelmont

113. Ross Belmont
Chief Experience Designer
@rossbelmont