Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Cyril Mottier

May 31, 2023
Tweet

More Decks by Cyril Mottier

Other Decks in Design

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