Web & Interaction Design - Spring '15
Location: Communications 0009A
Time: T 3:30pm-6:30pm
Professor: Robert Spahr
Contact: rspahr@siu.edu
Office: MCMA 1121E
Office Hours:
T 12:30pm-1:30pm
W 11:00am-3:00pm
R 12:30pm-1:30pm
& by appointment
Course Syllabus Location: http://www.robertspahr.com/ides/
Course Listing: Web & Interaction Design - 22414 - MCMA 512 - 001
Required Text:
1. DESIGNING FOR INTERACTION Creating Smart Applications and Clever DevicesPurchase a printed copy:
Saffer, Dan DESIGNING FOR INTERACTION Creating Smart Applications and Clever Devices New Riders.(2nd Edition)
2. Free Software, Free Society: Selected Essays of Richard M. Stallman
Download a PDF copy of the book:
Stallman, Richard M., Free Software, Free Society: Selected Essays of Richard M. Stallman Free Software Foundation, 2002 (Second Edition 2010).
Or purchase a printed copy:
Stallman, Richard M., Free Software, Free Society: Selected Essays of Richard M. Stallman Free Software Foundation, 2002 (Second Edition 2010).
3. All other readings will be distributed in class or available online.
Further Suggested Reading:
Packer, Randall & Jordan, Ken. Multimedia From Wagner to Virtual Reality. New Yok, NY, W. W. Norton & Company
View the book online:
Multimedia From Wagner to Virtual Reality
Description:
In this course emphasis is on designing for interactive media (e.g., CD-ROMs, Web sites, mobile devices, interactive installations, performance). This course goes a step beyond Human-Computer Interaction (HCI) and graphic design, to develop skills for current and next-generation interactive technologies. We will explore a mixed set of skills from different disciplines such as HCI, web-design, computer science, psychology, information systems, marketing, entertainment and business. Specific skills will be developed such as designing storyboards, navigational systems, wireframes, and user testing. Individual final projects focus on appropriateness of communication design, inventiveness, and nonlinear organization of many elements.
Syllabus:
Be sure to check back often for any updated information.
Jan 20
Introduction and course overview
Viewing:
Darth Vader Feels Blue, 1:46
Meet Amazon's robot army, 1:38
GNU User Lib video, 2:53
BigDog Overview (Updated March 2010), 03:35
The Great Gatsby (2013) Visual Effects Before & After Clip [HD], 3:57
USAF MQ-1 Predator Drone Engage Insurgents & Insurgent Vehicle. Afghanistan, 3:05
PressTV News (Iranian Intl News Network): US drone strike kills 5 in Pakistan's tribal region, 3:25
Casey Neistat: Snapchat Murders Facebook, 5:46
IHOP's New Menu Design - Jan 10, 2014, PDF
Sebastian Deterding: What your designs say about you, 12:24
Assignment Lab 1: Compare and Contrast
Assignment Lab 2: Interaction Observation
Jan 27
Lecture / Demo: Photoshop & The Gimp
Lab 1 & 2 is due.
Assignment Lab 3: Screen Based Interactive System & Flow Chart
What is Free Software?
Further Information: Free Software and Privacy
Web based software to create flow charts
Free / Open Source Software: Dia Diagram Editor
Sample Flow Chart
Sample Game Instruction
Microsoft Unveils HoloLens and Surface Hub at Windows 10 Conference, Jan 21, 2015
Feb 03
Lecture / Demo: Photoshop & The Gimp - Continued
Lab 3 is due.
Assignment Lab 4: User Interface Redesign
PDF Manual - Universal Remote UR5U-8700L
Feb 10
Interaction Design Basics
Lecture: Interactive Design Basics
Reading:
DFI [Chap. 1-3]
FSFS [Part I-III]
Viewing:
Sheena Iyengar: How to make choosing easier 16:00
Web Resources:
Richard Stallman on free software 15:53, Uploaded on Feb 6, 2012
Richard Stallman - Social Media, Free Software, & Anonymous. 11:36, December 02, 2011
Richard Stallman - Freedom, Copyright & Privacy 10:22, April 16, 2009
Feb 17
Design Research & The Craft of Interactive Design
Lecture: Design Research & The Craft of Interactive Design
Lab 4 is due.
Reading:
DFI [Chap. 4-6]
FSFS [Part IV]
Feb 24
Interface Design Basics
Lecture: Interface Design Basics
Reading:
DFI [Chap. 7-9 & Epilogue]
FSFS [Part V-VII]
Viewing:
Kevin Kelly: On How Technology Evolves, 19:58
Mar 03
Open Studio
Research/Design improved interactive system
Tim O'Reilly: What Is Web 2.0, September 2005.
Jaron Lanier: The Local-Global Flip, or, "The Lanier Effect", August 2011
Mar 10
Spring Break - No Class Meeting
Mar 17
Project #1 is due. Presentation/Critique
Mar 24
Open Studio
Research/Design improved interactive system
Model improved system
Viewing:
ISOC-NY Event: Eben Moglen ‘Freedom in the Cloud’ – 2/5/2010
ISOC-NY Event: Eben Moglen ‘Freedom in the Cloud’ – 2/5/2010 - Part 2 - Q & A
Will 3D Printing Change the World? | Off Book | PBS, 07:23
Mar 31
Open Studio
Research/Design improved interactive system
Model improved system
Apr 07
Open Studio
Research/Design improved interactive system
Model improved system
Apr 14
Open Studio
Model improved system
Reading:
Clay Shirky: Newspapers and Thinking the Unthinkable
the death of journalism? (or journalism in the era of open)
Viewing:
Jacek Utko: Can design save the newspaper?
Anand Agarawala demos BumpTop, 4:43
Nicholas Negroponte on One Laptop per Child, two years on, 16:36
Nicholas Negroponte, in 1984, makes 5 predictions 25:27
Apr 21
Open Studio
Build and test site
Apr 28
Open Studio
Build and test site
May 05
Project #2 Due. Presentation/Critique
May 14 - Thursday - 2:45pm-4:45pm
Project #2 - Presentation/Critique Continued
Project 1: Improving an Interactive System
Research an interactive system. Design an improved interactive system. Model the improved system. Details will be discussed in class.Deliverables:
1. A cover letter stating:
a. your problem
b. your solution
c. the contents of the deliverables package
d. what each deliverable describes (aspects of the problem, aspects of the solution, etc.)
In the cover letter, do not assume that I already understand your problem.
2. An annotated model that summarizes your research of the current system. (Can be a flow chart, a process map, a venn diagram, a matrix, or a map.)
3. At least 2 personas (primary and secondary).
4. An annotated wireframe of the redesigned system.
5. A storyboard. This should illustrate key moments of the interactive action of the redesigned system.
6. A digital prototype of the redesigned system.
Note: You are not actually implementing your redesign of the system. You are submitting documents that would provide the blueprints for such a redesign.
At the most basic level, your deliverables should explain the original problem and how you solved it.
You will put your deliverables (1-5 in PDF format, 6 in any appropriate media) in a folder labeled "LastName_project1" and bring these files to class, to be collected on my USB Key.
Grading Criteria for Project #1:
How well you follow the above format with a considered and sensible approach including clear, concise descriptions showing a depth of research and design.
Project 2: Web Site / Screen Based System Redesign
Use HTML, and/or any other software (Photoshop,Illustrator, GIMP, etc.) to redesign an exisiting web site, or screen based system. Details will be discussed in class.You will put your deliverables (in an appropriate media) in a folder labeled "LastName_project2" and bring these files to class, to be collected on my USB Key.
Deliverables:
1. a wireframe
2. three mockups
3. user testing documentation
4. a final mockup of a mini-site
Grading Criteria for Project #2:
1. thoroughness of research (pre-design, post-design, appropriateness of final design to user requirements)
2. interactive design (navigation, menus, labels, information architecture)
3. visual design (fonts, layout, colors, overall look and feel)
Evaluation:
Your final grade will be determined by the following:
- 30% Weekly Assignments/Participation
- 35% Project #1 Improving an Interactive System
- 35% Project #2 Site Redesign
Sketchbook
As part of your weekly assignments you will need a sketchbook. I suggest a Black, bound 8.5"x11", to travel with you throughout the semester for quick sketches, small color studies, ideas and assignments. This book can also be used for class notes when important technical information and demonstrations are given.
Attendence to all classes is expected. There are no acceptable number of absences. More than two unexcused absences may result in failure for the class. Two lates are the equivalent of one absence. Leaving a class early is considered equivalent to arriving late.
All assignments and projects are due at the beginning of class.
Web Resources:
Experimental Interfaces
Technical Skills
Controlling the Network &Intellectual Property
Open Source/Free Software Movement
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Art and Design Glossary
Experimental Interfaces
Technical Skills
Setting Type on the Web to a Baseline Grid
The Elements of Typographic Style Applied to the Web
Zen Garden - The Beauty of CSS Design
Web Page Design for Designers: Typography
Image Map for Detailed Information
useit.com: Jakob Nielsen's Website
IE8 Version Targeting causes quite a stir
Controlling the Network & Intellectual Property
Wired.com: Military and Social Networking
Kelly: The Technium - Better Than Free
All your Internets are belong to ATT & the NSA
Schoolkid chipping trial 'a success'
Comcast Actively Hinders Subscribers' File-Sharing Traffic, AP Testing Shows
Law Firm Uses Copyright Claim To Say You Can't View Its Website's HTML Source
Free speech could lead to online disconnect
MySpace Censors Anti-War Websites
US cities' Wi-Fi dreams fading fast
Web search for bomb recipes should be blocked: EU
Free Culture: Lawrence Lessig Keynote from OSCON 2002 - 08/15/2002
The future of HTML, Part 1: WHATWG
EU says internet could fall apart
Summary Of The World: Googlezon And The Newsmasters EPIC
Open Source/Free Software Movement
Stallman: If you want freedom don't follow Linus Torvalds
Free as in Freedom
Richard Stallman's Crusade for Free Software
Web 2.0 (Wiki, RSS, AJAX, Social Networking)
Could Twitter become the ultimate buzz tracker?
The Ethics of Web 2.0: YouTube vs. Flickr, Revver, Eyespot, blip.tv, and even Google
A personal NON server wiki using XHTML, CSS and Javascript
AJAX Web Applications
NYtimes - Web Tools Blaze Trail To The Past
Google Labs Mirror (Demo of AJAX)
Why Ajax Sucks (Most of the Time)
Video Distribution Platform Aiming to Kill TV
Online: Multimedia From Wagner to Virtual Reality
Building Emergency Response Protocols
UNIVERSITY’S EMERGENCY PROCEDURE CLAUSE:
Southern Illinois University Carbondale is committed to providing a safe and healthy environment for study and work. Because some health and safety circumstances are beyond our control, we ask that you become familiar with the SIUC Emergency Response Plan and Building Emergency Response Team (BERT) program. Emergency response information is available on posters in buildings on campus, available on BERT’s website at www.bert.siu.edu, Department of Public Safety’s website www.dps.siu.edu (disaster drop down) and in the Emergency Response Guideline pamphlet. Know how to respond to each type of emergency.
Instructors will provide guidance and direction to students in the classroom in the event of an emergency affecting your location. It is important that you follow these instructions and stay with your instructor during an evacuation or sheltering emergency. The Building Emergency Response Team will provide assistance to your instructor in evacuating the building or sheltering within the facility.
STUDENTS WITH A DISABILITY:
Instructors and students in the class will work together as a team to assist students with a disability safely out of the building. Students with a disability will stay with the instructor and communicate with the instructor what is the safest way to assist them.
TORNADO:
During the spring semester we have a Storm Drill.
Pick up your belongings and your instructor will lead you to a safe area of the basement. No one will be allowed to stay upstairs. Stay away from windows. The drill should not last more than 10 minutes. You must stay with your instructor so he/she can take roll. Students need to be quiet in the basement as the BERT members are listening to emergency instructions on handheld radios and cannot hear well in the basement.
FIRE:
During the fall semester we have a Fire Drill.
Pick up your belongings and your instructor will lead you to either the North or South parking lot depending on what part of the building your class is in. You must stay with your instructor so he/she can take roll. As soon as the building is all clear, you will be allowed to return to class.
These drills are to train instructors and the Building Emergency Response Team to get everyone to a safe place during an emergency.
BOMB THREAT:
If someone calls in a bomb threat, class will be suspended and students will be asked to pick up their belongings, evacuate the building and leave the premises. Do not leave anything that is yours behind. We will not allow anyone back into the building until the police and bomb squad give us an all clear. DO NOT USE YOUR CELL PHONES. Some bombs are triggered by a cell phone signal.
SHOOTER IN THE BUILDING:
This spring semester we are in the planning stages of a Shooter in the Building Drill.
When it is safe to leave, move to a safe area far from the building away from where the shooter is located. If anyone has any information about the shooter, please contact the police after you are a safe distance away. If someone cannot leave, go into a room, lock the door, turn out the lights, and if possible, cover the glass on the door. Students chair desks should be piled in front of the glass and door as a barricade and the teacher's desk, podium and anything movable can be pushed against the door. This is intended to slow down any attempts to enter or look into the classroom. If it looks like the shooter is persistent and able to enter, make a lot of noise and use everything in your backpacks to throw at the shooter to distract him.
Silence all cell phones after one person in the room calls the police and informs them of their location and how many people are in the room. Be quiet and wait for the police to arrive. The police are looking for one or more shooters, and they have no way of knowing if the shooter is in the room people are hiding in. For this reason, when the police enter the room, no one should have anything in his/her hands and each person MUST raise his/her hands above his/her head.
EARTHQUAKE:
In the event of an earthquake, you are advised to take cover quickly under heavy furniture or crouch near an interior wall or corner and cover your head to avoid falling debris. Outside the building are trees and power lines and debris from the building itself that you will need to stay away from. In the building, large open areas like auditoriums are the most dangerous. Do not try to escape on a stairway or elevator. Do not hide under a stairway. We do not recommend that you stand in a doorway because the door could shut from the vibrations and crush your fingers trapping you there.
