What do UX specialist and PHP developers have in common? Probably more than you are aware. I will be doing a session covering what UX is, how it's different than UI and how UX is a close cousin to development with plenty of "how to get started" info. So come join us this Oct for a light philosophical discussion on disciplines and how to get start doing UX in your programming life.

1. Introduction to UX for Developers
Jacques Woodcock
@jacques_thekit
@kitportal

2. A little about me...

3. - Degree in Design
I started by getting my degree in design...

4. - Degree in Design
- Multimedia Designer
...then started doing multimedia design...

5. - Degree in Design
- Multimedia Designer
- Multimedia Programmer
...then multimedia programming...

6. - Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
...then started learning most web technologies....

7. - Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Project Managment
...then on to project management...

8. - Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Project Managment
- Business Dev, Ops Managment
...business development and operations management...

9. - Degree in Design
- Multimedia Designer
- Multimedia Programmer
- Coldfusion, Javascript, PHP
- Project Managment
- Business Dev, Ops Managment
- Strategy
... and am now focusing on strategy.

10. Let’s get started

11. What is UX?

12. st
1

13. View
It is NOT the View

14. View = UI
(UI = User Interface)

15. UX is

16. Model + View + Controller + So Much More

17. “UX is the technical study of how users
interact with your product.”

18. If I were to order web disciplines into a diagram,
it might look like this...

19. User Interface
Technical Scope
UX
Business Strategy
Business Strategy is your base then you build on that with your UX which defines your
Technical Scope and is presented with your User Interface.

20. User Interface
Technical Scope
UX
Business Strategy
UX is crucial to defining your technical scope and thus your project.

21. A Quick History

22. Human interaction with technical
systems started being studied post WWII
They found that even operators who’s live depended on using a technical system, still ran
into human limitations.

23. The 80’s & 90’s
When the computer started dominating the workplace, user-centered design took on a bigger
importance.

24. Today
Today, as the discipline has evolved, we look more at the psychological aspects of human
interaction as opposed to just the usability of an interface.

25. Whitney Hess
5 Principles of UX

26. Whitney Hess
1. Understand the problem

27. Whitney Hess
1. Understand the problem
2. Don't hurt anyone

28. Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive

29. Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you.

30. Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you
5. Have empathy

31. Sound Familiar?

32. Whitney Hess
1. Understand the problem
2. Don't hurt anyone
3. Make things simple and intuitive
4. Acknowledge the user is not like you
5. Have empathy
1, 3, 5... these are similar to principles of development.

33. Whitney Hess
Expanded to 20

34. My Favorites?
Here are some of my favorites.

35. My Favorite Principles Present few choices
We all know Apple is the king of fewer choices, yet they have the best user experience on the
market.

36. My Favorite Principles Present few choices
The more choices a person is presented with, the harder it is for them to choose. This is what
Barry Schwartz calls The Paradox of Choice. Remove the "nice to haves" and focus instead of
the necessary alternatives a person needs to make in order to greatly impact the outcome.

37. My Favorite Principles Create a visual hierarchy
that matches the user's needs
"Visual hierarchy" is a combination of several dimensions to aid in the processing of
information, such as color, size, position, contrast, shape, proximity to like items, etc.

38. My Favorite Principles Provide context
If what users find when they get to your site/product isn't close to what they predicted,
chances are they're going to give up and go elsewhere

39. My Favorite Principles Use appropriate defaults
Providing preselected or predetermined options is one of the ways to minimize decisions and
increase efficiency. But choose wisely: if you assign the defaults to the wrong options
(meaning that the majority of people are forced to change the selection), you'll end up
creating more stress and processing time.

40. My Favorite Principles Make actions reversible
There is no such thing as a perfect design. No one and nothing can prevent all errors, so
you're going to need a contingency plan.

41. My Favorite Principles Provide feedback
tell them why they're waiting. Tell them that you're working. Tell them you heard them and
offer the next step along their path. Design is not a monologue, it's a conversation.

42. My Favorite Principles Be consistent
When things don't match up between multiple areas, the experience can feel disjointed,
confusing and uncomfortable. People will start to question whether they're misunderstanding
the intended meaning or if they missed a key cue.

43. If I were to add 1...

44. My Favorite Principles Don’t be lazy
In the battle to “just get it launched” you need to place followthrough at the top of the list.
These might be your principles, but that don’t mean squat if you don’t apply them.

45. Why is UX not UI?

46. UX defines your features, user flow
and product personality.

47. UX: - checking in
- sending messages
- tweeting, liking, +1ing
- the process to do these tasks

48. UI defines the screen style and
layout of those features.

49. UI: - button styles
- colors
- content size

50. UI == Aesthetic Design
UX == Features and interacting with those features.

51. UX will define what the UI must create
through wireframes.

52. Project: The Kit CMS
Deliverable: Wireframes | Managers | Event Manager | Manage Attendee Records | View Attendees
Big Heart Design | August 24, 2008
WELCOME MARTHA TAYLOR!
The Kit Logo LOGOUT | MY ACCOUNT | CONTACT US | HELP
HOME PAGES RELATIONSHIPS MANAGERS NEW PAGE
QUICK PAGE EDIT MANAGE ATTENDEE RECORDS KIT NEWS
PAGE ORDER << Back | National Conference Attendee Report News headlines #1
SITE FILES News headlines #2
News headlines #3
ATTENDEE NAME: EVENT: National Conference GO News headlines #4
News headlines #5
Attendee Status Actions
Matt Carlisle Paid View | Mark as Unpaid | Delete
Jacques Woodcock Unpaid View | Mark as Paid | Delete
PRINT ATTENDEE RECORD
UX will direct with a wireframe. Here is an example of a wireframe for a user interface.

53. UI will convert the wireframe into an interface.

54. UI specialist will be a member on
a UX team.

55. UX & Developers are cousins

56. Both try to solve a problem.

57. Both break a system down to basic tasks.

58. Both describes how a function interfaces with the
overall system.

59. Both plan for input and output.

60. Shared Goals; Different Focus

61. Developers think of what's best for the system

62. UX thinks of what's best for the user

63. Developer: “Is the process an efficient use of resources?”
UX: “Is the process efficient for the user?”

64. Example
Let’s look at the focus of those questions in an example.

65. Example: Remote
Let’s look at the remote.

66. Devs:
Want to make sure all functionality is assessable to the user, typically in one menu.

67. Devs:
Which leaves you with this.

68. UX:
UX designers understand the principles of user interaction.

69. UX:
UX will deliver a product like this.

70. Not the same level of functionality,
but a mountain of difference in usability.

71. Disciplines can be broken down to 3 areas.

72. 1 Guiding principles

73. 1 Guiding principles 2 Processes

74. 1 Guiding principles 2 Processes 3 Tools

75. UX
1 Guiding principles
Dev
UX and Dev share similar principles, as we discussed.

76. UX - Listen
- Ask questions
2 Processes - Define a goal
Dev - Define milestones
They even start with a similar process.

77. UX Processes
1 Guiding principles 2 Processes
Dev Processes
It’s halfway through the process that they split.

78. UX Processes > User Flow
1 Guiding principles 2 Processes
Dev Processes > Technical Scope
UX starts to focus on the user flow while devs start to focus on the technical scope.

79. Project UX: User Flow
Dev: Technical Scope
Good projects have both

80. Project UX: User Flow
Dev: Technical Scope
, and they communicate.

81. Project UX: User Flow
User flow should define
Dev: Technical Scope
the technical scope.

82. Project UX: User Flow
Technical scope should not
Dev: Technical Scope
influence the user flow...

83. Project UX: User Flow
...beyond technical
Dev: Technical Scope
limitations.

84. Why?

85. We build for users.
Average users will trade functionality for usability.

86. You have to know your users.

87. Great UX specialist understand development.

88. Efficient UX specialist have coding knowledge.

89. UX specialist prototype.

90. UX specialist prototype. Papered process flows
Some present papered process flows.

91. AJAX/JQuery
UX specialist prototype.
Some prototype in AJAX/JQuery

92. AJAX/JQuery
UX specialist prototype. HTML/CSS
HTML/CSS

93. AJAX/JQuery
UX specialist prototype. HTML/CSS
PHP
and even PHP

94. Great UX specialist write prototypes that can be
pushed to developers for final production.

95. AJAX/JQuery
HTML/CSS
Use prototypes to PHP
streamline
development.
Development
Environment
You can even use these prototypes to streamline the development process.

96. How do I get started?

97. st
1

98. Change Mindset

99. From
How can I organize these features
to create an efficient system?

100. To
How can I organize these features
for an efficient user experience?

101. nd
2

102. Interact with REAL users
Take them out for coffee, lunch, or just chat on the phone.

103. KNOW YOUR USERS!

104. rd
3

105. Sketch
Build Adjust
Prototype
Sketch, build, test, adjust, repeat
Test

106. Prototype
Sketch - Paper
Here is a user flow I did for a process for users to take content from the system, get a short
url and pass it to the social sphere. Bottom right is a rough UI and the bottom left is a rough
data scheme.

107. Prototype
Sketch - Paper
Here is an interface sketch, the first is the overall interface, the top right is the interface when
interaction is initiated and the last is the new user interface that gets shown.

108. Prototype
Sketch - Wireframe
Next you wireframe. Here is the social process’s interface.

109. Prototype
Build
Here is the user sketch built out. The top is the default state, the next is the interface after
the new function has been initiated.

110. Prototype
Build
Here is the new screen they are presented with to complete their process.

111. Prototype
Testing
- Focus Groups
- Screen Capturing
- Eye Tracking
- Heat Mapping
- Analytics
Testing can be done with any of the above.

112. Prototype
Testing: Focus Groups
A focus group involves encouraging an invited group
of participants to share their thoughts, feelings,
attitudes and ideas on a certain subject, feature or
user flow.

113. Prototype
Testing: Focus Groups
- Prepare agenda
Start by preparing an agenda.

114. Prototype
Testing: Focus Groups
- Prepare agenda
- Invite 1 to 6 target users
Next invite 1 to 6 target users, depending on the agenda. 1 works better for them interacting
with website and 6 is best for a Q&A.

115. Prototype
Testing: Focus Groups
- Prepare agenda
- Invite 1 to 6 target users
- Meet in quiet room
You want to be able to hear each other.

116. Prototype
Testing: Focus Groups
- Prepare agenda
- Invite 1 to 6 target users
- Meet in quiet room
- Record session
You must record, either video or audio, video if they are interacting. This allows you to
reference back and justifies any changes in strategy.

117. Prototype
Testing: Focus Groups
- Prepare agenda
- Invite 1 to 6 target users
- Meet in quiet room
- Record session
- Ask them to walk through, or walk them through tasks

118. Prototype
Testing: Focus Groups
- Prepare agenda
- Invite 1 to 6 target users
- Meet in quiet room
- Record session
- Ask them to walk through, or walk them through tasks
- Document feedback
Documenting feedback should be highlights as you have a recording to reference back to for
details.

119. Prototype
Testing: Eye Tracking
“Eye tracking is the process of measuring either the
point of gaze ("where we are looking") or the motion
of an eye relative to the head.”

120. Prototype
Testing: Eye Tracking
This works by placing a camera on top of the user’s computer.

121. Prototype
Testing: Eye Tracking
It then beam infrared light out that is in turn reflected back by
the human eye.

122. Prototype
Testing: Eye Tracking
In the end, you can pinpoint where the user’s eyes move to.

123. Prototype
Testing: Screen Capturing
Screen capturing allows you to see exactly what
your users are doing on your site, down to all
sporadic mouse movements, by recording their
complete session.

124. Prototype
Testing: Screen Capturing
I love this tool.

125. Prototype
Testing: Screen Capturing
Demo
Can’t embed demo. Sorry.

126. Prototype
Testing: Screen Capturing
Some providers:
User Fly
http://userfly.com
ExactoStats
http://exactostats.com/
ClickTale
http://www.clicktale.com/
Some providers of Screen Capturing.

127. Prototype
Testing: Heat Mapping
“A heat map is an easy way to understand what
users do on your site. It’s a visual representation
showing you where people click and what users do.”

128. Prototype
Testing: Heat Mapping
Many software solutions for making heat maps.

129. Prototype
Testing: Heat Mapping
Most are based off of user click patterns.

130. Prototype
Testing: Heat Mapping
Notice the colors

131. Prototype
Testing: Heat Mapping
Cool colors are
few clicks

132. Prototype
Testing: Heat Mapping
Warm colors are
most clicked
here you will see most people use this page to login.

133. Prototype
Testing: Heat Mapping
Some providers:
Crazy Egg
http://www.crazyegg.com/
Omniture
http://www.omniture.com/en/
Clickdestiny
http://www.clickdensity.com/
Google Analytics
https://www.google.com/analytics/
And many others
Google actually only gives you the percentage of clicks per link, but that’s still useful.

134. Prototype
Testing: Analytics
We all know what analytics are, but do we
understand how they help usability?

135. Prototype
Testing: Analytics
First, they clarify what works in your UI.

136. Prototype
Testing: Analytics
Next, they justify your content, or justify removing
some of your content.

137. Prototype
Testing: Analytics
Lastly, they can tell you if your user flow is working.

138. Prototype
Testing: Analytics
There are many names for this, funnels, goals, paths.
I like conversion as it implies your user flow is taking a
user from the start to your desired destination.

139. Prototype
Testing: Analytics
This works by tracking how your user comes in, where
they go and where they end up.
It’s easy when you have a finite task, such as share a photo. You can tell how your conversion
is doing by how many photos are being shared. Still, it’s good to know how your users come
in and then find the share function.

140. Prototype
Testing: Analytics
So you have your site.
Home
About Login Sign Up Support Blog
Team Share Post 1
Service Post 2

141. Prototype
Testing: Analytics
You define a successful
conversion follows this path.
Home
About Login Sign Up Support Blog
Team Share Post 1
Service Post 2

142. Prototype
Testing: Analytics
With analytics, you find that
users follow this path.
Home
About Login Sign Up Support Blog
Team Share Post 1
Service Post 2

143. Prototype
Testing: Analytics
There’s something wrong with your user experience.
So you...

144. Prototype
Adjusting
Sketch
Build Adjust
Test
Adjust

145. Repeat

146. To Sum Up

147. UX != UI

148. UX
UI
UX owns UI

149. UX like Development

150. UX like Development
Shared goals, different focus

151. UX == Development
In the case of prototyping.

152. Get Started

153. Change Mindset
Get Started

154. Change Mindset
Get Started Interact with REAL users
Know your users!!!

155. Change Mindset
Get Started Interact with REAL users
Sketch, build, test, adjust, repeat

156. One last thing

157. Pay attention to design.
Okay, I know a lot of developers are going to scrum by this word, but trust me, it’s okay.
We’re not going to talk color palates, nor shading.

158. Pay attention to design.
You may not be a designer, but you have opinions on design, and that’s okay. So quickly...

159. Design
Design covers a wide variety of definitions and skills. It can be one of the most misleading
disciplines out there.

160. Design == Creativity
Most people think design equals creativity.

161. Design == Creativity
They are wrong. I know so many people who are good with UX design that have no ability to
“design.”

162. Design is simply the structuring of elements
into a pleasing, or usable, product for the
target audience to consume.
Design is simply the structuring of elements into a pleasing, or usable, product for a target
audience to consume.

163. Design is simply the structuring of elements
into a pleasing, or usable, product for the
target audience to consume.
Don’t get me wrong. Art is something totally different than design. There’s emotion, thought,
pain, love and so much more that goes into art.

164. Design
But we are talking design.

165. UX Design
And more specially UX design.

166. Sketch
Build
∞ Adjust
Test
You piece together a user experience from what’s proven to work for the user by getting to
know the user, testing your product, adjusting your offering and repeating. ∞

167. Introduction to UX for Developers Jacques Woodcock
References
Pek Pongpaet
http://uxmag.com/design/user-experience-for-developers
Whitney Hess
http://www.uxmag.com/design/guiding-principles-for-ux-designers
Justin Davis
http://www.maderalabs.com/blog/five-things-every-developer-should-understand-about-ux/
#more-1051
Everett McKay
http://www.uxdesignedge.com/2010/03/getting-started-in-interaction-design/
David Leggett
http://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/
Focus Groups
http://www.webcredible.co.uk/user-friendly-resources/web-usability/focus-groups.shtml
29 Free Tools
http://www.uxbooth.com/blog/top-29-free-ux-tools-and-extensions/
Dr. Tobias Komischke
http://blogs.infragistics.com/pixel8/media/p/95683.aspx
@jacques_thekit
@kitportal