The document discusses deception in web design and user interfaces. It notes that deception can be found all around us in UIs and provides examples like dark patterns that mislead users. While deception has its place in magic, it argues that for UIs it is better to design in a way that enables users to do what the designer wants through simplicity and clarity rather than outright deception. It provides principles for clarifying designs through fewer elements, consistency, making all elements and their purpose visible, eliminating delays and interruptions, and ensuring fluid procedures. The goal should be to delight rather than frustrate users.

1. Deception
Stephen Hay, FOWD 2015, London
The Art of
THOUGHTS ON D EC EPTI ON IN WEB DE SI GN

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

12. CancelOK

13. Cancel OK

14. Cancel OK

15. Cancel OK

16. Cancel OK

17. 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.

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

21. I ♥ Deception

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

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

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

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

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

31. Good vs Evil

32. Dark Patterns

33. darkpatterns.org

34. “Roach Motel”

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

40. €

41. Why people use dark patterns

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

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

44. A behavior model for persuasive design:
behaviormodel.org

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

46. Clarifying techniques

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

48. todoist.com

49. Use a memory hook
Be consistent

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

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

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

57. Eliminate time lags
Design for performance

58. Eliminate interruptions
Avoid distractions from the task at hand

61. Procedural directness
Design fluid procedures

63. Delight vs Frustration
:-) :-(

64. –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.”

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