from deception to clarity
TRANSCRIPT
![Page 1: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/1.jpg)
Deception From
toClarityStephen Hay, dsgnday Amsterdam
T H O U G H T S O N D E C E P T I O N I N W E B D E S I G N
![Page 2: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/2.jpg)
![Page 3: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/3.jpg)
– DA R W I N O R T I Z
“People tend to see what they expect to see.”
![Page 4: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/4.jpg)
Design decisions.
![Page 5: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/5.jpg)
![Page 6: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/6.jpg)
![Page 7: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/7.jpg)
![Page 8: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/8.jpg)
![Page 9: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/9.jpg)
![Page 10: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/10.jpg)
![Page 11: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/11.jpg)
![Page 12: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/12.jpg)
![Page 13: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/13.jpg)
![Page 14: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/14.jpg)
CancelOK
![Page 15: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/15.jpg)
Cancel OK
![Page 16: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/16.jpg)
Cancel OK
![Page 17: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/17.jpg)
Cancel OK
![Page 18: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/18.jpg)
Cancel OK
![Page 19: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/19.jpg)
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.
![Page 20: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/20.jpg)
![Page 21: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/21.jpg)
![Page 22: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/22.jpg)
People who stand to gain something from you have motive to deceive.
![Page 23: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/23.jpg)
I ♥ Deception
![Page 24: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/24.jpg)
![Page 25: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/25.jpg)
![Page 26: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/26.jpg)
Principles, Techniques, and Ethics of Stage Magic and Their Application to Human Interface DesignBruce “Tog” Tognazzini (1993)
![Page 27: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/27.jpg)
– B R U C E “ TO G ” TO G N A Z Z I N I
“A trash can instead of a dialog requesting track and sector identification for zero-overwrite is simulation.”
![Page 28: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/28.jpg)
Benevolent Deception in Human Computer InteractionEytan Adar (University of Michigan), Desney S. Tan (Microsoft Research), Jaime Teevan (Microsoft Research), 2013
![Page 29: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/29.jpg)
Deception can be found in UIs all around us.
![Page 30: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/30.jpg)
https://www.flickr.com/photos/roboppy/7364621250/
![Page 31: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/31.jpg)
![Page 32: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/32.jpg)
![Page 33: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/33.jpg)
Good vs Evil
![Page 34: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/34.jpg)
Stupid Patterns
![Page 35: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/35.jpg)
![Page 36: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/36.jpg)
Dark Patterns
![Page 38: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/38.jpg)
![Page 39: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/39.jpg)
“Roach Motel”
![Page 40: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/40.jpg)
http://darkpatterns.org/at-twitch-tv-more-colors-means-give-us-money/
“Bait & Switch”
![Page 41: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/41.jpg)
![Page 42: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/42.jpg)
![Page 43: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/43.jpg)
![Page 44: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/44.jpg)
![Page 45: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/45.jpg)
€
![Page 46: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/46.jpg)
Why people use dark patterns
![Page 47: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/47.jpg)
Rather than deceiving users, enable them to do what you’d like them to do.
![Page 48: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/48.jpg)
Deceit is the low-hanging fruit of persuasion
![Page 49: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/49.jpg)
– B J F O G G
“By focusing on simplicity of the target behavior, you increase Ability.”
![Page 50: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/50.jpg)
A behavior model for persuasive design: behaviormodel.org
Motivation Ability
![Page 51: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/51.jpg)
– DA R W I N O R T I Z
“The audience must never be made to work.”
![Page 52: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/52.jpg)
Clarifying techniques
![Page 53: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/53.jpg)
1. Use fewer propsAdd only the necessary to your UI
![Page 56: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/56.jpg)
2. Use a memory hookBe consistent
![Page 57: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/57.jpg)
![Page 58: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/58.jpg)
3. Visually clarify the propsMake it clear what everything does
![Page 59: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/59.jpg)
“Don't stand in the elevator when sheets of paper are flying around to the side of the elevator.”
![Page 60: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/60.jpg)
![Page 61: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/61.jpg)
4. Visually clarify the layout(That says it all)
![Page 62: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/62.jpg)
![Page 63: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/63.jpg)
5. Make the hidden visibleIf it needs to be there, put it there.
![Page 64: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/64.jpg)
![Page 65: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/65.jpg)
We make cars.
SCROLL DOWN PAST THIS MODERN VARIATION OF A FLASH INTRO TO FIND SOME ACTUAL CONTENT.
![Page 66: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/66.jpg)
6. Eliminate time lagsDesign for performance
![Page 67: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/67.jpg)
![Page 68: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/68.jpg)
![Page 69: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/69.jpg)
7. Eliminate interruptionsAvoid distractions from the task at hand
![Page 70: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/70.jpg)
![Page 71: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/71.jpg)
![Page 72: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/72.jpg)
8. Procedural directnessDesign fluid procedures
![Page 73: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/73.jpg)
![Page 74: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/74.jpg)
![Page 75: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/75.jpg)
Delight vs Frustration
:-) :-(
![Page 76: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/76.jpg)
– H E N N I N G N E L M S , M AG I C A N D S H O W M A N S H I P
“…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.”
![Page 77: From Deception to Clarity](https://reader034.vdocument.in/reader034/viewer/2022052706/58efd0d51a28abd10b8b45b9/html5/thumbnails/77.jpg)
Thank you!@stephenhay the-haystack.com responsivedesignworkflow.com