microinteractions: design is in the details
DESCRIPTION
Slides for my talk "Microinteractions: Design is in the Details" at MetaRefresh 2014.TRANSCRIPT
![Page 1: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/1.jpg)
Who doesn’t like a good deal or a coupon?
![Page 2: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/2.jpg)
![Page 3: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/3.jpg)
![Page 4: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/4.jpg)
This lands up in my inbox…
![Page 5: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/5.jpg)
Lets configure the newsletter…
![Page 6: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/6.jpg)
This lands up again…
![Page 7: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/7.jpg)
Meanwhile in the mobile world…
![Page 8: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/8.jpg)
Where do I put in that number?
![Page 9: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/9.jpg)
This lands up again…
![Page 10: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/10.jpg)
And then…
![Page 11: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/11.jpg)
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
![Page 12: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/12.jpg)
Back in the golden age…
![Page 13: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/13.jpg)
Same Service
Different Experience
Different Outcomes
![Page 14: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/14.jpg)
Microinteractions:Design is in the Details
![Page 15: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/15.jpg)
Microinteractions:Design is in the Details
MetaRefresh 2014
Praneet Koppula @mphaxise
![Page 16: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/16.jpg)
References
![Page 17: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/17.jpg)
A few examples
![Page 18: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/18.jpg)
Gmail - Notification before sending email
![Page 19: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/19.jpg)
Medium - When you select text in a post, select twitter, then your tweet is pre-filled with your selected text.
![Page 20: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/20.jpg)
Sublime Text - When two files with the same name are open, the directory is automatically shown to help differentiate them.
![Page 21: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/21.jpg)
A Microinteractions is a contained product moment that revolves around a single use case – a tiny piece of functionality that does only one thing
![Page 22: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/22.jpg)
Microinteractions Are Not Features…But Still Matter
![Page 23: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/23.jpg)
Feature vs• Complex (multiuse case)
• Time Consuming• Cognitively Engaging
Microinteraction• Simple • Brief• Nearly Effortless
![Page 24: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/24.jpg)
Microinteractions are everywhere
![Page 25: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/25.jpg)
Accomplishing a single task
Disqus - The signup form guesses your name based on the first part of your email address as you type.
![Page 26: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/26.jpg)
Connecting devices together
Bump - Users tap phones together to share contacts and other files
![Page 27: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/27.jpg)
Interacting with a single piece of data
iOS Clock – App icon shows the current time
![Page 28: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/28.jpg)
Adjusting a setting
iOS - When adjusting brightness, preview screenshots show a real time view of your current home & lock screens
![Page 29: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/29.jpg)
Viewing or creating a small piece of content
Tweetbot - When replying to a tweet, swipe down to see the original tweet and author.
![Page 30: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/30.jpg)
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.
![Page 31: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/31.jpg)
Why should we care about micro interactions?
![Page 32: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/32.jpg)
People
![Page 33: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/33.jpg)
Emotions
![Page 34: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/34.jpg)
Emotions
20,000 moments in a day
-Daniel Kahneman
![Page 35: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/35.jpg)
Nagging Feeling:Why couldn’t I do it?
![Page 36: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/36.jpg)
Positive and Negative
Design affects Emotion
![Page 37: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/37.jpg)
Difference between a product you love and product you tolerate
![Page 38: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/38.jpg)
A well designed product, but with one bad micro-interaction can kill it.
![Page 39: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/39.jpg)
A signature moment, stands as a brand identifier
![Page 40: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/40.jpg)
How are microinteractions designed?
![Page 41: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/41.jpg)
A beautifully crafted microinteraction gracefully handles four different parts
Trigger Rules Feedback Loops & Modes
![Page 42: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/42.jpg)
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
![Page 43: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/43.jpg)
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
![Page 44: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/44.jpg)
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
![Page 45: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/45.jpg)
Invisible triggers:
Your screen always has finite space
Google Maps iOS – Shaking is an invisible trigger for sending feedback
Trigger
![Page 46: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/46.jpg)
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
![Page 47: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/47.jpg)
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
![Page 48: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/48.jpg)
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
![Page 49: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/49.jpg)
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
![Page 50: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/50.jpg)
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
![Page 51: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/51.jpg)
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
![Page 52: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/52.jpg)
Feedback can be:
VisualAnimationMessagesAudioHaptics
Whenever possible, have visual feedback for every user-initiated action. Add sound and haptics for emphasis and alerts
Feedback
![Page 53: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/53.jpg)
“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
![Page 54: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/54.jpg)
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
![Page 55: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/55.jpg)
Bringing it together…
![Page 56: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/56.jpg)
Case Study 1 : Delete a project
![Page 57: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/57.jpg)
Where was it happening?
![Page 58: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/58.jpg)
Where was it happening?
![Page 59: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/59.jpg)
Trigger
Before After
![Page 60: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/60.jpg)
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?
![Page 61: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/61.jpg)
Rules
Admin clicks on delete
Emphasize the action in the feedback
Enable soft delete in the background for worst case
![Page 62: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/62.jpg)
Feedback
![Page 63: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/63.jpg)
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
![Page 64: Microinteractions: Design is in the Details](https://reader035.vdocument.in/reader035/viewer/2022081414/54c7a0f14a7959c0408b45b7/html5/thumbnails/64.jpg)
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