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!