mhit 603: introduction to interaction design

77
MHIT 603: Introduction to Interaction Design July 14 th 2014 Mark Billinghurst HIT Lab NZ University of Canterbury

Upload: mark-billinghurst

Post on 19-May-2015

336 views

Category:

Documents


4 download

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 2014

TRANSCRIPT

Page 1: MHIT 603: Introduction to Interaction Design

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

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

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

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

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

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

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

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

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

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

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

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
Page 14: MHIT 603: Introduction to Interaction Design
Page 15: MHIT 603: Introduction to Interaction Design

Introduction

Page 16: MHIT 603: Introduction to Interaction Design
Page 17: MHIT 603: Introduction to Interaction Design
Page 18: MHIT 603: Introduction to Interaction Design
Page 19: MHIT 603: Introduction to Interaction Design
Page 20: MHIT 603: Introduction to Interaction Design

“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

Experience Economy

Page 22: MHIT 603: Introduction to Interaction Design

experiences

services

products

components

Valu

e

Sony CSL © 2004

Gilmore + Pine: Experience Economy

Function

Emotion

Page 23: MHIT 603: Introduction to Interaction Design
Page 24: MHIT 603: Introduction to Interaction Design

Good Experience Design

  Reactrix   Top down projection   Camera based input   Reactive Graphics   No instructions   No training

Page 25: MHIT 603: Introduction to Interaction Design

Improve the experience of picking up rubbish?

Page 26: MHIT 603: Introduction to Interaction Design

World’s Deepest Rubbish Bin

  The Fun Theory – http://www.funtheory.com

Page 27: MHIT 603: Introduction to Interaction Design

Improve the experience of walking up stairs?

Page 28: MHIT 603: Introduction to Interaction Design

Musical Stairs

  The Fun Theory – http://www.funtheory.com

Page 29: MHIT 603: Introduction to Interaction Design
Page 30: MHIT 603: Introduction to Interaction Design
Page 31: MHIT 603: Introduction to Interaction Design
Page 32: MHIT 603: Introduction to Interaction Design
Page 33: MHIT 603: Introduction to Interaction Design

Using the N-gage

Page 34: MHIT 603: Introduction to Interaction Design

SideTalking

  www.sidetalkin.com

Page 35: MHIT 603: Introduction to Interaction Design
Page 36: MHIT 603: Introduction to Interaction Design
Page 37: MHIT 603: Introduction to Interaction Design

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

  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

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

Page 40: MHIT 603: Introduction to Interaction Design

  Interface Designer:  concerned with person in front of the screen  often takes static view of interface

Page 41: MHIT 603: Introduction to Interaction Design

  Interaction Designer   concerned with engaging with technology over time  Creating two way conversation with machine

Page 42: MHIT 603: Introduction to Interaction Design
Page 43: MHIT 603: Introduction to Interaction Design
Page 44: MHIT 603: Introduction to Interaction Design
Page 45: MHIT 603: Introduction to Interaction Design

HCI and Interaction Design

Page 46: MHIT 603: Introduction to 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

Page 47: MHIT 603: Introduction to Interaction Design

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

Interaction Design Process

Page 49: MHIT 603: Introduction to Interaction Design

Interaction Design Process

MHIT 602 MHIT 603

Page 50: MHIT 603: Introduction to Interaction Design

Design Case Study

Page 51: MHIT 603: Introduction to Interaction Design

ITERATIVE DESIGN PROCESS

Design  (redesign)  

Prototype  Test  Design  with  Users  

(Note  problems)  Evaluate  (Fix  Issues)  

Page 52: MHIT 603: Introduction to Interaction Design

MOBILE AUGMENTED REALITY FOR SPATIAL

NAVIGATION Sharon Brosnan

0651869 Bachelor of Science in Digital Media Design

Page 53: MHIT 603: Introduction to Interaction Design

BUNRATTY FOLK PARK Sharon Brosnan

0651869 Bachelor of Science in Digital Media Design

Page 54: MHIT 603: Introduction to Interaction 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.

Page 55: MHIT 603: Introduction to Interaction Design
Page 56: MHIT 603: Introduction to Interaction Design

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

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

DESIGNING FOR THE VISITOR

Page 59: MHIT 603: Introduction to Interaction Design

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

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

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

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

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

STORYBOARD

Page 65: MHIT 603: Introduction to Interaction Design
Page 66: MHIT 603: Introduction to Interaction Design
Page 67: MHIT 603: Introduction to Interaction Design

ITERATIVE DESIGN PROCESS

Page 68: MHIT 603: Introduction to Interaction Design

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

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

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

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

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

WIKITUDE

User Testing  Application well received

 Understandable

 Participants playful with the technology

Page 74: MHIT 603: Introduction to Interaction Design

FINAL CONCEPT DESIGN

Page 75: MHIT 603: Introduction to Interaction 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

Page 76: MHIT 603: Introduction to Interaction Design

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  

Page 77: MHIT 603: Introduction to Interaction Design

More Information •  Mark Billinghurst

– [email protected]

•  Website – www.hitlabnz.org