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

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

  2. None
  3. None
  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

  17. None
  18. LET’S TALK ABOUT MOBILE. @iamrvazquez

  19. None
  20. None
  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

  30. None
  31. None
  32. None
  33. None
  34. None
  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

  52. None
  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