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 20%
3 Lab Exercises 10%
2 Design Critiques 20%
2 Projects including design, technical work, slides 50%
Helpfulness to other students bonus (up to) 5%
Insightful participation bonus (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.

  1 
Schedule
Topic Tuesday Thursday Labs
ITM Recitation (Friday)
Readings
Week Jan 12,14,15 Goals of Design Ch 1, 2,3, Recitation
Design Post due
1 Designing the Artifact / Advancing
Jan 15
the Medium
Week Jan. Maximizing the Affordances of the Ch 4 First lab
2 19,21,22 Digital Medium Design Post due 1/22
Jan 22

Week Jan. Medium Components: Ch 5,6,7,8 Lab

3 26,28,29 Inscription/Transmission/ Design Post
due Jan 29
Representation

Week Feb 2, 4, 5 Encyclopedic Design Ch 11,12, 13 Lab

Design Post due
4
Feb 5
Week Feb. 9,11, Encyclopedic Design Topics for Lab Thurs Lab
5 12 Project I Feb 11 PHP DUE
(1 slide)
Week Feb. 16, 18, Encyclopedic Design Critiques Critiques Lab
6 19
Week Feb. 23, 25, Lab Week Lab Lab Thurs Lab
7 26 Feb 25 XML DUE
Week March 2, 4, Project I Presentations Project I Project I Project I
8 5 Due
Week March 9, Microworld Design: Procedural Ch 9, 10 Lab
Design Post
9 11, 12 Abstraction
Due March 12

Week Mar Scripting the Interactor Ch 14,15 Lab

Design Post
10 16,18,19 Tool, Machine
Due Mar 19
Week of SPRING BREAK
March 22
Week March 30, Scripting the Interactor: Ch 16, 17 Topics Due Lab
11 April 1, 2 Companion . Game Design Post Project II
Due April 2
(1 slide)
Week April 6, 8, 9 Design Critique of Microworlds Critiques Critiques Critique
12 FLASH
DUE
Week April 13, 15, Lab Week… Lab Week. Lab Week… Lab Week ..
13 16
Week April 20, 22, Project II Presentations Project II Project II Project II
14 23
Week April Project II Lab Project II Project II Project II
15 27,29,30 (Testing) Lab Lab Lab
Demo final version for Joshua (Testing) (Testing) (Testing)
Cuneo Friday

Demo Day Wednesday May 5

  2 
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.

  3 
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.

  4 
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 rule-
based 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 in-
love

  6 
 • 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). http://web.media.mit.edu/~mres/papers/new_paradigms/new_paradigms.html

Papert, S. (1980). Mindstorms: Children, Computers, and Powerful Ideas. New York: Basic Books.

  7 
 
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
http://compsimgames.about.com/od/toppicks/tp/tycoonsims.htm

• 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 http://www.umcs.maine.edu/~larry/microworlds/microworld.html

• 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

  8 
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?)

  9 
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

  10 
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
 

  11 
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

  12