Design + Behavior + Development

Presentation given at Triangle.rb exploring how design influences development and simple ways to incorporate it to build a better product. Covering multiple disciplines and how simple design decisions help the user down the desired path while reducing frustrations. Lessons pulled from how Fabrik Agency built Member Marketplace. It's all about the details, with practical examples.

Transcript

1. DESIGN BEHA VIOR DEVELOPMENT Caleb Wright - @calebwright + +
2. This is not a talk for developers.
3. This is not a talk for DESIGNERS.
4. This is a talk for BUILDERS.
5. Everything we build is used by another human.
6. Who is this guy? Caleb Wright, Senior Developer Fabrik Agency @calebwright
7. Let’s make a decision a.k.a. “Biscuits or cornbread?”
8. as humans, we like to compare
9. We think we’re good at it
10. But we're only good at comparing things that are similar.
11. not so good at comparing things that are different
12. predictably irrational
13. Scenario: choose your magazine subscription* * this is real
14. 1. Internet-only subscription for $59 2. Print-and-Internet subscription for $125
15. easy to decide
16. results:
17. 68 people: 1. Internet-only subscription for $59 32 people: 2. Print-and-Internet subscription for $125
18. Now throw in another option
19. 1. Internet-only subscription for $59 2. Print-only subscription for $125 3. Print-and-Internet subscription for $125
20. easy to decide
21. results:
22. 16 people: 1. Internet-only subscription for $59 0 people: 2. Print-only subscription for $125 84 people: 3. Print-and-Internet subscription for $125
23. Why?
24. ACCORDING TO ARIELY, Options 2 & 3 are easy to compare
25. People forget about Option 1 (1/2 the Price)
26. "For the same price, you get twice as much in #3 as in #2. Option 3 is obviously better than option 2."
27. Designing to how we think nudges users down a path
28. direct the user a.k.a. “Please hold my hand while crossing the street.”
29. your app is complex
30. the user doesn’t need to know this
31. “Simplicity is not about volume; it’s about clarity.” JOSHUA PORTER, UX GUY (@bokardo)
32. building a form is like designing a traffic intersection
33. the user knows their destination. THEY NEED HELP GETTING THERE
34. TOO MUCH DIRECTION:
35. http://www.smashingmagazine.com/road-and-street-signs-part-4/
36. not enough?
37. http://www.flickr.com/sociate
38. find the balance between saying too much and too little
39. ask for what you’re looking for, not what you need a.k.a. “The difference between half-caf and half-calf.”
40. BACKGROUND: Member marketplace is built by Fabrik USED BY CHAMBERS OF COMMERCE
41. OFFERS ARE written in DAILY DEAL STYLE e.g. "$120 for a 1 Year Gym Membership (Save 50%)"
42. we originally asked for “offer description”
43. and we got things like "$85 for 15% off the entire Ribbon Gift Album Collection. (Worth $100. Save 15%)" * someone actually put this in.
44. pivot
45. now we ask for what we’re looking for: "What are you selling?" "How much are you selling it for?" "What is the retail price?"
46. and we got things like:
47. "$50 for CPR/First Aid Combo Course (Worth $70. Save 29%)" "$499 for Full-service private office w/ phone, internet, and furniture (Save 50%)" * some were still bad, but hey, it got better.
48. be closed minded a.k.a. “How to be a square and think inside the box at the same time.”
49. users go to create an offer, but their mind goes blank BASED ON ACTUAL FEEDBACK
50. TOO OPEN ENDED AND THEY BAILED
51. INTRODUCING: SUGGESTED OFFERS
52. CHOOSE A CATEGORY. OFFER written for you. click & GO!
56. this tells the user what we’re looking for
57. discourages offers that don’t fit the mold
58. sell the do, not the what a.k.a. “Does that even make sense?”
59. advertisements from lowe’s
62. if they advertised sledge hammers, we’d have a lot of broken decks
63. they sell the project, not the product “Team up with Lowes, and let’s replace your deck together.
64. Give people ideas and recipes. * AND BY THE WAY, YOU CAN FIND THAT ON ISLE 9.
65. THE 1-2 COMBO a.k.a. “Two nostrils are better than one.”
66. let’s say you decide to setup an ad
68. ✓ check
69. someone says, “Hey, we need to tell people this is an advertisement.”
71. ✓ check
72. another person says, “Hey, we should be able to close this thing.”
74. ✓ check
75. DONE?
79. “close ad” FUNCTIONAL+INFORMATIVE
80. Better No-no Messages a.k.a. “Don't question your mother while in time-out.”
81. We have a button: only for those with the correct privileges.
83. please sign in
84. ok...
85. permission denied
86. “So you told me to sign in and now you're saying I'm denied?”
87. Harsh. And what the heck does this really mean?
88. meet the user where they are WITH SPECIFIC MESSAGES
89. NOT LOGGED IN?
91. EVEN BETTER:
93. And if you are logged in
95. provide a path for the user to change it themselves
96. waiting waiting waiting a.k.a. “Free moments to play Angry Birds.”
97. SYMPTOM: duplicate dB entries
98. 1-day in-house seminar for up to 20 people. 1-day in-house seminar for up to 20 people. 2011-08-04 19:33:01 2011-08-04 19:37:28
99. solution? add validations
100. validates :description, :uniqueness => { :scope => :user_id }
101. solution? add BETTER MESSAGing
102. “WE SEE THAT YOU’VE ENTERED THIS ALREADY.”
103. “please click on the button one time.”
104. but was the problem solved?
105. Let’s think about behavior
106. The user may have double clicked the button * Yes, this is 2012 and people still do this
107. Or they may have been impatient * The difference is about 4s
108. Let’ try this: prevent multiple clicks in javascript Hides the “You may only do this once error.”
109. ADD AN INDICATOR THAT tells the user “IT’S doing something”
110. oneClickPony = (button, callback) -> button.click (e) -> e.preventDefault() unless button.hasClass "disabled" button.addClass "disabled" button.after '<span class="button-spinner"></span>' callback() ... oneClickPony @el, => # single click..
111. one symptom may have multiple problems WITH MULTIPLE SOLUTIONS.
112. takeaways
113. Get to know your irrational user. Provide a path instead of a wall. Ask for what you’re looking for. Solve problems with multiple angles.
114. Q&A
115. Predictably Irrational by Dan Ariely LittleBigDetails.com Joshua Porter - @bokardo Influencers
117. My PICK
118. bialetti moka