LCC 6313 Spring 2010 Principles of Interactive Design

Tuesday/Thursday 9:30-11 . Lecture/Recitation Skiles Room 002 Fridays 9-11 a.m. Lab Skiles 346 Prof. Janet H. Murray. Office hours: Tuesdays 4-6 pm or by appointment Joshua Cuneo, Lab Assistant: Consultation Hours in DM Lab TBA or by appointment Objects of this course To articulate goals and methods for the design of digital artifacts that will remain valid over a long period of technological innovation. To approach the design of digital artifacts as part of the collective task of inventing media formats and genres. To prepare students for professional employment with projects that integrate immediately useful technical methods with enduring design considerations. Text Janet H. Murray, Inventing the Medium (Pre-publication draft MSS version available on line) Readings are due on first Lecture/Recitation Day of week Grading In class preparation, design examples, participation in design discussions 3 Lab Exercises 2 Design Critiques 2 Projects including design, technical work, slides Helpfulness to other students bonus Insightful participation bonus 20% 10% 20% 50% (up to) 5% (up to) 5%

Plagiarism, Professionalism, Lab Responsibilities Students are expected to indicate the source and authorship of any work not original to them. Students are expected to come to class prepared and to attend to and actively respond to presentations by the instructor and fellow students All students will have access to the M.S. Lab Room 346 and are expected to abide by the rules of that lab, including never propping open doors or leaving the room unlocked. Students are expected to refrain from distracting and disruptive behaviors in class and in the shared lab, and to treat one another with professional respect and courtesy.


Topic Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Jan 12,14,15 Jan. 19,21,22 Jan. 26,28,29 Feb 2, 4, 5 Feb. 9,11, 12 Feb. 16, 18, 19 Feb. 23, 25, 26 March 2, 4, 5 March 9, 11, 12 Mar 16,18,19 Week of March 22 March 30, April 1, 2 April 6, 8, 9 April 13, 15, 16 April 20, 22, 23 April 27,29,30 Goals of Design Designing the Artifact / Advancing the Medium Maximizing the Affordances of the Digital Medium Medium Components: Inscription/Transmission/ Representation Encyclopedic Design Encyclopedic Design Encyclopedic Design Lab Week Project I Presentations Microworld Design: Procedural Abstraction Scripting the Interactor Tool, Machine

Tuesday ITM Readings
Ch 1, 2,3, Design Post due Jan 15 Ch 4 Design Post due Jan 22 Ch 5,6,7,8 Design Post due Jan 29 Ch 11,12, 13 Design Post due Feb 5

Thursday Recitation

Labs (Friday) Recitation First lab 1/22 Lab

Lab Lab Thurs Feb 11 Critiques Lab Thurs Feb 25 Project I Lab PHP DUE Lab Lab XML DUE Project I Lab

Topics for Project I (1 slide) Critiques Lab Project I Due
Ch 9, 10 Design Post Due March 12 Ch 14,15 Design Post Due Mar 19


Week 11 Week 12 Week 13 Week 14 Week 15

Scripting the Interactor: Companion . Game Design Critique of Microworlds Lab Week… Project II Presentations Project II Lab (Testing) Demo final version for Joshua Cuneo Friday Demo Day Wednesday May 5

Ch 16, 17 Design Post Due April 2

Critiques Lab Week. Project II Project II Lab (Testing)

Topics Due Project II (1 slide) Critiques Lab Week… Project II Project II Lab (Testing)

Lab Critique FLASH DUE Lab Week .. Project II Project II Lab (Testing)


Required Presentations and Projects
All required presentations and projects are to be submitted on T-Square by 9am on the day they are due except for lab exercises and running code for projects which may be handed in by 5pm on the due date. In addition, hand in a paper version to JHM on the due date. 10 slide presentations should be printed multiple slides per page, in color, with notes optional. The four 10-slide presentations will each be given Pecha Kucha style, with automated timing set at an average of 30 sec/slide, 5 minute maximum time. Information Design / Interaction Design Assignments Project I Topic 1 slide Due Feb 9 Critique of artifact(s) related to Project I Due Feb 16 (10 slides) Project I Running version with slide presentation and demo script: due March 2 (10 slides) Project II Topic 1 slide Due April 1 Critique of artifact(s) related to Project II due April 6 (10 slides) Project II Slide presentation with demo version and demo script: due April 20 (10 slides) Project II Testable version due April 27, with final revised version Due April 30 Required Lab Exercises 1. PHP due Feb 12 2. XML due Feb 26 3. Flash due April 9 7 Required DESIGN EXAMPLES For all weeks with textbook reading assignments due on a TUESDAY, create and hand in the following to T-SQUARE by 5pm on FRIDAY of the same week: a useful DESIGN EXAMPLE, similar to the examples offered in the textbook and in JHM’s PowerPoint slides, illustrated with one or more images and no more than 200 words that make clear what significant design choice or choices were made and why they are good or bad.


Project I Encyclopedic Design: Dynamic Information Widget
Topic due Feb 9  Related Critique due Feb 16  Final projects and reports due March 2  Make an information widget, internet application, or mobile application that combines multiple kinds of information in a single, focused framework in a way that contextualizes or clarifies a subject of interest to you. The application should combine multiple formats (such as text, maps, still images, video) and multiple sources of information, such as a database and an RSS feed. Your widget should segment each information source into semantic units of appropriate granularity to make for useful juxtapositions. For example, it might segment a script into lines of dialog that match up to a video. The application should contain content that will support a demonstration that makes clear the advantage of segmenting and combining the information in this way. You may use off –the-shelf components and/or fake some elements, but the information design structure including segmentation, interface, juxtapositions, search terms, etc. must be real, and the XML parsing or database-generated page must work Completed projects must include: • Running code that shows a dynamically generated web page. • Data that demonstrates the usefulness of the project; it can be from real sources (like the weather service) or it can be invented as sample data by you as long as it in a structured format (e.g. a SQL database or XML document) • Demo script that can be duplicated by the instructor or any user to show off the reliable functionality of the project. • 10 slide design document Sample Project Ideas • A film selector that combines friends’ recommendations with critics ratings, trailers, and local theater showings and tells you which of your friends have not yet seen a movie. • A map-based survey of weather conditions and flight status that lets you simultaneously track the arrival of multiple relatives during the holiday season. • A map-based overview of presidential politics, indicating electoral votes as well as popular votes, and tracking candidate appearances in individual states, including text and/or video of rallies and local news coverage.


Due Feb 9: 1 Slide Presentation of Topic for Project I 
Should include: • Your name • Project Name indicating functionality (e.g. SuperRemote: Accessing Bubble-Gum Related Information Across Media; SuperBubble: Location-Sensitive Bubble-Gum Bargain locator), • Media sources you will draw on indicating format (e.g. BubbleBlog (text); Bubble PixStream (images); Bubble Video (YouTube video); Bubble data (MySQL database), etc. • URL of at least 1 similar artifacts (such as one you will critique) • Wire frame of what you will be building

Due February 16: Design Critique Related to Project I 
Assignment: Chose an artifact similar to the one you are proposing for Project I and analyze what works well and what does not work well about it.   Pecha Kucha Presentation (automated slide changes) 10 slides/30 seconds each 1. Title slide: Name of [Object you are critiquing]: [Key design value you are focusing on] in a [category of object] by [aspect of the object that is good or bad) (e.g. Google: Creating Agency in a Search Engine by Leveraging Linkages; or iPod: Blocking Agency in a Music Player by Excessive Minimalism ) 2. What is the need/problem addressed by this digital artifact? 3. What design goals should such products satisfy? 4. What other artifacts exist in this category? 5. What pre-digital and standardized digital conventions do they employ? 6. What are strengths of this particular artifact? 7. What are its weaknesses? 8. How does it measure up against design goals (as stated in #2 and in the title of your presentation) 9. How could it be improved? 10. What will your Project I do in the same way or differently from this example (choose 1 important design element or present a single image of your design to make your point)

Due March 2: Presentation of Project I  
Pecha Kucha Presentation (automated slide changes) 10 slides/30 seconds each 1, Title: Snappy title of your artifact: explanatory subtitle 2. What is the need/problem addressed by this digital artifact? 3. What are your design goals? 4. What other artifacts exist in this category? 5. What distinguishes your artifact from the other ones in the category? 6. Walk through of specific use case scenario with specific content 7. Walk through 8. Walk through 9. Walk through 10. Future extensions of this work   5 

Project II Microworld with Replay
Topic due April 1  Related Critique due April 6  Final projects and reports due April 20  Revised, testable project due April 30  A microworld is a simulation of an abstract system of rules that fosters exploratory learning that relates to some larger world. For example, a microworld for engineering students might offer a simplified simulation of bridge building which included gravity and the mathematics of trusses, but excluded friction. Students would develop an intuition – that is the ability to make good predictive guesses – for the world by trying to build things in it and noticing what fell down and what remained standing. A microworld can capture the knowledge we have about the world that is rules-based, procedural rather than descriptive. It can show us how a system behaves under multiple circumstances. For example, a microworld of a pond could display how it would change with the addition of a new species animal or vegetation. This exercise invites you to create a microworld that will be useful in understanding a rulebased system. The microworld should clarify a real or fictionalized situation that has distinguishable, intrinsically engaging success/failure outcomes such as a person living or dying, a heavy object falling on a cartoon character, a couple falling in love, a set of people developing a disease, a polar bear population thriving or declining, etc. 1. Choose a domain that you are familiar with and for which there are clearly known causes and effects. It can be scientific, economic, political, psychological, etc. It can be real or fictional. For example: • biological systems like a cell or a pond (could real or imaginary) • physical systems like a battle with multiple kinds of weapons and defenses (could be drawn from an existing game) • social systems like a (fictional) singles mixer in which there are many possible combinations of couples • economic systems like a lemonade stand hint: start with an existing strategy game like Spore, Sim City, Lemonade Stand 2. Develop a simple scenario that you will be able to visualize, that includes • At least 2 classes of actors (people, plants, creatures: anything living that has needs, vulnerabilities, and the potential for multiple instantiations and states) . o The actors should have the ability to change one another’s states, directly or indirectly. (e.g. by eating one another, by feeding one another, by eating one another’s food, etc) o Examples of classes and instances a carnivore or herbivore creature; o Examples of states: hungry or full; hunting or resting; bored or inlove


At least 1 resource that can have at least 2 values (perhaps numerical quantity, or absence/presence) and that has an effect on the actors or on the overall state of the microworld o A limited resource like food o Disputed territory o Money, lemons, sugar, advertising signs for a lemonade stand o An opportunity or peril with duration (disappears over time) Clearly distinguished positive and negative outcomes for individual actors and/or for the microworld as a whole (frog health, pond health) 3-5 time steps that can be run through in a default state, and then in variations that reflect the interactor’s choices.

• •

3. Script the Interactor by creating appropriate gameplay: The interactor should be able to run the same scenario, changing one or more variables, and see contrasting results that will pique their curiosity to try other variants. Be sure to make clear how they change the scenario, what kind of changes are possible, and what cannot be changed. (Can you do this clearly without written or spoken instructions?) o For examples, adding a frog without adding algae to the pond, adding algae without adding a frog to the pond, adding both frog and algae at the same time. Story-board your scenario before you build it. Make sure that all the significant states are clearly distinguished from one another, that dynamic changes in your world are clearly readable, and that causes and effects are clear. The system should include both local and global variables, and should be savable by saving the state of these variables. Note on Teams: Project II can be a team project if students voluntarily self-organize into teams to make a more ambitious projects. Team members must register with the instructor by April 1, stating the domain, scenario, and making clear what each member is responsible for. Credits in the final project should confirm these separate contributions. All team members must prepare individual Design Critiques and design documentation slides, and must make individual in-class presentations. Students must be approved for team membership for Project II based on performance in course so far. Project II will be presented during week 14; a running version must be tested with other students in the class during week 15, and the final running version revised if necessary after testing, is due April 30 (last day of semester).
NOTE: I am adapting the concept of MICROWORLD from the domain of educational computing and particularly from the approach founded by Seymour Papert and continued by Mitch Resnick at the MIT Media Lab. Mitch Resnick, New Paradigms for Computing, New Paradigms for Thinking, in Computers and Exploratory Learning, edited by A. diSessa, C. Hoyles, & R. Noss. Springer-Verlag (1995). Papert, S. (1980). Mindstorms: Children, Computers, and Powerful Ideas. New York: Basic Books.


  Due April 1: 1 Slide Presentation of Topic for Project II 
• • • Your name Microworld Name with subtitle specifying all the variables, e.g. BubbleWorld: An simulation of the effects of height, gender, and age on the size, duration, and quantity of bubblegum bubbles A chart indicating the range of at least one of the variables and how it relates to other variables (e.g. more sugar, more cost per glass of lemonade.

Choices for Design Critique Related to Project II • Any “Tycoon” Game similar to Lemonade Stand, e.g. this list • Any Will Wright Game, e.g. o Sim City (oldest versions on line for free, some with code listing) o The Sims o Spore Any Persuasive Game Simulation Games (Ian Bogost’s Game Studio) o Fatworld o Food Import Folly o Bacteria Salad o Oil God o (etc) Any Serious Game on a political issue such as Darfur is Dying Any Educational Microworld, e.g. o Any Board Game, tabletop role playing game, or live action game that is structured as a simulation of a complex system (Raiders of Catan, Dungeons and Dragons) Any other simulation game that abstracts a system of interrelated parameterized actors

• •

• •


Due April 6: Design Critique #2 Pecha Kucha 10 slides, 30 seconds each  1. Your name, Artifact Name: Subtitle with Design Assessment (e.g. iPhone Spore: abstracting evolution as a body-part substitution system with survival-related parameters) 2. Analyze the Abstraction • What real world domain is simulated here? • What is the underlying model? • What are the key elements? How do they behave? • What are the relationships among them? • What are the parameters? Which ones does the player control? What effect does it have to change them? How are these effects indicated? • What are the explicit and implicit assumptions of the model? (e.g. what is good and bad? What is irrelevant and left out of the simulation?) 2. Gameplay and Game Mechanics • What can the player do? How do they do it? How does the game script them so that they understand what they can do and want to do it? • What other feedback does the game provide on the state of the world or the success of the player or the appropriateness of an action? • Are there meters or running scores? Are there intrinsic indicators of state (e.g. character slows down or dies, snow falls and road becomes blocked) ? • Are there turns? Squares on a gameboard? Experience points? • Are there strategies to employ? Is there resource allocation? What are the trade-offs? • Are there random elements? How does this affect the player’s experience? 3. Outcomes • What are the success conditions? How are they differentiated? Are causes visible? • What are the failure conditions, how are they differentiated? Are causes visible? • Can you replay the same situation? 4. Conventions Used • Any conventions common to similar artifacts? • Any conventions borrowed from other domains or media? • Any newly invented conventions? 5-8 Strengths and Weaknesses 9. How would you redesign it to improve it? 10. How could the same domain be abstracted to fit Project II assignment? • Actor I: states • Actor 2: states • Independent resource: value • Clear positive outcomes: • Clear negative outcomes • Parameters that player can control: • Mechanic for player control (how does player change the parameters that are in their control?)


Due April 20: Presentation of Project II  
Pecha Kucha Presentation (automated slide changes) 10 slides/30 seconds each 1. Snappy title and subtitle indicating what you are explaining, e.g. Coffee Shop of the Damned: A Microworld Simulating a Blind Date; Should You Shoot the Wolves? A Microworld Simulating the Effects of Lethal Interventions in Predator Populations on Wolves and their Prey. 2. What world are you simulating and why does it need procedural explanation? 3. What is your underlying Model of this world? a. Actors b. States c. Resources d. Parameters i. Controlled by player ii. Controlled by game e. Outcomes f. Differentiating states and outcomes 4. Other artifacts that try to explain or explore this world? 5. Other artifacts that explain or explore similar systems? 6. What have you borrowed or adapted? 7. What have you added, changed, improved? 8. Walkthrough of your microworld 9. Alternate walkthrough of your microworld showing different outcome 10. Potential Future Extensions



Grading Criteria for 2 Design Critiques 
Fulfills Assignment Presentation Effectiveness Readable slides Audible, clear oral style Clarity and specificity of language Clarity and gracefulness of visual design Choice of artifacts and illustrations Grasp of design concepts Specificity of design observations Application of design concepts to artifact

Grading Criteria For Projects I and II 







Fulfills Assignment Criteria Presentation Effectiveness Readable slides Audible, clear oral style Design Evaluation Identification of specific design goals Orientation toward core need Analysis of design context Choice of design conventions Scripting of interactor with clear expectations Rewarding interaction with agency Exploitation of digital affordances and awareness of further opportunities Demo Evaluation Choice of illustrative content and use case Persuasiveness of Demo Script Performance of Demo Script Technical Evaluation Fulfills Technical Criteria Ambition Choice of components Execution  



Presentation Reminders 
Guidelines for discourse about design • You must know the specific meaning of all design values: avoid words that are used vaguely such as “interesting” “clean” “intuitive” . • Make every word on every slide count. Use as few words as possible, by thinking harder to make your meaning more concise and specific. • Use design terms consistently. Choose the relevant design values from this course and other courses and design texts, and make clear how you are using them. Tips for slide preparation and oral presentation • Put your name on the slides, and include your first initial and last name in filename • 1 or 2 fonts; 1 or 2 sizes of type • Type should be readable against background • Avoid fussy backgrounds and distracting decorative graphics • Images should be readable and labeled if appropriate: you can zoom in and out on an image • Give URLs and other appropriate reference information for anything on the slide that you did not create Tips for Oral presentation: • Do not apologize • Look at your audience and speak loudly • Avoid filler words (uh, you know, like, etc.) • Do not read your slides, but do cover the key points in the slides • Rehearse your presentation ahead of time



Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer: Get 4 months of Scribd and The New York Times for just $1.87 per week!

Master Your Semester with a Special Offer from Scribd & The New York Times