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

Valu

e

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 PARK Sharon 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 FOR THE VISITOR

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 PROCESS

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