![Page 1: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/1.jpg)
E19.2015 Representation and Interaction Design
Jan L. Plass & Ruth Schwartz, ECT
1
![Page 2: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/2.jpg)
Overview
Theoretical framework for Interaction DesignCognition and Interaction DesignEmotion and Interaction Design
Design Process
Design Activity
Design Research
2
![Page 3: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/3.jpg)
Interaction Design
Apple – iPhone • http://www.apple.com/iphone
3
![Page 4: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/4.jpg)
Interaction Design
Jeff Han – Multitouch Interaction Research • http://cs.nyu.edu/~jhan/
4
![Page 5: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/5.jpg)
Interaction Design
Collabolla Project site, Interaction Design Project at the Institute of Interaction design, Ivrea, Italy • http://www.collabolla.com/
5
![Page 6: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/6.jpg)
Interaction Design
Fisher-Price Smart Cycle • www.smartcycle.info
6
![Page 7: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/7.jpg)
Interaction Design
Dance Dance Revolution as Experienced by a Librarian • photo by Michael Stephens www.flickr.com/photos/michaelsphotos
7
![Page 8: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/8.jpg)
Interaction Design
Refreshable braille display www.washington.edu/computing
8
![Page 9: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/9.jpg)
Interaction Design
Optical Motion Capture • www.cs.berkeley.edu/b-cam
9
![Page 10: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/10.jpg)
Interaction Design
Theoretical framework for Interaction Design
10
![Page 11: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/11.jpg)
Interaction Design
Practical Relevance: Theoretical basesDual coding (Clark & Paivio)Multimodal theory of memory (Engelkamp & Zimmer)Generative learning (Wittrock)
11
![Page 12: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/12.jpg)
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
![Page 13: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/13.jpg)
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
![Page 14: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/14.jpg)
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
![Page 15: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/15.jpg)
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
![Page 16: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/16.jpg)
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
![Page 17: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/17.jpg)
Interaction Design
Design Process
17
![Page 18: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/18.jpg)
Interaction DesignDesign Process (Plass & Salisbury, 2002)
18
![Page 19: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/19.jpg)
Interaction Design
Interaction DesignCHI/HCI designInstructional StrategiesNavigationInstructional ID: takes into account cognitive aspects of interactions
19
![Page 20: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/20.jpg)
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
![Page 21: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/21.jpg)
Interaction Design
Interaction Design ToolsDiagramsDrawings, illustrationsPrototypesSketches
21
![Page 22: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/22.jpg)
Interaction DesignDesign Tool–Sketching
22
![Page 23: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/23.jpg)
Interaction DesignInteraction Design Methods (Saffer, 2007)
VisualizationsPersonas & ScenariosSketches and Models ->StoryboardsTasks Analyses -> Task FlowsUse CasesMood BoardsWireframesPrototypes
23
![Page 24: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/24.jpg)
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
![Page 25: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/25.jpg)
Interaction Design
Design Research
25
![Page 26: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/26.jpg)
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
![Page 27: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/27.jpg)
Interaction Design
Design ResearchStudy use of product in authentic situationsMethods
Video research ObservationsInterviewsActivitiesSelf-reports
27
![Page 28: E19.2015 Representation and Interaction Design](https://reader033.vdocuments.us/reader033/viewer/2022051522/58a2fa061a28ab1f238c07b4/html5/thumbnails/28.jpg)
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