Front-end talk - front-end developers and UX/UI designers create a killer combination!
What is micro-interaction & How we code it?
Hello,
Creative Front-end developer
AT&T Israel, Tel-aviv
What are we gonna talk about?🥳
-
What is micro-interaction? and when and where we use them?
-
Why interaction design matter to User experience?
-
The Structure of Microinteractions.
-
The tools we have as front-end developers to code them.
-
A few famous web development technics.
-
One cool example - Let's code one🤟
-
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.
Why interaction design matter to User experience?
Or why User experience so important?
- Prove even if there is a long process the ux
- the ux make the it nicer.
when do we use it
Inform
Distract
Call attention
IPhone Passcode
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
let the user know what’s happening.
Anything a user sees, hears, or feels while a microinteraction is happening.
Three major types of feedback: visual, audio, and haptic
Loops and Modes How long the microinteraction lasts and what happens over time.
How we code it?
Let's dive in.
The tools we have as front-end developers
-
Tweenmax / GASP
-
lottie / Bodymovin
-
Velocity.js
-
Anime.js
-
D3.js
-
CSS
-
SVG
-
Canvas and few techniques and more...
Few web Technics
- Sprite sheets Css animation.
- State based class and transition.
- Code/JavaScript libraries.
<html>
</html>Let’s code one.
ux componnet architecture design
What are componnet feedback?
Done!
Pres2
By netha
