e19.2015 representation and interaction design

E19.2015 Representation and Interaction Design

Jan L. Plass & Ruth Schwartz, ECT

1

Overview

Theoretical framework for Interaction DesignCognition and Interaction DesignEmotion and Interaction Design

Design Process

Design Activity

Design Research

2

Interaction Design

Apple – iPhone • http://www.apple.com/iphone

3

Interaction Design

Jeff Han – Multitouch Interaction Research • http://cs.nyu.edu/~jhan/

4

Interaction Design

Collabolla Project site, Interaction Design Project at the Institute of Interaction design, Ivrea, Italy • http://www.collabolla.com/

5

Interaction Design

Fisher-Price Smart Cycle • www.smartcycle.info

6

Interaction Design

Dance Dance Revolution as Experienced by a Librarian • photo by Michael Stephens www.flickr.com/photos/michaelsphotos

7

Interaction Design

Refreshable braille display www.washington.edu/computing

8

Interaction Design

Optical Motion Capture • www.cs.berkeley.edu/b-cam

9

Interaction Design

Theoretical framework for Interaction Design

10

Interaction Design

Practical Relevance: Theoretical basesDual coding (Clark & Paivio)Multimodal theory of memory (Engelkamp & Zimmer)Generative learning (Wittrock)

11

Interaction Design

Dual coding (Clark & Paivio)Information received is “coded” according to modality

verbal and non-verbal

Individuals form connections between mental representationsCognitive activity is the activation of mental representationsInvolving multiple modalities in encoding can result in multiple opportunities for retrieval.

12

Interaction Design

Multimodal theory of memory (Engelkamp & Zimmer, 1994)Cognition occurs on 2 levels: sensory-motor, conceptual

Sensory-motor: input, output; modality-specificConceptual: “a-modal”Both INPUT and OUTPUT influence codingEncoding in different modalities effective ONLY if conceptual processes are also involved.

13

Interaction Design

Generative learning (Wittrock)Focus is not on the environment or on instruction, but on what the learner doesFor meaningful learning to occur, learner must create relationships

among instructional conceptsbetween concepts and prior experience

Generating examples, pictures, metaphors, etc. helps learners to generate these critical connections

14

Interaction Design

Functional Model of Learning (Wittrock)Learning processes–attentionMotivational processes–attribution and interestsKnowledge creation processes–preconceptions, beliefsGeneration–analogies, metaphors, summaries

Interaction Design can facilitate all of these levels

15

Interaction Design

Example: Instructional AnimationsAttention-guiding principle: Perceptually salient features help learner focus on important aspects of the display (Lowe, 2003)Interactivity principle: User control over displayed information increased comprehension (Mayer & Chandler, 2001)

16

Interaction Design

Design Process

17

Interaction DesignDesign Process (Plass & Salisbury, 2002)

18

Interaction Design

Interaction DesignCHI/HCI designInstructional StrategiesNavigationInstructional ID: takes into account cognitive aspects of interactions

19

Interaction Design

Interaction Design Process (Moggridge)Synthesize solution from all relevant constraintsFrame or reframe problem and objectiveCreate and envision alternativesSelect wisely from these alternativesVisualize and prototype the intended solution

20

Interaction Design

Interaction Design ToolsDiagramsDrawings, illustrationsPrototypesSketches

21

Interaction DesignDesign Tool–Sketching

22

Interaction DesignInteraction Design Methods (Saffer, 2007)

VisualizationsPersonas & ScenariosSketches and Models ->StoryboardsTasks Analyses -> Task FlowsUse CasesMood BoardsWireframesPrototypes

23

Interaction Design ActivityInstructional Interaction Design Task

Analyze an existing Interaction Design artifactDescribe the task the interaction supportsDescribe how the interaction was designedDescribe the (theoretical) approach this design representsUse a sketch or wire frame to illustrate

Artifacts listed on course web site: http://create.alt.ed.nyu.edu/courses/2015/2015_documents.html

24

Interaction Design

Design Research

25

Interaction Design

Design Research DefinedStudy of a product’s intended users and environments

At authentic sitesIn activities with potential users as design partnersRecorded and analyzed later

Conducted at various stages of design process

26

Interaction Design

Design ResearchStudy use of product in authentic situationsMethods

Video research ObservationsInterviewsActivitiesSelf-reports

27

Interaction Design

Design Research Analysis and ConclusionsUse triangulation method (concurrent validity)A strong theoretical base can make design research easierKeep open mind to reap full benefits of design research

Result: Redesign product and conduct another round of design research

28