Who doesn’t like a good deal or a coupon?

This lands up in my inbox…

Lets configure the newsletter…

This lands up again…

Meanwhile in the mobile world…

Where do I put in that number?

This lands up again…

And then…

Am I still excited about the deals/coupons?

Honestly, I am frustrated, I lost the trust in the site, I never went back to Groupon In

Back in the golden age…

Same Service

Different Experience

Different Outcomes

Microinteractions:Design is in the Details

Microinteractions:Design is in the Details

MetaRefresh 2014

Praneet Koppula @mphaxise

References

A few examples

Gmail - Notification before sending email

Medium - When you select text in a post, select twitter, then your tweet is pre-filled with your selected text.

Sublime Text - When two files with the same name are open, the directory is automatically shown to help differentiate them.

A Microinteractions is a contained product moment that revolves around a single use case – a tiny piece of functionality that does only one thing

Microinteractions Are Not Features…But Still Matter

Feature vs• Complex (multiuse case)

• Time Consuming• Cognitively Engaging

Microinteraction• Simple • Brief• Nearly Effortless

Microinteractions are everywhere

Accomplishing a single task

Disqus - The signup form guesses your name based on the first part of your email address as you type.

Connecting devices together

Bump - Users tap phones together to share contacts and other files

Interacting with a single piece of data

iOS Clock – App icon shows the current time

Adjusting a setting

iOS - When adjusting brightness, preview screenshots show a real time view of your current home & lock screens

Viewing or creating a small piece of content

Tweetbot - When replying to a tweet, swipe down to see the original tweet and author.

Turning a feature or function on or off

Instapaper - If you accidentally rotate your iPhone between portrait / landscape mode and quickly back, the Rotation lock control appears.

Why should we care about micro interactions?

People

Emotions

Emotions

20,000 moments in a day

-Daniel Kahneman

Nagging Feeling:Why couldn’t I do it?

Positive and Negative

Design affects Emotion

Difference between a product you love and product you tolerate

A well designed product, but with one bad micro-interaction can kill it.

A signature moment, stands as a brand identifier

How are microinteractions designed?

A beautifully crafted microinteraction gracefully handles four different parts

Trigger Rules Feedback Loops & Modes

iOS - If you tap the camera icon in the lock screen, it bounces up to encourage you to slide.

Trigger

A trigger starts a microinteraction

Principles:

Make the trigger something the target users will recognize as a trigger in context

The trigger initiates the same action every time

Bring the data forward

Trigger

You swipe down to open the camera, but only at the Home screen. Swipe down to go back one screen if you’re not at the Home screen. Tap and hold with two fingers to see the list of recent apps. Double tap with one finger to zoom in. Double-tap with two fingers to adjust the brightness. Tap four times with six fingers in the rhythm of Beethoven’s Fifth to call a mental health professional.

~David Pogue on Samsung Gear

Trigger

Invisible triggers:

Your screen always has finite space

Google Maps iOS – Shaking is an invisible trigger for sending feedback

Trigger

System triggers

Need rules for when and how often they appear

Windows Phone - The messaging app icon changes to sad face when an error occurred while sending a message.

Trigger

Purpose of Rules :

Limit the user actions

Strive for a natural flow

Mixcloud – If someone is already following you, the Follow button becomes Follow Back

Rules

Response to triggerControl to userSequence and timingsData and sourceFeedback and when Repeat and frequencyEnd of the microinteraction

Rules

Rules define how the microinteraction should behave

User is on item page

Has the user bought this

item before?

Button is labeledAdd to Cart

Button is labeledAdd another to Cart

Rules

Is this item already in the cart?

Button is labeledAdd another to Cart

MailChimp – The chimp’s arm pops off when you try to make an email too wide

Rules should reveal themselves

By what can be doneBy what cannot be done

Rules

After a manual triggerOn any system triggers in case of a changeError has occurred (user and system)Showing progress on any critical process

Feedback Illuminates the Rules

Feedback

Feedback can be:

VisualAnimationMessagesAudioHaptics

Whenever possible, have visual feedback for every user-initiated action. Add sound and haptics for emphasis and alerts

Feedback

“Follow your printed out instructions exactly with your vehicle running. Approximately 60 seconds after you begin the installation, you will hear an “Installation Complete” message. DO NOT REMOVE your USB drive or turn off your vehicle. You must wait an additional 4-18 minutes until you hear a second “Installation Complete” message before you can remove your USB drive.”

~Catriona Cornett, http://www.inspireux.com/2011/07/11/importance-of-system-feedback-as-not-illustrated-by-ford-sync/

Feedback

A mode is a state in a microinteractionan infrequent action, should be used sparingly

Settings – a very common mode

A loop defines what happens to the microinteraction next timea cycle that repeats, usually for a set duration

Memory to progressively disclosure or reduction

Loops & Modes

Bringing it together…

Case Study 1 : Delete a project

Where was it happening?

Where was it happening?

Trigger

Before After

Rules

How easy should the delete action be?

What feedback are we giving to the user about this action?

Can the user undo this action?

Rules

Admin clicks on delete

Emphasize the action in the feedback

Enable soft delete in the background for worst case

Feedback

Testing a microinteractionGoal is to validate:

The goal of the microinteraction is understoodUnderstand what data is importantIf any microcopy is necessaryTiming and Flow are smooth

Testing a microinteractionWhat cant be measured, cant be improved ~Lord Kelvin

Completion rateOverall Duration and of specific stepsNumber of stepsNumber of clicks/taps/selectsNumber of system errorsNumber of Human errors

Questions?

http://sb.lk/hasgeek

@mphaxise