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...
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 t...
Microinteractions Are Not
Features…But Still Matter
Feature

vs

• Complex (multiuse case)
• Time Consuming
• Cognitively Engaging

Microinteraction
• Simple
• Brief
• Nearly...
Microinteractions are
everywhere
Accomplishing a single task

Disqus - The signup form guesses your name based on the first
part of your email address as y...
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 & loc...
Viewing or creating a small
piece of content

Tweetbot - When replying to a tweet, swipe down to see the
original tweet an...
Turning a feature or function on
or off

Instapaper - If you accidentally rotate your iPhone between
portrait / landscape ...
Why should we care about
micro interactions?
People
Emotions
20,000 moments in a day
-Daniel Kahneman

Emotions
Nagging Feeling:
Why couldn’t I do it?
Design affects Emotion

PositiveandNegative
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
Trigger

A trigger starts a microinteraction

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

Principles:
Make the trigger something the target users will recognize as a
trigger in context
The trigger initia...
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...
Trigger

Invisible triggers:
Your screen always has finite
space

Google Maps iOS – Shaking is an
invisible trigger for se...
Trigger
System triggers

Need rules for when
and how often they
appear

Windows Phone - The messaging app icon changes to ...
Rules
Purpose of Rules :
Limit the user
actions

Strive for a natural
flow

Mixcloud – If someone is already following you...
Rules

Rules define how the microinteraction should behave

Response to trigger
Control to user
Sequence and timings
Data ...
Rules

User is on item page

Is this item
already in
the cart?

Button is labeled
Add another to Cart

Has the user
bought...
Rules

Rules should reveal themselves
By what can be done
By what cannot be done

MailChimp – The chimp’s arm pops off whe...
Feedback

Feedback Illuminates the Rules

After a manual trigger
On any system triggers in case of a change
Error has occu...
Feedback

Feedback can be:

Visual
Animation
Messages
Audio
Haptics

Whenever possible, have visual feedback for every use...
Feedback

“Follow your printed out instructions exactly with your vehicle
running. Approximately 60 seconds after you begi...
Loops & Modes

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

Settings – a very c...
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 ...
Rules
Admin clicks on delete
Emphasize the action in the feedback

Enable soft delete in the background for worst case
Feedback
Testing a microinteraction
Goal is to validate:

The goal of the microinteraction is understood
Understand what data is im...
Testing a microinteraction
What cant be measured, cant be improved ~Lord Kelvin
Completion rate
Overall Duration and of sp...
Questions?

http://sb.lk/hasgeek
@mphaxise
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Upcoming SlideShare
Loading in …5
×

Microinteractions: Design is in the Details

1,393 views

Published on

Slides for my talk "Microinteractions: Design is in the Details" at MetaRefresh 2014.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,393
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Microinteractions: Design is in the Details

  1. 1. Who doesn’t like a good deal or a coupon?
  2. 2. This lands up in my inbox…
  3. 3. Lets configure the newsletter…
  4. 4. This lands up again…
  5. 5. Meanwhile in the mobile world…
  6. 6. Where do I put in that number?
  7. 7. This lands up again…
  8. 8. And then…
  9. 9. 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
  10. 10. Back in the golden age…
  11. 11. Same Service Different Experience Different Outcomes
  12. 12. Microinteractions: Design is in the Details
  13. 13. Microinteractions: Design is in the Details MetaRefresh 2014 Praneet Koppula @mphaxise
  14. 14. References
  15. 15. A few examples
  16. 16. Gmail - Notification before sending email
  17. 17. Medium - When you select text in a post, select twitter, then your tweet is pre-filled with your selected text.
  18. 18. Sublime Text - When two files with the same name are open, the directory is automatically shown to help differentiate them.
  19. 19. A Microinteractions is a contained product moment that revolves around a single use case – a tiny piece of functionality that does only one thing
  20. 20. Microinteractions Are Not Features…But Still Matter
  21. 21. Feature vs • Complex (multiuse case) • Time Consuming • Cognitively Engaging Microinteraction • Simple • Brief • Nearly Effortless
  22. 22. Microinteractions are everywhere
  23. 23. Accomplishing a single task Disqus - The signup form guesses your name based on the first part of your email address as you type.
  24. 24. Connecting devices together Bump - Users tap phones together to share contacts and other files
  25. 25. Interacting with a single piece of data iOS Clock – App icon shows the current time
  26. 26. Adjusting a setting iOS - When adjusting brightness, preview screenshots show a real time view of your current home & lock screens
  27. 27. Viewing or creating a small piece of content Tweetbot - When replying to a tweet, swipe down to see the original tweet and author.
  28. 28. 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.
  29. 29. Why should we care about micro interactions?
  30. 30. People
  31. 31. Emotions
  32. 32. 20,000 moments in a day -Daniel Kahneman Emotions
  33. 33. Nagging Feeling: Why couldn’t I do it?
  34. 34. Design affects Emotion PositiveandNegative
  35. 35. Difference between a product you love and product you tolerate
  36. 36. A well designed product, but with one bad micro-interaction can kill it.
  37. 37. A signature moment, stands as a brand identifier
  38. 38. How are microinteractions designed?
  39. 39. A beautifully crafted microinteraction gracefully handles four different parts Trigger Rules Feedback Loops & Modes
  40. 40. Trigger A trigger starts a microinteraction iOS - If you tap the camera icon in the lock screen, it bounces up to encourage you to slide.
  41. 41. Trigger 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
  42. 42. 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
  43. 43. Trigger Invisible triggers: Your screen always has finite space Google Maps iOS – Shaking is an invisible trigger for sending feedback
  44. 44. 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.
  45. 45. Rules 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
  46. 46. Rules Rules define how the microinteraction should behave Response to trigger Control to user Sequence and timings Data and source Feedback and when Repeat and frequency End of the microinteraction
  47. 47. Rules User is on item page Is this item already in the cart? Button is labeled Add another to Cart Has the user bought this item before? Button is labeled Add another to Cart Button is labeled Add to Cart
  48. 48. Rules Rules should reveal themselves By what can be done By what cannot be done MailChimp – The chimp’s arm pops off when you try to make an email too wide
  49. 49. Feedback Feedback Illuminates the Rules After a manual trigger On any system triggers in case of a change Error has occurred (user and system) Showing progress on any critical process
  50. 50. Feedback Feedback can be: Visual Animation Messages Audio Haptics Whenever possible, have visual feedback for every user-initiated action. Add sound and haptics for emphasis and alerts
  51. 51. 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-notillustrated-by-ford-sync/
  52. 52. Loops & Modes A mode is a state in a microinteraction an infrequent action, should be used sparingly Settings – a very common mode A loop defines what happens to the microinteraction next time a cycle that repeats, usually for a set duration Memory to progressively disclosure or reduction
  53. 53. Bringing it together…
  54. 54. Case Study 1 : Delete a project
  55. 55. Where was it happening?
  56. 56. Where was it happening?
  57. 57. Trigger Before After
  58. 58. 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?
  59. 59. Rules Admin clicks on delete Emphasize the action in the feedback Enable soft delete in the background for worst case
  60. 60. Feedback
  61. 61. Testing a microinteraction Goal is to validate: The goal of the microinteraction is understood Understand what data is important If any microcopy is necessary Timing and Flow are smooth
  62. 62. Testing a microinteraction What cant be measured, cant be improved ~Lord Kelvin Completion rate Overall Duration and of specific steps Number of steps Number of clicks/taps/selects Number of system errors Number of Human errors
  63. 63. Questions? http://sb.lk/hasgeek @mphaxise

×