Course Outline
Please refer to this course outline until a downloadable one is posted on 'my courses'.
Principles of Interaction design
GDES 1B26
SECTIONS
9-12-13
Professor Priam GIVORD pgivord@faculty.ocad.ca
Class Assistant John Lee
johnnyfivealive@gmail.com
This course outline contains contributions by Priam Givord, Susan Gorbet, Martha Ladly,
Alex Manu, and Greg Van Alstyne
A DEFINITION OF INTERACTION DESIGN
Interaction Design is the study of principles, techniques, tools, and processes for designing interactions and objects with which and through which people interact. Interaction Design is concerned with the design of the user experience, usability and the flow of functional tasks that express and allow the full performance of a product or a system.
100 McCaul St.
Toronto, Ontario
M5T 1W1
Course Outline
1. COURSE DESCRIPTION
This course is an introduction to the design methodologies used in the design of user experiences with concepts, objects and environments and an examination of the relationship between people and interactive mediums. Through lectures and the analysis of a wide range of examples and through studio projects that provide practical experience, students are introduced to the basic concepts, methods, tools and techniques used in the definition and design of intuitive user experience and interactivity.
2. Learning Outcomes:
1 The student will demonstrate knowledge of the multifaceted communication between people and technology and its applications in contemporary design practice through:
a interactive environments and products;
b interactive information design:
c interaction and intuitive navigation.
2 Through theoretical and practical applications students will become acquainted with the methods of interaction, the rules, styles and design guidelines used in best practice worldwide through:
a information interaction methods;
b user observation;
c metaphors as tools for interaction.
3 Students will be able to use cognitive and physical factors in designing outcomes which improve the usability of products and systems, and in the creation of a compelling experience of use through:
a) cognitive mapping;
b) perception;
c) sensorial design.
4 The student will demonstrate knowledge in the techniques of user observation and evaluation and the fundamental methods of workflow and experience design through:
a) user-centered scenarios;
b interface and interactions;
c task and task analysis.
5 The student will demonstrate knowledge of the methods of storytelling and scenario based interaction design through:
a) designing for flow and experience;
b compelling experiences;
c metaphor, narrative and narrative style.
3. TEACHING METHODS & DELIVERY:
Seminars and lectures provide the foundation of this course, with surveys of modern communication theory, information design, interaction and interface design, while in-depth case histories exemplify the practical application of the concepts, methods, techniques and tools of this emerging field. Teaching methods and delivery will include a combination of lectures, demonstrations, critiques, individual and group discussions, student presentations and in- class work.
The content is grouped around the following four major issues:
• Physical and Social Human Factors/Cognitive Psychology
• Theory and Methods of Interaction
• Tangible Interaction and the Design of Usability /Experience
• User Centered Scenarios and Story Telling
Key Issues to be covered by the course content:
• Cognitive Mapping and Perception
• Information Design
• Interaction Design
• Sensorial Design
• Data, Information, Knowledge and Wisdom
• Metaphor, Narrative, Narrative Style
• Storytelling and Scenario Building
• Designing the Experience
• User Centered Scenarios and Multiple users
• Interface and Interaction, Task and Task Analysis
• Designing for Flow, Experience and Compelling Experience
• Gratifying user experience
• Quality of experience
• Desirability
• Usefulness
• Accessibility
• Affordances
• Concepts/ Perceptive Measures (Senses, Imagination, Emotion, Knowledge)
• Manner
• Material of Interaction
• Effects of Material on Form and Motion
• The time factor and time signature
• Social Rules and the nature of the experience
• Emotion
• Form/Motion
• Personality
• Flow
• Real-time
• Feedback
4. LECTURES/COURSE DELIVERY
Week 01. Jan 06 Introduction to Interaction Design
Intros - Define NEW MEDIA - Blog-chain start
1ST ASSIGNMENT > Find out about next class’s topic
Week 02. Jan 13 Mapping and Metaphor + Photoshop
Definition of Terms (Principles of design) and Workshops for scanning, Photoshop, etc. Pixel vs. Vector Graphics
SETUP ASSIGNMENT 1
Week 03. Jan 20 Narrative, Narrative Style
Kuletchov effect, Chris Marker, Switching, – Eisenstein –Tarantino (flashback – Pulp fiction>happy end) hypertext
Week 04. Jan 27 Perception and Cognition
perception≠cognition -Ted Nelson Computer Lib – Cognitive Load Issue – Cognitive dissonance necessary to learn
DUE ASSIGNMENT 1
SETUP ASSIGNMENT 2
Week 05. Feb 03 Sensorial Design
Analog/Digital Definitions (spectral pattern, modulation vs. binary, Morse code)
Channels, senses, Flow – concept of interpolation, Proprioception, Real-time
Week 06. Feb 10 User Centered Task Analysis and Experience Design
Feedback Shannon Theory of information, Norbert Wiener Cybernetics, Noise, SIGGRAPH docs
5. STUDENT COURSE LOAD:
5.1 Class time: Three hours per week. This class meets once a week for a three hour session.
5.2 Prep time:
For every three hours spent in class, a minimum of three hours per week on average will be spent completing assignments outside class time.
5.3 Grading Scheme and Projects:
Grades for this course will be broken down as follows:
20 % Assignment # 1 Photoshop Time-Based Collaborative Narratives
20% Assignment # 2 Ethnography & User-Based Interactions
20% Assignment # 3
Sensorial and Effective Interaction Design
25% Assignment # 4 Final Term Project
5% Process Documentation
Including Class-specific Blogging
10% Class Participation & Individual Progress
TOTAL 100%
DUE ASSIGNMENT 2
SETUP ASSIGNMENT 3
Week 07. Feb 17 Study Week - No Classes
Week 08. Feb 24 Field Trip: Design of User Interfaces
WORKSHOP ASSIGNMENT 3 >> Mouse Sensor VS Keyboard Sensor
Halfway in-between the say and the do (Derrida) – Gestalt - D.Engelbart – Definition of Interface Design and related General and Technical key terms: Perspective – Architecture – Transition – Perception – Context, Sequential vs. Parallel
Week 09. Mar 03 Interaction & User Scenario Building
DUE ASSIGNMENT 3
SETUP ASSIGNMENT 4
Week 10. Mar 10 The Process of Designing for Flow
Interface Design concepts
DUE ASSIGNMENT 4 > Individual Scenarios
Week 11. Mar 17 Prototyping
Steps of teamwork: Selected concept, putting it together
DUE ASSIGNMENT 4 > Team Design Concepts
Week 12. Mar 24 User & Usability Testing
SIGGRAPH docs, Jack Principles
DUE ASSIGNMENT 4 > Prototype models
Week 13. Mar 31 Collaboration, Execution Interact 3! Show.
DUE ASSIGNMENT 4 > Final Show assembly is during week 13, on March 30th in the Great Hall. Interact 3 Exhibition opens on March 30th. Tear down and recycle
Week 14. Apr 07
Interact 3! Analysis, Discussion, Review
Week 15. Apr 14 Critique Critique, Analysis, Evaluati
6. EVALUATION CRITERIA:
A variety of methods will be used to evaluate student progress, such as individual and group research and design projects that may include written components, presentations, field trips, assigned readings, and participation in class project work and discussions.
Evaluation criteria will depend on the method in question, but will always include the following elements; an analysis and understanding of the project or research brief, the pursuit of original thinking and research from a variety of different resources, an appropriate level of questioning and enquiry into the issue under scrutiny, a well organized in-class presentation, timely completion of work and presentation and/or hand-in of the project, interest and attention to the presentations of others, and participation in discussion in class.
Grades at the level of Satisfactory (C = 65–69%) are anticipated to be the average for this course.
To obtain pass standing in a course, a student must complete required and assigned course work, as described in the course outline, to the satisfaction of the teaching faculty. Evaluation of student performance is based upon a reasonable diversity of methods. Students are evaluated on their work according to the breakdown in the Grading Scheme and the criteria listed below. Numerical grades may be translated into letter grades based upon the following scale. For averaging purposes in determining a student’s overall standing, fail grades are calculated as 45%.
7.1. ATTENDANCE POLICY:
Since students benefit from an active involvement with faculty and with their fellow students, the College requires that they attend and participate fully in classes on a regular basis. Marks are not assigned for attendance. However, a student with three or more unexcused absences may be assigned a failing grade for that course. Students who are more than 30 minutes late for a class may, at the discretion of the faculty member, be marked absent.
7.2. TEAMWORK
If an individual is absent during group work, this individual only will lose 5% or more out of the group’s final mark if the faculty judges that they prevented their group mates from completing their assignment on time.
Members of a work group are expected to establish contact with their group mates as soon as groups are formed and assignments are given. They are also responsible to meet their group mates outside class time to complete group assignments.
7.3. IN CLASS
No opened Laptops will be tolerated during class hours unless expressly permitted by the faculty member. Students are expected to take notes and to refer to the Blog if they did not attend a previous class.
8.1. BACKUP:
Students are responsible for backup of their assignment material. Being accustomed to the digital medium implies integrating its weaknesses. Penalty will be applied disregarding data loss of any kind: broken hard drive, deletion, software bugs-crashes etc.
90-100% A+ Exceptional
Exceeded expectations in demonstrating knowledge of concepts and/or techniques, and exceptional skill in their application in satisfying the requirements of a course.
80-89% A Excellent
Demonstrated a thorough knowledge of concepts and/or techniques, and with a very high degree of skill in their application in satisfying the requirements of a course.
70-79% B Good
Demonstrated a good knowledge of concepts and/or techniques, and considerable skill in their application in satisfying the requirements of a course.
60-69% C Satisfactory
Demonstrated a satisfactory level of knowledge of concepts and/or techniques and competence in their application in satisfying the requirements of a course.
50-59% D Pass
Demonstrated minimal knowledge and ability to apply concepts and/or techniques in satisfying the requirements of a course.
0-49% F Fail
Failure to meet course requirements.
6.1 Late Work:
Late work will not be accepted without permission of the Faculty member. No late work will be accepted more than seven days after the initial due date. All late work will be assessed a minimum penalty of 30% per week, at the discretion of the individual Faculty member.
06.2 Incomplete Grades:
An incomplete grade is considered when students encounter unexpected difficulty completing course work within the semester. Students must discuss their situation with their instructor and request an incomplete grade prior to the end of the semester. Incomplete grades are filed at the discretion of the teaching faculty. Students with incomplete grades must complete all course work by the deadline listed in the Calendar. See the Calendar for details.
06.3 Academic Integrity:
Plagiarism, misrepresenting personal performance or status and any conduct, which damages the integrity of scholarly and artistic activity, is unacceptable. Academic penalties will result. See the Calendar for details.
8.2. REQUIRED MATERIALS
Access to a Personal Computer is required for at least four hours per week for the adequate performance of assignments. The following software tools must be installed: Photoshop, Illustrator, InDesign, Web Browser, Web Authoring, PowerPoint and Word Processing + Spreadsheet.
Programs are installed on the computers in the First Year Computer Lab. Students will learn to work with these tools in the performance of the assignments given. Students must acquire a beginner level expertise of these software tools.
In addition, access to a digital camera will be of benefit in this course. Digital video and still cameras can be borrowed from the AV Loans Dept.
Materials Fees: Anticipate a $50 fee for materials, digital videotape, Cds etc, and for construction and other materials for the Final Term Project.
9. SUGGESTED TEXTS AND SOURCES
__DIGITAL WORLD / INTERFACE DESIGN
Apple Computer.
Macintosh Human Interface Guidelines.
Addison-Wesley, Reading, Mass., 1992.
Beardsly, Sally.
Conversations at the Interface.
Dansk Design Centre, 1994.
Beyer, H. and Holtzblatt, K.
Contextual Design.
San Francisco: Morgan Kaufman, 1998.
Bohm, D.
Thought as a System.
London: Routledge, 1994.
Preece, Jennifer et al.
Interaction Design: beyond human-computer interaction
John Wiley & Sons, Inc., 2002.
Raskin, J.
The Humane Interface
Addison-Wesley, 2000.
Carroll, J.M., Mack, R.L, and Kellogg, W.A..
Interface metaphors and user interface design.
Helander, M. (ed.) Elsevier Science Publishers B.V. (North-Holland). 67-85. 1988.
Negroponte, Nicholas.
Being Digital.
Paperback, Random House, Incorporated, 1995
Tufte, Edward R.
Envisioning Information. + related books
7th ed Graphics Press. 1990.
Wardrip-Fruin, Noah(editor) Monfort, Nick(editor).
The New Media Reader.
The MIT Press, Cambridge, Massachusetts 2003.
__COGNITIVE / PERCEPTION / HUMAN FACTOR
Barlow, H. & Mollon, J. eds.
The Senses.
Cambr. Univ. Press. 1982.
Axelrod, R.
The Evolution of Co-operation.
New York: Harper/Collins, 1984.
Bruce, V. , Green, P.R., & Georgeson M..
Visual Perception: Physiology, Psychology and Ecology.
3rd ed., Psychology Press, Hove. 1996.
Eysenck M.W.& Keane, M.T.
Cognitive Psychology.
(4th ed.) Hove: Psychology Press, 2000.
Gregory, R.L.
Eye and Brain
London: Oxford University Press. 1994.
Rauterberg, Matthias.
Human Perception, Cognition and Action
www.ipo.tue.nl/homepages/mrauterb/rauterberg.html. 2001.
Sekuler, R. & Blake, R.
Perception.
3rd ed. 1994.
Pinker, Steven.
The Language Instinct: How the Mind Creates Language
Paperback, HarperCollins Publishers, 2000.
Csikszentmihalyi, Mihaly.
Flow: The Psychology of Optimal Experience.
Paperback, Harper Perennial, 1st ed 1991.
McLuhan, Marshall – Fiore, Quentin.
The Medium is the Massage.
Paperback, Gingko Press, 2001.
Sacks, Oliver.
The Man Who Mistook His Wife For A Hat: And Other Clinical Tales.
Paperback, Simon & Schuster Adult Publishing Group, 1998
__DESIGN
Kelley, T., Littman, J.
The Art of Innovation
Doubleday, 2001
Norman, Donald.
Emotional Design
Basic Books, 2004.
Norman, Donald.
The Design of Everyday Things
Bantam Doubleday Dell, 1998.
__MISCELLANEOUS
Van Der Heijden, K.
Scenarios: the Art of Strategic Conversation.
New York: Wiley, 1996.
Barthes, Roland, Richard Howard (Translator)
Camera Lucida: Reflections on Photography.
Paperback, Hill and Wang, 1982
__NOVELS
Dick, Philip K.
Ubik.
Paperback, Vintage Books Originally published in 1969.
Stephenson, Neal.
Snow Crash.
Paperback, Bantam Spectra Book Originally published in 1991.
__MAGAZINES
WIRED Magazine – read every month’s issue (also http://www.wired.com)
ID Magazine, Fashion & Product Design
10. URL Reference and Resources:
__TECH / SOFTWARE
Virtools http://www.virtools.com/
MIT Media Lab http://www.media.mit.edu/
Adobe http://www.adobe.com/
Apple Computer http://www.apple.com/
Builder.com http://www.builder.com/
Flash Kit http://www.flashkit.com/
Macromedia http://www.macromedia.com/
Slashdot Nerd site http://slashdot.org/
Tucows software, shareware http://www.tucows.com/
Webmonkey http://www.webmonkey.com/
Web Reference http://www.webreference.com/
Web Development http://www.developer.com/
Nerd news site: http://slashdot.org/
__COMMUNITY / NEWS
Get blogging@ http://www.blogger.com/
Established, respected news source http://www.salon.com/
News, profiles, mugshots http://www.designiskinky.net
Great get lost all day portal http://www.newstoday.com
Bite sized entertainment http://www.120seconds.com/
American joke news source http://www.theonion.com/
Because content is king http://www.surfstation.lu
Great opinionated news, reviews http://www.pixelsurgeon.com/
Canadian on-line talent http://www.allmaple.com
Art & Design blog http://www.ncf.ca/~ek867/wood_s_lot.html
Canadian digital arts and culture http://www.horizonzero.ca/
Web content primer http://www.alistapart.com/
Digital news & design http://www.digitalthread.com/
__DESIGN / ART
Cool Home Pages http://www.coolhomepages.com/
John Maeda http://www.maedastudio.com/index.php
MIT Media Lab http://www.media.mit.edu/
An intelligent applet http://alumni.media.mit.edu/~murtaugh/NIF/NIFApplet.html
Another application of the Rollover http://www.dontclick.it/
One portfolio
http://nicolas.queffelec.fr/portfolio_flash/index.htm
Canadian youth art & issues site http://www.terminus1525.ca/
On-line art and writing experiments http://bornmagazine.com/
Interface & Usability http://www.useit.com/
British based ultra hip fashion & art http://www.showstudio.com/
Games Design http://www.gamasutra.com/
IDEO http://www.ideo.com
It’s Heavy (music) http://www.heavy.com/
Oculart http://www.oculart.com
Presstube http://www.presstube.com/
Art/Design/Culture index http://www.threeoh.com
Turbulence (see Peter Horvath) http://www.turbulence.org/
Flight 404 http://www.flight404.com/
Web designer’s lunchbox http://www.k10k.net
Empty but interesting http://www.kiiroi.nu/
Terms and
Their Meaning
Basic Interaction Design Principles:
A little bit of vocabulary
v2.
Visibility
Feedback
Affordances
Mapping:
Physical
Logical
Semantic
Cultural
Constraints
Visibility
How do you know what state an object is in? Visibility is the indication of both the system’s current status and the current choices for interaction. The more clearly visible the status and choices, the more likely users will know what to do next.
Examples: How do you know whether your clock radio’s alarm is set? If you don’t, then it doesn’t have good visibility. How do you know when your toaster is still toasting? If you can tell without peering in the top, then it probably has good visibility of the current state of the toaster. How do you know whether the dishwasher is clean? Newer dishwashers added a “clean†light to make the dishwasher’s status more visible.
Feedback
What tells you that your input has had an effect? Feedback is the system’s response to a user’s action. Good feedback is timely, uses an appropriate modality (e.g. visual, aural, tactile), and is as unobtrusive as possible to still get its point across. Often, the result of an action is a change to the state of the system. If the system status is clearly visible (see above) then the state change will also provide good feedback.
Examples: When you take a photo, what is the feedback that lets you know when you’ve actually taken it? Have you ever submitted a web form more than once because you weren’t sure if your request had been acted on? That was probably because you didn’t get good feedback. Why is it so satisfying to extend and retract a ballpoint pen? If designers came up with a soft, silent keyboard, would that be a good idea? Without the tactile feedback, how would you know when you had pushed a key? Do you think that on-screen feedback is enough?
Affordances
Does the object’s appearance indicate what it does? Affordances are the perceived and actual physical properties of an object that dictate how it can possibly be used. One way to think about it is that an affordance gives a clue about what physical actions a user might take to activate an object. Affordances refer to the actual physical shape of items, not to the cultural and contextual knowledge that we all carry around about how things work. Virtual items on a screen have perceived affordances.
Examples: When you see a handgun (toy or real), is it immediately obvious where to put your hand? In general, gun handles afford grasping. How many times have you pushed on a door that said “Pull†or vice versa? Was it because the door handle afforded grasping and pulling even though it was supposed to be pushed? Does the button on a mouse seem like it should be pushed or pulled? It’s flat and wide, so it affords pushing – it would be mighty difficult to pull. What does the handle on a mug tell you about how it should be used? Why is a flashlight shaped the way it is? So it affords grasping. Why did designers make buttons on web pages look 3-dimensional? It was so that users would have the perceived affordance of pushing. (These days we understand the button metaphor, and the additional 3-D mapping is not necessary to indicate an action is required.)
Mapping
How do you know which control operates what function? Mapping refers to the relationship between controls and their effects. Good mapping takes advantage of natural relationships, often spatial, to reduce the user’s need to think about which does what every time they want to perform an action. Labels are often a way to make up for poor mapping.
Examples: Have you ever seen a light switch located outside the room that the light was in? Because of that, did you ever turn off the light on someone because you didn’t know they were in the room? That’s because there’s a poor mapping between the light switch and the light that it controls. Have you ever accidentally turned on the wrong burner on your stove? Many stoves don’t have a clear mapping between the dials and the burner that each controls.
Mappings generally come in two flavors:
physical mapping and semantic mapping.
Physical mapping refers to the physical relationship between the controls and their effect – how are the controls physically arranged, and what does that tell you about what they will do when activated? On a stove, the controls on the left usually work the burners on the left side, and the controls on the right usually work the burners on the right. That’s a good physical mapping.
Semantic mapping refers to a relationship that’s established by the meaning (semantics) of, for instance, the labels on the controls. On a stove, you often see labels that say “Upper Left†or “Front Right†– these are trying to establish a semantic mapping. In general, semantic mapping is much weaker than physical mapping, and of course, relies on the user’s ability to read the language (usually English) or understand the semantic symbols employed.
Constraints
How do you know what you can and cannot do? Constraints are ways of restricting the user’s possibilities for interaction. Well-designed constraints are obvious enough that the user does not need to try other options to know that the constraint exists. Constraints can be thought of in four categories: physical constraints restrict the physical movement of things; logical constraints rely on people’s common-sense reasoning about the world to deduce possible actions; semantic constraints rely on the meaning of the parts of a system to dictate the possible relationships; and cultural constraints are abstract, and rely on learned conventions.
Examples:
Physical – How many directions can you move a light switch? How many functions does a light switch perform? The switch movements are constrained to the two possible actions – on or off. Is it possible to put a 3-prong plug into an electrical outlet the wrong way? The physical constraint of the extra prong makes that exceedingly difficult.
Logical – If 3 puzzle pieces will all fit in the same space, then how do you decide which one is correct? By using logic to deduce things like “The blue one can’t go here because there isn’t any blue nearby, so it must be the green one.â€
References:
Norman, Donald A. The Design of Everyday Things. New York: Currency/Doubleday, 1998.
Preece, Jennifer et al. Interaction Design: beyond human-computer interaction. New York: John Wiley & Sons, Inc., 2002.
Raskin, Jef, The Humane Interface. Boston: Addison-Wesley, 2000.
Thanks to Susan Gorbet for writing the original V1.
Semantic – How do you know which tiles you can legally play in Scrabble? The little squiggles on the tiles have meaning – they are letters, and those letters have meaning which dictates their possible relationships to each other. By reading the rules of Scrabble and using the marks on the tiles to determine which plays are legal, you are using the semantic information on the tiles to constrain your possible choices of placement.
Cultural – If a road sign is red and octagonal, what does that mean? If a computer menu item is a lighter grey than the others, what does that mean? How do you know these things? You use your cultural knowledge to tell you how you should respond. The only thing that keeps you from blasting through a red light is that you know what it means in our society – that’s a cultural constraint.
Habituation and Breakdown
When you’re using a system for the umpteenth time, how much effort does it take? What happens when something goes wrong? Habituation refers to the state in which a user has internalized a representation of the system to the point where they can use it while only thinking of their task, not thinking about the system. Breakdown is what happens when an event then occurs to pull thoughts about the system to the foreground.
Examples: When you’re using MS Word to write a letter, are you using MS Word, or writing a letter? What should you feel like you’re doing?
When you’re driving a car, how much do you think about the spark plugs or the tires? What happens when you get a flat tire?
Have you ever done something dumb in traffic because you were trying to change the radio station? Or talking on your cell phone?
How can car radios and cell phones be designed so that doesn’t happen?
PRINCIPLES 0F
Interaction design
PROJECTS
Build a visual story
You will be working on this project with a partner so choose one person in the class that you'd like to work with.
By creating frames within a collaborative presentation, you will be working both individually and in collaboration with your partner to build an unfolding, image-based narrative.
Each team will present its work in slide show format.
Reference: http://www.g4techtv.com/techtvvault/features/33510/Photoshop_Tennis.html? http://www.baseboard.net/gallery/showgallery.php?cat=510&thumb=1
Schedule: 2 weeks
Due Date: Week 4
Project 1:
Create a Collaborative Image and Time-Based Narrative
It's a very simple idea. Working with a partner, you will build a visual story, poem or diagram, frame by frame, based on your own images and design ideas.
Player one creates a layer in a Photoshop document. Use your own images, found images, or a combination of both. The design can exhibit any aesthetic sensibility you like – personal, poetic, technical, political, anything! Text may be used to highlight ideas, to describe what you’re thinking or doing, to touch on technical points of construction, to label your references, or to form a dialogue.
When the first image is done, you save a 'flat' jpeg of the image as "00.jpg," then email, MSN or IM the .psd (Photoshop file) to your partner who then creates a new layer in the document with his/her own images and text. The goal is to use each turn to evolve the image in your own direction, while respecting and building on the existing elements. At each turn you save a .jpg then send back the new version of the .psd document to your partner.
One advantage of using a chat client such as iChat, MSN or ICQ to transfer the file is they support larger attachments than most email accounts. If your files are simply too bulky to email or transfer, flatten the layers in Photoshop before sending the image to your partner.
Each player progressively adds a layer until you reach an agreed number of steps or the end of allotted time. You and your partner may create as many frames as you want to, up to a maximum of 100 (50 images each). The minimum is 6 images in total (3 images each). Your match should take place over a maximum of 24 hours, and preferably over a single time span, such as an evening. Please log each 'Send' time via the time log on your email, and include your considerations, technique, and your ongoing story.
Specifications:
Size: 640 x 480 pixels – file size is a major consideration when transmitting over a network!
Orientation: Landscape
Color: RGB – for smaller file size
File format: .jpg, high quality (10–12)
File names: Two-digits plus extension, e.g. 00.jpg, 01.jpg, 02.jpg … 99.jpg
Folder name: Both partners’ names, e.g. "JasonGarret_SarahKahn"
Hardcopy: Provide printouts with images and text on letter-size pages.
Deliverables
1 Named Folder with numbered jpgs on digital media (CD-ROM or USB stick, copied my Mac). You will present these in class as a slide show
2 Printouts, including the text of your online conversation, descriptions of your construction methods, any ongoing story, etc.
Schedule: 2 weeks. The first week will be in-class familiarization with Photoshop, scanning, file transfer, file sharing etc.
PRINCIPLES 0F
Interaction design
PROJECTS
Project Description
In teams of four students you are to videotape or photograph a common interaction between people and technology. Common examples are: the interaction of the Automatic Teller Machine, the interaction of filling your car with gas, the interaction of taking the TTC, the interaction of ordering food in a restaurant or fast food drive through, the interaction of using the elevator etc. Feel free to be creative and find an interaction that interests your group.
Shoot video or photos, make observations and take notes while you’re participating in the interaction.
Note:
Digital camera access is limited. You can check out digital video cameras overnight from the A/V office on the third floor. All of your names are on a list of students that are authorized to borrow the cameras during the next two weeks. You will need to first go to the A/V office and sign up for a time slot, then come back at the appointed time to get the camera. Try to arrange to time-share the cameras with another group. If you have access to your own digital video or stills camera, by all means use it!
Schedule: 2 weeks
Due Date: Week 6
Project 2:
Deconstructing an Interaction & Improving it
1. Review your ethnographic material and uncover the structure of the interaction.
2. Make an annotated map or diagram of the structure. Explain:
What’s important about the interaction? What works smoothly? What breaks down? Why? What are the actions and responses that the person and the technology perform in the interaction? Does the conversation work smoothly, or does it have rough spots? What are the categories of people, things, actions, environments, etc? What are the goals of the people in the interaction? How are those goals met or not met by the system?
3. Use the map, along with your observations and gut feelings, to identify opportunities for making the interaction a better experience. With your team, brainstorm alternatives that will work. Your team will brainstorm alternatives of task, timeline or material that will substantially improve the interaction and make it a better experience. Present a coherent vision for changes to the system. Explain why you are making the changes. Identify the improvements you are suggesting, and how they will work. Feel free to identify both near-term and far-term possibilities for an improved interaction design.
Deliverables
4. Create a PowerPoint or video presentation that shows the interesting parts of your material (video/stills/observations) as well as the structure of the interaction and the suggested improvements that will transform or improve the interaction. You will have a chance to talk about the interaction in class while you are presenting. You should come prepared with your presentation burned to a Mac compatible CD.
Materials
Digital video and/or digital photographs. PowerPoint. Paper for brainstorming and note taking, diagrams, sketches etc.
Purpose
Once reviewing the ethnographic material – either tapes or digital photos – you will note the following:
1 What is the material of interaction?
2 What is the time signature of the interaction – where does it start and where does it end?
3 What are the tasks performed in the interaction?
4 What are the Mission Critical tasks on which the interaction depends?
5 How can the interaction be improved?
The purpose of the project is to practically apply the methods of interaction reviewed in class:
• Ethnographic Observation
• Video Ethnography
• Disposable Camera Studies
• Observation with Prototypes
• Cognitive Human Factors
• Social Human Factors
PRINCIPLES 0F
Interaction design
PROJECTS
Design and build a system, object, or environment that responds to continuous input from the user
Schedule: 3 weeks
Work on this project
over Reading Week!
Due Week 8:
Concept roughs
• Decide on your interactive system concept
• Create a user scenario by imagining and then storyboarding the sequence of actions required to effectively use or play with your system, along with the system's response
• Create a diagrammatic drawing of your system including input, processing and output.
Due Date: Week 9
Demonstration and hand-in.
Hand-in: Your user scenario and your diagrammatic drawing of your system, object or environment. We will create video documentation of each project's feedback behavior in class.
PROJECT 3:
Orchestrate Feedback
Project Description
You are to design and prototype an interactive interface – a system, object or environment – that invites continuous input from the user and produces feedback in response.
The interface should:
1 Communicate clearly by “form-mapping†what the intended input must be on the part of the user;
2 Not rely on verbal instructions, semantics or directions;
3 Clearly indicate where the user needs to engage the interface;
4 Communicate the desired direction of user action;
5 Provide continuous feedback to the user in such a way that the user perceives it as a response to their action;
6 Ideally produce a “musical†or “performative†result that creates a visceral or emotional response in the user and the audience watching the interaction.
Important Considerations:
• Examples of possible user input are: pushing/pulling, raising/lowering, rotating, click-dragging, squeezing, etc. Feel free to design your interactive interface so that it is enjoyable to use. You may even design it to produce many types of sensory feedback simultaneously, such as sight, touch/force, and audio etc.
• The user must understand how to start and modulate the interaction
The interface does not have to be “pretty†– but it must work!
Purpose
The purpose of the project is the practical application of cognitive mapping using metaphor as the primary indication of where the user must engage the interface. A secondary aspect of this project is the concept of feedback: the performance of the input action creates feedback that generates a meaningful interaction – informative, sensuous, and “musical.†The third is to create user scenario documents and to engage in user testing.
We will be demonstrating the interfaces in-class, and engaging in user testing with the ‘think out loud’ method of reporting our findings.
Attributes
The chief attribute of the metaphor used in the interaction is to indicate the direction of the action required by the user.
Materials
You can use any combination of materials that will aid in the creation of a “rich sensory experienceâ€. Some of these materials, but not all, may be pre-made or manufactured.
PRINCIPLES 0F
Interaction design
PROJECTS
Project Description
This is a team project that integrates all you have learned during the term in a two-stage project. You will work in teams of four and your team will collaborate with all other teams in the class for the final result. The final deliverable of this project is a class effort: the design of an Interactive Environment that defines through experiences to any user stepping inside the Experience, Meaning and Capability of Interaction Design.
The class is responsible for collaborating, and planning, designing and creating an environmental installation which is portable and can be recycled effectively.
Due Dates:
1 Scenarios are due week 10. Scenarios are marked individually.
2 Team Design Concepts are due in week 11.
3 Prototype models are due Week 12.
4 Final Show assembly is during week 14, on April 4th in the Great Hall.
5 Interact 2 Exhibition opens on April 5th.
6 Tear down and recycle is on April 6th.
A combination of Faculty and Peer Evaluation will be used in the marking of this project.
All students must participate in all stages and aspects of this project.
Project 4: TERM PROJECT
Integrated Interaction: Senses, Time Signature and Motor Response
This is a group, class and 1st Year Design Collaborative Project.
Within the Interactive Environment, each individual element will be designed and prototyped by an individual team; thus the whole will be a collective team effort.
The class will divide into approximately 6 teams. Each team will select a leader and the leaders should meet at regular intervals to insure progress and the current status of the project. Each team will be responsible for an individual and designated part of the class project.
In the first stage each team member will produce a User Scenario that describes the experiences that can be possible in the interactive space or installation. All scenarios will be read in class and discussed by all teams. The class will agree to a common experience scenario and the distribution of prototyping assignments to all teams.
In the second stage each team will further design their assigned interaction and produce quality prototypes. Functionality, intuitive cognition and clear sequence of tasks to be performed are critical. Aesthetics should also be considered. Prototype models will be created to investigate and demonstrate the working concepts.
In the third stage the teams will assemble the prototypes into the designated space, to be shared by all 17 sections of Interaction Design students. We will demonstrate the prototypes to the entire college. Marketing & advertising pieces created in class will publicize the event.
In the 4th stage, teams will all share in the teardown, disposal and recycling of the installations.
Week 15 will be used as a final critique of the experience of the course and the Term Project.
Attributes
The chief attribute of the metaphors and interactions used are to experientially illustrate what Interaction Design is all about.
Materials
You can use any combination of lightweight, portable, recyclable materials. All materials must be properly disposed of at the end of the Interact 2 Exhibition.
Budget
There will be materials costs, depending on the scale and scope of the class project, which will be shared equally by each class member. Materials costs may range from $15 - $30 each.
INTERACT 2:
The Interaction Experience Show will take place in the Great Hall at OCAD on the 5th of April. All 1st year Design Students will participate.
Principles of Interaction design
GDES 1B26
SECTIONS
9-12-13
Professor Priam GIVORD pgivord@faculty.ocad.ca
Class Assistant John Lee
johnnyfivealive@gmail.com
This course outline contains contributions by Priam Givord, Susan Gorbet, Martha Ladly,
Alex Manu, and Greg Van Alstyne
A DEFINITION OF INTERACTION DESIGN
Interaction Design is the study of principles, techniques, tools, and processes for designing interactions and objects with which and through which people interact. Interaction Design is concerned with the design of the user experience, usability and the flow of functional tasks that express and allow the full performance of a product or a system.
100 McCaul St.
Toronto, Ontario
M5T 1W1
Course Outline
1. COURSE DESCRIPTION
This course is an introduction to the design methodologies used in the design of user experiences with concepts, objects and environments and an examination of the relationship between people and interactive mediums. Through lectures and the analysis of a wide range of examples and through studio projects that provide practical experience, students are introduced to the basic concepts, methods, tools and techniques used in the definition and design of intuitive user experience and interactivity.
2. Learning Outcomes:
1 The student will demonstrate knowledge of the multifaceted communication between people and technology and its applications in contemporary design practice through:
a interactive environments and products;
b interactive information design:
c interaction and intuitive navigation.
2 Through theoretical and practical applications students will become acquainted with the methods of interaction, the rules, styles and design guidelines used in best practice worldwide through:
a information interaction methods;
b user observation;
c metaphors as tools for interaction.
3 Students will be able to use cognitive and physical factors in designing outcomes which improve the usability of products and systems, and in the creation of a compelling experience of use through:
a) cognitive mapping;
b) perception;
c) sensorial design.
4 The student will demonstrate knowledge in the techniques of user observation and evaluation and the fundamental methods of workflow and experience design through:
a) user-centered scenarios;
b interface and interactions;
c task and task analysis.
5 The student will demonstrate knowledge of the methods of storytelling and scenario based interaction design through:
a) designing for flow and experience;
b compelling experiences;
c metaphor, narrative and narrative style.
3. TEACHING METHODS & DELIVERY:
Seminars and lectures provide the foundation of this course, with surveys of modern communication theory, information design, interaction and interface design, while in-depth case histories exemplify the practical application of the concepts, methods, techniques and tools of this emerging field. Teaching methods and delivery will include a combination of lectures, demonstrations, critiques, individual and group discussions, student presentations and in- class work.
The content is grouped around the following four major issues:
• Physical and Social Human Factors/Cognitive Psychology
• Theory and Methods of Interaction
• Tangible Interaction and the Design of Usability /Experience
• User Centered Scenarios and Story Telling
Key Issues to be covered by the course content:
• Cognitive Mapping and Perception
• Information Design
• Interaction Design
• Sensorial Design
• Data, Information, Knowledge and Wisdom
• Metaphor, Narrative, Narrative Style
• Storytelling and Scenario Building
• Designing the Experience
• User Centered Scenarios and Multiple users
• Interface and Interaction, Task and Task Analysis
• Designing for Flow, Experience and Compelling Experience
• Gratifying user experience
• Quality of experience
• Desirability
• Usefulness
• Accessibility
• Affordances
• Concepts/ Perceptive Measures (Senses, Imagination, Emotion, Knowledge)
• Manner
• Material of Interaction
• Effects of Material on Form and Motion
• The time factor and time signature
• Social Rules and the nature of the experience
• Emotion
• Form/Motion
• Personality
• Flow
• Real-time
• Feedback
4. LECTURES/COURSE DELIVERY
Week 01. Jan 06 Introduction to Interaction Design
Intros - Define NEW MEDIA - Blog-chain start
1ST ASSIGNMENT > Find out about next class’s topic
Week 02. Jan 13 Mapping and Metaphor + Photoshop
Definition of Terms (Principles of design) and Workshops for scanning, Photoshop, etc. Pixel vs. Vector Graphics
SETUP ASSIGNMENT 1
Week 03. Jan 20 Narrative, Narrative Style
Kuletchov effect, Chris Marker, Switching, – Eisenstein –Tarantino (flashback – Pulp fiction>happy end) hypertext
Week 04. Jan 27 Perception and Cognition
perception≠cognition -Ted Nelson Computer Lib – Cognitive Load Issue – Cognitive dissonance necessary to learn
DUE ASSIGNMENT 1
SETUP ASSIGNMENT 2
Week 05. Feb 03 Sensorial Design
Analog/Digital Definitions (spectral pattern, modulation vs. binary, Morse code)
Channels, senses, Flow – concept of interpolation, Proprioception, Real-time
Week 06. Feb 10 User Centered Task Analysis and Experience Design
Feedback Shannon Theory of information, Norbert Wiener Cybernetics, Noise, SIGGRAPH docs
5. STUDENT COURSE LOAD:
5.1 Class time: Three hours per week. This class meets once a week for a three hour session.
5.2 Prep time:
For every three hours spent in class, a minimum of three hours per week on average will be spent completing assignments outside class time.
5.3 Grading Scheme and Projects:
Grades for this course will be broken down as follows:
20 % Assignment # 1 Photoshop Time-Based Collaborative Narratives
20% Assignment # 2 Ethnography & User-Based Interactions
20% Assignment # 3
Sensorial and Effective Interaction Design
25% Assignment # 4 Final Term Project
5% Process Documentation
Including Class-specific Blogging
10% Class Participation & Individual Progress
TOTAL 100%
DUE ASSIGNMENT 2
SETUP ASSIGNMENT 3
Week 07. Feb 17 Study Week - No Classes
Week 08. Feb 24 Field Trip: Design of User Interfaces
WORKSHOP ASSIGNMENT 3 >> Mouse Sensor VS Keyboard Sensor
Halfway in-between the say and the do (Derrida) – Gestalt - D.Engelbart – Definition of Interface Design and related General and Technical key terms: Perspective – Architecture – Transition – Perception – Context, Sequential vs. Parallel
Week 09. Mar 03 Interaction & User Scenario Building
DUE ASSIGNMENT 3
SETUP ASSIGNMENT 4
Week 10. Mar 10 The Process of Designing for Flow
Interface Design concepts
DUE ASSIGNMENT 4 > Individual Scenarios
Week 11. Mar 17 Prototyping
Steps of teamwork: Selected concept, putting it together
DUE ASSIGNMENT 4 > Team Design Concepts
Week 12. Mar 24 User & Usability Testing
SIGGRAPH docs, Jack Principles
DUE ASSIGNMENT 4 > Prototype models
Week 13. Mar 31 Collaboration, Execution Interact 3! Show.
DUE ASSIGNMENT 4 > Final Show assembly is during week 13, on March 30th in the Great Hall. Interact 3 Exhibition opens on March 30th. Tear down and recycle
Week 14. Apr 07
Interact 3! Analysis, Discussion, Review
Week 15. Apr 14 Critique Critique, Analysis, Evaluati
6. EVALUATION CRITERIA:
A variety of methods will be used to evaluate student progress, such as individual and group research and design projects that may include written components, presentations, field trips, assigned readings, and participation in class project work and discussions.
Evaluation criteria will depend on the method in question, but will always include the following elements; an analysis and understanding of the project or research brief, the pursuit of original thinking and research from a variety of different resources, an appropriate level of questioning and enquiry into the issue under scrutiny, a well organized in-class presentation, timely completion of work and presentation and/or hand-in of the project, interest and attention to the presentations of others, and participation in discussion in class.
Grades at the level of Satisfactory (C = 65–69%) are anticipated to be the average for this course.
To obtain pass standing in a course, a student must complete required and assigned course work, as described in the course outline, to the satisfaction of the teaching faculty. Evaluation of student performance is based upon a reasonable diversity of methods. Students are evaluated on their work according to the breakdown in the Grading Scheme and the criteria listed below. Numerical grades may be translated into letter grades based upon the following scale. For averaging purposes in determining a student’s overall standing, fail grades are calculated as 45%.
7.1. ATTENDANCE POLICY:
Since students benefit from an active involvement with faculty and with their fellow students, the College requires that they attend and participate fully in classes on a regular basis. Marks are not assigned for attendance. However, a student with three or more unexcused absences may be assigned a failing grade for that course. Students who are more than 30 minutes late for a class may, at the discretion of the faculty member, be marked absent.
7.2. TEAMWORK
If an individual is absent during group work, this individual only will lose 5% or more out of the group’s final mark if the faculty judges that they prevented their group mates from completing their assignment on time.
Members of a work group are expected to establish contact with their group mates as soon as groups are formed and assignments are given. They are also responsible to meet their group mates outside class time to complete group assignments.
7.3. IN CLASS
No opened Laptops will be tolerated during class hours unless expressly permitted by the faculty member. Students are expected to take notes and to refer to the Blog if they did not attend a previous class.
8.1. BACKUP:
Students are responsible for backup of their assignment material. Being accustomed to the digital medium implies integrating its weaknesses. Penalty will be applied disregarding data loss of any kind: broken hard drive, deletion, software bugs-crashes etc.
90-100% A+ Exceptional
Exceeded expectations in demonstrating knowledge of concepts and/or techniques, and exceptional skill in their application in satisfying the requirements of a course.
80-89% A Excellent
Demonstrated a thorough knowledge of concepts and/or techniques, and with a very high degree of skill in their application in satisfying the requirements of a course.
70-79% B Good
Demonstrated a good knowledge of concepts and/or techniques, and considerable skill in their application in satisfying the requirements of a course.
60-69% C Satisfactory
Demonstrated a satisfactory level of knowledge of concepts and/or techniques and competence in their application in satisfying the requirements of a course.
50-59% D Pass
Demonstrated minimal knowledge and ability to apply concepts and/or techniques in satisfying the requirements of a course.
0-49% F Fail
Failure to meet course requirements.
6.1 Late Work:
Late work will not be accepted without permission of the Faculty member. No late work will be accepted more than seven days after the initial due date. All late work will be assessed a minimum penalty of 30% per week, at the discretion of the individual Faculty member.
06.2 Incomplete Grades:
An incomplete grade is considered when students encounter unexpected difficulty completing course work within the semester. Students must discuss their situation with their instructor and request an incomplete grade prior to the end of the semester. Incomplete grades are filed at the discretion of the teaching faculty. Students with incomplete grades must complete all course work by the deadline listed in the Calendar. See the Calendar for details.
06.3 Academic Integrity:
Plagiarism, misrepresenting personal performance or status and any conduct, which damages the integrity of scholarly and artistic activity, is unacceptable. Academic penalties will result. See the Calendar for details.
8.2. REQUIRED MATERIALS
Access to a Personal Computer is required for at least four hours per week for the adequate performance of assignments. The following software tools must be installed: Photoshop, Illustrator, InDesign, Web Browser, Web Authoring, PowerPoint and Word Processing + Spreadsheet.
Programs are installed on the computers in the First Year Computer Lab. Students will learn to work with these tools in the performance of the assignments given. Students must acquire a beginner level expertise of these software tools.
In addition, access to a digital camera will be of benefit in this course. Digital video and still cameras can be borrowed from the AV Loans Dept.
Materials Fees: Anticipate a $50 fee for materials, digital videotape, Cds etc, and for construction and other materials for the Final Term Project.
9. SUGGESTED TEXTS AND SOURCES
__DIGITAL WORLD / INTERFACE DESIGN
Apple Computer.
Macintosh Human Interface Guidelines.
Addison-Wesley, Reading, Mass., 1992.
Beardsly, Sally.
Conversations at the Interface.
Dansk Design Centre, 1994.
Beyer, H. and Holtzblatt, K.
Contextual Design.
San Francisco: Morgan Kaufman, 1998.
Bohm, D.
Thought as a System.
London: Routledge, 1994.
Preece, Jennifer et al.
Interaction Design: beyond human-computer interaction
John Wiley & Sons, Inc., 2002.
Raskin, J.
The Humane Interface
Addison-Wesley, 2000.
Carroll, J.M., Mack, R.L, and Kellogg, W.A..
Interface metaphors and user interface design.
Helander, M. (ed.) Elsevier Science Publishers B.V. (North-Holland). 67-85. 1988.
Negroponte, Nicholas.
Being Digital.
Paperback, Random House, Incorporated, 1995
Tufte, Edward R.
Envisioning Information. + related books
7th ed Graphics Press. 1990.
Wardrip-Fruin, Noah(editor) Monfort, Nick(editor).
The New Media Reader.
The MIT Press, Cambridge, Massachusetts 2003.
__COGNITIVE / PERCEPTION / HUMAN FACTOR
Barlow, H. & Mollon, J. eds.
The Senses.
Cambr. Univ. Press. 1982.
Axelrod, R.
The Evolution of Co-operation.
New York: Harper/Collins, 1984.
Bruce, V. , Green, P.R., & Georgeson M..
Visual Perception: Physiology, Psychology and Ecology.
3rd ed., Psychology Press, Hove. 1996.
Eysenck M.W.& Keane, M.T.
Cognitive Psychology.
(4th ed.) Hove: Psychology Press, 2000.
Gregory, R.L.
Eye and Brain
London: Oxford University Press. 1994.
Rauterberg, Matthias.
Human Perception, Cognition and Action
www.ipo.tue.nl/homepages/mrauterb/rauterberg.html. 2001.
Sekuler, R. & Blake, R.
Perception.
3rd ed. 1994.
Pinker, Steven.
The Language Instinct: How the Mind Creates Language
Paperback, HarperCollins Publishers, 2000.
Csikszentmihalyi, Mihaly.
Flow: The Psychology of Optimal Experience.
Paperback, Harper Perennial, 1st ed 1991.
McLuhan, Marshall – Fiore, Quentin.
The Medium is the Massage.
Paperback, Gingko Press, 2001.
Sacks, Oliver.
The Man Who Mistook His Wife For A Hat: And Other Clinical Tales.
Paperback, Simon & Schuster Adult Publishing Group, 1998
__DESIGN
Kelley, T., Littman, J.
The Art of Innovation
Doubleday, 2001
Norman, Donald.
Emotional Design
Basic Books, 2004.
Norman, Donald.
The Design of Everyday Things
Bantam Doubleday Dell, 1998.
__MISCELLANEOUS
Van Der Heijden, K.
Scenarios: the Art of Strategic Conversation.
New York: Wiley, 1996.
Barthes, Roland, Richard Howard (Translator)
Camera Lucida: Reflections on Photography.
Paperback, Hill and Wang, 1982
__NOVELS
Dick, Philip K.
Ubik.
Paperback, Vintage Books Originally published in 1969.
Stephenson, Neal.
Snow Crash.
Paperback, Bantam Spectra Book Originally published in 1991.
__MAGAZINES
WIRED Magazine – read every month’s issue (also http://www.wired.com)
ID Magazine, Fashion & Product Design
10. URL Reference and Resources:
__TECH / SOFTWARE
Virtools http://www.virtools.com/
MIT Media Lab http://www.media.mit.edu/
Adobe http://www.adobe.com/
Apple Computer http://www.apple.com/
Builder.com http://www.builder.com/
Flash Kit http://www.flashkit.com/
Macromedia http://www.macromedia.com/
Slashdot Nerd site http://slashdot.org/
Tucows software, shareware http://www.tucows.com/
Webmonkey http://www.webmonkey.com/
Web Reference http://www.webreference.com/
Web Development http://www.developer.com/
Nerd news site: http://slashdot.org/
__COMMUNITY / NEWS
Get blogging@ http://www.blogger.com/
Established, respected news source http://www.salon.com/
News, profiles, mugshots http://www.designiskinky.net
Great get lost all day portal http://www.newstoday.com
Bite sized entertainment http://www.120seconds.com/
American joke news source http://www.theonion.com/
Because content is king http://www.surfstation.lu
Great opinionated news, reviews http://www.pixelsurgeon.com/
Canadian on-line talent http://www.allmaple.com
Art & Design blog http://www.ncf.ca/~ek867/wood_s_lot.html
Canadian digital arts and culture http://www.horizonzero.ca/
Web content primer http://www.alistapart.com/
Digital news & design http://www.digitalthread.com/
__DESIGN / ART
Cool Home Pages http://www.coolhomepages.com/
John Maeda http://www.maedastudio.com/index.php
MIT Media Lab http://www.media.mit.edu/
An intelligent applet http://alumni.media.mit.edu/~murtaugh/NIF/NIFApplet.html
Another application of the Rollover http://www.dontclick.it/
One portfolio
http://nicolas.queffelec.fr/portfolio_flash/index.htm
Canadian youth art & issues site http://www.terminus1525.ca/
On-line art and writing experiments http://bornmagazine.com/
Interface & Usability http://www.useit.com/
British based ultra hip fashion & art http://www.showstudio.com/
Games Design http://www.gamasutra.com/
IDEO http://www.ideo.com
It’s Heavy (music) http://www.heavy.com/
Oculart http://www.oculart.com
Presstube http://www.presstube.com/
Art/Design/Culture index http://www.threeoh.com
Turbulence (see Peter Horvath) http://www.turbulence.org/
Flight 404 http://www.flight404.com/
Web designer’s lunchbox http://www.k10k.net
Empty but interesting http://www.kiiroi.nu/
Terms and
Their Meaning
Basic Interaction Design Principles:
A little bit of vocabulary
v2.
Visibility
Feedback
Affordances
Mapping:
Physical
Logical
Semantic
Cultural
Constraints
Visibility
How do you know what state an object is in? Visibility is the indication of both the system’s current status and the current choices for interaction. The more clearly visible the status and choices, the more likely users will know what to do next.
Examples: How do you know whether your clock radio’s alarm is set? If you don’t, then it doesn’t have good visibility. How do you know when your toaster is still toasting? If you can tell without peering in the top, then it probably has good visibility of the current state of the toaster. How do you know whether the dishwasher is clean? Newer dishwashers added a “clean†light to make the dishwasher’s status more visible.
Feedback
What tells you that your input has had an effect? Feedback is the system’s response to a user’s action. Good feedback is timely, uses an appropriate modality (e.g. visual, aural, tactile), and is as unobtrusive as possible to still get its point across. Often, the result of an action is a change to the state of the system. If the system status is clearly visible (see above) then the state change will also provide good feedback.
Examples: When you take a photo, what is the feedback that lets you know when you’ve actually taken it? Have you ever submitted a web form more than once because you weren’t sure if your request had been acted on? That was probably because you didn’t get good feedback. Why is it so satisfying to extend and retract a ballpoint pen? If designers came up with a soft, silent keyboard, would that be a good idea? Without the tactile feedback, how would you know when you had pushed a key? Do you think that on-screen feedback is enough?
Affordances
Does the object’s appearance indicate what it does? Affordances are the perceived and actual physical properties of an object that dictate how it can possibly be used. One way to think about it is that an affordance gives a clue about what physical actions a user might take to activate an object. Affordances refer to the actual physical shape of items, not to the cultural and contextual knowledge that we all carry around about how things work. Virtual items on a screen have perceived affordances.
Examples: When you see a handgun (toy or real), is it immediately obvious where to put your hand? In general, gun handles afford grasping. How many times have you pushed on a door that said “Pull†or vice versa? Was it because the door handle afforded grasping and pulling even though it was supposed to be pushed? Does the button on a mouse seem like it should be pushed or pulled? It’s flat and wide, so it affords pushing – it would be mighty difficult to pull. What does the handle on a mug tell you about how it should be used? Why is a flashlight shaped the way it is? So it affords grasping. Why did designers make buttons on web pages look 3-dimensional? It was so that users would have the perceived affordance of pushing. (These days we understand the button metaphor, and the additional 3-D mapping is not necessary to indicate an action is required.)
Mapping
How do you know which control operates what function? Mapping refers to the relationship between controls and their effects. Good mapping takes advantage of natural relationships, often spatial, to reduce the user’s need to think about which does what every time they want to perform an action. Labels are often a way to make up for poor mapping.
Examples: Have you ever seen a light switch located outside the room that the light was in? Because of that, did you ever turn off the light on someone because you didn’t know they were in the room? That’s because there’s a poor mapping between the light switch and the light that it controls. Have you ever accidentally turned on the wrong burner on your stove? Many stoves don’t have a clear mapping between the dials and the burner that each controls.
Mappings generally come in two flavors:
physical mapping and semantic mapping.
Physical mapping refers to the physical relationship between the controls and their effect – how are the controls physically arranged, and what does that tell you about what they will do when activated? On a stove, the controls on the left usually work the burners on the left side, and the controls on the right usually work the burners on the right. That’s a good physical mapping.
Semantic mapping refers to a relationship that’s established by the meaning (semantics) of, for instance, the labels on the controls. On a stove, you often see labels that say “Upper Left†or “Front Right†– these are trying to establish a semantic mapping. In general, semantic mapping is much weaker than physical mapping, and of course, relies on the user’s ability to read the language (usually English) or understand the semantic symbols employed.
Constraints
How do you know what you can and cannot do? Constraints are ways of restricting the user’s possibilities for interaction. Well-designed constraints are obvious enough that the user does not need to try other options to know that the constraint exists. Constraints can be thought of in four categories: physical constraints restrict the physical movement of things; logical constraints rely on people’s common-sense reasoning about the world to deduce possible actions; semantic constraints rely on the meaning of the parts of a system to dictate the possible relationships; and cultural constraints are abstract, and rely on learned conventions.
Examples:
Physical – How many directions can you move a light switch? How many functions does a light switch perform? The switch movements are constrained to the two possible actions – on or off. Is it possible to put a 3-prong plug into an electrical outlet the wrong way? The physical constraint of the extra prong makes that exceedingly difficult.
Logical – If 3 puzzle pieces will all fit in the same space, then how do you decide which one is correct? By using logic to deduce things like “The blue one can’t go here because there isn’t any blue nearby, so it must be the green one.â€
References:
Norman, Donald A. The Design of Everyday Things. New York: Currency/Doubleday, 1998.
Preece, Jennifer et al. Interaction Design: beyond human-computer interaction. New York: John Wiley & Sons, Inc., 2002.
Raskin, Jef, The Humane Interface. Boston: Addison-Wesley, 2000.
Thanks to Susan Gorbet for writing the original V1.
Semantic – How do you know which tiles you can legally play in Scrabble? The little squiggles on the tiles have meaning – they are letters, and those letters have meaning which dictates their possible relationships to each other. By reading the rules of Scrabble and using the marks on the tiles to determine which plays are legal, you are using the semantic information on the tiles to constrain your possible choices of placement.
Cultural – If a road sign is red and octagonal, what does that mean? If a computer menu item is a lighter grey than the others, what does that mean? How do you know these things? You use your cultural knowledge to tell you how you should respond. The only thing that keeps you from blasting through a red light is that you know what it means in our society – that’s a cultural constraint.
Habituation and Breakdown
When you’re using a system for the umpteenth time, how much effort does it take? What happens when something goes wrong? Habituation refers to the state in which a user has internalized a representation of the system to the point where they can use it while only thinking of their task, not thinking about the system. Breakdown is what happens when an event then occurs to pull thoughts about the system to the foreground.
Examples: When you’re using MS Word to write a letter, are you using MS Word, or writing a letter? What should you feel like you’re doing?
When you’re driving a car, how much do you think about the spark plugs or the tires? What happens when you get a flat tire?
Have you ever done something dumb in traffic because you were trying to change the radio station? Or talking on your cell phone?
How can car radios and cell phones be designed so that doesn’t happen?
PRINCIPLES 0F
Interaction design
PROJECTS
Build a visual story
You will be working on this project with a partner so choose one person in the class that you'd like to work with.
By creating frames within a collaborative presentation, you will be working both individually and in collaboration with your partner to build an unfolding, image-based narrative.
Each team will present its work in slide show format.
Reference: http://www.g4techtv.com/techtvvault/features/33510/Photoshop_Tennis.html? http://www.baseboard.net/gallery/showgallery.php?cat=510&thumb=1
Schedule: 2 weeks
Due Date: Week 4
Project 1:
Create a Collaborative Image and Time-Based Narrative
It's a very simple idea. Working with a partner, you will build a visual story, poem or diagram, frame by frame, based on your own images and design ideas.
Player one creates a layer in a Photoshop document. Use your own images, found images, or a combination of both. The design can exhibit any aesthetic sensibility you like – personal, poetic, technical, political, anything! Text may be used to highlight ideas, to describe what you’re thinking or doing, to touch on technical points of construction, to label your references, or to form a dialogue.
When the first image is done, you save a 'flat' jpeg of the image as "00.jpg," then email, MSN or IM the .psd (Photoshop file) to your partner who then creates a new layer in the document with his/her own images and text. The goal is to use each turn to evolve the image in your own direction, while respecting and building on the existing elements. At each turn you save a .jpg then send back the new version of the .psd document to your partner.
One advantage of using a chat client such as iChat, MSN or ICQ to transfer the file is they support larger attachments than most email accounts. If your files are simply too bulky to email or transfer, flatten the layers in Photoshop before sending the image to your partner.
Each player progressively adds a layer until you reach an agreed number of steps or the end of allotted time. You and your partner may create as many frames as you want to, up to a maximum of 100 (50 images each). The minimum is 6 images in total (3 images each). Your match should take place over a maximum of 24 hours, and preferably over a single time span, such as an evening. Please log each 'Send' time via the time log on your email, and include your considerations, technique, and your ongoing story.
Specifications:
Size: 640 x 480 pixels – file size is a major consideration when transmitting over a network!
Orientation: Landscape
Color: RGB – for smaller file size
File format: .jpg, high quality (10–12)
File names: Two-digits plus extension, e.g. 00.jpg, 01.jpg, 02.jpg … 99.jpg
Folder name: Both partners’ names, e.g. "JasonGarret_SarahKahn"
Hardcopy: Provide printouts with images and text on letter-size pages.
Deliverables
1 Named Folder with numbered jpgs on digital media (CD-ROM or USB stick, copied my Mac). You will present these in class as a slide show
2 Printouts, including the text of your online conversation, descriptions of your construction methods, any ongoing story, etc.
Schedule: 2 weeks. The first week will be in-class familiarization with Photoshop, scanning, file transfer, file sharing etc.
PRINCIPLES 0F
Interaction design
PROJECTS
Project Description
In teams of four students you are to videotape or photograph a common interaction between people and technology. Common examples are: the interaction of the Automatic Teller Machine, the interaction of filling your car with gas, the interaction of taking the TTC, the interaction of ordering food in a restaurant or fast food drive through, the interaction of using the elevator etc. Feel free to be creative and find an interaction that interests your group.
Shoot video or photos, make observations and take notes while you’re participating in the interaction.
Note:
Digital camera access is limited. You can check out digital video cameras overnight from the A/V office on the third floor. All of your names are on a list of students that are authorized to borrow the cameras during the next two weeks. You will need to first go to the A/V office and sign up for a time slot, then come back at the appointed time to get the camera. Try to arrange to time-share the cameras with another group. If you have access to your own digital video or stills camera, by all means use it!
Schedule: 2 weeks
Due Date: Week 6
Project 2:
Deconstructing an Interaction & Improving it
1. Review your ethnographic material and uncover the structure of the interaction.
2. Make an annotated map or diagram of the structure. Explain:
What’s important about the interaction? What works smoothly? What breaks down? Why? What are the actions and responses that the person and the technology perform in the interaction? Does the conversation work smoothly, or does it have rough spots? What are the categories of people, things, actions, environments, etc? What are the goals of the people in the interaction? How are those goals met or not met by the system?
3. Use the map, along with your observations and gut feelings, to identify opportunities for making the interaction a better experience. With your team, brainstorm alternatives that will work. Your team will brainstorm alternatives of task, timeline or material that will substantially improve the interaction and make it a better experience. Present a coherent vision for changes to the system. Explain why you are making the changes. Identify the improvements you are suggesting, and how they will work. Feel free to identify both near-term and far-term possibilities for an improved interaction design.
Deliverables
4. Create a PowerPoint or video presentation that shows the interesting parts of your material (video/stills/observations) as well as the structure of the interaction and the suggested improvements that will transform or improve the interaction. You will have a chance to talk about the interaction in class while you are presenting. You should come prepared with your presentation burned to a Mac compatible CD.
Materials
Digital video and/or digital photographs. PowerPoint. Paper for brainstorming and note taking, diagrams, sketches etc.
Purpose
Once reviewing the ethnographic material – either tapes or digital photos – you will note the following:
1 What is the material of interaction?
2 What is the time signature of the interaction – where does it start and where does it end?
3 What are the tasks performed in the interaction?
4 What are the Mission Critical tasks on which the interaction depends?
5 How can the interaction be improved?
The purpose of the project is to practically apply the methods of interaction reviewed in class:
• Ethnographic Observation
• Video Ethnography
• Disposable Camera Studies
• Observation with Prototypes
• Cognitive Human Factors
• Social Human Factors
PRINCIPLES 0F
Interaction design
PROJECTS
Design and build a system, object, or environment that responds to continuous input from the user
Schedule: 3 weeks
Work on this project
over Reading Week!
Due Week 8:
Concept roughs
• Decide on your interactive system concept
• Create a user scenario by imagining and then storyboarding the sequence of actions required to effectively use or play with your system, along with the system's response
• Create a diagrammatic drawing of your system including input, processing and output.
Due Date: Week 9
Demonstration and hand-in.
Hand-in: Your user scenario and your diagrammatic drawing of your system, object or environment. We will create video documentation of each project's feedback behavior in class.
PROJECT 3:
Orchestrate Feedback
Project Description
You are to design and prototype an interactive interface – a system, object or environment – that invites continuous input from the user and produces feedback in response.
The interface should:
1 Communicate clearly by “form-mapping†what the intended input must be on the part of the user;
2 Not rely on verbal instructions, semantics or directions;
3 Clearly indicate where the user needs to engage the interface;
4 Communicate the desired direction of user action;
5 Provide continuous feedback to the user in such a way that the user perceives it as a response to their action;
6 Ideally produce a “musical†or “performative†result that creates a visceral or emotional response in the user and the audience watching the interaction.
Important Considerations:
• Examples of possible user input are: pushing/pulling, raising/lowering, rotating, click-dragging, squeezing, etc. Feel free to design your interactive interface so that it is enjoyable to use. You may even design it to produce many types of sensory feedback simultaneously, such as sight, touch/force, and audio etc.
• The user must understand how to start and modulate the interaction
The interface does not have to be “pretty†– but it must work!
Purpose
The purpose of the project is the practical application of cognitive mapping using metaphor as the primary indication of where the user must engage the interface. A secondary aspect of this project is the concept of feedback: the performance of the input action creates feedback that generates a meaningful interaction – informative, sensuous, and “musical.†The third is to create user scenario documents and to engage in user testing.
We will be demonstrating the interfaces in-class, and engaging in user testing with the ‘think out loud’ method of reporting our findings.
Attributes
The chief attribute of the metaphor used in the interaction is to indicate the direction of the action required by the user.
Materials
You can use any combination of materials that will aid in the creation of a “rich sensory experienceâ€. Some of these materials, but not all, may be pre-made or manufactured.
PRINCIPLES 0F
Interaction design
PROJECTS
Project Description
This is a team project that integrates all you have learned during the term in a two-stage project. You will work in teams of four and your team will collaborate with all other teams in the class for the final result. The final deliverable of this project is a class effort: the design of an Interactive Environment that defines through experiences to any user stepping inside the Experience, Meaning and Capability of Interaction Design.
The class is responsible for collaborating, and planning, designing and creating an environmental installation which is portable and can be recycled effectively.
Due Dates:
1 Scenarios are due week 10. Scenarios are marked individually.
2 Team Design Concepts are due in week 11.
3 Prototype models are due Week 12.
4 Final Show assembly is during week 14, on April 4th in the Great Hall.
5 Interact 2 Exhibition opens on April 5th.
6 Tear down and recycle is on April 6th.
A combination of Faculty and Peer Evaluation will be used in the marking of this project.
All students must participate in all stages and aspects of this project.
Project 4: TERM PROJECT
Integrated Interaction: Senses, Time Signature and Motor Response
This is a group, class and 1st Year Design Collaborative Project.
Within the Interactive Environment, each individual element will be designed and prototyped by an individual team; thus the whole will be a collective team effort.
The class will divide into approximately 6 teams. Each team will select a leader and the leaders should meet at regular intervals to insure progress and the current status of the project. Each team will be responsible for an individual and designated part of the class project.
In the first stage each team member will produce a User Scenario that describes the experiences that can be possible in the interactive space or installation. All scenarios will be read in class and discussed by all teams. The class will agree to a common experience scenario and the distribution of prototyping assignments to all teams.
In the second stage each team will further design their assigned interaction and produce quality prototypes. Functionality, intuitive cognition and clear sequence of tasks to be performed are critical. Aesthetics should also be considered. Prototype models will be created to investigate and demonstrate the working concepts.
In the third stage the teams will assemble the prototypes into the designated space, to be shared by all 17 sections of Interaction Design students. We will demonstrate the prototypes to the entire college. Marketing & advertising pieces created in class will publicize the event.
In the 4th stage, teams will all share in the teardown, disposal and recycling of the installations.
Week 15 will be used as a final critique of the experience of the course and the Term Project.
Attributes
The chief attribute of the metaphors and interactions used are to experientially illustrate what Interaction Design is all about.
Materials
You can use any combination of lightweight, portable, recyclable materials. All materials must be properly disposed of at the end of the Interact 2 Exhibition.
Budget
There will be materials costs, depending on the scale and scope of the class project, which will be shared equally by each class member. Materials costs may range from $15 - $30 each.
INTERACT 2:
The Interaction Experience Show will take place in the Great Hall at OCAD on the 5th of April. All 1st year Design Students will participate.
posted by jlee at 6:02 PM
0 comments
