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

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..

15. Introduction

20. “The product is no longer the basis
of value.The experience is.”
Venkat Ramaswamy
The Future of Competition.

21. Experience Economy

22. experiences
services
products
components
Value
Sony CSL © 2004
Gilmore + Pine: Experience Economy
Function
Emotion

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

33. Using the N-gage

34. SideTalking
 www.sidetalkin.com

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

39.  Artist/Engineer:
 concerned with what’s on the screen

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

45. HCI and Interaction Design

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

48. Interaction Design Process

49. Interaction Design Process
MHIT 602
MHIT 603

50. Design Case Study

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.

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

58. DESIGNING
FORTHEVISITOR

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

64. STORYBOARD

67. ITERATIVE DESIGN

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

74. FINAL CONCEPT
DESIGN

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