ami2013 tutorial contextual experience prototyping

96
Human Computer Interaction & Usability Unit http://icts.sbg.ac.at Thomas Grill mailto:[email protected] 03.12.2013 Contextual Experience Prototyping Tutorial at AMI 2013

Upload: tom-grill

Post on 27-Jan-2015

114 views

Category:

Technology


3 download

DESCRIPTION

A tutorial about what makes an experience prototype in comparison to normal prototyping. Further we elaborated some examples and prototyped them with a tool we developed. The Contextual Interaction Framework. http://cif.hciunit.org

TRANSCRIPT

Page 1: Ami2013 Tutorial Contextual Experience Prototyping

Human Computer Interaction & Usability Unit http://icts.sbg.ac.at

Thomas Grill mailto:[email protected]

03.12.2013

Contextual Experience Prototyping

Tutorial at AMI 2013

Page 2: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Contextual Experience Prototyping

• The ICT&S Center !

! Research Center at the !!!!

! approx. 40 interdisciplinary researchers

! located in the center ! of Salzburg

!2

Page 3: Ami2013 Tutorial Contextual Experience Prototyping
Page 4: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Agenda

• 14-15:30 (Contextual) Experience Prototyping • 15:30-16:00 Coffee Break • 16:00-17:30 Prototyping the Experience …

!4

Page 5: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102!5… workers man the Motorola smartphone plant in Fort Worth, Texas. U.S. factories…. source: http://www.salon.com/

What is the experience?

What is the context?

prototyping UX …

Page 6: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102!6

What is the context? noise

coworkers

supervisors

tasks

room

light

temperature

machines

time pressure

clothingwork day

materials

Page 7: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

t

!7

What is the experience?emotions

trust safety

fun

happiness

anger anger

Page 8: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

im

!8

What is the experience?

What is the context?

cartraffic jam

mobile phone

safety

safety

angerboredness

regulations/law

Page 9: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Kids experiences …

Maypole Project !

Goal: ! Create prototypes that

would give children an experience as close as possible to that evoked by the final solution

! Nokia built working sets of picture communicators that the design team was able to distribute to children who could take them away and play with them for days at a time

!9

communication

mobile contextemotions

fun

social

Page 10: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

What is a prototype?

!10

pro-to-type n.

1. An original type, form, or instance serving as a basis or standard for later stages.

2. 2. An original, full-scale, and usually working model of a new product or new version of an existing product. 3. An early, typical example

[http://www.dictionary.com; accessed January 13, 2004]

“ ‘Prototyping’ is externalizing and making concrete a design idea for the purpose of evaluation”

Bill Verplank, 1992

Page 11: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

What is a prototype?

!11

Page 12: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Goals …

!12

visualising …

for evaluation purposes

communicating …

iterating …

Page 13: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Da Vinci’s flying machine …

!13

Page 14: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Visualisation …

• http://www.engadget.com/2013/05/15/visualized-google-glass-prototypes/

!14

Page 15: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Service prototype

• The aim is verifying what happens when some external factors interfere during the service delivery, factors that it’s not possible to verify during the preceding tests in the laboratory but that have a great impact on the user perception and experience.

!15

The service prototype is a tool for

testing the service by observing the interaction of the user with a

prototype of the service put in the place, situation and condition

where the service will actually exist.

!

(2007) Dan Saffer, Designing for Interaction. Creating Smart Applications and Clever Devices, New Riders Book.

Page 16: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

The process …

!16

Plan1 Develop Task Flows2

STEP

PH

AS

E

Specification2PHASE Choose a Methodch 75

STEP

Validate the Designch 1210

STEP

Deploy the Designch 1311

STEP

3 Create the Designch 108

STEP

Design

ch 4

PH

AS

E

4Results

PH

AS

E

Choose a Toolch 86

Define Content and Fidelitych 53

STEP

STEP

Determine Characteristicsch 64

STEP

Select Design Criteriach 97

STEP

Review the Designch 119

STEP

Verify Requirements1

STEP

ch 3

The Effective Prototyping Process

CHAPTER

Arnowitz, J., Arent, M., and Berger, N. Effective Prototyping for Software Makers. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 2006.

Prototyping requirements to evaluate requirements …

Helps understanding the context and scenarios …

Low vs. high fidelity

Audience, stage, speed, longevity, expression, style, medium, fidelityCard sorting, wireframing, storyboards, paper prototypes, digital prototypes, video prototypes, Wizard of Oz, Coding

Map method to tool …

Visual design guidelines, usability guidelines

Build the prototype …

Evaluate, validate and iterate the prototype …

Internal review of the prototype …

Your prototype is ready …

Page 17: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping

• The experience prototype allows designers to show and test the solution through an active participation of the users.

!17

What about the experience?

Page 18: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102!18

Keeping Connected Design Challenge Develop: Core activity sheet

Experience prototypingWhat is experience prototyping?

Experience prototyping is a method for testing new service ideas and designs. They are used to show what the experience will be like and help to test and develop parts of the solution.

Prototypes could be a physical model of a VSHFL¿F�WRXFKSRLQW��D�VNHWFK�RI�D�VLJQ�RU�D roleplay to focus on the service’s interactions. Prototypes should focus on the service’s most important or unusual touchpoints.

Prototypes do not need to look beautiful or take a long time to make. It is more important to create something quickly, test it and then improve the design.

Useful tips

Don’t be afraid to use your imagination; prototypes don’t need to work, they are just props to help explain what the experience might be like. Remember that prototypes are only created to help you improve, so don’t worry if it doesn’t VHHP�WR�ZRUN�¿UVW�WLPH�URXQG�

1 Look at your service blueprint and think

about which touchpoints might need protoyping.

2 Decide how you are going to prototype it;

you could make a model or act out an interaction.

3 Take photographs or video so that you can

review the prototype. Does the prototype meet the service principles you created in the discover stage? If not, how can you change it to meet them?

4 Ask your users to feedback on the

prototype. Remember to get the opinion of older adults and younger people.

5 Create another version of the

prototype with the improvements based on your users’ feedback...

http://hvcollege.com

What is the difference?

Is this experience

prototyping?

Page 19: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

• The experience prototype allows designers to show and test the solution through an active participation of the users. !

! it is NOT about the creation of a formalized toolkit or a set of techniques

!! it is about developing

an attitude and language to solve design problems

Experience Prototyping

!19

The experience prototype

is a simulation of the service experience that foresees some of its

performances through the use of the specific physical touch-

points involved.

(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.

Page 20: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping

• Creating a prototype ! a design ! an interactive system ! within a specific context of use !

• The design criteria ! product requirements? ! usability criteria? !

! UX factors ! towards an

“integrated experience”

!20

aware

aware

Designer

Audience

prototype

Product(Charachteristics of the

product)

Context of use(Characteristics of the

context)

User Requirements(Characteristics of target

users)

prototype

prototype

Stake holdersUsers

Designers

adaptpresentation

Design problem is an integrated experience

Experience Prototyping Traditional Prototyping

prototype

Design problem is shaped by the

product requirements

Page 21: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

UX Factors

!21

Page 22: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping

• Experiencing the prototype !

! Investigate experiences • UX Factors • by means of interviews, focus groups, narrations, diaries, … !

! Examples • Investigate Emotions • Investigate Trust • Investigate the “whole experience”

!22

Customize the communication of design concepts to different audiences

Improve design decisions through (self-)experiencing the integrated experience of design concepts

Design for new contexts (e.g. airplane, cars, rural areas, factories, etc.)

Design for broader spectrum of target users (e.g. children, elderly, people with disability, illiterate people, etc.)

Designer

Design for new forms and materials of interaction (e.g. tangible, gesture-based, dialog-based, bendable, etc.)

Experience Prototyping

Challenges

Purpose

Page 23: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping

• How does an experience prototype influence the experience? !

• What influences the prototype?

! Experience requirements ! Designers ! Fidelity of the prototype

!23

Factors definingexperience

quality

Designer's empathy for audience

Designer's empathy for situation

Experience-requirements

Analysis through e.g. :contextual observations, user testing or participative design methods

Degree of context and explanations

Appropriate framing of experience

Fidelity of prototype Progress in realization

Page 24: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototypes

!24

Page 25: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototypes

• Fidelity: High • Method: Video Prototyping • Context: Mobile Context, Social Context !

• Experiences - UX Factors: ! Social (Reputation, Friends, Meeting new people) ! Emotions ! Perceived Usefulness

!25

Page 26: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience prototype

!26

any representation, in any medium, that is

designed to enhance the understanding, exploration or communication of what it might be like

to engage with the product, space, or system a company is

designing.

(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.

• The experience prototype allows designers to show and test the solution through an active participation of the users.

• Experience PrototypeStreetFlyer Flying Sensation Experience Prototype

Page 27: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

The story

I was a frequent pedal paddler when I was a kid until I got myself into an accident. After that I have never really found the two wheeled form of transportation to be quite as exciting again. Well, of course, I have been up in the saddle after that, and even gotten myself one of those high end mountain bikes when I was in my twenties, but I didn’t really use it that much. When it got stolen, I never cared to really venture into that territory again. Of course, like every guy, I have been pushed by adrenaline to get myself a motorcycle, but the thought of ending up in one of those accidents again, this time during way higher speeds, makes me want to take the safe route around. However, there are definitely other things out there that have wheels, and that are strikingly similar to biking.

!27

fear, lost excitement ….

value

fearsafety, trust

curious for new things

Page 28: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

What’s the contextual in it?

• Schilit and Theimer (1994) refer to context as location, identities of nearby people and objects, and changes to those objects.

• In a similar definition, Brown, Bovey et al. (1997) define context as location, identities of the people around the user, the time of day, season, temperature, etc.

• Ryan, Pascoe et al. (1998) define context as the user’s location, environment, identity and time.

• Dey and Abowd’s definition (2001) ! Context is any information that can be used to characterize the

situation of an entity. An entity is a person, place, or object that is considered relevant to the interaction between a user and an application, including the user and applications themselves.

!28

Page 29: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping Methods

!29

LowFidelity

HighFidelity

SketchingWireframing

Paper Prototyping

Video PrototypingInteraction Prototyping

Functional Prototype

Semi-Functional Prototype

Bodystorming

Roomstorming Wizard of OzPrototyping

Design Studio

Page 30: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping Methods

• Sketching vs. Prototyping ! The difference lies in the intent. !

• Paper Prototyping, WireFraming, … ! Low Fidelity to explore and communicate ideas ! Iterate !

• DesignStudio ! Bring all stakeholders together ! iterate, sketch, prototype, design …

!• Wizard of Oz Prototyping

! Evaluation vs. Prototyping ! Live prototyping, experience dynamic situations

!30

Page 31: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Some examples …

• PainStation • SpaceTop • Musical Embrace • IllumiRoom • AgeSuit • …

!31

Page 32: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

PainStation

!32

Page 33: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

PainStation - Experience

!33

Game-experience: A simple Pong Game

Page 34: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

PainStation - Experience

!34

Physical experience: how much pain can you stand …

Page 35: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

PainStation - Experience

!35

Physical experience: playing together, community, …

Page 36: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

PainStation

!36

http://vimeo.com/3956100

Page 37: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

SpaceTop

• Experience ! Experiencing alternative interaction ! Emotions (e.g. Fun), perceived trust, perceived utility, … !

!• Context

! Mixed Interaction Environment (3D + real world) ! Augmented Reality

!37

Page 38: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

SpaceTop

!38

Page 39: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Musical Embrace

• Experience ! Social experience ! Bodily interaction ! Touch experience ! Emotions ! Interacting in an

“unorthodox” way !

• Context ! digital game ! real world

!39

http://exertiongameslab.org/projects/musical-embrace

Page 40: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Examples

!40

Page 41: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

AgeSuit

• AgeSuit

!41

http://www.youtube.com/watch?v=PXLVLSgX3Ig

Page 42: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

AgeSuit

• Experiences ! Vision ! Restricted motion ! Reduced muscular strength ! Being old ! Being ill !!

• Context ! Real life ! Getting older ! Living in an aging society ! …

!42

Page 43: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

AgeSuit

!43

Page 44: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

IllumiRoom

• IllumiRoom: Peripheral Projected Illusions for Interactive Experiences

! IllumiRoom augments the area surrounding a television screen with projected visualizations to enhance the traditional living room entertainment experience.

! Jones, B. R., Benko, H., Ofek, E., and Wilson, A. D. Illumiroom: peripheral projected illusions for interactive experiences. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (2013), ACM, pp. 869–878.

!44

http://www.youtube.com/watch?v=sJ4hWa6y710

Page 45: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

Illumiroom

!45

Page 46: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

and many more …

• Joggobot ! Graether, E., Mueller, F. 2012. Joggobot: A

Flying Companion as Flying Companion. CHI 2012. Interactivity.

!!!!!!!

• and many more …

!46

Page 47: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Experience Prototyping at the ICT&S Center

!47

Factory Context

Automotive Context

Experience Research

Page 48: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Factory

• Factory Mid/Fi Simulation !

! Performance ! Emotions ! Perception of alerting modes

!48

Page 49: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Factory

• Factory Mid/Fi Simulation !

! Performance ! Emotions ! Perception of alerting modes

!49

Page 50: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Factory

!50

Page 51: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Factory

• Levels of Fidelity • Multimodal feedback experiences

!51

Page 52: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Mobile Navigation

!52

• CIF running on a Laptop • Human Wizard uses ConWIZ

! Control prototype ! Control simulation of

environmental parameters !

• Evaluation of ! navigation commands ! usability of mobile wizard

!52

[1] Thomas Grill, Ondrej Polacek, Manfred Tscheligi. Conwiz: A tool supporting contextual wizard of oz simulation. Proc. of MUM 2012. ACM, 2012.

ConWiz - Mobile Wizard Evaluation

Page 53: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Digital Bookshelf

• Hi/Fi Interaction Prototype !

! Gesture based real world interaction ! Experiencing digital information

!53

Page 54: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Digital Bookshelf

!54

Page 55: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102Human Computer Interaction & Usability Unit

http://www.icts.sbg.ac.at/Steven Greenberg

LOLLio

Pump

Liquid

Sensors

Page 56: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102Human Computer Interaction & Usability Unit

http://www.icts.sbg.ac.at/

Page 57: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

GhostCatcher Game

Page 58: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

RainbowBalance Game

Page 59: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Turning Display

• Mid/Fi Experience Prototype !

! Content rotation apart from a numerical speed representation ! Effects of steering wheel display on visual fatigue ! Effects under real driving conditionsContent rotation apart from a

numerical speed representation ! Effects of steering wheel display on visual fatigue ! Effects under real driving conditions

!59

Page 60: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: Turning Display

!60

Page 61: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102

Example: CarTeam

!61

Page 62: Ami2013 Tutorial Contextual Experience Prototyping

1

● Experience Prototyping - Contextual Experience Prototyping / 102!62

Intentionally left blanktime for a break …

Page 63: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

CIF Tutorial Putting hands on Contextual Experience Prototyping

• The CIF Tutorial shall provide the participants with insights about

! targeting experiences when prototyping

! the role of context !

! usage of tools for contextual experience prototyping by example of the Contextual Interaction Framework

• controlling and measuring the environment

• studying experiences • supporting the researcher

!63

Page 64: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

The Contextual Interaction Framework

!64

Page 65: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Motivation

• Conduct user studies in the (simulated) target context ! Analyze the interplay of user interaction and selected

context parameters ! Change selected context parameters and adapt

interactive systems (following the ubiquitous computing approach) to evaluate changes in user behavior !

• Rapid prototyping ! Speed up the development and configuration of interactive systems

and the simulated context in which they are applied. ! Reusing existing software components

!65

Page 66: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

OSGi – Open Services Gateway initiative

• Multiplatform (based on Java) • Modularization using OSGi (Open Services Gateway initiative)

! Dynamic Module System: • Enables configuration at runtime via bundles (plugin-like concept): load

and unload, start and stop

! Exchange data between modules via services that provide predefined data types !

! Configuration of the data flow using the wiring concept

!66

Page 67: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

What can the Contextual Interaction Framework do for us?

• Connect ! measurement devices (sensors) ! interaction devices (e.g. Wii, Kinekt) ! actuators (e.g. switches, audio)

!• Provide a framework to dynamically

! link the data measured or sensed to functionality (e.g. logging of button presses, calculate activity level of a user)

! Set states of actuators based on manual switches or other sensor data (e.g. switch a fan on if the user opens a window in a virtual reality simulation)

! Compute and calculate states and data based on user activities • Provide us with an integrated environment for conducting contextual UX studies

!67

Page 68: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

CIF - Basic structure

!68

Interaction Framework

Wizard FrameworkSim. Control

ModuleReal World

Control Module

- start, stop simulation- set scenes- set parameters of objects

- control the behaviour of real world objects through communication with the interaction platform

integrates & controls

controls

Wizard of Oz Communication Protocol

Visualization Framework

Page 69: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

CIF - Basic structure

!69

Actuator X

Actuator X

Interaction Framework

Sensor 1

Sensor 2

Sensor X

Visualization Framework

defines scenario

Visualisation Audio Sim. Ext. Interf. Sim.

WOz protocol

Interaction/State Analyzer

PlugIns

Control Module

Feedback Generator

PlugIns

Screen X ...

Tracking System X input

output - feedbackAudio X

Control Module

represented through output devicesi.e. screens, speaker and other actuators

Logging Platform

Scenario Implementation

observation/evaluation

Object libraryAgent libraryScene library

Wizard FrameworkSim. Control

ModuleReal World

Control Module

logging may enhance usability evaluation and analysis of the particular data

- start, stop simulation- set scenes- set parameters of objects

- control the behaviour of real world objects through communication with the interaction platform

Page 70: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

CIF Study Editor - GUI Concept

!70

- + IFW Study Editor: OG Study Setup

Producers / SensorsRFID ReaderDistancesensorMicrophone

Bundle Library

Consumers / ActuatorsConverters

DB AnalyzerDatatype Converter

XYZ...

System bundles

Bundle name Status

All Active

started

started

Library Inspector Align Diagram Zoom in Zoom out Zoom fit

Distance Sensor

float float

Activity Meter

floatstringfloatint

DB Logger ⚙

Camera

raw image raw image

Head Motion Analyser

stringstringfloatint

DB Logger ⚙

wzTypewzTypewzType

Wizard

wzType

wzType

Wizard Data Converter

stringbool

int

bool

Speaker

Light Sensor

float

wzType

Wizard Data Converterstringboolfloat

Page 71: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

CIF Study Editor

!71

Page 72: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

The Contextual Interaction Framework HandsOn

!72

Page 73: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping a game-experience

• Starting point: A pong game

!73

What experience do we want to design for?

Which context is relevant for us when designing an experience prototype?

Page 74: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping a game-experience

• Starting point: A pong game !

• Context: ! A pong game ! Playing pong with another person ! alternative interaction modalities

and alternative devices !

• Experience: ! Haptic experiences (sliding vs.

touching vs. pressure vs. …) ! Social experiences ! Body-based experiences ! …

!74

Page 75: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping a game-experience

• The prototyping experience … !

! Using sensors and actuators • Arduinos (Arduino Library) • Phidgets (Slider, Poti -> testing multiple modes) • Android Connectivity Layer based on ConWIZ protocol • Wii Controller (Controller for Pong) • Connecting Actuators • e.g. Light (Led or 220V)

!75

Arduino CIF LibraryCIF Phidget BundleAndroidKinekt, Wii, …

Page 76: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping a game-experience

• Design Goals & Guidelines

! Focus on experiences: ! Social experiences ! Fun ! Immersion !

• Prototyping the experience of a contextual pong game

!76

CIF Study Editor

Page 77: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping a game-experience

• Discussion: !

! What is the Experience Prototyping here? ! What is different? ! Did we experience a different prototyping experience? ! Did we reflect such in the prototype?

!77

Page 78: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

The Contextual Wizard of Oz

• Connecting Context and Wizard of Oz • Rapid Prototyping

! Simulation ! Observation ! Study support

• Configurable • Mobile

!78

Mobile Wizard

Contextual Interaction Framework

WOz Protocol

Context Simulation WebServer

FileServerDB Server

Ext. Context Simulation

(3D App., etc.)

Mobile Wizard

ConWIZ Server

Study Configuration

WOz Protocol

Network Communication

Wizard UI

TCP

Scenario Configuration / Study Editor

CIF CoreUtilities

TCP

TCP

Page 79: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

ConWIZ Datatypes supported

• Supports ! basic datatypes ! complex datatypes

• Extensible • No client-side configuration needed

!79

Page 80: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102● - Wizard of Oz - ConWiz Protocol - Applying the ConWiz / 32

ConWiz Protocol

!80

ConWiz Server ConWiz Client

Authentification

Connect, Disconnect, Ping, Status, ...

Request data

UPDATE

UPDATE

GET

SET

Update data

Page 81: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102● - Wizard of Oz - ConWiz Protocol - Applying the ConWiz / 32

ConWiz Protocol - Mobile Wizard

!81

Authentification

Monitor data

Configure Scenarios,

Control/Manipulate

data

ACK

REG

ACK

UPDATE

ACK

SET

Page 82: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

2

● - Wizard of Oz - ConWiz Protocol - Applying the ConWiz / 32

ConWiz Protocol: Authentification Authentication

ConWiz ServerConWiz Client

CONTROL(CONNECT)

ACK

CONTROL(PING)

ACK

CONTROL(DISCONNECT)

ACK

• Visualization Framework connects to Server

! Connect - ACK • Keep alive signal

! Ping - ACK • Disconnect

! Disconnect - ACK

!82

Page 83: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

2

● - Wizard of Oz - ConWiz Protocol - Applying the ConWiz / 32

ConWiz Protocol: Authentification

!83

Page 84: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

2

● - Wizard of Oz - ConWiz Protocol - Applying the ConWiz / 32

ConWiz Protocol: Transitive Commands

!84

ConWiz Scenario: Authentication, Configuration, Control

ConWiz ServerConWiz Client

CONTR(CONNECT)

ACK

CONTROL(PING)

ACK

CONTROL(DISCONNECT)

ACK

register()

3D Visualization

CONTR(CONNECT)

ACK

SET(SCENARIOS)ACKSET(SCENARIOS)

ACK

UPDATE(WzObject)

ACKUPDATE(WzObject)

ACK

register()

CONTROL(DISCONNECT)

ACK

Page 85: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

A Wizard of Oz Scenario

• A configured scenario will be loaded ! Based on the configuration the wizard server is configured

!• The CIF has the task to log the incoming commands for evaluation purposes

• Further a CIF bundle provides a visualization to experience the particular Wizard of Oz commands

!85

Page 86: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping in the real world context

• Starting point !

!86

What experience do we want to design for?

Which context is relevant for us when designing an experience prototype?

Page 87: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping in the real world context

• Starting point ! Interaction is usually done in one location. ! Performing dislocated interaction implies a number of experiences

based on the type, medium, feedback involved ! Experiencing colloborative interaction !

! Experiences done while interacting dislocated, ad-hoc, in a real-world context come up with unpredictable implications !

! The context of interaction is defined by • The availability of a controller • Intuitiveness and feedback • the perception of the human

with respect to his experiences

!87

Page 88: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping in the real world context

• The prototyping experience … !

! Using mobile devices • Phones, Tablets • Ambient displays !

! Sensors and actuators • Accellerometer • Light • Vibra • Location services • Display • …

!88

Page 89: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping the ambient …

• Android Motion Controller • CIF

! Ambient Color Visualisation & Motion ! Communication

• Multiple devices ! cooperate & conquer

• Visual experience • Emotion - fun, mood, vibes, …

!89

Page 90: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Prototyping the ambient …

• Discussion: !

! What is the Experience Prototyping here? ! What is different? ! The context? ! Did we experience a different prototyping experience? ! Did we reflect such in the prototype?

!90

Page 91: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Lessons learned

• Focusing on experiences when prototyping is the key issue to a good UX !

• Thinking about the experiences I want to create with a prototype effects the design process !

• Tools like the Contextual Interaction Framework allow to quickly and dynamically create real-world prototypes that regard !

! (user) experiences ! in a specific context ! using particular contextual information !

• It is not about designing for the user but creating experiences for the audience …

!91

Page 92: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

Feedback & Discussion

!92

?

Page 93: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102● / 23

Contextual Interaction Framework

• Java based multi-platform enabled framework

• OSGi Equinox !

• Available for download as !

! Developer Library ! Standalone version

• Starts with CIF Study editor ! Mobile Android App

!• Feel free to contact me for a pre-version

! it shall be available at the beginning of 2014 as an open source framework for allowing to conduct

!93

Page 94: Ami2013 Tutorial Contextual Experience Prototyping

2

● Experience Prototyping - Contextual Experience Prototyping / 102

• http://cif.hciunit.org !

• Many thank’s to !

! Martin Wuchse ! Michael Hummer ! Ondrej Polacek !

! for contributing to the Contextual Interaction Framework

!94

Page 95: Ami2013 Tutorial Contextual Experience Prototyping

● Experience Prototyping - Contextual Experience Prototyping / 102

References

• Buchenau, M., and Suri, J. F. Experience prototyping. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques (2000), ACM, pp. 424–433.

• Arnowitz, J., Arent, M., and Berger, N. Effective Prototyping for Software Makers. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA, 2006.

• Buxton, B. Sketching User Experiences: Getting the Design Right and the Right Design, first ed. Morgan Kaufmann, March 2007.

• Hassenzahl, M., Lai-Chong Law, E., and Hvannberg, E. User experience - towards a unified view. In Proceedings of the The Second COST294-MAUSE International Open Workshop: User Experience- Towards a Unified View (2006), E. Law, E. Hvannberg, and M. Hassenzahl, Eds., pp. 1–3.

• Henry Dreyfuss. Designing for People. New York: Allworth Press, 1972

!95

Page 96: Ami2013 Tutorial Contextual Experience Prototyping

* Contact

Human Computer Interaction & Usability Unit [email protected]

HCI & Usability Unit ICT&S Center, University of Salzburg Sigmund-Haffner Gasse 18 !5020 Salzburg, Austria [email protected] !!!Dr. Thomas Grill [email protected]