Successfully reported this slideshow.
Your SlideShare is downloading. ×


Loading in …3

Check these out next

1 of 45 Ad

More Related Content

Recently uploaded (20)



  1. 1. Human  Computer  Interaction  and  Design
 COMP1649 Design Thinking, Prototyping and Construction Dr Ralph Barthel
  2. 2. ● Why  Prototyping?   ● Low-­‐fidelity,  Mid-­‐fidelity  and  High-­‐fidelity   Prototypes   ● Prototyping  Tools   ● Prototyping  Physical  Products   ● Research  with  Prototypes Lecture  Overview
  3. 3. The  activities  and  content  in  this  lecture  contribute   to  the  learning  outcomes  :   ● B.  Carry  out  design  research  to  inform   development  of  systems  and  applications;   ●  C.  Construct  and  create  prototypes  of  human-­‐ computer  interactions; Learning  Outcomes • 3
  4. 4. “Design  thinking  is  a  process  for  creative   problem  solving”.                                                    IDEO Design  Thinking • 4
  5. 5. •Empathy  (human-­‐centered)   •Ideation  (generating  lots  of  ideas)   •Experimentation  (Prototyping  and  Testing)                                                                                                   Design  Thinking • 5 Source:  IDEO
  6. 6. Design  Thinking  -­‐  a  6  Step  Process Source:  Nielsen  Norman  Group
  7. 7. “Prototypes  provide  the  means  for     examining  design  problems  and   evaluating  solutions.  Selecting  the  focus   of  a  prototype  is  the  art  of  identifying  the   most  important  open  design  questions.”         Houde  and  Hill            
  8. 8. Prototyping ●  Prototyping  involves  building  a  working  model  of   part,  or  some  aspect  of,  the  system  for  evaluation   before  building  the  full  system.    
 ● It  is  a  similar  approach  to  that  followed  by  engineers   -­‐  e.g.  when  a  new  car  design  is  being  developed.   ● Prototypes  can  be  low-­‐,  mid-­‐  or  high-­‐fidelity. Source:  Van  Allen  
  9. 9. Why  prototyping? ● Thinking  through  making   ● To  enable  convergent  thinking   ● Framing  and  setting  of  problems  opposed  to  problem   solving   ● Explore  the  design  space  through  a  number  of   different  ideas,  approaches  and  assumptions  and   apply  them  to  a  particular  context   ● Prototyping  is  an  important  step  in  the  design   thinking  process Source:  Van  Allen
  10. 10. Why  prototyping? ● Discovery   ● “Fail  early  and  fail  often”   ● To  experience  interactions  and   behaviour  before  fully  committing  to   building  a  product  in  that  way   ● To  explore  if  your  ideas  stick  in  a  real   world  context Source:  Van  Allen  
  11. 11. What  to  prototype? ● Interactions  and  User  flows   ● Content   ● Form   ● Idea  selection   ● Technology   ● Usability  (later  stages)
  12. 12. Design  Sketches Low-­‐Fidelity   Prototypes High-­‐Fidelity   Prototypes Ideation Exploration  and     Ideation Usability Mid-­‐Fidelity   Prototypes Interactions  &     Behaviours
  13. 13. Low-­‐Fidelity  Prototypes ● A  Low-­‐fidelity  prototype  is  one  that  does  not  look  very   much  like  the  final  product,  e.g.  a  paper/cardboard   model  (rather  than  an  electronic  screen),   storyboarding,  sketching,  Wizard  of  Oz  experiments.  
 ● Low-­‐fidelity  prototypes  are  useful  because  they  tend   to  be  simple,  cheap,  and  quick  to  produce  and  modify.   They  are  for  exploration  only  (throw  away).
  14. 14. Mid-­‐Fidelity  Prototypes ● A  mid-­‐fidelity  prototype  starts  to  look  like  your  final   prototype  in  at  least  one  dimension.  These  prototypes   have  a  good  balance  between  cost  and  money;  
 ● Mid-­‐fidelity  prototypes  are  useful  because  they  allow   to  test  interactivity  and  provide  more  context  to   users.
  15. 15. High-­‐Fidelity  Prototype • A  high-­‐fidelity  prototype  is  a   prototype  that  is  close  to  the  final   product  in  detail  and  functionality.   This  enables  to  examine  usability  in   detail  and  to  make  conclusions  about   how  behaviour  will  relate  to  use  of  the   final  product.
  16. 16. Initial  Ideas    ———>Design  Process  ———-­‐>  Final  Design Low-­‐Fidelity  Prototypes Effort Ideas,  generating     more  ideas Mid-­‐Fidelity  Prototypes Selecting  Ideas,  Testing   of  user  interactions,  stake   holder  presentations,  user  flows High-­‐Fidelity   Prototypes Detailed  evaluations  of   interactions  and  user  flows
  17. 17. Low-­‐fidelity  Prototype Mid-­‐Fidelity  Prototype High-­‐fidelity  Prototype What  for? Good  for  ideation  and   exploring  different  ideas;   Testing  of  high-­‐level   concepts  e.g.  navigation;   Testing  of  specific  user   interactions;   Testing  of  user  flows;   Stakeholder   presentations; Detailed  user  testing  and   testing  of  interaction   flows;  Stakeholder   presentations; Pros? Fast,  Cheap,  Used  with   easily  available  materials;   Creating  alternative   designs; More  context;   Good  time/quality   balance;   Enable  user  testing;   Easier  “to  read”  for   users  and  stakeholders; Testing  of  very  detailed   interactions;     Visual  design  looks  like   final  product;   Complete  design; Cons? Limited  interactions;   Lack  of  detail;   Can  not  test  user  flows;   Can  lack  context  a  user   may  require; More  time  intense;   Still  not  fully  functional; Expensive;   Time-­‐consuming;   Advanced  coding  and   prototyping  skills   required;
  18. 18. Prototyping  Tools • Paper  and  Cardboard,  3D  Print,  Laser  Cutting   • Powerpoint/Keynote   • Bespoke  Prototyping  Tools  (e.g.  Axure,  Adobe  XD)   • Web/Mobile  Development  frameworks  (e.g.  Ruby  on   Rails,  Django,  Ionic)  +  Front-­‐end  (e.g.  Bootstrap,   Pure.css)    Frameworks   • Microcontroller  (Arduino,  Raspberry  Pi)   • Processing  typically  used  for  interactive  art  installations
  19. 19. Communicating  Prototypes
  20. 20. Prototyping  Digital  Products •Screens!   •Responsive  Design,  Mobile  First  Design   •Designing  for  different  interaction   types  (e.g.  keyboard  and  mouse,  touch   interfaces,  voice  interaction)   •Accessibility   •Animations
  21. 21. Prototyping  Physical  Products •has  become  a  trending  area  in  IxD  due  to   lower  costs  for  electronic  components   •Creation  of  products  with  embedded  sensors   has  become  more  accessible   •Products  have  physical  components  and   software  applications  that  controls  functions   on  the  device   •Ikea  Deathstar  lamp
  22. 22. Prototyping  Physical  Products •Electronics   •Coding  and  Troubleshooting   •Materials  and  Tactility       •Fabrication  (e.g.  laser  cutting  and  3D  printing)   •Prototype  fidelity  levels  (low-­‐  and  mid   fidelity)  more  fluent   •Start  by  creating  user  flows  and  circuit   diagrams
  23. 23. Prototyping  Physical  Products •Low-­‐fidelity  -­‐  e.g.  Breadboard,  Arduino  Uno   and  Arduino  IDE   •Mid-­‐fidelity-­‐  increased  portability  e.g.  battery   packs,  smaller  micro  controllers  such  as  Trinket,   LilyPad   •High-­‐fidelity  -­‐  printed  PCB  boards,  3D  printing,   Laser  cutting,  CNC  milling
  24. 24. Fabrication  Methods •Laser  Cutting  -­‐  relatively  quick  and  cheap.   Does  not  require  3D  modelling  skills;  Software   used  e.g.  Rhino  2D,  Autocad  2D,  Illustrator   •3D  printing  -­‐  can  be  time-­‐consuming   expensive,  costs  vary  based  on  print   materials.  Requires  3D  modelling  skills:   Software  used  e.g.  Rhino  3D,  Sketchup,   Blender.
  25. 25. Prototyping  Case  Study  -­‐  Information  Mediators
  26. 26. Prototyping  -­‐  Initial  Prototype  in  Paper
  27. 27. Prototyping  -­‐  Renderings  in  Graphic  software
  28. 28. Prototyping  -­‐  Renderings  in  Graphic  software
  29. 29. Prototyping  -­‐  Second  Prototype  in  Foam
  30. 30. Prototyping  -­‐  Second  Prototype  in  Foam
  31. 31. Prototyping  -­‐  Preparing  for  final  Prototype
  32. 32. Prototyping  -­‐  Final  Mould  and  3D  Printed  dials
  33. 33. Prototyping  -­‐  Trial  with  Prototype
  34. 34. Activity ●  Create  a  step  by  step  plan  how  you  could  create  a   series  of  physical  prototypes  of  increasing  fidelity   for  your  smart  home  hub  (~15  minutes).   ● Discuss  your  plan  with  the  person  sitting  next  to   you  and  make  some  notes.    Give  peer  feedback  (10   minutes).
  35. 35. Testing  Prototypes  with  Users • Planning  the  search   • Conducting  the  Research   • Synthesising  the  Research Based  on:  McElroy,  2017  
  36. 36. Planning  the  Research • What  are  your  assumptions  and  goals?   • Questions  -­‐     • Establishing  questions  e.g.  about  prior  experience   with  software,  questions  about  general  technology   use;   • Feedback  questions  -­‐  used  to  test  if  the  research   goals  are  being  met  and  get  participants  to  interact   with  your  prototype; Based  on:  McElroy,  2017  
  37. 37. Planning  the  Research • Open  session  -­‐  exploratory,  users  can  use  the  product   as  they  see  fit.  Minimal  scaffolding.  Great  for  overall   feedback  on  the  experience  of  a  product.  Requires  a   higher-­‐fidelity  level  of  the  prototype;   • Closed  Session  -­‐  guided  approach.  Users  are  being   prompted  to  complete  specific  tasks  e.g.  based  on  User   flows.    This  requires  you  to  built  vertical  prototypes. Based  on:  McElroy,  2017  
  38. 38. Planning  the  Research • Ask  open-­‐ended  and  non  leading  questions   • Test  questions  with  co-­‐workers   • Ask  users  about  their  experience  with  the  prototype   not  their  opinions  on  how  something  should  be  done   • Don’t  give  too  much  information  away  -­‐  test  users   actions  not  their  words   • You  could  use  a  template  e.g.  to  help  your   structure  your  prototype  evaluation  activities Based  on:  McElroy,  2017  
  39. 39. Conducting  the  Research • Finding  Users  -­‐  friends  and  family  (beware  of  bias),   meet  ups  of  special  interest  groups,  community   organisations,  mailing  lists…   • Sometimes  participation  in  research  can  be  incentivised   e.g.  gift  cards,  vouchers     • Make  sure  your  personas  are  covered   • New  services  that  help  with  user  testing  e.g.  can  be  used  but  normally  require   higher  fidelity  prototypes Based  on:  McElroy,  2017  
  40. 40. Conducting  the  Research • Prepare  all  the  materials  e.g.  participant  information  sheet,   consent  forms   • Test  you  means  of  recording  (e.g.  audio,  video)  and  decide   how  you  (or  someone  else)  will  take  notes   • Assign  time  slots  for  each  participant   • Be  observant  and  look  also  for  non-­‐verbal  clues   • Stay  neutral  (avoid  verbal  confirmations  if  a  user  is  doing     things  in  a  “correct  way”)   • 4-­‐8  testers  per  prototype  as  rule  of  thumb,  more  if  you   have  multiple  personas  to  test Based  on:  McElroy,  2017  
  41. 41. Synthesising  the  Research • Organise  your  notes  e.g  post-­‐its,  lists   • Group  similar  ideas  or  patterns  into  categories   • Write  out  insights  (good  and  bad)  for  each  category  as   indication  for  issues  and  successes   • Think  about  different  solutions  for  encountered  issues   such  as  alternative  user  flows,  different  labelling  etc.   • Draw  up  recommendations  for  the  next  round  of   prototyping Based  on:  McElroy,  2017  
  42. 42. Synthesising  the  Research • Prioritise  your  recommendations   • Document  design  decisions  and  use  user  quotes  or   anecdotes  to  support  these  decisions   • Present  your  findings  to  the  wider  team  and  the   different  stakeholders  were  appropriate   • Integrate  your  prototyping  activities  with  agile   methods  e.g.  sprint  cycles Based  on:  McElroy,  2017  
  43. 43. PrimerPrototyping  Ambient  Experiences • Marshmallow  Laser  Feast  Collective   • Into  the  Forest   • Dive  into  the  eye  of  the  animal
  44. 44. Session  Summary •We  discussed  design  thinking  and  why  prototyping   is  an  important  aspect  of  design  thinking;   •We  discussed  different  fidelity  levels  of  prototypes   and  their  application  in  digital  and  physical   products;   •We  planned  a  prototyping  research  activity  to   apply  what  we  have  learned  in  the  lecture;   •We  analysed  the  process  of  planning,  conducting   and  synthesising  research  with  prototypes
  45. 45. • Prototyping  for  Designers:  Developing  the  Best   Digital  and  Physical  Products  (McElroy,  2017)   •The  User  Experience  Team  of  One  (Buley,  2013)   •Designing  Interactive  Systems  (Benyon,  2014)     •Bill  Buxton  –  Sketches  vs.  Prototypes   ● Research  Paper  Prototypes  and  Stakeholders Additional  Resources