Introduction to Prototyping: What, Why, How

1,079 views

Published on

My introductory slides on interaction design and the basics of prototyping for the Intelligent Interactive Systems master's Information Science course given at the University of Amsterdam.

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

  • Be the first to like this

No Downloads
Views
Total views
1,079
On SlideShare
0
From Embeds
0
Number of Embeds
207
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Prototyping: What, Why, How

  1. 1. Intelligent Interactive Systems (2012-2013):Introduction to Prototyping: what, why, how! Abdallah  ‘Abdo’  El  Ali   http://staff.science.uva.nl/~elali/ Some  slides  taken  and  adapted  from  “Interac3on  Design:  Beyond  Human-­‐Computer   Interac3on”  (Ch.  11)   hCp://www.id-­‐book.com/  
  2. 2. Outline! 1.  What  is  Interac3on  Design?   2.  Prototyping:       what       why     how   3.  Group  exercise:       sketching  interac3on  with  ING’s  ATM   4.  Group  presenta3ons  2
  3. 3. 1          2        3  3
  4. 4. 4
  5. 5. Good Design!   Need  to  take  into  account:     Who  the  users  are,  their  needs,  and  their  past  experiences     What  ac3vi3es  are  being  carried  out  (e.g.,  speaking,  making  a  phone   call,  moving  cursor,  etc.),  and  their  granularity     Where  the  interac3on  is  taking  place     Consider:  calling  from  cell  phone  vs.  calling  from  phone  booth  5
  6. 6. What is this?! Juicy  Salif   (Philip  Starck,  1990)  6
  7. 7. What is Interaction Design?!   Designing  interac3ve  products  to  support  the  way  people   communicate  and  interact  in  their  everyday  and  working  lives     Sharp,  Rogers  and  Preece  (2007)     Goals:   1.  Develop  usable  products     Usability  means  easy  to  learn,  effec3ve  to  use  and  provide  an   enjoyable  experience   2.  Involve  users  in  the  design  process  7
  8. 8. Prototyping: what!   In  interac3on  design  it  can  be:     a  series  of  screen  sketches     a  storyboard,  i.e.  a  cartoon-­‐like  series  of   scenes       a  Powerpoint  slide  show     a  video  simula3ng  the  use  of  a  system     a  lump  of  wood  (e.g.  PalmPilot)     […]     In  prac3ce,  designers  prototype:       Technical  issues     Work  flow,  task  design     Screen  layouts  and  informa3on  display     Difficult,  controversial,  cri3cal  areas    8
  9. 9. Prototyping: why!   Prototyping:     allows  evalua3on  and  feedback     allows  stakeholders  to  see,  hold,  interact  with  a  prototype  more   easily  than  a  document  or  a  drawing     allows  team  members  to  communicate  effec3vely     lets  you  test  out  ideas  for  yourself       encourages  reflec3on  9
  10. 10. Prototyping: how!   Low-­‐fidelity  Prototyping     Uses  a  medium  which  is  unlike  the  final  medium,  e.g.  paper,  cardboard     Is  quick,  cheap  and  easily  changed     Examples:  Sketches  of  screens  and  task  sequences  using  ‘Post-­‐it’  notes,   Storyboards     Storyboards     Ogen  used  with  scenarios,  bringing  more  detail,  and  a  chance  to  role  play     Series  of  sketches  used  early  in  design  showing  how  a  user  might  progress   through  a  task  using  the  device       Sketching     Important  for  low-­‐fidelity  prototyping     Don’t  be  inhibited  by  drawing  ability    10
  11. 11. Storyboard Example!  Goal:  design  a  rich  content  experience  for  a  mobile  telecoms   operator  company        Macro      vs.    micro  view  11
  12. 12. Sketching Exercise (1)!   Design  Scenario:     You  are  being  asked  to  come  up  with  a  new  design  for  the  ING  ATM   machines.  Their  main  goal  is  to  improve  their  customer  experience  of   drawing  out  money  on  a  day-­‐to  day  basis.  To  do  that,  they  would  like   to  have  their  en3re  ATM  interface  redesigned.       Task:     Reflect  on  the  basic  opera3ons  of  the  ATM,  the  seing,  and  how  a   typical  person  interacts  with  the  machine,  and  sketch  out  the   interac3on.     How  can  you  embed  intelligent  techniques  in  the  process?  E.g.,   context-­‐awareness,  vision-­‐sensing,  speech-­‐recogni3on,  etc.    12
  13. 13. Sketching Exercise (2)!   Work  in  groups  of  X,  order  s3cky  post-­‐its  on  an  interac3on   3meline     Blue  post-­‐its:  what  the  person  is  doing       Pink  post-­‐its:  what  the  ATM  is  doing     Yellow  post-­‐its:  other  relevant  factors  13
  14. 14. Group Presentations
 (3 min. elevator pitch!)
 1 positive point
 1 negative point
 (from audience)!14
  15. 15. Questions?!15
  16. 16. References! Sharp,  H.,  Y.  Rogers  and  J.  Preece.  (2007).  Interac(on  Design:   Beyond  Human−Computer  Interac(on.  New  York:  John  Wiley   and  Sons,  second  edi3on,  chapter  11.  16
  17. 17. Intelligent Interactive Systems (2012-2013): 
Brainstorming! Abdallah  ‘Abdo’  El  Ali   http://staff.science.uva.nl/~elali/
  18. 18. Outline! 1.  PLEX  cards  exercise   2.  Group  presenta3ons  18
  19. 19. Topics!   Context-­‐awareness  &  Ambient  Intelligence     Speech     Vision     Biometrics       Home  Systems  (e.g.,  interac3ve  TVs)     Public  Displays     Robo3cs     Affec3ve  Compu3ng     Wearables     Mobile  19
  20. 20. PLEX Brainstorming Cards!   Developed  by  Nokia  Research  Center  Finland  (Espoo)     PLEX:  Playful  Experiences  Framework     Design  for  playfulness  in  interac3ve  systems     Target:  researchers,  designers,  stakeholders     Deck  of  22  cards  20
  21. 21. PLEX Exercise: Rules!   Each  group  receives  3  random  PLEX  cards.     Player  1  starts  by  placing  her  card  face  up  on  the  table,  and  then   explores  an  idea  related  to  both  the  topics  and  the  card.     Player  2  and  player  3  listen  carefully  and  engage  in  discussion.  When   one  of  them  feels  his/her  card  is  relevant  to  the  discussion,  s/he   places  her  card  on  the  table.       Record  your  ideas.     CONTEXT:  interac3ve  system  for  your  final  report     You  have  20-­‐25  min.  21
  22. 22. Issues to Consider (Always…!)!   Usability     Feasibility  (cost,  effort)     Robustness  (can  withstand  different  condi3ons)     Scalability  (can  change  in  size  or  scale)     Privacy     Security     Safety  (health)     Maintainability     Durability     Trust     Playfulness     Originality     Transparency     Intelligibility     Extensibility     Likeability     Enjoyability     Collabora3ve     Compe33ve  22   […]  
  23. 23. PLEX Exercise: System Design!   Work  in  your  chosen  group  (USE  ONLY  ONE  COLOR)     Blue  post-­‐its:  user(s)  interac3on     Yellow  post-­‐its:  system(s)  interac3on     Pink  post-­‐its:  nuts  n’  bolts  (technology:  algorithms,  mechanisms)  –   use  your  search  engines!     Orange  post-­‐its:  Perceived  design  improvements  (at  least  1!)     Red  post-­‐its:  Perceived  design  boCle-­‐necks  (at  least  1!)     Green  post-­‐its:  other  relevant  factors  (social  context,  climate,  etc.)     Use  ac3on  or  state  keywords  where  applicable  23
  24. 24. Group Presentations
 Elevator pitch (3 min.)
 (at least)
 1 positive point
 1 negative point!24
  25. 25. Questions?!25

×