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 full-size slide

  2. gensdecon
    fi
    GensDeCon
    fi

    View full-size slide

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

    View full-size slide

  4. Let’s talk about


    famous movie scenes… 🎬

    View full-size slide

  5. What do they all


    have in common?

    View full-size slide

  6. What do they all


    have in common?
    They are monologues

    View full-size slide

  7. 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 full-size slide

  8. Solitary Interactive
    unidirectional bidirectional
    dialogue
    monologue
    ephemeral permanent

    View full-size slide

  9. Solitary Interactive

    View full-size slide

  10. This discipline is called


    interaction design
    (a.k.a. IxD design)

    View full-size slide

  11. What are micro-interactions?

    View full-size slide

  12. What are micro-interactions?
    Microinteractions are small moments that can be


    dull and forgettable, or fun and engaging.

    View full-size slide

  13. The details are not the details.


    They make the design.
    – Charles Eames

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Sign in
    Sign in
    Sign in
    Sign in

    View full-size slide

  18. “Hey Siri”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Victoire fi
    ance.com>

    View full-size slide

  22. victoire@gensdecon
    fi
    ance.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. Less is more.
    – Mies Van Der Rohe

    View full-size slide

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

    View full-size slide