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
   

   View Slide

2. View Slide

3. View Slide

4. DELIGHT.
   SURPRISE.
   SADNESS.
   JOY.
   @iamrvazquez
   

   View Slide

5. WHEN YOU FEEL,
   THE BRAIN
   BLINKS.
   @iamrvazquez
   

   View Slide

6. STUDY
   

   View Slide

7. READING SENTENCES OUT LOUD
   READING A MANGA
   WATCHING AN ANIMATED MOVIE
   SOLVING A PUZZLE
   CALCULATING MATHEMATICAL FUNCTION
   TOUCHING A DOLL
   

   View Slide

8. RESULTS
   

   View Slide

9. T h e t a W a v e s
   

   View Slide

10. THEY DREAMED
    WHILE AWAKE.
    @iamrvazquez
    

    View Slide

11. THEY LEARNED
    BETTER.
    @iamrvazquez
    

    View Slide

12. THEY
    REMEMBERED
    BETTER.
    @iamrvazquez
    

    View Slide

13. AN ADORATION FOR
    THE DETAILS.
    

    View Slide

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
    

    View Slide

15. @iamrvazquez
    

    View Slide

16. LET’S TALK ABOUT
    THE WEB.
    @iamrvazquez
    

    View Slide

17. View Slide

18. LET’S TALK ABOUT
    MOBILE.
    @iamrvazquez
    

    View Slide

19. View Slide

20. View Slide

21. EMOTION &
    MEMORY
    @iamrvazquez
    

    View Slide

22. RECALL IS HARD.
    @iamrvazquez
    

    View Slide

23. HOW CAN WE
    IMPROVE
    MEMORY?
    @iamrvazquez
    

    View Slide

24. CHARGE THEM WITH
    EMOTIONS.
    

    View Slide

25. THE EMOTIONAL
    INTERFACE.
    

    View Slide

26. IT COULDN’T BE MORE
    TRUE FOR US.
    

    View Slide

27. @iamrvazquez
    

    View Slide

28. ATOMIC DESIGN
    @iamrvazquez
    

    View Slide

29. ONE OF THE FIRST
    MICROINTERACTIONS
    @iamrvazquez
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. VISUAL POLISH
    0 1
    0 2
    0 3
    0 4
    0 5
    @iamrvazquez
    

    View Slide

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
    

    View Slide

37. lotsofdonuts.ca
    

    View Slide

38. lotsofdonuts.ca
    

    View Slide

39. Partly Sunny
    

    View Slide

40. 500px.com
    

    View Slide

41. Swarm App
    

    View Slide

42. PERSONALITY
    0 2
    0 3
    0 4
    0 5
    @iamrvazquez
    

    View Slide

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
    

    View Slide

44. lotsofdonuts.ca
    

    View Slide

45. mailchimp.com
    

    View Slide

46. mailchimp.com
    

    View Slide

47. Timehop App
    

    View Slide

48. Timehop App
    

    View Slide

49. HUMOUR &
    MICROCOPY
    0 3
    0 4
    0 5
    @iamrvazquez
    

    View Slide

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
    

    View Slide

51. redpen.io
    

    View Slide

52. View Slide

53. littlebigdetails.com
    

    View Slide

54. mailchimp.com
    

    View Slide

55. mailchimp.com
    

    View Slide

56. carbonmade.com
    

    View Slide

57. Timehop App
    

    View Slide

58. PURPOSEFUL
    TRANSITIONS
    0 4
    0 5
    @iamrvazquez
    

    View Slide

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
    

    View Slide

60. turntable.fm
    

    View Slide

61. facebook.com
    

    View Slide

62. facebook.com
    

    View Slide

63. Dribbble
    

    View Slide

64. Snapchat
    

    View Slide

65. Things 3
    

    View Slide

66. 0 5
    IT’S IN THE
    DETAILS, AND THE
    SURPRISE.
    @iamrvazquez
    

    View Slide

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
    

    View Slide

68. mozilla.org
    

    View Slide

69. maps.google.com
    

    View Slide

70. maps.google.com
    

    View Slide

71. Twitter App
    

    View Slide

72. Swarm App
    

    View Slide

73. Swarm App
    

    View Slide

74. maps.google.com
    

    View Slide

75. maps.google.com
    

    View Slide

76. maps.google.com
    

    View Slide

77. maps.google.com
    

    View Slide

78. maps.google.com
    

    View Slide

79. maps.google.com
    

    View Slide

80. HOW CAN WE
    MICROINTERACT?
    @iamrvazquez
    

    View Slide

81. WHERE DO WE
    START?
    @iamrvazquez
    

    View Slide

82. YOU ALWAYS
    START AT ZERO.
    @iamrvazquez
    

    View Slide

83. BRING YOURSELF
    BACK TO YOUR
    FIRST HAPPY
    MEMORY.
    @iamrvazquez
    

    View Slide

84. @iamrvazquez
    

    View Slide

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
    

    View Slide

86. FIND YOUR
    MEMORY.
    @iamrvazquez
    

    View Slide

87. NEVER LET IT GO.
    @iamrvazquez
    

    View Slide

88. THANK YOU.
    @iamrvazquez
    
    

    View Slide