Micro-Interactions in UX Design - How Small Interactions Can Make a Big Impact

In this talk, we will explore the power of micro-interactions in UX design and how they can have a significant impact on user experience.

Micro-interactions are small design elements that occur within a larger user flow and are often overlooked, but they can greatly enhance the user's interaction with a product. We will delve into various examples of micro-interactions and how they can be used to create a more engaging, intuitive, and satisfying user experience.

By the end of the talk, attendees will have a deeper understanding of the importance of micro-interactions and how to use them effectively in their own UX designs.

Transcript

1. Micro-Interactions
   
   
   in UX Design
   
   
   How Small Interactions Can Make a Big Impact
   @cyrilmottier
   

   View Slide

2. gensdecon
   fi
   GensDeCon
   fi
   

   View Slide

3. gensdecon
   fi
   ance.com GensDeCon
   fi
   ance
   is hiring!
   

   View Slide

4. is hiring!
   

   View Slide

5. Let’s talk about
   
   
   famous movie scenes… 🎬
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. What do they all
   
   
   have in common?
   

   View Slide

10. What do they all
    
    
    have in common?
    They are monologues
    

    View Slide

11. Interactive
    
    
    / ˌɪn tərˈæk tɪv /
    
    
    Communicating with and reacting to each other; in
    fl
    uencing or
    having an e
    ff
    ect on each other; acting or capable of acting on each
    other or with the other.
    

    View Slide

12. Solitary Interactive
    unidirectional bidirectional
    dialogue
    monologue
    ephemeral permanent
    

    View Slide

13. Solitary Interactive
    

    View Slide

14. This discipline is called
    
    
    interaction design
    (a.k.a. IxD design)
    

    View Slide

15. What are micro-interactions?
    

    View Slide

16. What are micro-interactions?
    Microinteractions are small moments that can be
    
    
    dull and forgettable, or fun and engaging.
    

    View Slide

17. The details are not the details.
    
    
    They make the design.
    – Charles Eames
    “
    

    View Slide

18. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

19. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

20. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

21. Sign in
    Sign in
    Sign in
    Sign in
    

    View Slide

22. “Hey Siri”
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

27. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

28. View Slide

29. Victoire fi
    ance.com>
    

    View Slide

30. victoire@gensdecon
    fi
    ance.com
    

    View Slide

31. View Slide

32. View Slide

33. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

34. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

41. The structure of micro-interactions
    Loops & modes
    Feedback
    Trigger Rules
    

    View Slide

42. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    ortless and invisible
    Be functional
    fi
    rst
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

43. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    Be functional
    fi
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

44. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    Be functional
    fi
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

45. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    Be functional
    fi
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

46. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    ortless and invisible
    Be functional
    fi
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

47. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    Be functional
    fi
    rst
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

48. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    Be functional
    fi
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

49. Design
    
    
    best practices 🤩
    Design with intention
    Create harmony
    Complement vs distract
    Think subtle, brief and simple
    Make them e
    ff
    ortless and invisible
    Be functional
    fi
    rst
    Keep longevity in mind
    Have a user-centered design approach
    Adapt it to today’s world
    Don’t make your UI a Disney movie
    Follow the KISS principle
    Don’t start from zero
    Make it a story
    Absorb complexity
    Make it adaptative
    Polish from head to toe
    

    View Slide

50. Less is more.
    – Mies Van Der Rohe
    “
    

    View Slide

51. That’s all folks!
    Any questions?
    @cyrilmottier
    

    View Slide