What is Microinteraction & how we code them
Hello,
Creative Front-end developer
AT&T Israel, Tel-aviv
What are we going to talk about?🥳
-
What is Microinteraction?
-
When and where do we use it?
-
Why interaction design matter to User Experience?
-
What is the Microinteractions structure?
-
How we code them & what is the tools we have as front-end developers.
-
Let's code one! One cool example🤟
-
Done!
What is Microinteraction?
They are the tiniest details (usually animated) that facilitate interactions between the user and a piece of software.
They can make the user experience more fun, engaging, efficient, and humane.
But, let understand some real world examples.
IPhone Passcode
#NOTE# give a title
Why does interaction design matter to the User Experience?
Or why is the User Experience so important?
Inform
Distract
Call attention
Tell a story
Convey an emotion
Build empathy
When and where we would want use Microinteraction?
Inform
Distract
Call attention
Tell a story
Convey an emotion
Build empathy
What is the structure of Microinteractions
Triggers the moment the microinteraction begins (by user or system).
Rules determine what happens once a microinteraction is triggered.
Feedback lets the user know what’s happening.
Anything a user sees, hears, or feels while a microinteraction is happening.
Two major types of feedback: visual, audio.
Loops and Modes determine how long the microinteraction lasts and what happens over time.
What is microinteraction
Why is it worth the effort
What is it made of
So...How do we code it?
Let's dive in!
Code animation
- CSS state-based class and transition (SVG, DOM).
- CSS sprite sheets animation.
- And a few more web techniques.
<style>
.go{
}
</style>Basic animation
<style>
.go{
}
</style>-
Tweenmax / GASP
-
lottie / Bodymovin
-
Velocity.js
-
Anime.js
More tools/ways we have as front-end developers
Javascript animation engine libraries:
SVG, Canvas, DOM.
TweenMax
Lottie
Pure CSS
Canvas
Sprite technique
One more reason, code
Animation based code Worth it!
Also can be responsive
canvas
Let’s code one.
What is the component feedback?
UX component architecture design
States/Rules
What is the component feedback?
Define what IS Microinteraction.
Expose to basic tools in the Frontend world.
Share a hands on experience.
Thanks a lot! :)
-
Tweenmax / GASP
-
lottie / Bodymovin
-
Velocity.js
-
Anime.js
Javascript animation engine libraries: