Micro Interactions - the new mobile ux paradigm

Slide 1

Slide 1 text

Micro interactions   the new paradigm in mobile ux @netbramha | aashish solanki

Slide 2

Slide 2 text

Next 30 mins – Intro   – What is micro interaction - Why micro interaction on mobile   - structure - Q & A

Slide 3

Slide 3 text

Aashish Solanki Founder & principal designer @ NetBramha studios ! Mango lover, movie buff & your friendly ux guy

Slide 4

Slide 4 text

Founder/Curator @ DesignDay

Slide 5

Slide 5 text

Offline micro interactions ! ! !

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

A micro-interaction is a contained product moment that revolves around a single use case. ! A tiny piece if functionality that does only one thing What is micro interaction

Slide 8

Slide 8 text

microinteractions are not features eg: Music player vs adjusting the volume inside it • Complex • time Consuming • Cognitively   more involved Features • Simple • brief • should be almost effortless MicroInteraction

Slide 9

Slide 9 text

microinteractions are used ! ! - accomplish a single task - connecting devices together (tap, NFC etc) - Interact with single piece of data (weather, volume etc) - control an ongoing process (hold a call etc) - Turning on / off feature

Slide 10

Slide 10 text

A human experiences 20000 moments in a day - Daniel kahneman

Slide 11

Slide 11 text

open your phones ! ! !

Slide 12

Slide 12 text

why micro interaction on mobile 5 important reasons ! ! !

Slide 13

Slide 13 text

increase brand / product stickiness

Slide 14

Slide 14 text

UBER When waiting for a request to be approved and matched, users can play with the screen & make doodles that trail & disappear. differentiate your product

Slide 15

Slide 15 text

Gmail app the day (if ever!) you do not have any mail it will show you a quirky smiley ! Can create epiphany moments

Slide 16

Slide 16 text

Twitter Long pressing the “Me” tab opens the user selection right away. Can create epiphany moments

Slide 17

Slide 17 text

YELP Lets you use emoji to search for businesses. Attention to detail

Slide 18

Slide 18 text

CircleCI Once activated, the input placeholders become input labels. ! Attention to detail

Slide 19

Slide 19 text

Structure of a micro interaction

Slide 20

Slide 20 text

01.trigger Make the trigger something that the target users will recognise as a trigger in that context ! trigger initiates the same action every time ! bring the data forward

Slide 21

Slide 21 text

01.Trigger

Slide 22

Slide 22 text

02.rules Define how micro interaction should behave ! • Response to trigger • control to user • sequence & timings • data & Source • Feedback & When • Repeat & Frequency • end of micro interaction

Slide 23

Slide 23 text

02.rules

Slide 24

Slide 24 text

03.Feedback Feedback can be ! • visual • animated • messages • Audio • haptics

Slide 25

Slide 25 text

03.FEEDBACk

Slide 26

Slide 26 text

04.Loops & modes A loop defines what happens to the micro interaction the next time ! A mode is a state in a micro interaction

Slide 27

Slide 27 text

04.loops & Modes

Slide 28

Slide 28 text

SOME OTHER THINGS MICRO COPY SIGNATURE MOMENTS FAMILIARITY

Slide 29

Slide 29 text

Are you the problem?

Slide 30

Slide 30 text

Thank you. Questions? ! • We are hiring • open for ux projects • we invest design equity in startups ! [email protected] or @netbramha