Front-end talk: front-end developers and UX/UI designers create a killer combination!

What is micro-interaction & How do we code it?

Hello

Creative Web Developer

AT&T Israel R&D Center, Tel-aviv

What are we going to talk about?

What is Microinteraction?
When and where would we want use it?
Why does interaction design matter to User Experience?
What is the structure of Microinteractions?
How do we code them & what are 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's understand some real world examples

IPhone & Material design

#NOTE# give a title

Waze

Or why is the User Experience so important?

Why does interaction design matter to the User Experience?

When and where would we want to use Microinteraction?

Inform

by Ayana Campbell Smith

Distract

by Taras Migulko

by Anton Tkachev for UI8

Call attention

Convey an emotion

by Facebook

Build empathy

by Anna Johnsson

What is the structure of Microinteractions?

Triggers the moment the microinteraction begins (by user or system).

by Adam Plouff

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.
JavaScript.

<style>
/* Basic style */
button{
    background-color: $color-blue;
    transition: all 1s ease;
}

/* Success Use Case*/
.Success{
    background-color: $color-green;
}

/* Failed Use Case*/
.Failed{
    background-color: $color-red;
}
</style>

Basic animation

<html>
    <head></head>
    <body>
        <button>Click me!</button>
    </body>
</html>

Tweenmax / GASP

lottie / Bodymovin

Velocity.js

Anime.js

SVG, Canvas, DOM.

More tools/ways we have as

front-end developers:

JavaScript-Animation engine libraries:

Pure CSS

Canvas

TweenMax

Lottie / Bodymovin

Adobe After-effects to SVG / Canvas animation based JSON file

One more reason, code

Animation based code Worth it!

Also can be responsive

canvas

Let’s code one.

Process component

UX component architecture design

States/Rules

What is the component visual feedback?

(Can also be audio feedback or anything else)

https://netha.github.io/Bottle/

Let's make the world a cooler place!

- What is Microinteraction?

- When and where would we want use it?

- Why does interaction design matter to User Experience?

- What is the structure of Microinteractions?

- How do we code them.

- What are the tools we have as front-end developers.

- One cool example🤟

Thanks a lot! :)

Tweenmax / GASP
lottie / Bodymovin
Velocity.js
Anime.js

Javascript animation engine libraries:

Nethanel Mi

Nethanel.Mi@gmail.com

https://www.linkedin.com/in/nethami/