imclab / itpg-gt-2711-001

Interactive Applications in Physical Spaces

ITPG-GT 2711 001

Wednesdays 6:30 p.m. to 9:00 p.m.

--

Course Description

From ATMs to kiosks to art installations, software applications drive a diverse range of interactive experiences in the connected world. This course explores the processes and challenges of designing interfaces and data visualizations for human gestures. Students will work in groups to ideate, design, develop and fabricate an installation piece over the course of the semester. An emphasis will be placed on collaborative visual and information design in combination with leveraging agile methodologies and open source solutions. Projects will undergo user group testing to encourage an iterative process.

--

Learning Outcomes

Students will:

• Learn concepts and benefits of an iterative design and development process
• Implement agile methodologies for development and leverage issue/project tracking software
• Capture, harvest and reconcile interaction feedback from users and user groups; incorporate findings into evolution of project application design and functionality
• Learn how to implement webviews in application wrappers and frameworks

--

Schedule

Class 1 | 2/4 - Introduction

The syllabus will be reviewed in detail along with a discussion of core class concepts and an overview of technical tools and techniques to be learned and used over the course of the semester.

Time will be spent to introduce the students to the instructor and his work. Students will introduce themselves and speak to what they expect to glean from the course.

Students will sketch and visualize ideas on what their ideal interactive physical application would entail; an open discussion of those concepts and inherent expectations and possibilities will follow.

---

Assignment #1: Visit one or more interactive applications around NYC and answer the following questions:

• What worked well from a usability perspective?
• What was elegant or beautiful from a visual or user design perspective?
• What was ineffective in any way and how would you go about changing it for the better?

Suggested locations to visit:

• MTA “On The Go” information kiosks**
• MTA MetroCard kiosks
• Bank ATMs
• Museum Exhibits
  • New Cooper Hewitt Experience
  • 9/11 Museum
  • New York Historical Society
  • MoMA

** There are actually two different versions of the “On The Go” kiosk: one by Control Group and one by CBS Outdoor. It may be interesting to observe and interact with both and note similarities and differences between the two builds.

--

Class 2 | 2/11 - Designing Interactions

Discuss results of Assignment #1 and whiteboard the various sites visited; capture the type of input methods each implements.

Overview of basic user event inputs and event types; the mouse and touch parallel, multi-touch, sensors, etc. Discussion of how to handle these events in an application and the problems that arise from real-world scenarios.

Workshop 1: Simple photobooth web app example

Review brainstorming concepts from Class 1 and select the 3-4 most vialble concepts and discuss parameters of viability. Students will form into groups based on which of the 3-4 concepts they would like to work on most.

BREAK

Workshop 2: Daft Punk Konsole example. In groups, students will concept interesting ways to extend the Daft Punk Konsole and implement.

Case Study: RAA Media’s Interactive Multi-User Touch Table for the Eaton Experience Center

---

Assignment #2: Experiment with the Simple Camera app. Think about what you would change with its current implementation, and about what types of functionality you would want to add to it as a next step. Extended functionality can range from simply re-creating the animated GIF factory you saw in the Twitter demo, to adding support for capturing and rendering video clips, to creating new interactions via user input events.

--

Class 3 | 2/18 - Development Platforms

Discuss trending ideas generated from Assignment #2:

• Face detection
• WebKit filters

Workshop: Walkthrough/tutorial of adding face detection to the simple camera app.

Workshop: Implement a student-derived extension to the simple camera app: superimpose an image into the video render, tethered to user face location.

Students will form into smaller teams and ideate on this week's assignment.

BREAK

Discuss Git branching for each team's assignment work.

Discussion of how application screens and components can be configured and integrated. Webviews and their use in kiosks will be discussed, along with the pros and cons of using webviews in isolated and distributed systems. We will discuss using Kiosk mode for Chrome applications, node webkit and Cocoa applications as webview wrappers.

Tutorial on setting up a web application into each: Chrome App, NW.js and webview in Cocoa App.

---

Assignment #3: Expand on the web app created in class to add tracking and metrics capturing. Plan and execute a simple deployment of the app prototype to allow for user interactions and therefore capture meaningful data.

--

Class 4 | 2/25 - Metrics & Collaboration

Share team efforts on extending the simple camera app during Assignment #3.

Discussion of tracking systems such as Google Analytics and Flurry and a walkthrough demonstration of how to implement in a webview and how that data could be used to iterate on teams' extended interaction concepts.

Workshop: Students will create a “matrix” of what specific behaviors to capture in their application prototype.

Tutorial: Walkthrough of how to implement some examples using Google Analytics.

BREAK

Best practices for version control and shared assets/resources and project architecture will be discussed and tools for creative and functional collaboration will be introduced and set up.

Workshop: Teams to begin concept and strategy work behind their project for the semester.

Teams to present their concepts to the entire class.

Tutorial: Continuation of webview platforms, discussing how to run webviews in Cocoa.

---

Assignment #4: Begin project proposals.

--

#####Class 5 | 3/4 - Project Pre-planning Introduction to Agile Methodologies for software development and what concepts will be implemented to accomodate class needs via Trello, a free project organization tool that project teams will use to manage their projects.

Overview of the major project proposals and project types we'll set up as organizations in Trello. Students will break up into the projects which best suit their interests and skills.

Workshop: In teams, students will setup Trello and begin to organize their application concept into user “stories” with attached “tasks” accordingly, and will delegate member roles and tasks by committee. Project plans will then be vetted with the instructor to gauge feasibility within the 3-4 sprint development period.

---

Assignment #5: Project Teams to set up project schedule and complete Sprint Planning for Sprint 1.

--

Class 6 | 3/6 - Project Sprint 1

Project Teams to begin work on application concepts and begin work on real-time design and development via rapid prototyping, incorporating lessons learned and code completed from previous assignments.

--

Class 7 | 3/11 : Project Sprint 2

Findings and feedback to be remediated via Agile Development “Stories” and “Tasks”.

--

Class 8 | 3/25 - Project Sprint 3

Project Teams to continue work on applications and begin putting together key points for presentation.

--

Class 9 | 3/27 @ 5:30PM - UX, Wireframing, Diagramming and Planning

Workshop: UX wireframing, user experience flows and architecture diagrams. We'll look at a handful of real-world examples and then create wires + charts for each project team.

Each project team is expected to create documents illustrating or accounting for:

• Installation components, including all hardware and software dependencies
• Software experience, detailing the user experience within the application

Discuss schedule and milestones.

--

Class 10 | 4/1 - Project Sprint 3 Review + Sprint 4 Planning

Case Study: Leveraging WebKit + Node.js for desktop applications. Walkthrough of applications created for Twitter Interactives for audio visualization and undocumented Vine API integration. Each project team will review project progress and plan for the next sprint with the instructor. Continue work on applications.

--

Class 11 | 4/10 : Project Sprint 4 Review + Sprint 5 Planning

Review of previous week's progress and plan for the next sprint. Project Teams to begin continue work on applications and begin planning format for user testing. Teams should devise a schedule and plan for performing user testing either during or outside of the next class meeting.

--

Class 12 | 4/20 : User Group Testing

Project applications will undergo user group testing; each Project Team is responsible for targeting, sourcing and organizing one or more user groups to conduct usability testing on their in-progress builds.

Project Teams will monitor user groups during the workshop to collect usage patterns and observe behaviors.

Project Teams are advised to use both analog and digital forms of gathering metrics throughout the exercise.

--

Class 13 | 4/22 : Project Sprint 5 Review + Final Sprint Planning

Discuss learnings and metrics from user testing exercise. Critical assessment of project progress and prepare for final builds and presentations. Finalize deployment, fabrication and installation details.

--

Class 14 | 4/29 : Pitch Preparation

Guest speaker Alexander Rea, Co:Collective, to discuss the finer arts of pitch presentation (TBC).

--

Class 15 | 5/6 : Project Presentations

Full class final project presentations with guest critics Nina Tandon, TED Fellow and founder of Epibone and Caleb Johnston, Control Group. (TBC)

--

Grading

Assignments: 40%

Final Project: 50%

Course Participation: 10%

Failing grades will be given to students who do not complete the final project. Poor performance may result in failing as well.

--

Attendance

Class attendance is required; more than two unexcused absences will result in a failing grade. Tardiness of more than 10 minutes without advance prior notification will count as an absence.

--

Assignments

Assignments also serve as tutorials -- lessons learned as well as actual code completed from these exercises can and should be applied to the final course project. Failing to complete the assignments will not necessarily result in failing, but will potentially create additional work in the long run.

--

Office Hours

There are no set office hours but the professor is available to meet with students directly by appointment before or after class. Please do not hesitate to reach out if you need help!