Web Interaction

PSAM 2120; CRN 6506
Fall 2017
Thursday, 7:00–9:40pm, 6 East 16th Street, Room: 605

Ojus Doshi
doshio@newschool.edu

 

Office Hours:

Tuesdays 8pm–9:30pm Faculty Resource Center (Room 308 A-D of University Center 63 Fifth Avenue)

Sunday on Slack (or by Appointment Slot)

*Depending on my work schedule, I may not be able to keep these hours consistently. I will let you know if this is the case.
Course Description

This course exposes students to thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. Students will learn how to design and develop complex interactive projects and understand how to undertake a comprehensive research and direct their thinking process from brainstorming to final outcome. They will be given the tools to conceive, plan and develop an interactive system and they will become aware of the importance of their role in the development of interactive media.

 

Learning Outcomes
By the successful completion of this course, students will be able to:

1. Use a basic vocabulary of interactive media to both give and respond to critique productively. Including individual evaluation through the instructor, group critique in class, outside critique as well as written anonymous critique.
2. Demonstrate an understanding of the iterative making process in interaction design, using incremental methods such as prototyping, user research and evaluation to build toward more advanced work. This includes: Personas, user interviews, card sorting, sketching and wireframing, storyboarding, mockups, and paper prototypes.
3. Conceptualize a product for the web and realize it through coding.
4. Evaluate the difference in designing interfaces for different kind of devices, their limitations and specific user situation including responsive websites and apps for mobile.
5. Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency. Research historic and current design precedents to contextualize own work.
6. Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio
7. Combine their artistic creativity with technology related to the internet.
8. Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems (see competency)

 

Assessable Tasks

In-class coding exercise (due end of class 10/5/17):

A mini-coding project will familiarize you with basic web development again and enable you to use your new coding knowledge.

Projects / One Mid-term (due 10/12/17) / One Final Project (due 12/14/17)
Projects are more in-depth assignments where you put to use technical and design skills you learn from lectures and exercises. This course features 2 projects: a mid-term and a final. They will be graded on the following criteria:

• Planning and Preparation — How thorough was research, planning, site sketching and wireframing, etc.? Is the student organized with all of their materials throughout the project?
• Content — Did the student meet the minimum requirements for content that must be included in the project as outlined by the assignment instructions? For example, minimum number of images?
• Design — How effective were the student’s design choices? Were design principles put to use when creating the website?
• Coding — Is the student’s code clean, readable, well-commented, using correct syntax and structure, etc.?
• Collaboration — If the project requires any group work, how well do team members work together? Is it evident that everyone contributed to the project?
• Overall — General evaluation of the project outcomes (interesting conceptual exploration, risk taking, craft, striving for originality, etc.)

Coding challenges

I believe in learning through constant “doing” in small batches. Around the midway point in the semester you will begin to have small coding challenges due for homework that will keep you in the practice of coding and advance your familiarity with more difficult syntax.

App user flow critiques

For certain weeks starting after the first project, you’ll download one app (or apps you’ve already download and use) and walk through a userflow for the primary action. It is important to begin to develop habits and awareness around existing user interaction patterns

Readings / due periodically throughout semester
Throughout the semester I will assign readings related to product design, the web, and technology. You will be responsible for reading the article and coming up with one discussion question that will be posted in an online forum. The next class we will discuss the readings using these questions as starting points. Participation in discussion counts towards the final participation grade.

Critiques and discussion / during small-groups and project critiques
Projects will be shared and discussed through a traditional practice in art school — the critique. Expectation is that students will actively engage and comment on their fellow students’ work. Feedback is beneficial for everyone involved and it’s how you get better as a designer. Additionally, we will use a live document called PiratePad to record class feedback during critique. I expect everyone to be commenting in this way in addition to verbal commentary.

Raising Questions & Independent Investigation / Self-Motivation
Part of participation is to ask questions if you have them. They benefit everyone, no matter how “stupid” you think the question is. Feel free to stop me during class or jot down some questions and email me immediately after class. Whatever you do, ask until you understand.

Questions outside of class are another matter. Especially for coding trouble, the majority of that information is available online. Think for yourself, carefully review what you did and what trouble you’re having. Consult Google, consult the recommended books. Ask 2 friends from class. If all else fails, contact me through email, but my work schedule keeps me pretty busy so I may not be able to give you an immediate and detailed answer.

This goes along with a larger expectation that I expect you to take an interest in your own learning. Since we are dealing with digital systems and the web, there is a wealth of knowledge online that you can further use to realize all of your projects and exercises. I encourage students to go beyond the basic tutorials offered in the lecture portions of class and work independently to solidify their knowledge.

Posting Links to Assignments to Dedicated Server space
You will upload assignments and projects to your dedicated server space on Parsons B server (I will explain in class how this works).

Final Grade Calculation
Attendance, Participation, and Effort: 25%

Execution of Project 1 (Mid-Term): 20%

Execution of Project 2 (Final): 30%

Execution of Mini project, Exercises, and User Flow assignments: 25%

TOTAL 100%

Students will deliver Project and Exercise files in one digital bundle on the last day of class using USB flash drive or DropBox. A document with a detailed checklist and way to organize this bundle will be posted to the class website before the last week of the course.

 

Course Outline

 

WEEK 1	8.31.2017	Course overview, syllabus, and expectations Lecture: Review HTML & CSS Exercise: Flags of the World	Assignments (due 9.7.17): _Software & Book Purchases _Reading and Response #1 _Codecademy tutorial (jQuery) _Wikipedia Miniproject Part 1 _Set up class homepage
WEEK 2	9.7.2017	Reading Discussion Lecture: jQuery I Exercise: Wikipedia Miniproject Part 2 Lecture: Intro to UX and IxD Introduce Project 1	Assignments (due 9.14.17): _Reading: Apple HIG, Google Material Design _Codecademy tutorial (jQuery) _Project 1.1 App Analysis and Feature Proposal
WEEK 3	9.14.2017	Lecture: jQuery II Exercise: Wikipedia Miniproject Part 3 Project 1: Small Group Review Lecture: Rapid Prototyping and Flow Diagrams Demo: InVision and Pop App	Assignments (due 9.28.17): _Sketch / PSD Tutorial _Codecademy Tutorial (jQuery) _Project 1.2 Lo-fi Wireframes & Flow Diagram _Reading: Design of Everyday Things
WEEK 4	9.21.2017	NO CLASS: ROSH HASHANAH	Assignments (due 9.28.17): _Project 1.3 Build Lo-fi Prototype and Test
WEEK 5	9.28.2017	Reading Discussion Lecture: jQuery III, OOP Exercise: Wikipedia Miniproject Part 3 Project 1: Small Group Review Lecture: Visual Design and Design Systems	Assignments (due 10.5.17): _Reading and Response #2 _Codecademy Tutorial (jQuery) _Project 1.4 Visual Design
WEEK 6	10.5.2017	Reading Discussion Lecture: Troubleshooting and Dev Tools Project 1: Small Group Review Exercise: Wikipedia Miniproject Final Lecture: Product Design Cycle: Iteration	Assignments (due 10.12.17): _Project 1.5 Hi-Fi Prototype and Final Website
WEEK 7	10.12.2017	Project 1 Critique [Mid-Term]	Assignments (due 10.19.17): _Project 2.1 Observation, Research, Presentation _Project 2.1 Reading and Response _Study for Quiz
WEEK 8	10.19.2017	Coding Quiz Send Mid-Term Evaluations Reading Discussion Lecture: Observation and Interviews	Assignments (due 10.26.17): _Project 2.2 Interviews _Coding Challenge #1 _User Flow #1
WEEK 9	10.26.2017	Project 2: Small Group Review Lecture: Personas, Experience Maps, Press Releases	Assignments (due 11.2.2017) _Project 2.3 Personas _Coding Challenge #2 _User Flow #2
WEEK 10	11.2.2017	Project 2: One-on-One Review Lecture: Information Architecture Exercise: Site map and Card Sort Preparation	Assignments (due 11.9.17): _Project 2.4 Card Sort, Refined Sitemap, & Lo-Fi Wireframes _Coding Challenge #3 _User Flow #3
WEEK 11	11.9.2017	Project 2: Small Groups Review Lecture: User Testing and Analysis Exercise: Practice Paper Prototype Testing	Assignments (due 11.16.17): _Project 2.5 User Testing & Hi-fi Wireframes _Coding Challenge #4 _User Flow #4
WEEK 12	11.16.2017	Project 2: Small Groups Review Lecture: Intro to User Interface Design	Assignments (due 11.21.17): _API & AJAX Tutorial _Project 2.6 Visual Design, Begin API page/flow _Coding Challenge #5 _User Flow #5
WEEK 13	11.21.2017 TUESDAY	Project 2: One-on-One Review Lecture: Design Patterns	Assignments (due 11.30.17): _Project 2.7 Visual Design Refinement, Hi-fidelity Prototype _Continue API Coding
WEEK 14	11.23.2017	NO CLASS: THANKSGIVING BREAK
WEEK 15	11.30.2017	Project 2: Small Groups Review Lecture: Animation and Motion, Emotional Design	Assignments (due 12.7.17): _Project 2.8 Prototype and Coding Refinement
WEEK 16	12.7.2017	Project 2: One-on-One Review Lecture: Accessibility and Information for All	Assignments (due 12.14.17) _Finalize Prototype & Coding _Final Presentation
WEEK 17	12.14.2017	Project 2 Critique Turn in Final Documentation	SMILE AND RELAX

 

Textbooks & Readings
Reading handouts and links to relevant content in the internet will be provided throughout the semester. You have to check the class website on a regular basis to be updated.

Additionally the following books are required or recommended:

Required

1. Mathis Lukas, Designed for Use, Pragmatic Programmers, 2011
   ISBN-13: 978-1-93435-675-3
   Lukas Mathis wrote a very comprehensive and hands-on guide for the development of interactive media. Owning this book will be helpful throughout your career.

Recommended for Javascript, jQuery and web typography foundational knowledge:

1. Duckett, Jon. JavaScript and JQuery: Interactive Front-End Web Development. John Wiley & Sons, 1^st Edition 2014
   ISBN-13: 978-1118531648
2. Santa Maria, Jason. On Web Typography. New York, NY: A Book Apart, 2014.
   ISBN: 9781937557065

Additionally I strongly recommend the following books. I may or may not provide reading material from them through the semester, however you might consider having them in your library:

1. Mccloud, Scott, Understanding Comics: The Invisible Art, New York: Harper, 1990 (all editions are fine)
2. Norman, Donald, The Design of Everyday Things, New York, Basic Books 1988

**The Design of Everyday Things is available online through the New School Library

1. Norman, Donald, Emotional Design: Why we love or hate everyday things, New York, Basic Books, 2004
2. Krug, Steve. Don’t Make Me Think! A Common Sense Approach to Web Usability. Indianapolis: New Riders, 2006.

The following books should be browsed in the library at some point at least.

1. Moggridge, Bill. Designing Interactions. Cambridge: MIT Press, 2006.
2. Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity. Berkeley: Peachpit Press, 2000.
3. Tufte, Edward R. Envisioning Information. Cheshire: Graphics Press, 1990.
4. Cooper, Alan, David Cronin, and Robert Reimann. About Face 3: The Essentials of Interaction Design. New York: John Wiley & Sons, 2007

 

Materials and Supplies

Hardware:

1. A functioning laptop (Mac or PC) is required*. The newer the model and operating system, the easier it will be for you (and me).
2. Backup external hard drive. Back up your work every day. EVERY DAY. Multiple times a day is even better. Consider purchasing cloud storage like Crashplan or the paid versions of Dropbox. You are responsible for ensuring all of your work is available throughout the class. I will not accept excuses of “my computer crashed and I lost everything.”

*If you do not have access to a laptop, please see me before class (or send me an email before the first day), and we can make alternate arrangements.

Software:

1. A Text Editor: Sublime Text (sublimetext.com)
2. Mac Users Only: Sketch App from Bohemian Coding (Educational Licence $50)
3. Photo editing and vector illustration software: Adobe Creative Cloud with Photoshop CC and Illustrator CC
4. InVision (online prototyping tool) — Free educational account (with an access code I will provide)

Recommended: A sketchbook or notebook for personal use.

 

Resources

Course Resources: See the Resources section of this website.

University Resources

The university provides many resources to help students achieve academic and artistic excellence. These resources include:

 

• The University (and associated) Libraries: http://library.newschool.edu
• The University Learning Center: http://www.newschool.edu/learning-center
• University Disabilities Service: www.newschool.edu/student-disability-services/

 

In keeping with the university’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to contact Student Disability Service (SDS). SDS will conduct an intake and, if appropriate, the Director will provide an academic accommodation notification letter for you to bring to me. At that point, I will review the letter with you and discuss these accommodations in relation to this course.

 

 

Grading Standards

A student’s final grades and GPA are calculated using a 4.0 scale. Please note that while both are listed here, the 4.0 scale does not align mathematically with the numeric scale based on percentages of 100 points.

 

A [4.0; 95 – 100%]

Work of exceptional quality, which often goes beyond the stated goals of the course
A- [3.7; 90 – <95%]

Work of very high quality
B+ [3.3; 87 – <90%]

Work of high quality that indicates higher than average abilities
B [3.0; 83 – <87%]

Very good work that satisfies the goals of the course
B- [2.7; 80 – <83%]
Good work
C+ [2.3; 77 – <80%]

Above-average work

 

C [2.0; 73 – <77%]

Average work that indicates an understanding of the course material; passable

Satisfactory completion of a course is considered to be a grade of C or higher.

 

C- [1.7; 70 – <73%]

Passing work but below good academic standing
D [1.0; 60 – <70%]

Below-average work that indicates a student does not fully understand the assignments;

Probation level though passing for credit

 

F [0.0; 0 – <60%]

Failure, no credit

Grade of W

 

The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.
Grade of Z

 

The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.

 

 

Grades of Incomplete

 

The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:
Undergraduate students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incompletes and no later than the seventh week of the following spring semester for fall term incompletes. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “F” by the Office of the Registrar.

 

 

Divisional, Program and Class Policies

 

• Responsibility

Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize your successful completion of this course.

 

• Participation

Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.

 

• Attendance

Parsons’ attendance guidelines were developed to encourage students’ success in all aspects of their academic programs. Full participation is essential to the successful completion of coursework and enhances the quality of the educational experience for all, particularly in courses where group work is integral; thus, Parsons promotes high levels of attendance. Students are expected to attend classes regularly and promptly and in compliance with the standards stated in this course syllabus.

 

While attendance is just one aspect of active participation, absence from a significant portion of class time may prevent the successful attainment of course objectives. A significant portion of class time is generally defined as the equivalent of three weeks, or 20%, of class time. Lateness or early departure from class may be recorded as one full absence. Students may be asked to withdraw from a course if habitual absenteeism or tardiness has a negative impact on the class environment.

 

Whether the course is a lecture, seminar or studio, faculty will assess each student’s performance against all of the assessment criteria in determining the student’s final grade.

 

My personal attendance guidelines:

• Two unexcused absences lowers an overall grade one-third letter (i.e., A to A-).
• Three unexcused absences lowers an overall grade by a full letter (i.e., B to C).
• More than three absences are grounds for failure or dismissal from class.
• A lateness that is greater than or equal to 30 mins will be counted as an absence.
• Three (3) latenesses that are less than 30 mins will be treated as one absence.

 

If you know you will be late or will miss class for any reason, please send me an email as early as possible. In addition, the following class, please bring a doctor’s note, a signed employer’s note, or another indication supporting the reason you had to miss class.

 

• Canvas

Use of Canvas may be an important resource for this class. Students should check it for announcements before coming to class each week.

 

• Delays

In rare instances, I may be delayed arriving to class. If I have not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for my arrival. In the event that I will miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting.

 

• Electronic Devices

The use of electronic devices (phones, tablets, laptops, cameras, etc.) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.

 

• Academic Honesty and Integrity

Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.

 

Students are responsible for understanding the University’s policy on academic honesty and integrity and must make use of proper citations of sources for writing papers, creating, presenting, and performing their work, taking examinations, and doing research. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. The full text of the policy, including adjudication procedures, is found at

http://www.newschool.edu/policies/# Resources regarding what plagiarism is and how to avoid it can be found on the Learning Center’s website: http://www.newschool.edu/university-learning-center/student-resources/

 

The New School views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use”. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. Please see the complete policy in the Parsons Catalog.

 

• Intellectual Property Rights: http://www.newschool.edu/policies/#.