Your SlideShare is downloading. ×
0
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Microinteractions: Design is in the Details
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Microinteractions: Design is in the Details

638

Published on

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

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
638
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Who doesn’t like a good deal or a coupon?
  • 2. This lands up in my inbox…
  • 3. Lets configure the newsletter…
  • 4. This lands up again…
  • 5. Meanwhile in the mobile world…
  • 6. Where do I put in that number?
  • 7. This lands up again…
  • 8. And then…
  • 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. Back in the golden age…
  • 11. Same Service Different Experience Different Outcomes
  • 12. Microinteractions: Design is in the Details
  • 13. Microinteractions: Design is in the Details MetaRefresh 2014 Praneet Koppula @mphaxise
  • 14. References
  • 15. A few examples
  • 16. Gmail - Notification before sending email
  • 17. Medium - When you select text in a post, select twitter, then your tweet is pre-filled with your selected text.
  • 18. Sublime Text - When two files with the same name are open, the directory is automatically shown to help differentiate them.
  • 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. Microinteractions Are Not Features…But Still Matter
  • 21. Feature vs • Complex (multiuse case) • Time Consuming • Cognitively Engaging Microinteraction • Simple • Brief • Nearly Effortless
  • 22. Microinteractions are everywhere
  • 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. Connecting devices together Bump - Users tap phones together to share contacts and other files
  • 25. Interacting with a single piece of data iOS Clock – App icon shows the current time
  • 26. Adjusting a setting iOS - When adjusting brightness, preview screenshots show a real time view of your current home & lock screens
  • 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. 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. Why should we care about micro interactions?
  • 30. People
  • 31. Emotions
  • 32. 20,000 moments in a day -Daniel Kahneman Emotions
  • 33. Nagging Feeling: Why couldn’t I do it?
  • 34. Design affects Emotion PositiveandNegative
  • 35. Difference between a product you love and product you tolerate
  • 36. A well designed product, but with one bad micro-interaction can kill it.
  • 37. A signature moment, stands as a brand identifier
  • 38. How are microinteractions designed?
  • 39. A beautifully crafted microinteraction gracefully handles four different parts Trigger Rules Feedback Loops & Modes
  • 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. 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. 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. Trigger Invisible triggers: Your screen always has finite space Google Maps iOS – Shaking is an invisible trigger for sending feedback
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Bringing it together…
  • 54. Case Study 1 : Delete a project
  • 55. Where was it happening?
  • 56. Where was it happening?
  • 57. Trigger Before After
  • 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. Rules Admin clicks on delete Emphasize the action in the feedback Enable soft delete in the background for worst case
  • 60. Feedback
  • 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. 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. Questions? http://sb.lk/hasgeek @mphaxise

×