1.
Deception
From
to
Clarity
Stephen Hay, dsgnday Amsterdam
THOUGH TS ON DE CE PTIO N I N WE B DESIGN

2.
–DARW IN ORTIZ
“People tend to see what they expect to see.”

3.
Design decisions.

4.
CancelOK

5.
Cancel OK

6.
Cancel OK

7.
Cancel OK

8.
Cancel OK

9.
Cancel OK
Purchase yearly subscription to our newsletter
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.

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

11.
I ♥ Deception

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

13.
–BRU CE “ TOG” TOGNAZZI NI
“A trash can instead of a dialog requesting track and sector
identification for zero-overwrite is simulation.”

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

15.
Deception can be found in UIs
all around us.

16.
https://www.flickr.com/photos/roboppy/7364621250/

17.
Good vs Evil

18.
Stupid Patterns

19.
Dark Patterns

20.
darkpatterns.org

21.
“Roach Motel”

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

23.
€

24.
Why people use dark patterns

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

26.
Deceit is the low-hanging fruit
of persuasion

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

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

29.
–DARW IN ORTIZ
“The audience must never be made to work.”

30.
Clarifying techniques

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

32.
rijksmuseum.nl

33.
rijksmuseum.nl

34.
2. Use a memory hook
Be consistent

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

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

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

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

39.
We make cars.
SCROLL DOWN PAST THIS MODERN VARIATION OF A FLASH INTRO TO FIND SOME ACTUAL CONTENT.

40.
6. Eliminate time lags
Design for performance

41.
7. Eliminate interruptions
Avoid distractions from the task at hand

42.
8. Procedural directness
Design fluid procedures

43.
Delight vs Frustration
:-) :-(

44.
–HENNING N EL MS, M AGIC AND SH OWM AN SH IP
“…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.”

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