SlideShare a Scribd company logo
1 of 77
Download to read offline
MHIT 603: Introduction to
Interaction Design
July 14th 2014
Mark Billinghurst
HIT Lab NZ
University of Canterbury
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
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
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
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
MHIT 603
  Lecturers: Mark Billinghurst, Adrian Clark
  Material
  Wireframes
  Video prototyping
  Interactive Prototyping
  Processing/Openframeworks
  Arduino/Hardware prototyping
  Fabrication/3D printing
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%
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
Resources Provided
  Workspace/Project Space
  Own deskspace
  IT Support
  Software
  Development tools, design applications
  Hardware
  3D printer, hardware lab, raw materials
  Kitchen space
TextBooks
  MHIT 602:
  Interaction Design: Beyond
Human-Computer Interaction -
Helen Sharp, Yvonne Rogers,
Jenny Preece
  MHIT 603:
  Programming Interactivity –
James Noble
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
Current Funded Thesis Projects
  Interactive science exhibits
  Mobile crop measuring application
  Wearable interface for earthmovers
  Interactive colouring books
  Fork life driver assistance
  Etc..
Introduction
“The product is no longer the basis
of value.The experience is.”
Venkat Ramaswamy
The Future of Competition.
Experience Economy
experiences



services



products



components
Value
Sony CSL © 2004
Gilmore + Pine: Experience Economy
Function
Emotion
Good Experience Design
  Reactrix
  Top down projection
  Camera based input
  Reactive Graphics
  No instructions
  No training
Improve the experience of picking up rubbish?
World’s Deepest Rubbish Bin
  The Fun Theory – http://www.funtheory.com
Improve the experience of walking up stairs?
Musical Stairs
  The Fun Theory – http://www.funtheory.com
Using the N-gage
SideTalking
  www.sidetalkin.com
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
  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
 Artist/Engineer:
 concerned with what’s on the screen
  Interface Designer:
 concerned with person in front of the screen
 often takes static view of interface
  Interaction Designer
  concerned with engaging with technology over time
  Creating two way conversation with machine
HCI and Interaction Design
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
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
Interaction Design Process
Interaction Design Process
MHIT 602
MHIT 603
Design Case Study
ITERATIVE DESIGN PROCESS
Design	
  
(redesign)	
  
Prototype	
  
Test	
  Design	
  with	
  Users	
  
(Note	
  problems)	
  
Evaluate	
  
(Fix	
  Issues)	
  
MOBILE AUGMENTED
REALITY FOR SPATIAL
NAVIGATION
Sharon Brosnan
0651869
Bachelor of Science in Digital Media Design
BUNRATTY FOLK
PARKSharon Brosnan
0651869
Bachelor of Science in Digital Media Design
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.
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
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
DESIGNING
FORTHEVISITOR
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.
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
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
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
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
STORYBOARD
ITERATIVE DESIGN
ITERATIVE DESIGN PROCESS
Prototyping and User Testing
 Low Fidelity Prototyping
  Sketches
  Paper Prototyping
  Post-It Prototyping
  PowerPoint Prototyping
 High Fidelity Prototyping
  Wikitude
INITIAL SKETCHES
Pros:	
  
• 	
  Good	
  for	
  idea	
  genera>on	
  
• 	
  Cheap	
  
• 	
  Concepts	
  seem	
  feasible	
  
	
  
	
  
Cons:	
  
• 	
  Not	
  great	
  feedback	
  gained	
  
• 	
  Photoshop	
  not	
  fast	
  enough	
  for	
  
making	
  changes	
  
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	
  
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	
  
	
  
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
WIKITUDE
User Testing
 Application well received
 Understandable
 Participants playful with the technology
FINAL CONCEPT
DESIGN
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
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	
  
More Information
•  Mark Billinghurst
–  mark.billinghurst@hitlabnz.org
•  Website
–  www.hitlabnz.org

More Related Content

What's hot

COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysCOMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysMark Billinghurst
 
COMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsCOMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsMark Billinghurst
 
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityCOMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityMark Billinghurst
 
COMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeCOMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeMark Billinghurst
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsMark Billinghurst
 
COMP 4010 - Lecture 3 VR Systems
COMP 4010 - Lecture 3 VR SystemsCOMP 4010 - Lecture 3 VR Systems
COMP 4010 - Lecture 3 VR SystemsMark Billinghurst
 
Comp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsComp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsMark Billinghurst
 
COMP 4010 - Lecture11 - AR Applications
COMP 4010 - Lecture11 - AR ApplicationsCOMP 4010 - Lecture11 - AR Applications
COMP 4010 - Lecture11 - AR ApplicationsMark Billinghurst
 
COMP 4010 Lecture7 3D User Interfaces for Virtual Reality
COMP 4010 Lecture7 3D User Interfaces for Virtual RealityCOMP 4010 Lecture7 3D User Interfaces for Virtual Reality
COMP 4010 Lecture7 3D User Interfaces for Virtual RealityMark Billinghurst
 
Future Directions for Augmented Reality
Future Directions for Augmented RealityFuture Directions for Augmented Reality
Future Directions for Augmented RealityMark Billinghurst
 
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityCOMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityMark Billinghurst
 
COMP 4010 - Lecture 4: 3D User Interfaces
COMP 4010 - Lecture 4: 3D User InterfacesCOMP 4010 - Lecture 4: 3D User Interfaces
COMP 4010 - Lecture 4: 3D User InterfacesMark Billinghurst
 
COMP 4010 Lecture9 AR Interaction
COMP 4010 Lecture9 AR InteractionCOMP 4010 Lecture9 AR Interaction
COMP 4010 Lecture9 AR InteractionMark Billinghurst
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsMark Billinghurst
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityMark Billinghurst
 
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMark Billinghurst
 
COMP 4010: Lecture 4 - 3D User Interfaces for VR
COMP 4010: Lecture 4 - 3D User Interfaces for VRCOMP 4010: Lecture 4 - 3D User Interfaces for VR
COMP 4010: Lecture 4 - 3D User Interfaces for VRMark Billinghurst
 

What's hot (20)

COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic DisplaysCOMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
 
COMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR ApplicationsCOMP 4010: Lecture 6 Example VR Applications
COMP 4010: Lecture 6 Example VR Applications
 
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityCOMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
 
Augmented TelePortation
Augmented TelePortationAugmented TelePortation
Augmented TelePortation
 
Designing Usable Interface
Designing Usable InterfaceDesigning Usable Interface
Designing Usable Interface
 
COMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and PrototypeCOMP 4026 Lecture2: Design and Prototype
COMP 4026 Lecture2: Design and Prototype
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR Applications
 
COMP 4010 - Lecture 3 VR Systems
COMP 4010 - Lecture 3 VR SystemsCOMP 4010 - Lecture 3 VR Systems
COMP 4010 - Lecture 3 VR Systems
 
Comp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research DirectionsComp4010 Lecture12 Research Directions
Comp4010 Lecture12 Research Directions
 
From Interaction to Empathy
From Interaction to EmpathyFrom Interaction to Empathy
From Interaction to Empathy
 
COMP 4010 - Lecture11 - AR Applications
COMP 4010 - Lecture11 - AR ApplicationsCOMP 4010 - Lecture11 - AR Applications
COMP 4010 - Lecture11 - AR Applications
 
COMP 4010 Lecture7 3D User Interfaces for Virtual Reality
COMP 4010 Lecture7 3D User Interfaces for Virtual RealityCOMP 4010 Lecture7 3D User Interfaces for Virtual Reality
COMP 4010 Lecture7 3D User Interfaces for Virtual Reality
 
Future Directions for Augmented Reality
Future Directions for Augmented RealityFuture Directions for Augmented Reality
Future Directions for Augmented Reality
 
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual RealityCOMP 4010: Lecture 5 - Interaction Design for Virtual Reality
COMP 4010: Lecture 5 - Interaction Design for Virtual Reality
 
COMP 4010 - Lecture 4: 3D User Interfaces
COMP 4010 - Lecture 4: 3D User InterfacesCOMP 4010 - Lecture 4: 3D User Interfaces
COMP 4010 - Lecture 4: 3D User Interfaces
 
COMP 4010 Lecture9 AR Interaction
COMP 4010 Lecture9 AR InteractionCOMP 4010 Lecture9 AR Interaction
COMP 4010 Lecture9 AR Interaction
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR Applications
 
Rapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented Reality
 
MHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping Tools
 
COMP 4010: Lecture 4 - 3D User Interfaces for VR
COMP 4010: Lecture 4 - 3D User Interfaces for VRCOMP 4010: Lecture 4 - 3D User Interfaces for VR
COMP 4010: Lecture 4 - 3D User Interfaces for VR
 

Viewers also liked

Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Vivian Motti
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyVivian Motti
 
Human Factors Considerations in the Design of Wearable Devices
Human Factors Considerations in the Design of Wearable DevicesHuman Factors Considerations in the Design of Wearable Devices
Human Factors Considerations in the Design of Wearable DevicesVivian Motti
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Vivian Motti
 
Rapid prototyping for Wearables
Rapid prototyping for WearablesRapid prototyping for Wearables
Rapid prototyping for WearablesMark Billinghurst
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsVivian Motti
 

Viewers also liked (8)

Introduction to Wearables
Introduction to WearablesIntroduction to Wearables
Introduction to Wearables
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and Privacy
 
Human Factors Considerations in the Design of Wearable Devices
Human Factors Considerations in the Design of Wearable DevicesHuman Factors Considerations in the Design of Wearable Devices
Human Factors Considerations in the Design of Wearable Devices
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
 
Systematic Literature Review
Systematic Literature ReviewSystematic Literature Review
Systematic Literature Review
 
Rapid prototyping for Wearables
Rapid prototyping for WearablesRapid prototyping for Wearables
Rapid prototyping for Wearables
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy Concepts
 

Similar to MHIT 603: Introduction to Interaction Design

Kedar Chavan - UX Process.pdf
Kedar Chavan - UX Process.pdfKedar Chavan - UX Process.pdf
Kedar Chavan - UX Process.pdfssuser6609a5
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design WorkshopPatrick McNeil
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMark Billinghurst
 
Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Praneet Koppula
 
The perfect ux designer toolkit
The perfect ux designer toolkitThe perfect ux designer toolkit
The perfect ux designer toolkitcxpartners
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and PrototypingKshitiz Anand
 
Mobility&Udi 2011
Mobility&Udi 2011Mobility&Udi 2011
Mobility&Udi 2011TingRay Chang
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsTunde Ojediran
 
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your Website
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your WebsiteContextual Inquiry: How Ethnographic Research can Impact the UX of Your Website
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your WebsiteRachel Vacek
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionhendrikknoche
 
Using Interaction Design Methods for Creating AR and VR Interfaces
Using Interaction Design Methods for Creating AR and VR InterfacesUsing Interaction Design Methods for Creating AR and VR Interfaces
Using Interaction Design Methods for Creating AR and VR InterfacesMark Billinghurst
 
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...UX STRAT
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panaceaMichael Meikson
 
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)City University London
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resumejyothsna joy
 
Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.Cuneiform Consulting Pvt Ltd.
 
A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...Damon Sanchez
 
TP2 Prototyping process tools and methods
TP2 Prototyping process tools and methodsTP2 Prototyping process tools and methods
TP2 Prototyping process tools and methodsIntelligent_Furniture
 

Similar to MHIT 603: Introduction to Interaction Design (20)

Kedar Chavan - UX Process.pdf
Kedar Chavan - UX Process.pdfKedar Chavan - UX Process.pdf
Kedar Chavan - UX Process.pdf
 
UCIDesign.ppt
UCIDesign.pptUCIDesign.ppt
UCIDesign.ppt
 
Intro to User Centered Design Workshop
Intro to User Centered Design WorkshopIntro to User Centered Design Workshop
Intro to User Centered Design Workshop
 
Audubon's UX portfolio
Audubon's UX portfolioAudubon's UX portfolio
Audubon's UX portfolio
 
MHIT 603: Introduction to Prototyping
MHIT 603: Introduction to PrototypingMHIT 603: Introduction to Prototyping
MHIT 603: Introduction to Prototyping
 
Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...Role of UX Design in Building Products: How I Stopped Designing and Started t...
Role of UX Design in Building Products: How I Stopped Designing and Started t...
 
The perfect ux designer toolkit
The perfect ux designer toolkitThe perfect ux designer toolkit
The perfect ux designer toolkit
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
Mobility&Udi 2011
Mobility&Udi 2011Mobility&Udi 2011
Mobility&Udi 2011
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your Website
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your WebsiteContextual Inquiry: How Ethnographic Research can Impact the UX of Your Website
Contextual Inquiry: How Ethnographic Research can Impact the UX of Your Website
 
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introductionEPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
EPFL - PxS, week 1 - Personal Interaction Studio 2011 introduction
 
Using Interaction Design Methods for Creating AR and VR Interfaces
Using Interaction Design Methods for Creating AR and VR InterfacesUsing Interaction Design Methods for Creating AR and VR Interfaces
Using Interaction Design Methods for Creating AR and VR Interfaces
 
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
UX STRAT USA, Mike Hubler and Tim Klauda, "Changing the Culture of Consumer a...
 
Prototyping is the panacea
Prototyping is the panaceaPrototyping is the panacea
Prototyping is the panacea
 
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)
hcid2011 - Creativity for open spaces - Dr Sara Jones (HCID)
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resume
 
Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.Digital Prototyping Mastery Best Practices & Techniques.
Digital Prototyping Mastery Best Practices & Techniques.
 
A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...A Practical Approach to Great User Adoption User Definition & User Interface ...
A Practical Approach to Great User Adoption User Definition & User Interface ...
 
TP2 Prototyping process tools and methods
TP2 Prototyping process tools and methodsTP2 Prototyping process tools and methods
TP2 Prototyping process tools and methods
 

More from Mark Billinghurst

The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
Future Research Directions for Augmented Reality
Future Research Directions for Augmented RealityFuture Research Directions for Augmented Reality
Future Research Directions for Augmented RealityMark Billinghurst
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesMark Billinghurst
 
Empathic Computing: Delivering the Potential of the Metaverse
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
 
Empathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseEmpathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseMark Billinghurst
 
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationTalk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationMark Billinghurst
 
Empathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseEmpathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseMark Billinghurst
 
2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VRMark Billinghurst
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR SystemsMark Billinghurst
 
Novel Interfaces for AR Systems
Novel Interfaces for AR SystemsNovel Interfaces for AR Systems
Novel Interfaces for AR SystemsMark Billinghurst
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR PrototypingMark Billinghurst
 
2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR InteractionMark Billinghurst
 
2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR TechnologyMark Billinghurst
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: PerceptionMark Billinghurst
 
2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XRMark Billinghurst
 
Empathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsEmpathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsMark Billinghurst
 

More from Mark Billinghurst (20)

The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
Future Research Directions for Augmented Reality
Future Research Directions for Augmented RealityFuture Research Directions for Augmented Reality
Future Research Directions for Augmented Reality
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR Experiences
 
Empathic Computing: Delivering the Potential of the Metaverse
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
 
Empathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the MetaverseEmpathic Computing: Capturing the Potential of the Metaverse
Empathic Computing: Capturing the Potential of the Metaverse
 
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote CollaborationTalk to Me: Using Virtual Avatars to Improve Remote Collaboration
Talk to Me: Using Virtual Avatars to Improve Remote Collaboration
 
Empathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader MetaverseEmpathic Computing: Designing for the Broader Metaverse
Empathic Computing: Designing for the Broader Metaverse
 
2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR2022 COMP 4010 Lecture 7: Introduction to VR
2022 COMP 4010 Lecture 7: Introduction to VR
 
2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems2022 COMP4010 Lecture 6: Designing AR Systems
2022 COMP4010 Lecture 6: Designing AR Systems
 
ISS2022 Keynote
ISS2022 KeynoteISS2022 Keynote
ISS2022 Keynote
 
Novel Interfaces for AR Systems
Novel Interfaces for AR SystemsNovel Interfaces for AR Systems
Novel Interfaces for AR Systems
 
2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping2022 COMP4010 Lecture5: AR Prototyping
2022 COMP4010 Lecture5: AR Prototyping
 
2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction2022 COMP4010 Lecture4: AR Interaction
2022 COMP4010 Lecture4: AR Interaction
 
2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology2022 COMP4010 Lecture3: AR Technology
2022 COMP4010 Lecture3: AR Technology
 
2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception2022 COMP4010 Lecture2: Perception
2022 COMP4010 Lecture2: Perception
 
2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR2022 COMP4010 Lecture1: Introduction to XR
2022 COMP4010 Lecture1: Introduction to XR
 
Empathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive AnalyticsEmpathic Computing and Collaborative Immersive Analytics
Empathic Computing and Collaborative Immersive Analytics
 
Metaverse Learning
Metaverse LearningMetaverse Learning
Metaverse Learning
 

MHIT 603: Introduction to Interaction Design

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