mhit 603: introduction to interaction design
DESCRIPTION
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 2014TRANSCRIPT
![Page 1: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/1.jpg)
MHIT 603: Introduction to Interaction Design
July 14th 2014
Mark Billinghurst HIT Lab NZ
University of Canterbury
![Page 2: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/2.jpg)
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
![Page 3: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/3.jpg)
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
![Page 4: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/4.jpg)
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
![Page 5: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/5.jpg)
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
![Page 6: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/6.jpg)
MHIT 603 Lecturers: Mark Billinghurst, Adrian Clark Material
Wireframes Video prototyping Interactive Prototyping Processing/Openframeworks Arduino/Hardware prototyping Fabrication/3D printing
![Page 7: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/7.jpg)
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%
![Page 8: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/8.jpg)
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
![Page 9: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/9.jpg)
Resources Provided Workspace/Project Space
Own deskspace
IT Support Software
Development tools, design applications
Hardware 3D printer, hardware lab, raw materials
Kitchen space
![Page 10: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/10.jpg)
TextBooks MHIT 602:
Interaction Design: Beyond Human-Computer Interaction - Helen Sharp, Yvonne Rogers, Jenny Preece
MHIT 603: Programming Interactivity –
James Noble
![Page 11: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/11.jpg)
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
![Page 12: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/12.jpg)
Current Funded Thesis Projects Interactive science exhibits Mobile crop measuring application Wearable interface for earthmovers Interactive colouring books Fork life driver assistance Etc..
![Page 13: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/13.jpg)
![Page 14: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/14.jpg)
![Page 15: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/15.jpg)
Introduction
![Page 16: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/16.jpg)
![Page 17: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/17.jpg)
![Page 18: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/18.jpg)
![Page 19: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/19.jpg)
![Page 20: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/20.jpg)
“The product is no longer the basis of value. The experience is.”
Venkat Ramaswamy The Future of Competition.
![Page 21: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/21.jpg)
Experience Economy
![Page 22: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/22.jpg)
experiences
services
products
components
Valu
e
Sony CSL © 2004
Gilmore + Pine: Experience Economy
Function
Emotion
![Page 23: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/23.jpg)
![Page 24: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/24.jpg)
Good Experience Design
Reactrix Top down projection Camera based input Reactive Graphics No instructions No training
![Page 25: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/25.jpg)
Improve the experience of picking up rubbish?
![Page 26: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/26.jpg)
World’s Deepest Rubbish Bin
The Fun Theory – http://www.funtheory.com
![Page 27: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/27.jpg)
Improve the experience of walking up stairs?
![Page 28: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/28.jpg)
Musical Stairs
The Fun Theory – http://www.funtheory.com
![Page 29: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/29.jpg)
![Page 30: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/30.jpg)
![Page 31: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/31.jpg)
![Page 32: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/32.jpg)
![Page 33: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/33.jpg)
Using the N-gage
![Page 34: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/34.jpg)
SideTalking
www.sidetalkin.com
![Page 35: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/35.jpg)
![Page 36: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/36.jpg)
![Page 37: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/37.jpg)
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
![Page 38: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/38.jpg)
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
![Page 39: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/39.jpg)
Artist/Engineer: concerned with what’s on the screen
![Page 40: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/40.jpg)
Interface Designer: concerned with person in front of the screen often takes static view of interface
![Page 41: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/41.jpg)
Interaction Designer concerned with engaging with technology over time Creating two way conversation with machine
![Page 42: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/42.jpg)
![Page 43: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/43.jpg)
![Page 44: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/44.jpg)
![Page 45: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/45.jpg)
HCI and Interaction Design
![Page 46: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/46.jpg)
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
![Page 47: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/47.jpg)
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
![Page 48: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/48.jpg)
Interaction Design Process
![Page 49: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/49.jpg)
Interaction Design Process
MHIT 602 MHIT 603
![Page 50: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/50.jpg)
Design Case Study
![Page 51: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/51.jpg)
ITERATIVE DESIGN PROCESS
Design (redesign)
Prototype Test Design with Users
(Note problems) Evaluate (Fix Issues)
![Page 52: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/52.jpg)
MOBILE AUGMENTED REALITY FOR SPATIAL
NAVIGATION Sharon Brosnan
0651869 Bachelor of Science in Digital Media Design
![Page 53: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/53.jpg)
BUNRATTY FOLK PARK Sharon Brosnan
0651869 Bachelor of Science in Digital Media Design
![Page 54: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/54.jpg)
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.
![Page 55: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/55.jpg)
![Page 56: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/56.jpg)
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
![Page 57: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/57.jpg)
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
![Page 58: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/58.jpg)
DESIGNING FOR THE VISITOR
![Page 59: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/59.jpg)
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.
![Page 60: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/60.jpg)
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
![Page 61: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/61.jpg)
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
![Page 62: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/62.jpg)
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
![Page 63: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/63.jpg)
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
![Page 64: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/64.jpg)
STORYBOARD
![Page 65: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/65.jpg)
![Page 66: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/66.jpg)
![Page 67: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/67.jpg)
ITERATIVE DESIGN PROCESS
![Page 68: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/68.jpg)
ITERATIVE DESIGN PROCESS
Prototyping and User Testing Low Fidelity Prototyping
Sketches Paper Prototyping Post-It Prototyping PowerPoint Prototyping
High Fidelity Prototyping Wikitude
![Page 69: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/69.jpg)
INITIAL SKETCHES Pros: • Good for idea genera>on • Cheap • Concepts seem feasible Cons: • Not great feedback gained • Photoshop not fast enough for making changes
![Page 70: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/70.jpg)
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
![Page 71: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/71.jpg)
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
![Page 72: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/72.jpg)
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
![Page 73: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/73.jpg)
WIKITUDE
User Testing Application well received
Understandable
Participants playful with the technology
![Page 74: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/74.jpg)
FINAL CONCEPT DESIGN
![Page 75: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/75.jpg)
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
![Page 76: MHIT 603: Introduction to Interaction Design](https://reader033.vdocuments.site/reader033/viewer/2022052900/555ae5ebd8b42abe058b45b3/html5/thumbnails/76.jpg)
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