From Deception to Clarity

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
November 13, 2015

From Deception to Clarity

My talk for dsgnday 2015, Amsterdam

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

November 13, 2015
Tweet

Transcript

  1. Deception From to Clarity Stephen Hay, dsgnday Amsterdam THOUGH TS

    ON DE CE PTIO N I N WE B DESIGN
  2. None
  3. –DARW IN ORTIZ “People tend to see what they expect

    to see.”
  4. Design decisions.

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Cancel OK

  15. Cancel OK

  16. Cancel OK

  17. Cancel OK

  18. Cancel OK

  19. 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. None
  21. None
  22. People who stand to gain something from you have motive

    to deceive.
  23. I ♥ Deception

  24. None
  25. None
  26. Principles, Techniques, and Ethics of Stage Magic and Their Application

    to Human Interface Design Bruce “Tog” Tognazzini (1993)
  27. –BRU CE “ TOG” TOGNAZZI NI “A trash can instead

    of a dialog requesting track and sector identification for zero-overwrite is simulation.”
  28. Benevolent Deception in Human Computer Interaction Eytan Adar (University of

    Michigan), 
 Desney S. Tan (Microsoft Research), Jaime Teevan (Microsoft Research), 2013
  29. Deception can be found in UIs all around us.

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

  31. None
  32. None
  33. Good vs Evil

  34. Stupid Patterns

  35. None
  36. Dark Patterns

  37. darkpatterns.org

  38. None
  39. “Roach Motel”

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

  41. None
  42. None
  43. None
  44. None
  45. Why people use dark patterns

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

    like them to do.
  47. Deceit is the low-hanging fruit of persuasion

  48. –BJ FOGG “By focusing on simplicity of the target behavior,

    
 you increase Ability.”
  49. A behavior model for persuasive design: behaviormodel.org Motivation Ability

  50. –DARW IN ORTIZ “The audience must never be made to

    work.”
  51. Clarifying techniques

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

    UI
  53. rijksmuseum.nl

  54. rijksmuseum.nl

  55. 2. Use a memory hook Be consistent

  56. None
  57. 3. Visually clarify the props Make it clear what everything

    does
  58. “Don't stand in the elevator 
 when sheets of paper

    are flying around 
 to the side of the elevator.”
  59. None
  60. 4. Visually clarify the layout (That says it all)

  61. None
  62. 5. Make the hidden visible If it needs to be

    there, put it there.
  63. None
  64. We make cars. SCROLL DOWN PAST THIS MODERN VARIATION OF

    A FLASH INTRO TO FIND SOME ACTUAL CONTENT.
  65. 6. Eliminate time lags Design for performance

  66. None
  67. None
  68. 7. Eliminate interruptions Avoid distractions from the task at hand

  69. None
  70. None
  71. 8. Procedural directness Design fluid procedures

  72. None
  73. None
  74. Delight vs Frustration :-) :-(

  75. –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.”
  76. Thank you! @stephenhay the-haystack.com responsivedesignworkflow.com