0515 UiGathering Talk - Interaction Design by Stanley

3,941 views

Published on

Published in: Technology, Business

0515 UiGathering Talk - Interaction Design by Stanley

  1. 1.    School  of  Informa-on  University  of  Michigan  
  2. 2.  •   •   •   •     
  3. 3.  (Interac-on  Design,  IxD)  ?  
  4. 4. The  prac-ce  of  designing  interac-ve  digital  products,  environments,  systems,  and  services   (by  Cooper  et  al.,  About  Face)  
  5. 5. Designing  interac-ve  products  to  support  people  in  their  everyday  and  working  lives   (by  Preece  et  al.,  Interac.on  Design,  2002)  
  6. 6. Interac-on  design  (abbreviated  as  IxD)  defines  the  structure  and  content  of  communica-on  between  two  or  more  interac-ve  "beings"  to  understand  each  other.     (by  McCullough,  Digital  Ground,  2004)  
  7. 7. ?   IxD  HCI   (Human-­‐Computer  Interac-on)  UX   (User  Experience)  UE   (Usability  Engineering)   UI   (User  Interface)  UCD   (User-­‐Centered  Design)  HCD   (Human-­‐Centered  Design)   IA   (Informa-on  Architecture)  
  8. 8. IxD UX   Content   Form   Informa-on  Architects   Industrial  designers   Copywriters   Graphic  designers   Animators   Sound  designers   Behavior   Interac-on  Designers  UX  Elements   Cooper  et  al.  About  Face  
  9. 9. ?  
  10. 10.   Vannevar  Bush,  As  We  May  Think,  1945  hWp://www.youtube.com/watch?v=c539cK58ees&feature=related  
  11. 11. hWp://www.weeplaces.com/sha-­‐hwang/  
  12. 12.  
  13. 13. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product   Preece  et  al.  Interac.on  Design  
  14. 14. >  Iden.fy  needs/establish  requirement   Iden-fy  needs/   establish   requirement   Design  Requirement  Analyzing,  Highligh-ng,  and   Project  Ini-a-on   Priori-zing   Design   Design   Idea   High-­‐level  goal  &  design  requirement  Request   Problem   ini-a-on   User  Study  (contextual  inquiry,   interview,  diary,  etc  )   Compara-ve   Analysis   Interpreta-on  (sequence,  flow,   ar-fact,  culture,  physical)   Persona   Analyzing,  Highligh-ng,  Priori-zing  
  15. 15. >  Iden.fy  needs/establish  requirement   User  Study  (contextual  inquiry,   Interpreta-on  (sequence,  flow,   interview,  diary,  etc  )   ar-fact,  culture,  physical)   Contextual  Inquiry   Affinity  Diagram  /   coding  Interview  /  Focus  group   Sequence  model   Diary  Study  
  16. 16. >  Iden.fy  needs/establish  requirement  Compara-ve  Analysis   Mee-ng  Tool  
  17. 17. >  Iden.fy  needs/establish  requirement  Compara-ve  Analysis   Mee-ng  Tool  
  18. 18. >  Iden.fy  needs/establish  requirement   Analyzing,  Highligh-ng,  Priori-zing  Persona   Group  
  19. 19. >    (Re)Design  &  Build  Prototype   Iden-fy  needs/  Design  requirement  &   establish   ideas   requirement   Scenario  /  Storyboard   (Re)Design   Sketch   Prototype   Ideate   Iterate   Build  an   interac-ve   version  
  20. 20. >    (Re)Design  &  Build  Prototype   Scenario  /  Storyboard  hWp://taehok.com/night/?page_id=64  
  21. 21. >    (Re)Design  &  Build  Prototype   Scenario  /  Storyboard  hWp://taehok.com/night/?page_id=64  
  22. 22. >    (Re)Design  &  Build  Prototype   Sketch  hWp://taehok.com/night/?page_id=64  
  23. 23. >    (Re)Design  &  Build  Prototype   Buxton,   Sketching   User   Experience, 2007  
  24. 24. >    (Re)Design  &  Build  Prototype   Buxton,  Sketching  User  Experience,2007  
  25. 25. >    (Re)Design  &  Build  Prototype  Prototype   Prototypes   ?  
  26. 26. >    (Re)Design  &  Build  Prototype  Prototype   Prototypes  as  “Filters”   (Lim  &  Stolterman.  2008)  
  27. 27. >    (Re)Design  &  Build  Prototype   Prototype   Appearance   Data   Func-onality   Interac-vity   Spa-al  structure  hWp://taehok.com/night/?page_id=64  
  28. 28. >    (Re)Design  &  Build  Prototype   Prototype   Role  Implementa-on   Look  and  Feel  (Houde  &  Hill  ,  1997)  
  29. 29. >    (Re)Design  &  Build  Prototype  Prototype   ?  
  30. 30. >    (Re)Design  &  Build  Prototype   Prototype    hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg   hWp://www.iteamnm.com/images/0691_18.jpg  
  31. 31. >    Evaluate   Iden-fy  needs/  Design  requirement  &   establish   ideas   requirement   (Re)Design   Evaluate   Build  an   interac-ve   version  
  32. 32. >    Evaluate   Usability  Inspec-on   Tes-ng   Others   Methods   Heuris-c   Usability  Tes-ng   GOMS   Evalua-on   Cogni-ve  A/B  Tes-ng   Wizard  of  OZ   Walkthrough   Speed  Da-ng   Replay  
  33. 33. >    (Re)Design  &  Build  Prototype   Usability  Tes-ng  Usefulness,  Efficiency,  Effec-veness,  Sa-sfac-on,  Accessibility  hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg   hWp://www.doublejumpmedia.com/wp-­‐content/uploads/2009/05/
  34. 34. >    (Re)Design  &  Build  Prototype   Wizard  of  Oz   Speed  Da-ng  hWp://farm3.sta-c.flickr.com/2384/2652071069_745clbb8e_o.jpg   hWp://www.doublejumpmedia.com/wp-­‐content/uploads/2009/05/
  35. 35. >    (Re)Design  &  Build  Prototype     1.   ” ”  2.     3.     4.    
  36. 36. >    (Re)Design  &  Build  Prototype     1.   ” ”  2.     3.     4.    
  37. 37. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product   process” ” ?   Preece  et  al.  Interac.on  Design  
  38. 38. “technology  as  experience”   McCarthy  &  Wright,  2007  
  39. 39. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product  
  40. 40. Iden-fy  needs/   establish   Understand   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product  
  41. 41. Case1:  Whereabout  Clock   Symbol  of  togetherness   and  connectedness   (Sellen  et  al.  2006)  
  42. 42. Case2:  SmartHome  Feel  likes  to  be  a  good  parent   (Davidoff  et  al.  2007)  
  43. 43. :  1. ,    2.  3. , ,    4.  5.  
  44. 44. Iden-fy  needs/   establish   Understand   requirement   (Re)Design   Evaluate   Build  an   interac-ve   version  Design  Principles   Final  Product  
  45. 45. Gulfs  of  Evalua-on  &  Execu-on   Inten-ons   evalua-on  Execu-on  Gulf   Goals   Interface   Interface   Evalua-on  Gulf   Physical  System   by  Don  Norman  
  46. 46. Make  use  of  conven.on!!  
  47. 47. What  is  a  browser?  What  features  and  func-onality  a   browser  “should”  have?  
  48. 48. Conceptual  Model  
  49. 49. Designers’  mental   Users’  mental   model   model   Conceptual  Model  
  50. 50. Gmail   Move  to   Labels  ?   Designers’  mental   model:  label   Users’  mental   model:  folder  
  51. 51. Signifier  
  52. 52. hWp://heroswelcome.com/images/P/Dental-­‐mirror-­‐1.jpg  
  53. 53. hWp://www.dental-­‐teeth.com/wp-­‐content/uploads/2010/10/dental-­‐handpiece.jpg  
  54. 54. hWp://www.henkesasswolf.de/uploads/tx_exojavagal/Henke_Dent_2000SA_01.jpg  
  55. 55. hWp://chrisocp.files.wordpress.com/2010/01/hammer3.jpg  
  56. 56. “simpler-­‐looking  does  not  always   translate  to  simplicity  of  use”   by  Don  Norman  
  57. 57. “complexity  is  a  fact  of  the  word,  simplicity  is  in  the  mind”   by  Don  Norman  
  58. 58. Even  simple-­‐look  things  are  complex  
  59. 59. Social  Signifier  
  60. 60. Recommender  &  Reputa-on  system  
  61. 61. System  Feedback  
  62. 62. Error  Preven.on  &  Recover  
  63. 63. slips   Undo  Slips  
  64. 64. Recover  mistakes  
  65. 65. Flexibility  
  66. 66. Effort  Minimiza.on  
  67. 67. ,    .  
  68. 68.  
  69. 69. ” ”  
  70. 70.  
  71. 71.  
  72. 72.  
  73. 73.  
  74. 74.    
  75. 75. Thank  you  

×