$30 off During Our Annual Pro Sale. View Details »

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

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

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