microinteractions - designing with details
DESCRIPTION
This is a brief summary of the brilliant book Microinteractions by Dan Saffer. Please visit http://microinteractions.com/ to buy the book and get more details.TRANSCRIPT
What is Microinterac5on?
• A microinterac5on is a contained product moment that revolves around a single use case -‐ a 5ny piece of func5onality that only does one thing.
• For e.g. Sign Up form
www.digi-‐corp.com
Example
• Disqus -‐ The signup form guesses your name based on the first part of your email address as you type.
www.digi-‐corp.com
What is Microinterac5on?
• Whenever you – change a seGng, – sync your data or device, – set an alarm, – pick a password, – turn on your appliance, – login, – set a status message, – like something,
you are engaging with a microinterac5on.
www.digi-‐corp.com
What is Microinterac5on?
• Microinterac5ons are not features. – For e.g. music player is a feature but adjus5ng a volume is a microinterac5on inside that feature.
• The difference between a product you love and product you tolerate is oLen the micro interac5ons you have with it.
www.digi-‐corp.com
1. Make the trigger something target users will recognize as a trigger in the context.
www.digi-‐corp.com
The most discoverable triggers are…
1. An object that is moving, like a pulsing icon 2. An object with an affordance and a label,
such as a labeled buZon
3. An object with a label, such as labeled icon 4. An object alone, such as icon 5. A label only, such as menu item
6. Nothing: an invisible trigger
www.digi-‐corp.com
Invisible Trigger Example
• Tumblr iOS: If you swipe the edit buZon to the leL you can create a new text blogpost. (and if you swipe it upwards you can make a photo blogpost)
www.digi-‐corp.com
System Triggers
• System triggers are those that engage when certain condi5on(s) are met without any conscious interven5on by the user.
www.digi-‐corp.com
2. Rules
• At the heart of every microinterac5on, there are set of rules that govern how the microinterac5on can be used.
www.digi-‐corp.com
The rules determines…
• Rules determine "What can be done and what can't be done”
• E.g. Mailchimp -‐ As you stretch the browser window the arm of the chimp stretches 5ll it “pops” off!
www.digi-‐corp.com
Rules example
• Pages -‐ Automa5cally adds smaller heading styles once you’ve used the smallest displayed style (e.g. “heading 3” only appears aLer you have used “heading 2” in your document).
www.digi-‐corp.com
Don't start from zero example
• Google+ guesses where a user might work based on where their friends work.
www.digi-‐corp.com
Absorb Complexity
• Tesler's law: – There is a point beyond which you cannot simplify a process any further.
www.digi-‐corp.com
Absorb Complexity Example
• Facebook -‐ When “new family member” is added, Facebook automa5cally recognizes the chosen family member’s gender and adjusts the list of possible family rela5ves in the list box accordingly.
www.digi-‐corp.com
Limited op5ons and Smart defaults
• With microinterac5ons, a good prac5ce is to emphasize or perform automa5cally the next possible ac5on user might take
Example – Clicking on the “Report” icon on YouTube stops the video if it’s currently playing.
www.digi-‐corp.com
Controls and User Input
• Manual user input -‐> with what controls • With controls, the choice is between opera5onal simplicity and perceived simplicity.
• For e.g. – Opera5onal simplicity -‐> 3 buZons to lower, higher or mute the volume
– Perceived simplicity -‐> a single control does mul5ple ac5ons
www.digi-‐corp.com
Controls and User Input Example 1
• Google Drive -‐ An expanding hover interface allows you to choose the desired amount of rows and columns in a new table.
www.digi-‐corp.com
3. Feedback
• Principles of Feedback 1. Don’t overburden user with Feedback 2. The best feedback is never arbitrary 3. Convey the most with the least 4. Use the overlooked as a means of message
delivery
www.digi-‐corp.com
Don't overburden users with Feedback
• Batch -‐ When enabling the camera flash, the camera icon on the shuZer buZon gets a liZle white flash.
www.digi-‐corp.com
Convey the most with the least
• Cornerstone -‐ The number of segments in the spinning ac5vity indicator equals to the number of running ac5vi5es.
www.digi-‐corp.com
Use the overlooked as a means of message delivery
• For e.g. a cursor could change the color when it is moving over an inac5ve buZon
www.digi-‐corp.com
Feedback is for humans example
• Boxee -‐ When not connected to the Internet, the Boxee logo goes orange and starts sleeping.
www.digi-‐corp.com
Feedback as a personality-‐driven mechanism -‐ 1
• Dropbox -‐ When there is a long upload 5me remaining, it suggests you ‘grab a snickers’.
www.digi-‐corp.com
Visual Feedback Example
• Nike+ iPhone app -‐ The color coding of pace on the map is calibrated to the actual fastest and slowest pace ran.
www.digi-‐corp.com
Anima5on Example
• iOS -‐ When using internet on EDGE network, loading icon in status bar rotates slower than it does on 3G.
www.digi-‐corp.com
Audio
• Sound can be a powerful cue • It arrives in our brain more quickly than visual feedback
• That's why it should be used sparingly • Useful for devices with no screen • Or for Microinterac5on that work in the background when user is not paying aZen5on
www.digi-‐corp.com
Audio
• Use it for – Emphasis
– Alerts • It should pass the Foghorn test: – is this ac5on important enough that users would want to become aware of it when they cannot see it?
www.digi-‐corp.com
4. Loops and Modes
• Modes – A mode is a fork in the rules
– Modes should be used very very sparingly – Most microinterac5on should be mode free but some5mes they are necessary
– When there is an infrequent ac5on that would otherwise cluZer the microinterac5on’s main purpose for e.g. seGngs mode
www.digi-‐corp.com
Loops
• A loop is a cycle that repeats, usually for a set dura5on
• A loop is something indicated via the rules for e.g. "Get data every 30 seconds", "Run for three minutes, then stop" or "Send reminder in 10 days"
www.digi-‐corp.com
Loop Example
• Moo -‐ Shows you how much 5me you have leL to edit a recently submiZed order.
www.digi-‐corp.com
Long Loops
• What can be done to make the microinterac5on beZer the second 5me it's used? The tenth? The ten thousandth?
www.digi-‐corp.com
Long Loops Example
• Spo5fy -‐ The “Added” column on spo5fy fades as it gets older.
www.digi-‐corp.com
The Long Wow
• The long wow is about delivering new experiences or features over 5me instead of all at once, and by doing so building customer loyalty.
www.digi-‐corp.com
The Long Wow Example
• Threadless -‐ Knows what’s in your shopping cart and sends an email to no5fy that some of the cart’s products are running out of stock.
www.digi-‐corp.com
Progressive disclosure or reduc5on
• As users become used to a product, they don't need as much handholding, and instead can be treated as more skilled user. For e.g. shortcuts could be added to a microinterac5on aLer it's been used a few 5mes, or more advanced features added.
• In progressive reduc5on, you can make microinterac5on simpler over the period of 5me.
www.digi-‐corp.com
Progressive Reduc5on Example
• The signpost buZon by default is a large icon with a label.
• As the user becomes more proficient, the label disappears.
• Eventually the buZon is de-‐emphasized.
www.digi-‐corp.com