MHIT 603: Introduction to Interaction Design

824 views

Published on

First lecture from the MHIT 603 masters course at the University of Canterbury. The course teaches about Design and Prototyping of Interactive Experiences. This lecture provides an introduction to Interaction Design. Taught by Mark Billinghurst, July 14th 2014

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
824
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MHIT 603: Introduction to Interaction Design

  1. 1. MHIT 603: Introduction to Interaction Design July 14th 2014 Mark Billinghurst HIT Lab NZ University of Canterbury
  2. 2. The HIT Lab NZ MHIT Degree   Master of Human Interface Technology   Teaches Interaction Design through  Lectures  Hands on lab  Group project work  Applied thesis projects with industry
  3. 3. What You Will Learn   How to develop better User Experiences   Interaction Design Process   Discover, design, evaluate   Practical tools for design prototyping   How to work in project teams   How to conduct original research   Working with industry
  4. 4. Courses   MHIT 602: Design and Evaluation (0.125 EFTS)   How to design user experiences   How to evaluate user experiences   MHIT 603: Prototyping (0.125 EFTS)   Rapid prototyping   Developing user experiences   MHIT 690: Thesis (0.75 EFTS)   9 month applied thesis research
  5. 5. MHIT 602   Lecturers: Aga Szostek (Poland), Gun Lee   Material   Introduction to HCI   Context Mapping   User Research Methods   Personas and Scenarios   Sketching Interfaces   Paper Prototyping   Qualitative/Quantitative Evaluation
  6. 6. MHIT 603   Lecturers: Mark Billinghurst, Adrian Clark   Material   Wireframes   Video prototyping   Interactive Prototyping   Processing/Openframeworks   Arduino/Hardware prototyping   Fabrication/3D printing
  7. 7. Class Details   Classes: Mon, Tues, Wed, Thurs   10am – 12pm, Room 105   Friday seminars   Lectures   8 weeks classes, 4 weeks intensive project   Grading   4 x individual assignments @ 10% = 40%   Group Project 1 - 20%   Group Project 2 - 40%
  8. 8. Schedule   Working on projects during lecture weeks   Final project presentation due October 3rd 6 Weeks Lectures 2 Wks Lect. 2 Wks Proj.1 2 Wks Proj. 2 July 14th Aug 25th Sept 8th Sept 22nd
  9. 9. Resources Provided   Workspace/Project Space   Own deskspace   IT Support   Software   Development tools, design applications   Hardware   3D printer, hardware lab, raw materials   Kitchen space
  10. 10. TextBooks   MHIT 602:   Interaction Design: Beyond Human-Computer Interaction - Helen Sharp, Yvonne Rogers, Jenny Preece   MHIT 603:   Programming Interactivity – James Noble
  11. 11. MHIT 690 Thesis   Thesis Research Project   July – October   Engage with company   Write thesis proposal (Due October 10th)   October – April   Full time thesis research   May – June   Writing thesis
  12. 12. Current Funded Thesis Projects   Interactive science exhibits   Mobile crop measuring application   Wearable interface for earthmovers   Interactive colouring books   Fork life driver assistance   Etc..
  13. 13. Introduction
  14. 14. “The product is no longer the basis of value.The experience is.” Venkat Ramaswamy The Future of Competition.
  15. 15. Experience Economy
  16. 16. experiences
 
 services
 
 products
 
 components Value Sony CSL © 2004 Gilmore + Pine: Experience Economy Function Emotion
  17. 17. Good Experience Design   Reactrix   Top down projection   Camera based input   Reactive Graphics   No instructions   No training
  18. 18. Improve the experience of picking up rubbish?
  19. 19. World’s Deepest Rubbish Bin   The Fun Theory – http://www.funtheory.com
  20. 20. Improve the experience of walking up stairs?
  21. 21. Musical Stairs   The Fun Theory – http://www.funtheory.com
  22. 22. Using the N-gage
  23. 23. SideTalking   www.sidetalkin.com
  24. 24. Interaction Design Designing interactive products to support people in their everyday and working lives Preece, J., (2002). Interaction Design   Design of User Experience with Technology
  25. 25.   Interaction Design involves answering three questions:   What do you do? - How do you affect the world?   What do you feel? – What do you sense of the world?   What do you know? – What do you learn? Bill Verplank
  26. 26.  Artist/Engineer:  concerned with what’s on the screen
  27. 27.   Interface Designer:  concerned with person in front of the screen  often takes static view of interface
  28. 28.   Interaction Designer   concerned with engaging with technology over time   Creating two way conversation with machine
  29. 29. HCI and Interaction Design
  30. 30. What is involved in Interaction Design?   It is a process:   a creative activity   a goal-directed problem solving activity -  informed by intended use, target domain, materials, cost   a decision-making activity to balance trade-offs   Adopts a user-centered design approach
  31. 31. 47 www.id-book.com What is a user-centered approach? User-centered approach is based on:   Early focus on users and tasks: directly studying cognitive, behavioral, and attitudinal characteristics   Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed   Iterative design: when problems are found via user testing, fix them and carry out more tests
  32. 32. Interaction Design Process
  33. 33. Interaction Design Process MHIT 602 MHIT 603
  34. 34. Design Case Study
  35. 35. ITERATIVE DESIGN PROCESS Design   (redesign)   Prototype   Test  Design  with  Users   (Note  problems)   Evaluate   (Fix  Issues)  
  36. 36. MOBILE AUGMENTED REALITY FOR SPATIAL NAVIGATION Sharon Brosnan 0651869 Bachelor of Science in Digital Media Design
  37. 37. BUNRATTY FOLK PARKSharon Brosnan 0651869 Bachelor of Science in Digital Media Design
  38. 38. BUNRATTY FOLK PARK  Irish visitor attraction run by Shannon Heritage  19th century life is recreated  Buildings from the mid-west have been relocated to the 26-land surrounding Bunratty Castle  30 buildings are set in a rural or village setting there.
  39. 39. AUGMENTED REALITY In Bunratty Folk Park:  Allows the visitor to point a camera at an exhibit, the device recognises its by it’s location and layers digital information on to the display  3-dimensional virtual objects can be positioned with real ones on display  Leads to dynamic combination of a live camera view and information
  40. 40. NAVIGATIONAL AID Smartphone Platform Most people carry mobile phones and are comfortable with them Ideal Augmented Reality Technology  Global tracking tools  Wireless communication capabilities  Location based computing  Large display for interaction
  41. 41. DESIGNING FORTHEVISITOR
  42. 42. HUMAN CENTRED DESIGN Goal of the Navigational Aid   Easy to use, clear and understandable   Useful to visitors   Creating interaction between the visitor and the aid through the user interface   Engage the visitor To ensure this…   It is necessary to understand the visitor of a navigational aid in Bunratty Folk Park   Identify visitor motives and goals while going through the Folk Park.
  43. 43. HUMAN CENTRED DESIGN Understanding Technology and Related Work   Literature   Similar Technologies   Electronic Tours in Museum Settings   Interactions design in Outdoor Museums Understanding the User over time   Observations   Interviews
  44. 44. HUMAN CENTRED DESIGN Findings  Most visitors do not use the map  Most visitors have mobile phones  Visitors want more information  View the Folk Park at their own pace  Information should be straight to the point  Large social interaction within groups
  45. 45. NEXT STEPS FROM RESEARCH  Define Visitors Goals  Define Functionalities of the Aid  Develop Personas – visitors who use the Aid  Develop Scenarios – how the persona uses the navigational aid in the Folk Park  Draw up Storyboards on scenarios
  46. 46. FUNCTIONALITY  View Options   Camera View   Map View   List View  Sub-Options   Places   Events   Restaurants  Augmented Reality Features for navigation   Text Information   3D Objects   3D Tour Guide   3D Placement of Buildings
  47. 47. STORYBOARD
  48. 48. ITERATIVE DESIGN
  49. 49. ITERATIVE DESIGN PROCESS Prototyping and User Testing  Low Fidelity Prototyping   Sketches   Paper Prototyping   Post-It Prototyping   PowerPoint Prototyping  High Fidelity Prototyping   Wikitude
  50. 50. INITIAL SKETCHES Pros:   •   Good  for  idea  genera>on   •   Cheap   •   Concepts  seem  feasible       Cons:   •   Not  great  feedback  gained   •   Photoshop  not  fast  enough  for   making  changes  
  51. 51. POST IT PROTOTYPING First  Dra6   Camera  View  with  3D   Second  Dra6   Third  Dra6   •   Selec>on   highlighted  in  blue   •   Home  buEon  added   for  easy  naviga>on  to   main  menu  
  52. 52. POWERPOINT PROTOTYPING Benefits     •   Used  for  User  Tes>ng   •   Interac>ve   •   Func>onali>es  work  when  following  the   story  of  Scenario  1   •   Quick   •   Easy  arrangement  of  slides     User  TesCng   •   Par>cipants  found   •   15  minute  sessions  screen  captured   •   ‘Talk  Allowed’  technique  used     •   Notes  taken   •   Post-­‐Interview    
  53. 53. WIKITUDE  Popular augmented reality browser for mobile devices  Mapping  Point of Interest abilities  Multiplatform  Shows the points of interest of Bunratty Folk Park   Markers can be selected in and an information pop-up appears
  54. 54. WIKITUDE User Testing  Application well received  Understandable  Participants playful with the technology
  55. 55. FINAL CONCEPT DESIGN
  56. 56. FINAL DESIGN CONCEPT Key Issues   Fix issues found in previous sessions   Design with guidelines in mind   Appealing to the Mental Model   Icon Design   Aesthetic Design   Colour/Font   Buttons   Look
  57. 57. VIDEO PROTOTYPE   Flexible  tool  for  capturing  the  use   of  an  interface     Elaborate  simula>on  of  how  the   naviga>onal  aid  will  work     Does  not  need  to  be  realis>c  in   every  detail     Gives  a  good  idea  of  how  the   finished  system  will  work  
  58. 58. More Information •  Mark Billinghurst –  mark.billinghurst@hitlabnz.org •  Website –  www.hitlabnz.org

×