Upload
praneet-koppula
View
111
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Slides for my talk "Microinteractions: Design is in the Details" at MetaRefresh 2014.
Citation preview
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