MHIT 603: Introduction to Interaction Design

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

MHIT 603: Introduction to Interaction Design

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

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

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

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
MHIT 602
MHIT 603

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

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.

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

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

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
Beneﬁts

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

ﬁnished
system
will
work

More Information
•  Mark Billinghurst
–  mark.billinghurst@hitlabnz.org
•  Website
–  www.hitlabnz.org

MHIT 603: Introduction to Interaction Design

More Related Content

What's hot (20)

Viewers also liked (8)

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

More from Mark Billinghurst (20)

MHIT 603: Introduction to Interaction Design