School	  of	  Informa-on	  University	  of	  Michigan	  
 •      	  •             	  •             	  •             	  	  
 (Interac-on	  Design,	  IxD)	  ?	  
The	  prac-ce	  of	  designing	  interac-ve	  digital	  products,	  environments,	  systems,	  and	  services	            ...
Designing	  interac-ve	  products	  to	  support	  people	  in	  their	  everyday	  and	  working	  lives	                ...
Interac-on	  design	  (abbreviated	  as	  IxD)	  defines	  the	  structure	  and	  content	  of	  communica-on	  between	  ...
?	     IxD             	  HCI	   (Human-­‐Computer	  Interac-on)	  UX	   (User	  Experience)	  UE	   (Usability	  Engineer...
IxD              UX                          	                                                          Content	          ...
?	  
                                                             Vannevar	  Bush,	  As	  We	  May	  Think,	  1945	  hWp://www....
hWp://www.weeplaces.com/sha-­‐hwang/	  
 
Iden-fy	  needs/	                       establish	                     requirement	  (Re)Design	                          ...
>	  Iden.fy	  needs/establish	  requirement	                                                         Iden-fy	  needs/	    ...
>	  Iden.fy	  needs/establish	  requirement	   User	  Study	  (contextual	  inquiry,	                Interpreta-on	  (sequ...
>	  Iden.fy	  needs/establish	  requirement	  Compara-ve	  Analysis	                                               Mee-ng	...
>	  Iden.fy	  needs/establish	  requirement	  Compara-ve	  Analysis	                                               Mee-ng	...
>	  Iden.fy	  needs/establish	  requirement	                Analyzing,	  Highligh-ng,	  Priori-zing	  Persona	            ...
>	  	  (Re)Design	  &	  Build	  Prototype	                                         Iden-fy	  needs/	  Design	  requirement...
>	  	  (Re)Design	  &	  Build	  Prototype	               Scenario	  /	  Storyboard	  hWp://taehok.com/night/?page_id=64	  
>	  	  (Re)Design	  &	  Build	  Prototype	               Scenario	  /	  Storyboard	  hWp://taehok.com/night/?page_id=64	  
>	  	  (Re)Design	  &	  Build	  Prototype	                                Sketch	  hWp://taehok.com/night/?page_id=64	  
>	  	  (Re)Design	  &	  Build	  Prototype	                                                       Buxton,	                 ...
>	  	  (Re)Design	  &	  Build	  Prototype	                          Buxton,	  Sketching	  User	  Experience,2007	  
>	  	  (Re)Design	  &	  Build	  Prototype	  Prototype	    Prototypes	                                                     ...
>	  	  (Re)Design	  &	  Build	  Prototype	  Prototype	     Prototypes	  as	  “Filters”	                                   ...
>	  	  (Re)Design	  &	  Build	  Prototype	                            Prototype	        Appearance	                       ...
>	  	  (Re)Design	  &	  Build	  Prototype	                      Prototype	                                                ...
>	  	  (Re)Design	  &	  Build	  Prototype	  Prototype	                                                                    ...
>	  	  (Re)Design	  &	  Build	  Prototype	                           Prototype	                                           ...
>	  	  Evaluate	                                            Iden-fy	  needs/	  Design	  requirement	  &	                  ...
>	  	  Evaluate	                                                                 Usability	  Inspec-on	                   ...
>	  	  (Re)Design	  &	  Build	  Prototype	             Usability	  Tes-ng	  Usefulness,	  Efficiency,	  Effec-veness,	  Sa-sf...
>	  	  (Re)Design	  &	  Build	  Prototype	                 Wizard	  of	  Oz	                Speed	  Da-ng	  hWp://farm3.st...
>	  	  (Re)Design	  &	  Build	  Prototype	                                                                                ...
>	  	  (Re)Design	  &	  Build	  Prototype	                                                                                ...
Iden-fy	  needs/	                       establish	                     requirement	  (Re)Design	                          ...
“technology	  as	  experience”	                          McCarthy	  &	  Wright,	  2007	  
Iden-fy	  needs/	                       establish	                     requirement	  (Re)Design	                          ...
Iden-fy	  needs/	               establish	                             Understand	             requirement	  (Re)Design	  ...
Case1:	  Whereabout	  Clock	        Symbol	  of	  togetherness	        and	  connectedness	                               ...
Case2:	  SmartHome	  Feel	  likes	  to	  be	  a	  good	  parent	     (Davidoff	  et	  al.	  2007)	  
:	  1.               ,	                          	  2.                                     	  3.   ,   ,	             	  4...
Iden-fy	  needs/	                         establish	                             Understand	                       require...
Gulfs	  of	  Evalua-on	  &	  Execu-on	                               Inten-ons	                            evalua-on	  Exe...
Make	  use	  of	  conven.on!!	  
What	  is	  a	  browser?	  What	  features	  and	  func-onality	  a	     browser	  “should”	  have?	  
Conceptual	  Model	  
Designers’	  mental	                Users’	  mental	       model	                             model	                    Co...
Gmail	             Move	  to	      Labels	  ?	                    Designers’	  mental	                          model:	  l...
Signifier	  
hWp://heroswelcome.com/images/P/Dental-­‐mirror-­‐1.jpg	  
hWp://www.dental-­‐teeth.com/wp-­‐content/uploads/2010/10/dental-­‐handpiece.jpg	  
hWp://www.henkesasswolf.de/uploads/tx_exojavagal/Henke_Dent_2000SA_01.jpg	  
hWp://chrisocp.files.wordpress.com/2010/01/hammer3.jpg	  
“simpler-­‐looking	  does	  not	  always	    translate	  to	  simplicity	  of	  use”	                                    b...
“complexity	  is	  a	  fact	  of	  the	  word,	  simplicity	  is	  in	  the	  mind”	                                     b...
Even	  simple-­‐look	  things	  are	  complex	  
Social	  Signifier	  
Recommender	  &	  Reputa-on	  system	  
System	  Feedback	  
Error	  Preven.on	  &	  Recover	  
slips	          Undo	  Slips	  
Recover	  mistakes	  
Flexibility	  
Effort	  Minimiza.on	  
,	  	  .	  
 
”   ”   	  
 
 
 
 
        	  
Thank	  you	  
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
0515 UiGathering Talk - Interaction Design by Stanley
Upcoming SlideShare
Loading in...5
×

0515 UiGathering Talk - Interaction Design by Stanley

3,467

Published on

Published in: Technology, Business

Transcript of "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  

×