Anti-patterns: the dark side of usability and interaction

Usability (and UX, as a wider thematic area) has lately been gaining awareness by the Web community. But while most of us are using it to improving our users' experience on our websites, some are using the findings of usability research and interaction design to trick the users as a mean to improve their profit.

As a two-edged sword, you may be tempted to use anti-patterns to improve your profits, but the main motivation is to teach you, as a Internet user, to identify and avoid them, and as a Web designer/developer to introduce inadvertently any kind of anti-pattern into your products or sites.

Transcript

1. anti-patterns the dark side of usability and interaction @davidjvcruz // Codebits VII // 11 apr 2014
2. before starting 
 with anti-patterns…
3. what is 
 a interaction pattern?
4. the user
5. context state A
6. context intent state A state B
7. action context intent state A state B
8. action context intent change state A state B
9. action context intent feedback change state A state B
10. interaction action context intent feedback change state A state B
11. interaction patterns are… • a solution for: 
 intent → action → outcome • a beacon for consistency • a way to do things efficiently
12. last few slides
13. anti
 patterns
14. characteristics • interfere with point of the flow: 
 intent → action → outcome • makes users perform poorly • have unexpected side effects
15. “everyone does it” anti-patterns
16. because everyone does it, it doesn’t mean…
17. • “oh so flat” design • infinite scroll • carousel • NASCAR effect • content pagination • low signal to noise ratio
 …
18. “oh so flat” design
19. clickable
 area?
22. infinite scroll
23. carousel
24. Carousels exist to keep people from beating the shit out of each other in meetings. — @brad_frost
25. NASCAR effect
26. low signal/noise ratio
27. content pagination top 10 videos of the week
28. outdated patterns
29. not so long ago it (kinda) worked
30. • reveal on hover • browser plugins • skeumorphism • icons & metaphors
 …
31. reveal on hover
37. reveal on hover? dont!
38. almost over.
 trust me!
39. browser plugins
40. skeumorphism
41. icons & metaphors
42. • some icons start as metaphors and transform into idioms • metaphors are recognised • idioms have to be learned
43. dark dark patterns
44. it’s all about sneakiness, misdirections and deception
45. characteristics • tricks the user • discloses information • forces users to do something they don’t intend to • sneak things without the user knowing
46. what we know
 about
 
 use against the user
49. and there is a whole lot of them…
51. characteristics • tricks the user • discloses information • forces users to do something they don’t intend to • sneak things without the user knowing
52. last few slides
53. some dark patterns • bait and switch • disguised ads • faraway bill • forced continuity • forced disclosure • friend spam • hidden costs • misdirection • privacy zuckering • roach motel • sneak into basket • trick question
 …
54. bait and switch
55. disguised ads
56. faraway bill bills are sent digitally.
 it is less likely that user notice unexpected additions
57. forced continuity
58. forced disclosure same info
 required? CV
 uploaded
59. friend spam A site or game asks for your credentials.
 Promotes itself by publishing or sending messages on your behalf.
60. hidden cost
61. misdirection
62. privacy zuckering
63. roach motel eazy to get in. hard to leave.
64. sneak into basket
65. trick question
66. trick question
67. only the “bad guys” 
 use them. 
 Right?
68. you may add them unintentionally
69. the A/B test trap
70. higher conversion don’t mean a more usable website or enjoyable experience
71. B has higher conversion
72. the very last slides!
 promise!
73. so…
 what can we do?
74. test your website
 (with users. The breathing kind) 1
75. the only constant is change
 test… regularly 2
76. quality in a website implies commitment 3
77. don’t be a sheep
 because everyone does it, doesn’t mean it is the correct way 4
78. expose wrongdoers
 report dark patterns to 
 http://darkpatterns.org 5
79. design with honesty resist the temptation of short-term profit. You will benefit in the long run 6
80. that’s all folks
81. oh wait! I forgot something
82. you don’t have no question… right?!
83. some references • http://sideproject.io/outdated-ux-patterns/ • http://darkpatterns.org/ • https://github.com/Snugug/north#anti- patterns • http://alistapart.com/article/dark- patterns-deception-vs.-honesty-in-ui-design • http://bradfrostweb.com/blog/post/ carousels/
84. thanks☻