Your SlideShare is downloading. ×
0
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

0515 UiGathering Talk - Interaction Design by Stanley

3,451

Published on

Published in: Technology, Business
0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,451
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
34
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1.    School  of  Informa-on  University  of  Michigan  
  2.  •   •   •   •     
  3.  (Interac-on  Design,  IxD)  ?  
  4. The  prac-ce  of  designing  interac-ve  digital  products,  environments,  systems,  and  services   (by  Cooper  et  al.,  About  Face)  
  5. Designing  interac-ve  products  to  support  people  in  their  everyday  and  working  lives   (by  Preece  et  al.,  Interac.on  Design,  2002)  
  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. ?   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. 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. ?  
  10.   Vannevar  Bush,  As  We  May  Think,  1945  hWp://www.youtube.com/watch?v=c539cK58ees&feature=related  
  11. hWp://www.weeplaces.com/sha-­‐hwang/  
  12.  
  13. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product   Preece  et  al.  Interac.on  Design  
  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. >  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. >  Iden.fy  needs/establish  requirement  Compara-ve  Analysis   Mee-ng  Tool  
  17. >  Iden.fy  needs/establish  requirement  Compara-ve  Analysis   Mee-ng  Tool  
  18. >  Iden.fy  needs/establish  requirement   Analyzing,  Highligh-ng,  Priori-zing  Persona   Group  
  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. >    (Re)Design  &  Build  Prototype   Scenario  /  Storyboard  hWp://taehok.com/night/?page_id=64  
  21. >    (Re)Design  &  Build  Prototype   Scenario  /  Storyboard  hWp://taehok.com/night/?page_id=64  
  22. >    (Re)Design  &  Build  Prototype   Sketch  hWp://taehok.com/night/?page_id=64  
  23. >    (Re)Design  &  Build  Prototype   Buxton,   Sketching   User   Experience, 2007  
  24. >    (Re)Design  &  Build  Prototype   Buxton,  Sketching  User  Experience,2007  
  25. >    (Re)Design  &  Build  Prototype  Prototype   Prototypes   ?  
  26. >    (Re)Design  &  Build  Prototype  Prototype   Prototypes  as  “Filters”   (Lim  &  Stolterman.  2008)  
  27. >    (Re)Design  &  Build  Prototype   Prototype   Appearance   Data   Func-onality   Interac-vity   Spa-al  structure  hWp://taehok.com/night/?page_id=64  
  28. >    (Re)Design  &  Build  Prototype   Prototype   Role  Implementa-on   Look  and  Feel  (Houde  &  Hill  ,  1997)  
  29. >    (Re)Design  &  Build  Prototype  Prototype   ?  
  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. >    Evaluate   Iden-fy  needs/  Design  requirement  &   establish   ideas   requirement   (Re)Design   Evaluate   Build  an   interac-ve   version  
  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. >    (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. >    (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. >    (Re)Design  &  Build  Prototype     1.   ” ”  2.     3.     4.    
  36. >    (Re)Design  &  Build  Prototype     1.   ” ”  2.     3.     4.    
  37. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product   process” ” ?   Preece  et  al.  Interac.on  Design  
  38. “technology  as  experience”   McCarthy  &  Wright,  2007  
  39. Iden-fy  needs/   establish   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product  
  40. Iden-fy  needs/   establish   Understand   requirement  (Re)Design   Evaluate   Build  an   interac-ve   version   Final  Product  
  41. Case1:  Whereabout  Clock   Symbol  of  togetherness   and  connectedness   (Sellen  et  al.  2006)  
  42. Case2:  SmartHome  Feel  likes  to  be  a  good  parent   (Davidoff  et  al.  2007)  
  43. :  1. ,    2.  3. , ,    4.  5.  
  44. Iden-fy  needs/   establish   Understand   requirement   (Re)Design   Evaluate   Build  an   interac-ve   version  Design  Principles   Final  Product  
  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. Make  use  of  conven.on!!  
  47. What  is  a  browser?  What  features  and  func-onality  a   browser  “should”  have?  
  48. Conceptual  Model  
  49. Designers’  mental   Users’  mental   model   model   Conceptual  Model  
  50. Gmail   Move  to   Labels  ?   Designers’  mental   model:  label   Users’  mental   model:  folder  
  51. Signifier  
  52. hWp://heroswelcome.com/images/P/Dental-­‐mirror-­‐1.jpg  
  53. hWp://www.dental-­‐teeth.com/wp-­‐content/uploads/2010/10/dental-­‐handpiece.jpg  
  54. hWp://www.henkesasswolf.de/uploads/tx_exojavagal/Henke_Dent_2000SA_01.jpg  
  55. hWp://chrisocp.files.wordpress.com/2010/01/hammer3.jpg  
  56. “simpler-­‐looking  does  not  always   translate  to  simplicity  of  use”   by  Don  Norman  
  57. “complexity  is  a  fact  of  the  word,  simplicity  is  in  the  mind”   by  Don  Norman  
  58. Even  simple-­‐look  things  are  complex  
  59. Social  Signifier  
  60. Recommender  &  Reputa-on  system  
  61. System  Feedback  
  62. Error  Preven.on  &  Recover  
  63. slips   Undo  Slips  
  64. Recover  mistakes  
  65. Flexibility  
  66. Effort  Minimiza.on  
  67. ,    .  
  68.  
  69. ” ”  
  70.  
  71.  
  72.  
  73.  
  74.    
  75. Thank  you  

×