microinteractions - designing with details

www.digi-‐corp.com

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


Example

• Disqus -‐ The signup form guesses your name based on the first part of your email address as you type.



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



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


Structure of Microinterac5on


1. Triggers

A trigger is whatever ini5ates a microinterac5on.


Principles of Triggers


1. Make the trigger something target users will recognize as a trigger in the context.


2. Have the trigger ini5ate the same ac5on every 5me


3. Bring the data forward


4. Don't break the visual affordance


5. More frequently the microinterac5on is used, the more visible it should be.


6. Don't make the false affordance

• Same as 4


7. Add a label only if it provides informa5on that the trigger itself cannot.


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


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)


System Triggers

• System triggers are those that engage when certain condi5on(s) are met without any conscious interven5on by the user.


2. Rules

• At the heart of every microinterac5on, there are set of rules that govern how the microinterac5on can be used.


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!


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


Don't start from zero

• What do I know about the user and context?


Don't start from zero example

• Google+ guesses where a user might work based on where their friends work.


Absorb Complexity

• Tesler's law: – There is a point beyond which you cannot simplify a process any further.


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.


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.


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


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.


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


Don't overburden users with Feedback

• Batch -‐ When enabling the camera flash, the camera icon on the shuZer buZon gets a liZle white flash.


Convey the most with the least

• Cornerstone -‐ The number of segments in the spinning ac5vity indicator equals to the number of running ac5vi5es.


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


Feedback is for humans example

• Boxee -‐ When not connected to the Internet, the Boxee logo goes orange and starts sleeping.


Feedback as a personality-‐driven mechanism -‐ 1

• Dropbox -‐ When there is a long upload 5me remaining, it suggests you ‘grab a snickers’.


Feedback methods

• Visual – Anima5on

– Messages

• Audio • Hap5c


Visual Feedback Example

• Nike+ iPhone app -‐ The color coding of pace on the map is calibrated to the actual fastest and slowest pace ran.


Anima5on Example

• iOS -‐ When using internet on EDGE network, loading icon in status bar rotates slower than it does on 3G.


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


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?


Hap5cs

• Technically known as "vibrotac5le feedback"


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


Modes Example

• Weather app seGngs screen


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"


Loop Example

• Moo -‐ Shows you how much 5me you have leL to edit a recently submiZed order.


Long Loops

• What can be done to make the microinterac5on beZer the second 5me it's used? The tenth? The ten thousandth?


Long Loops Example

• Spo5fy -‐ The “Added” column on spo5fy fades as it gets older.


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.


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.


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.


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.


Credits

• Microinterac5ons – The Book (Buy the book. Highly recommended)

• LiZle Big Details -‐ Your daily dose of design inspira5on.


microinteractions - designing with details

Education