Teaching / Syllabus

Interaction Design for News Apps

Journalism + Design, Eugene Lang College, 2014–24

Journalism + Design
Eugene Lang College
The New School

Instructor: Irwin Chen

Course description

This course will introduce students to key concepts and foundational principles of UX (user experience) and interaction design in the context of journalism. The 2016 Presidential election exposed the hidden power of interaction design in clickbait, the exploitation of design signals in fake news websites, and behavioral ad targeting. Now more than ever, a real understanding of UX and interaction design will be critical to the success of journalism in all its diverse forms (apps, interactives, visualizations and other news delivery mechanisms). The primary focus of this course will be understanding the behavior of news consumers and how these behaviors can be exploited or changed, building a vocabulary to analyze interactions and designing optimal and ethical interactions for digital news-related applications. Students should have some experience with Photoshop and Illustrator, basic knowledge of wireframing and prototyping, as well as an interest in news and current events. Students must have taken (or, with permission of the instructor, be currently taking) News, Narrative & Design I or Design for Journalists I. This class is strongly recommended for all Journalism + Design majors.

The final project will be to redesign an existing news delivery mechanism (or create and prototype a new one) that takes into account research and analysis of news consumption from the 2016 Presidential Election. The final prototype should be as high-resolution as possible and should be able to be demoed without the intervention of the creator.


Course objectives

By the end of this course, you should be able to

  1. Describe the fundamental principles of interaction design and user experience (UX) and how they work, particularly in relation to news applications.
  2. Operate and design with attuned awareness of a range of interaction strategies
  3. Be able to express ideas quickly and get feedback with prototypes generated using pen and paper as well as digital tools such as Keynote, Sketch, Figma, or HTML/CSS/JS.

Grades

Over the course of the semester, you will work on one project: developing a news-delivery application applying concepts learned in this class. To qualify for a B, you must create at least two iterations — an initial prototype, and a final working prototype. The more prototypes you make, the higher your final grade will be. Additional prototypes you show will automatically add a half a letter grade (B -> B+) and the excellence of your work will augment your grade from there. You will need to show how you have incorporated learnings from previous iterations and feedback from a diverse set of users.

Attendance10%
Participation10%
First Proposal and Prototype30%
Final Prototype40%
Additional PrototypesUp to 10%

Required materials

  • At least two decks of index cards
  • Journal
  • Pens/Sharpies
  • Smartphone with a camera
  • Laptop (recommended)

Software

  • Keynote
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Experience Design
  • (Framer.js)
  • (Figma)

Accounts you will need to have

  • Slack
  • Twitter
  • Google Drive

Supplemental books

  • Inventing the Medium: Principles of Interaction Design As A Cultural Practice by Janet H. Murray

Class structure

Each class will be divided into four types of sections:

ReviewDiscussion and critique of assigned work and/or reading from the previous class.
TopicIn which I will introduce a new topic, show slides, and we will have class discussion.
ExerciseOccasionally we will do short exercises in class to “get your hands dirty” with a topic.
SkillsTime set aside for learning technical skills needed for your projects — software, coding, etc.

Class Schedule

1.1   Introduction/Overview of the course
1.2   Intentions and Goals

2.1   Affordances
2.2   Affordances II

3.1   Spatial Design Strategies I
3.2   Attention

4.1   Flow
4.2   Feedback

5.1   States and Modes
5.2   Navigation

6.1   Spatial Design Strategies II
6.2   Reading

7.1   Text as Interface
7.2   Microinteractions

8.1   Microinteractions II
8.2   Midterm Review of First Prototype

9.1   Data
9.2   Data II

10.1  Lists, Tables, Objects, and Beyond
10.2  Algorithms

11.1  Conversational Interfaces
11.2  Immersiveness

12.1  Workshops
12.2  Workshops

13.1  Workshops
13.2  Workshops

14.1  Workshops
14.2  Workshops

15.1  Workshops
15.2  Final App Prototype Review