Saving Millions With MicroInteractions

Aayush Arora

@angularboy

About Me

  • Founder & CEO FilterPixel

  • Google Developer Expert

  • MIT & Draper University Graduate

  • Open Source Contributor at NASA, CloudCV, FOSSASIA and OpenDesign

MicroInteractions?

  • Little Animations

  • Used for User Engagement

  • Communicating Status and Providing Feedback

  • Enhancing the sense of direct Manipulation

  • Helping people to see the result of their action

Which of them is Microinteraction

Scrollbar

 GIFs 

 Email Notification

Which of them is Microinteraction

Scrollbar

 GIFs 

 Email Notification

✔️

✔️

❌

Best Practice - Creating a Habit Loop

 

  • Cue — Trigger that initiates action

  • Routine — In response to the cue, you perform an action

  • Reward — A benefit you get from completing the routine, reason for completing action

MicroInteraction Concept

MicroInteraction and UX

If individual interactions are the cells that make up the UX, then microinteractions are the atoms within the cells.

 

As technology continues to develop, designers are able to delve deeper into the tinier interactions of a UI, and so microinteractions are the new frontier.

 

UX and Revenue

Research Findings & Industrial Studies

 

  • User Experience Transformation in Telco Companies: Turkcell Case ( link )

 

  • Every dollar spent on UX brings in between $2 and $100 dollars in return (link)

User Experience

MICROINTERACTION

ROI

MICROINTERACTION, UX & ROI

GET READY TO DESIGN MICROINTERACTIONS

What we need to design MicroInteraction

Understanding SVG's

  • Maths inside your browser

  • Save HTTP Requests

  • DOM Visibility

  • Support by all Browsers

  • Make Life Easier with Animations

  • Responsive and Scalable graphics

Animating SVG's

 

GreenSock - Killer Feature

  • Simple Syntax

  • Timeline

  • Nested Timelines

  • Draggables

  • DrawSVG

  • Stagger

  • MorphSVG

CSS Class

Variable object

Creating Tween

Title Text





         var svgTween = new TimelineMax({
                delay: 0.5
            });
        
         svgTween.to('#content', .5,{
                  scale: 1
                })
             
        svgTween.fromTo('#content', .5, {
                  scale: 1
                },{
                  scale: 1.2
                })

Creating TimeLine

Syntax:  {to}, {fromTo}


 function runAnimation() {
      toggle = true;
      svgTween.fromTo('#content', .5, {
          scale: 1
        },{
          scale: 1.2
        })

        svgTween.fromTo('#border',.9 ,{
          height: 0
        }, {
          height: '100px',
          strokeWidth: '6',
          ease: Expo.easeIn
        });

        svgTween.to("#rotate", .5, {    
          rotation: '45deg',
          transformOrigin:"50% 50%"
      });
    }


function reset() {
     toggle = false;
     svgTween.to('#content', .5,{
          scale: 1
        })
     
    svgTween.to('#border',.8,{
      height: 0
    })
    svgTween.to('#rotate',.9 ,{
      rotation: 0
     })
   }

Code

Context-Shifting MicroInteraction

  • Trigger at Start Point

  • Collection of SVG's

  • Daisy Chain Effect

  • End at the Start Point

Credits: Sarah Drasner

Reactive MicroInteraction ?

  • Trigger on onChange Event

  • Reactions based on User Inputs

  • Provide Feedback in Real Time

Reactive MicroInteraction

What are you waiting for?

Founder, FilterPixel

@angularboy

Made with Slides.com