Microinteractions

Dan Saffer in his O’rielly book ‘Microinteractions’ brings the point how digital interactions through interfaces be better designed compared to what they are now with numerous examples. He cites how a patron supplied with a new iPhone was unable to stop the alarm from ringing there by marring the Philharmonic conducted by Avery Fisher Hall as reported in New York  Times edition on Jan 2012. The premise is ‘alarms still need to sound even when the ringer is turned off’ which lends credence “If mute switch silenced everything, there’d be thousands of people oversleeping every single day because they went to bed the night before unaware that the phone was still silent mode”. My Win Phone is the opposite behavior of IOS device or I’ve not fathomed these micro interactions deeply!

Examples of great micro interactions to emulate: (based on Big Little Details by Jakob Skjerning)

  1. Disqus sign-up form cleverly guesses your name based on your email address
  2. Picking a password and providing real-time feedback on the effectiveness of the password as in Twitter password selection form
  3. If you aren’t logged in  and roll over the Comment field, YouTube prompts you to sign in or sign up (with greyed message in the comment box)
  4. In CloudApp, the login button changes state after being clicked to let users know that an action is happening in the background and it can also display a spinner in the foreground in modal way
  5. Windows phone, the messaging icon changes to a sad face icon if there was an error sending a message

Microinteractions’ Rules:

  • Variety of verbs and least possible nouns
    • Github automatically selects a credit card type according to the number entered
    • When changing App ID password in apple, must have rules are checked off as the user enters them
  • Screens and states
    • Show a graphic of where the CCV number is in a credit card when entering one such info
    • Never allow to put in a future date and say that in a adjoint text space
    • simple data evaluation and corresponding predictive application may entice users and ease data entry: Google+ guesses where you work based on friends’ employment
    • Proflowers uses the date field under pace to show you the next big holiday when selecting a delivery date
  • Absorb Complexity
    • date range selection can be more intuitive avoiding end date being before the start date
    • family member gender detection when you add one in Facebook
  • Smart Defaults
    • clicking Report button stops playing the video in YouTube and anticipates the next action

Take simple care of minute things to delight your users and improve productivity and usability without overwhelming – will be a good sell for the product design. A quick read with some profound revelations for the developer-minded design geek – to put your lay man hat while interacting with an interface to design it for best experience that’s delightful.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s