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

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

4. This lands up in my inbox…

5. Lets configure the newsletter…

6. This lands up again…

7. Meanwhile in the
mobile world…

8. Where do I put in that number?

9. This lands up again…

10. And then…

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

12. Back in the golden age…

13. Same Service
Different Experience
Different Outcomes

14. Microinteractions:
Design is in the Details

15. Microinteractions:
Design is in the Details
MetaRefresh 2014
Praneet Koppula
@mphaxise

16. References

17. A few examples

18. Gmail - Notification before sending email

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

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

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

22. Microinteractions Are Not
Features…But Still Matter

23. Feature
vs
• Complex (multiuse case)
• Time Consuming
• Cognitively Engaging
Microinteraction
• Simple
• Brief
• Nearly Effortless

24. Microinteractions are
everywhere

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

26. Connecting devices together
Bump - Users tap phones together to share contacts and
other files

27. Interacting with a single piece
of data
iOS Clock – App icon shows the current time

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

29. Viewing or creating a small
piece of content
Tweetbot - When replying to a tweet, swipe down to see the
original tweet and author.

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

31. Why should we care about
micro interactions?

32. People

33. Emotions

34. 20,000 moments in a day
-Daniel Kahneman
Emotions

35. Nagging Feeling:
Why couldn’t I do it?

36. Design affects Emotion
PositiveandNegative

37. Difference between a product you
love and product you tolerate

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

39. A signature moment, stands as a
brand identifier

40. How are microinteractions
designed?

41. A beautifully crafted
microinteraction gracefully
handles four different parts
Trigger
Rules
Feedback
Loops &
Modes

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

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

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

45. Trigger
Invisible triggers:
Your screen always has finite
space
Google Maps iOS – Shaking is an
invisible trigger for sending
feedback

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

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

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

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

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

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

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

53. 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/

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

55. Bringing it together…

56. Case Study 1 : Delete a project

57. Where was it happening?

58. Where was it happening?

59. Trigger
Before
After

60. 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?

61. Rules
Admin clicks on delete
Emphasize the action in the feedback
Enable soft delete in the background for worst case

62. Feedback

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

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

65. Questions?
http://sb.lk/hasgeek
@mphaxise