From Deception to Clarity

If you like this presentation – show it...

Slide 0

Deception Clarity From to THOUGHTS ON DECEPTION IN WEB DESIGN Stephen Hay, dsgnday Amsterdam

Slide 1

Slide 2

“People tend to see what they expect to see.” –DARWIN ORTIZ

Slide 3

Design decisions.

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

OK Cancel

Slide 14

Cancel OK

Slide 15

Cancel OK

Slide 16

Cancel OK

Slide 17

Cancel OK

Slide 18

Purchase yearly subscription to our newsletter Cancel OK By pressing Cancel, you are purchasing a yearly subscription. By pressing OK, you are purchasing a monthly subscription. If you do not wish to purchase anything, close your browser and get the hell off the internet.

Slide 19

Slide 20

Slide 21

People who stand to gain something from you have motive to deceive.

Slide 22

I ♥ Deception

Slide 23

Slide 24

Slide 25

Principles, Techniques, and Ethics of Stage Magic and Their Application to Human Interface Design Bruce “Tog” Tognazzini (1993)

Slide 26

“A trash can instead of a dialog requesting track and sector identification for zero-overwrite is simulation.” –BRUCE “ TOG” TOGNAZZINI

Slide 27

Benevolent Deception in Human Computer Interaction Eytan Adar (University of Michigan), 
 Desney S. Tan (Microsoft Research), Jaime Teevan (Microsoft Research), 2013

Slide 28

Deception can be found in UIs all around us.

Slide 29


Slide 30

Slide 31

Slide 32

Good vs Evil

Slide 33

Stupid Patterns

Slide 34

Slide 35

Dark Patterns

Slide 36


Slide 37

Slide 38

“Roach Motel”

Slide 39

“Bait & Switch” http://darkpatterns.org/at-twitch-tv-more-colors-means-give-us-money/

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Why people use dark patterns

Slide 46

Rather than deceiving users, enable them to do what you’d like them to do.

Slide 47

Deceit is the low-hanging fruit of persuasion

Slide 48

“By focusing on simplicity of the target behavior, 
 you increase Ability.” –BJ FOGG

Slide 49

A behavior model for persuasive design: behaviormodel.org Motivation Ability

Slide 50

“The audience must never be made to work.” –DARWIN ORTIZ

Slide 51

Clarifying techniques

Slide 52

1. Use fewer props Add only the necessary to your UI

Slide 53


Slide 54


Slide 55

2. Use a memory hook Be consistent

Slide 56

Slide 57

3. Visually clarify the props Make it clear what everything does

Slide 58

“Don't stand in the elevator 
 when sheets of paper are flying around 
 to the side of the elevator.”

Slide 59

Slide 60

4. Visually clarify the layout (That says it all)

Slide 61

Slide 62

5. Make the hidden visible If it needs to be there, put it there.

Slide 63

Slide 64


Slide 65

6. Eliminate time lags Design for performance

Slide 66

Slide 67

Slide 68

7. Eliminate interruptions Avoid distractions from the task at hand

Slide 69

Slide 70

Slide 71

8. Procedural directness Design fluid procedures

Slide 72

Slide 73

Slide 74

Delight vs Frustration :-) :-(

Slide 75

“…some deceptions are permissable, others are unforgivable. No one expects a poker player to tell the truth about the cards he holds. However, if you try to deceive by dealing from the bottom of the deck, you may got shot and will certainly be shunned.” –HENNING NELMS, MAGIC AND SHOWMANSHIP

Slide 76

Thank you! @stephenhay the-haystack.com responsivedesignworkflow.com

Slide 77