Slide 1

Slide 1 text

DESIGN BEHA VIOR DEVELOPMENT Caleb Wright - @calebwright + +

Slide 2

Slide 2 text

This is not a talk for developers.

Slide 3

Slide 3 text

This is not a talk for DESIGNERS.

Slide 4

Slide 4 text

This is a talk for BUILDERS.

Slide 5

Slide 5 text

Everything we build is used by another human.

Slide 6

Slide 6 text

Who is this guy? Caleb Wright, Senior Developer Fabrik Agency @calebwright

Slide 7

Slide 7 text

Let’s make a decision a.k.a. “Biscuits or cornbread?”

Slide 8

Slide 8 text

as humans, we like to compare

Slide 9

Slide 9 text

We think we’re good at it

Slide 10

Slide 10 text

But we're only good at comparing things that are similar.

Slide 11

Slide 11 text

not so good at comparing things that are different

Slide 12

Slide 12 text

predictably irrational

Slide 13

Slide 13 text

Scenario: choose your magazine subscription* * this is real

Slide 14

Slide 14 text

1. Internet-only subscription for $59 2. Print-and-Internet subscription for $125

Slide 15

Slide 15 text

easy to decide

Slide 16

Slide 16 text

results:

Slide 17

Slide 17 text

68 people: 1. Internet-only subscription for $59 32 people: 2. Print-and-Internet subscription for $125

Slide 18

Slide 18 text

Now throw in another option

Slide 19

Slide 19 text

1. Internet-only subscription for $59 2. Print-only subscription for $125 3. Print-and-Internet subscription for $125

Slide 20

Slide 20 text

easy to decide

Slide 21

Slide 21 text

results:

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Why?

Slide 24

Slide 24 text

ACCORDING TO ARIELY, Options 2 & 3 are easy to compare

Slide 25

Slide 25 text

People forget about Option 1 (1/2 the Price)

Slide 26

Slide 26 text

"For the same price, you get twice as much in #3 as in #2. Option 3 is obviously better than option 2."

Slide 27

Slide 27 text

Designing to how we think nudges users down a path

Slide 28

Slide 28 text

direct the user a.k.a. “Please hold my hand while crossing the street.”

Slide 29

Slide 29 text

your app is complex

Slide 30

Slide 30 text

the user doesn’t need to know this

Slide 31

Slide 31 text

“Simplicity is not about volume; it’s about clarity.” JOSHUA PORTER, UX GUY (@bokardo)

Slide 32

Slide 32 text

building a form is like designing a traffic intersection

Slide 33

Slide 33 text

the user knows their destination. THEY NEED HELP GETTING THERE

Slide 34

Slide 34 text

TOO MUCH DIRECTION:

Slide 35

Slide 35 text

http://www.smashingmagazine.com/road-and-street-signs-part-4/

Slide 36

Slide 36 text

not enough?

Slide 37

Slide 37 text

http://www.flickr.com/sociate

Slide 38

Slide 38 text

find the balance between saying too much and too little

Slide 39

Slide 39 text

ask for what you’re looking for, not what you need a.k.a. “The difference between half-caf and half-calf.”

Slide 40

Slide 40 text

BACKGROUND: Member marketplace is built by Fabrik USED BY CHAMBERS OF COMMERCE

Slide 41

Slide 41 text

OFFERS ARE written in DAILY DEAL STYLE e.g. "$120 for a 1 Year Gym Membership (Save 50%)"

Slide 42

Slide 42 text

we originally asked for “offer description”

Slide 43

Slide 43 text

and we got things like "$85 for 15% off the entire Ribbon Gift Album Collection. (Worth $100. Save 15%)" * someone actually put this in.

Slide 44

Slide 44 text

pivot

Slide 45

Slide 45 text

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?"

Slide 46

Slide 46 text

and we got things like:

Slide 47

Slide 47 text

"$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.

Slide 48

Slide 48 text

be closed minded a.k.a. “How to be a square and think inside the box at the same time.”

Slide 49

Slide 49 text

users go to create an offer, but their mind goes blank BASED ON ACTUAL FEEDBACK

Slide 50

Slide 50 text

TOO OPEN ENDED AND THEY BAILED

Slide 51

Slide 51 text

INTRODUCING: SUGGESTED OFFERS

Slide 52

Slide 52 text

CHOOSE A CATEGORY. OFFER written for you. click & GO!

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

this tells the user what we’re looking for

Slide 57

Slide 57 text

discourages offers that don’t fit the mold

Slide 58

Slide 58 text

sell the do, not the what a.k.a. “Does that even make sense?”

Slide 59

Slide 59 text

advertisements from lowe’s

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

if they advertised sledge hammers, we’d have a lot of broken decks

Slide 63

Slide 63 text

they sell the project, not the product “Team up with Lowes, and let’s replace your deck together.

Slide 64

Slide 64 text

Give people ideas and recipes. * AND BY THE WAY, YOU CAN FIND THAT ON ISLE 9.

Slide 65

Slide 65 text

THE 1-2 COMBO a.k.a. “Two nostrils are better than one.”

Slide 66

Slide 66 text

let’s say you decide to setup an ad

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

✓ check

Slide 69

Slide 69 text

someone says, “Hey, we need to tell people this is an advertisement.”

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

✓ check

Slide 72

Slide 72 text

another person says, “Hey, we should be able to close this thing.”

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

✓ check

Slide 75

Slide 75 text

DONE?

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

“close ad” FUNCTIONAL+INFORMATIVE

Slide 80

Slide 80 text

Better No-no Messages a.k.a. “Don't question your mother while in time-out.”

Slide 81

Slide 81 text

We have a button: only for those with the correct privileges.

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

please sign in

Slide 84

Slide 84 text

ok...

Slide 85

Slide 85 text

permission denied

Slide 86

Slide 86 text

“So you told me to sign in and now you're saying I'm denied?”

Slide 87

Slide 87 text

Harsh. And what the heck does this really mean?

Slide 88

Slide 88 text

meet the user where they are WITH SPECIFIC MESSAGES

Slide 89

Slide 89 text

NOT LOGGED IN?

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

EVEN BETTER:

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

And if you are logged in

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

provide a path for the user to change it themselves

Slide 96

Slide 96 text

waiting waiting waiting a.k.a. “Free moments to play Angry Birds.”

Slide 97

Slide 97 text

SYMPTOM: duplicate dB entries

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

solution? add validations

Slide 100

Slide 100 text

validates :description, :uniqueness => { :scope => :user_id }

Slide 101

Slide 101 text

solution? add BETTER MESSAGing

Slide 102

Slide 102 text

“WE SEE THAT YOU’VE ENTERED THIS ALREADY.”

Slide 103

Slide 103 text

“please click on the button one time.”

Slide 104

Slide 104 text

but was the problem solved?

Slide 105

Slide 105 text

Let’s think about behavior

Slide 106

Slide 106 text

The user may have double clicked the button * Yes, this is 2012 and people still do this

Slide 107

Slide 107 text

Or they may have been impatient * The difference is about 4s

Slide 108

Slide 108 text

Let’ try this: prevent multiple clicks in javascript Hides the “You may only do this once error.”

Slide 109

Slide 109 text

ADD AN INDICATOR THAT tells the user “IT’S doing something”

Slide 110

Slide 110 text

oneClickPony = (button, callback) -> button.click (e) -> e.preventDefault() unless button.hasClass "disabled" button.addClass "disabled" button.after '' callback() ... oneClickPony @el, => # single click..

Slide 111

Slide 111 text

one symptom may have multiple problems WITH MULTIPLE SOLUTIONS.

Slide 112

Slide 112 text

takeaways

Slide 113

Slide 113 text

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.

Slide 114

Slide 114 text

Q&A

Slide 115

Slide 115 text

Predictably Irrational by Dan Ariely LittleBigDetails.com Joshua Porter - @bokardo Influencers

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

My PICK

Slide 118

Slide 118 text

bialetti moka

Slide 119

Slide 119 text

No content