1. User Experience
for Developers
Pek Pongpaet
@pekpongpaet #cwc
ChicagoWebConf 2012 #cwc

2. User Experience
for Developers
(non-humans)
Pek Pongpaet
@pekpongpaet #cwc
ChicagoWebConf 2012 #cwc

3. Pek Pongpaet

14. <Code/>

15. UX

16. Why Should I Care?

17. http://www.slideshare.net/firstpinkgirl/the-importance-of-user-experience-for-developers

18. “Every $1 invested in
usability returns between
$10 and $100”
- IBM

19. Metrics UX Improves
• reduced support costs
• customer retention length
• higher customer satisfaction
• brand awareness
• category leadership
• higher price points
• industry accolades
• proliferation, integration (like Twitter)
• no cost marketing (word of mouth, free pr)

20. What is UX?

22. User Needs

23. Technical
User Needs
Requirements

24. Technical
User Needs
Requirements
Business
Objectives

25. Technical
User Needs
Requirements
Business Sweet spot
Objectives

26. UX Lessons for Developers

27. "Good artists copy,
great artists steal."
- Pablo Picasso

33. Make it
Faster

34. 0.5s increase = 20% drop in ad rev

35. 100ms+ = -1% sales

37. Reduce Friction

44. Reduce Inconsistency

51. Web

52. iPad

53. Kill Features

57. Be like Edison
“I tested no fewer than 6,000 vegetable
growths, and ransacked the world for
the most suitable filament material.”
- Thomas Edison

58. http://37signals.com/svn/posts/1525-writing-decisions-headline-tests-on-the-highrise-signup-page

59. Tell people what to do

62. vs

64. “Force the user to take actions
e.g. don't allow them to click the
logo in the header and "escape
out the flow”
- Andy Johns, Product Manager of User Growth at Quora

65. First Encounter

66. First Encounter
Impression

78. How are people
viewing your product?

79. 10x10 pixels
not usable

84. Tools

85. Step 1: Draw

86. Step 2: Take Picture

87. Step 3: Enjoy

92. follow me on twitter
@pekpongpaet

93. Resources
• http://www.mobile-patterns.com/
• http://inspired-ui.com/
• http://patterntap.com/
• http://productplanner.com/
• http://fieldtestapp.com/
• http://www.uistencils.com/
• http://www.pinstagram.co/
• http://itunes.apple.com/us/app/