ADDC 2017 - Ricardo Vázquez: The Power of Emotion and Delight

Us humans, we were never supposed to interact with machines the way we all do today. Luckily for us, we can use microinteractions to spread little bits of love and goodness into the apps and experiences we build everyday. During this talk, we will cover Human-Computer Interaction principles, environments to create rich prototypes, engineering best practices, cognitive science, accessibility, readability, microinteractions, colour techniques, animation principles, and other research-backed approaches. With this knowledge we can strive to improve people’s, one app at a time.

More about the talk, authors & slides: https://addconf.com/talks/24/
Read about the conference: https://addconf.com

Transcript

1. ON THE POWER OF @iamrvazquez
4. DELIGHT. SURPRISE. SADNESS. JOY. @iamrvazquez
5. WHEN YOU FEEL, THE BRAIN BLINKS. @iamrvazquez
6. STUDY
7. READING SENTENCES OUT LOUD READING A MANGA WATCHING AN ANIMATED MOVIE SOLVING A PUZZLE CALCULATING MATHEMATICAL FUNCTION TOUCHING A DOLL
8. RESULTS
9. T h e t a W a v e s
10. THEY DREAMED WHILE AWAKE. @iamrvazquez
11. THEY LEARNED BETTER. @iamrvazquez
12. THEY REMEMBERED BETTER. @iamrvazquez
13. AN ADORATION FOR THE DETAILS.
14. THE DETAILS ARE NOT THE DETAILS. THE DETAILS MAKE THE DESIGN. C H A R L E S A N D R AY E A M E S
15. @iamrvazquez
16. LET’S TALK ABOUT THE WEB. @iamrvazquez
18. LET’S TALK ABOUT MOBILE. @iamrvazquez
21. EMOTION & MEMORY @iamrvazquez
22. RECALL IS HARD. @iamrvazquez
23. HOW CAN WE IMPROVE MEMORY? @iamrvazquez
24. CHARGE THEM WITH EMOTIONS.
25. THE EMOTIONAL INTERFACE.
26. IT COULDN’T BE MORE TRUE FOR US.
27. @iamrvazquez
28. ATOMIC DESIGN @iamrvazquez
29. ONE OF THE FIRST MICROINTERACTIONS @iamrvazquez
35. VISUAL POLISH 0 1 0 2 0 3 0 4 0 5 @iamrvazquez
36. VISUAL POLISH C A R E F U L LY C R A F T E D , B E A U T I F U L U S E R I N T E R F A C E . S T U N N I N G V I S U A L D E S I G N A N D AT T E N T I O N T O D E TA I L L E AV E A L A S T I N G I M P R E S S I O N . 0 1 0 2 0 3 0 4 0 5 @iamrvazquez
37. lotsofdonuts.ca
38. lotsofdonuts.ca
39. Partly Sunny
40. 500px.com
41. Swarm App
42. PERSONALITY 0 2 0 3 0 4 0 5 @iamrvazquez
43. PERSONALITY W E ’ V E A L L E X P E R I E N C E D T H AT B I Z A R R E E M O T I O N A L C O N N E C T I O N T H AT H U M A N S C A N H AV E W I T H A N I N A N I M AT E O B J E C T. I R R AT I O N A L , B U T W E A R E E M O T I O N A L B E I N G S & T H R I V E O F F R E L AT I O N S H I P S . 0 2 0 3 0 4 0 5 @iamrvazquez
44. lotsofdonuts.ca
45. mailchimp.com
46. mailchimp.com
47. Timehop App
48. Timehop App
49. HUMOUR & MICROCOPY 0 3 0 4 0 5 @iamrvazquez
50. L I T T L E S N I P P E T S O F H E L P F U L T E X T. P R O V I D E S A R E A L LY S I M P L E W AY T O A S S I S T U S E R S A S T H E Y I N T E R A C T W I T H Y O U R S I T E . H U M O U R B L U R S T H E L I N E S B E T W E E N H U M A N A N D C O M P U T E R T O P R O V O K E A P O S I T I V E E M O T I O N A L R E S P O N S E . HUMOUR & MICROCOPY 0 3 0 4 0 5 @iamrvazquez
51. redpen.io
53. littlebigdetails.com
54. mailchimp.com
55. mailchimp.com
56. carbonmade.com
57. Timehop App
58. PURPOSEFUL TRANSITIONS 0 4 0 5 @iamrvazquez
59. PURPOSEFUL TRANSITIONS T H I N K A B O U T T H E F L I C K O F A L I G H T S W I T C H . F E E D B A C K I S V E R Y I M P O R TA N T. O N T H E W E B , W E R E LY O N C L E A R , TA C T I C A L F E E D B A C K . 0 4 0 5 @iamrvazquez
60. turntable.fm
61. facebook.com
62. facebook.com
63. Dribbble
64. Snapchat
65. Things 3
66. 0 5 IT’S IN THE DETAILS, AND THE SURPRISE. @iamrvazquez
67. IT’S IN THE DETAILS, AND THE SURPRISE. I N T E L L I G E N T LY H I D D E N L I T T L E S U R P R I S E S T H R O U G H O U T I N T E R F A C E S P R O V I D E A L AY E R O F F U N A N D I N T R I G U E T H AT U LT I M AT E LY D E L I G H T. 0 5 @iamrvazquez
68. mozilla.org
69. maps.google.com
70. maps.google.com
71. Twitter App
72. Swarm App
73. Swarm App
74. maps.google.com
75. maps.google.com
76. maps.google.com
77. maps.google.com
78. maps.google.com
79. maps.google.com
80. HOW CAN WE MICROINTERACT? @iamrvazquez
81. WHERE DO WE START? @iamrvazquez
82. YOU ALWAYS START AT ZERO. @iamrvazquez
83. BRING YOURSELF BACK TO YOUR FIRST HAPPY MEMORY. @iamrvazquez
84. @iamrvazquez
85. “ ” @iamrvazquez It is not enough that we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and, yes, beauty to people’s lives. Donald Norman
86. FIND YOUR MEMORY. @iamrvazquez
87. NEVER LET IT GO. @iamrvazquez
88. THANK YOU. @iamrvazquez