Microinteractions - Designing with Details

50 %
50 %
Information about Microinteractions - Designing with Details

Published on March 10, 2014

Author: digicorp

Source: slideshare.net


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.


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  

Structure  of  Microinterac5on   www.digi-­‐corp.com  

1.  Triggers   A  trigger  is  whatever  ini5ates  a  microinterac5on.   www.digi-­‐corp.com  

Principles  of  Triggers   www.digi-­‐corp.com  

1.  Make  the  trigger  something  target  users   will  recognize  as  a  trigger  in  the  context.   www.digi-­‐corp.com  

2.  Have  the  trigger  ini5ate  the  same   ac5on  every  5me   www.digi-­‐corp.com  

3.  Bring  the  data  forward   www.digi-­‐corp.com  

4.  Don't  break  the  visual  affordance   www.digi-­‐corp.com  

5.  More  frequently  the  microinterac5on   is  used,  the  more  visible  it  should  be.   www.digi-­‐corp.com  

6.  Don't  make  the  false  affordance   •  Same  as  4   www.digi-­‐corp.com  

7.  Add  a  label  only  if  it  provides   informa5on  that  the  trigger  itself  cannot.     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   •  What  do  I  know  about   the  user  and  context?   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.  2.  3.  4.  Don’t  overburden  user  with  Feedback   The  best  feedback  is  never  arbitrary   Convey  the  most  with  the  least   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  

Feedback  methods   •  Visual   – Anima5on   – Messages   •  Audio   •  Hap5c   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  

Hap5cs   •  Technically  known  as  "vibrotac5le  feedback"   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  

Modes  Example   •  Weather  app  seGngs   screen   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  

Credits   •  LiZle  Big  Details  -­‐  Your  daily  dose  of  design   inspira5on.   www.digi-­‐corp.com  

Add a comment

Related presentations

Related pages

Microinteractions | Designing with Details

The Microinteractions book is great and all, but there’s so many words! What if there was a quick reference guide to hang up? Well, say no more!
Read more

Microinteractions: Full Color Edition: Designing with Details

Buy Microinteractions: Full Color Edition: Designing with Details on Amazon.com FREE SHIPPING on qualified orders
Read more

Microinteractions: Designing with Details by Dan Saffer ...

The Power of Thinking Small: Dan Saffer’s persuasive new book, Microinteractions: Designing with Details, makes the case that focusing on small moments ...
Read more


microinteractions designing with details / elearning free ebooks download / just enough research by erika hall amazon com / ux design resources guide ux how /
Read more

About The Book | Microinteractions

Microinteractions Designing with Details. About The Book. ... See what people are highlighting and saying about the book on Readmill. Ebooks are available now:
Read more

Microinteractions: Designing Details - The ConveyUX Conference

“The details are not the details. They make the design.” — Charles Eames The difference between a good product and a great one are its details: the ...
Read more

Microinteractions: Designing with Details by Dan Saffer ...

Microinteractions is a great example of how to write a book. It takes a topic, focuses on the topic and doesn't try to cover knowledge outside of its scope.
Read more

Microinteractions Designing With Details

Microinteractions Designing With Details. 20-10-2016 2/2 Microinteractions Designing With Details. Other Files Available to Download [PDF] Results Of ...
Read more

Microinteractions: Designing with Details | Forum One

About a year ago, I bought a new car. It came with lots of fancy features and I had to read the manual front to back to decipher most of them.
Read more

Microinteractions - O'Reilly Media

Comments about oreilly Microinteractions: At 150 pages, this is a fairly quick read, but the true importance of the work lives in the details, much as the ...
Read more