Syllabi

Interaction Design for News Apps

By 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.

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

Books We Will Be Reading From

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

Grading

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.

Line item% of grade
Attendance10%
Participation10%
First Proposal and Prototype30%
Final Prototype40%
Additional Prototypesup to 10%

1.1

Introduction/Overview of the course

Topics

  • Fake News
  • Media Literacy
  • Filter bubbles

News Media Survey

https://goo.gl/forms/rRxuzreqiPXrHiWP2

Discussion

What is the news landscape right now? What is broken?

Reading

1.2

Intentions and Goals

REVIEW

Discuss “As We May Think”.

Topics

How do we know what a person’s intentions are? How do we know what a country’s intentions are? How do we figure out what direction the country should take?

A poll? A survey? A vote, perhaps?

This excellent NYTimes graphic shows how many people voted in the primaries to select the two choices we had, HRC and DJT.

Update to Facebook Trending: http://newsroom.fb.com/news/2017/01/continuing-our-updates-to-trending/

User Journey

Context – Where are you? What is around you? Are there any external factors which may be distracting you?
Progression – How does each step enable you to get to the next?
Devices – what device are you using? Are you a novice or expert? What features does the device have?
Functionality – What type of functionality are you expecting? Is it achievable?
Emotion – What is your emotional state in each step? Are you engaged, bored, annoyed? 

Pain Points

https://medium.com/the-u-s-digital-service/redesigning-the-journey-to-critical-benefits-for-americans-in-poverty-2ca068591f32#.olfi7wpqz

In Class Exercise

News Viewer Journey Map (pre-internet TV)

Reading

Skills

User Journey Map

Assignment

Using Adobe Illustrator, start working on an 11×17 News Reader Journey Map, with you as the “user”/reader, that illustrates your experience reading and consuming news on your smartphone (if you never use your phone to check news, pick whichever medium you rely on most). 

First, write out (in text) a step by step account of one news consumption session. What constitutes a “session” is up to you, but it should be something that you consider normal or usual for you, even if it’s short. Include the lead-up and the aftermath, ie what causes you to begin and what causes you to end your session. Be as observant and objective as possible at every step.

Next, take your account and try to translate it visually, by drawing it out on a sheet of paper. Think big broad categories first, e.g. Before, During, After and see if you can break things down even further. Try to depict very simply each discrete step. You can use stick figures or simple shapes.

Finally, translate your drawing into Illustrator, introducing color, lines and other graphic elements. 

Upload your text, sketches, and Illustrator file (exported to a PDF) into the Week 1 Assignments 1.2 folder.

2.1

Mental Models

There are actually two different ways the term “mental model” is used.

  1. A mental model is what the user believes (or knows, or thinks they know) about the system at hand. It is the way a user thinks a system works, which in turn informs the way he uses the system or thinks it will behave.
    Example: What is a browser?
  2. Mental models are affinity diagrams of behaviors made from ethnographic data gathered from audience representatives.

In the second type, the top part of the model is a visual depiction of the behavior of a particular audience, faithfully representing root motivations. The bottom part of the model shows various ways of supporting matching behaviors. Where support and behavior are aligned, you have a solution. Where a behavior is not supported, you have an opportunity to explore further.

In-Class

Do an affinity diagram/map using everyone’s news reader journeys. 

Come up with as many discrete functions that you do on your phone.

Then plot the functions below the various “towers”.

Topics

  • Physical affordances
  • Mental Models

Reading

Skills

Intro to Illustrator

  • Vectors
  • Lines
  • Stroke
  • Primitives
  • Type

Assignment

On an 11×17 landscape page, use Illustrator to translate your reader journey map into a mental model.

2.2

Affordances II

Affordances are clues about how an object should be used, typically provided by the object itself or its context.

Topics

  • How does the Facebook news feed work? How does Twitter arrange tweets?

Reading

POST-IT EXERCISE: WHY DO YOU CHECK THE NEWS?

Skills

Intro to Illustrator II

  • Curves
  • Pen tool
  • Type

Intro to Keynote (time permitting)

Assignment

Rules of a game

3.1

Spatial Design Strategies I

When we use the term design one of the things it connotes is the visual appearance of an object. It is the job of designers to think about and craft the visual appearance of an object or experience. We start with two-dimensional space. This is often called composition, or composing lines, shapes, and colors within a two-dimensional area (page). We usually call this graphic design, which concerned itself with everything from tiny postage stamps to the layout of books to newspapers and giant posters.

Topics

Cognitive Load

Gestalt Principles

  • Figure-Ground
  • Law of Simplicity
  • Proximity
  • Similarity
  • Continuity
  • Closure
  • Common Fate

Reading

Skills

  • Intro to Keynote
  • Animating with Keynote

Assignment

Create your own Keynote presentation demonstrating your interpretation of the four principles of Gestalt using animation and transitions.

3.2

Attention

Topics

  • The Attention Economy

Reading

Please read the following essays on attention and discuss on Slack in the #classnotes channel. 

Assignment

Identify the core human needs or activities served by Google, Facebook, Twitter, Snapchat, and Instagram. How were the same needs met before the invention of writing? How were they met before the invention of the computer?

How has the activity remained the same and how has it changed as a result of the switch to the digital framework?

Your writing can take the form of a written essay (make it at least 500 words), a multimedia essay, or a Keynote presentation. (If you want to make a video, it should be at least 3-4 minutes long.)

Post in your folders.

4.1

Flow

Flow is a state of heightened focus and immersion in activities such as art, play and work.

Topics

  • Conventions and Rituals

Readings

In-Class

Let’s make a flow chart (or process diagram flow) (using Keynote, of course) of mobile news consumption.

Assignment

Begin working on your proposal for your News App. Your proposal should do the following things:

  • State the specific problem you are trying to address, as quickly and precisely as possible. Also be explicit about your target audience.
  • Show evidence of the problem.
  • Suggest your approach to addressing the problem, citing evidence when possible.
  • Sketches
  • A prototype

5.1

Ergonomics

Flow is a state of heightened focus and immersion in activities such as art, play and work.

Topics

  • Conventions and Rituals

Readings

In-Class

With a partner, create a comprehensive catalog of every gestural interaction you use with your smartphone, with and without your hands. Make each diagram as expressive and clear as possible. Again, put everything into a Keynote file.

Assignment

  1. Observe the positions that our bodies assume when we use our smartphones for short or extended periods of time. Take as many pictures as you can of people in these various poses and create silhouettes in Illustrator of the three most common poses.
  2. Write a first-person account of your smartphone, from the point of view of the smartphone. 750-1000 words

For Next Class

This will require that you have a Twitter account. Sign up if you haven’t already and start tweeting!

Print out your 3 most recent Twitter posts (ones you wrote) and 3 of your most recent ReTweets. Make sure you include the date and your handle. Each tweet should be about 8” wide. Cut out each tweet separately.

5.2

States and Modes

In computer-based environments, the state of a system at any moment is the set of current values of all the system variables. The concept of state is useful to the designer in understanding the range of possibilities for elements of a system (such as characters within a virtual world, documents within an archive) as well as for the system as a whole.

A mode is a state that an application is in that changes how the application reacts to user input. A mode is a part of an application that the user has to formally enter and leave, and that restricts the operations that can be performed while the mode is in effect.

Readings

In-Class Exploration

  • Snapchat
  • Instagram

Assignment

Choose an example of a digital (or non-digital) news display strategy and with a well-focused image and no more than 200 words make clear why it succeeds or fails in conveying the overall state of the system and/or user, the state of key components, and the cause and effect relationships among them.

6.1

Microinteractions

What is a Microinteraction?

Microinteractions are contained product moments that revolve around a single use case. They have one main task.

Microinteractions are made up of four parts:

A Trigger initiates a microinteraction.

The Rules determine what happens,

while Feedback lets people know what’s happening.Loops and Modes determine the meta-rules of the microinteraction.

Readings

Assignment

  1. Storyboard the 3 most important Twitter or Snapchat (pick one) microinteractions on mobile using index cards. Draw out each frame of the microinteractions.
  2. Translate them into Keynote using animations. (iPhone7 screen size is 750x1334px).

6.2

Prototyping Microinteractions

In-Class Exploration

Let’s try to think of as many microinteractions as we can with Twitter and Snapchat. Or around getting news updates.

Assignment

To give you some direction and inspiration for your projects, I’ve created a doc called Project idea. Choose one of them to sketch on and prototype. Prototype 1 is due right Oct 24. Start a folder and fill it with research, screenshots of the competitive landscape, what’s out there already, and examples of models to learn from.

7.1

Text As Interface

In-Class

Look at the typography of Google search results, Facebook news feed, Twitter, and the NYTimes.com.

Readings

For Next Time

Make progress on your prototype keeping in mind you need to be ready to present on Tuesday October 24.

What do we present?

You will have 5 minutes to present your concept statement, show sketches, and demo your prototype on screen.

What format does our prototype need to be in?

This first prototype should be medium-resolution so it can be in Keynote or some other mildly interactive form (Adobe XD, POP app is good for making paper prototypes interactive).

How much work do I need to put into this?You need to do your research, really see what’s out there first, read, collect inspiration. Also, you need to create real (enough) content to make your prototype read like it’s real. Put the effort in to make it as realistic as you can with what you know now. Push yourself.

7.2

Text As Interface

In-Class

Choose a recent news story that you know a lot about. Find the definitive story from a trusted source and copy the url. Write a short chat-appropriate length lead-in message that would pique someone’s interest. Write it in a tone you’d actually use to tell a friend. 

Write your cell number on an index card and fold it so everyone can see. Partner up with someone directly across from you. Text your lead-in to your partner.

Readings

8.1

Interaction Design Ethics

From the NYTimes interview with Adam Alter, author of “Irresistible: The Rise of Addictive Technology and the Business of Keeping Us Hooked”

News organizations want your attention. Is addiction in the name of being an informed citizen a good thing?

Readings

Assignment

Read the above links. Write a response to one of them, looking at applying the lens of design ethics to another system or platform (SnapChat, Instagram, etc).

9.1

Feedback

Where am I? What is happening? What will happen next? What just happened?

Readings

In-Class Practice

Using Keynote, model/replicate/simulate the feedback mechanisms used in the UI of Twitter and Facebook (mobile versions). (Remember to turn your sound on. Use screenshots.)

  • Pull to refresh
  • See new tweets button
  • Tab buttons 
  • …any others you think are important

Assignment

While it’s fresh in your minds, start a new version of your prototype and consider the feedback you received on it. What are the top 3 things that need to change? Write the down and then begin to play with different ways you might achieve these changes using Keynote or whatever prototyping tool you choose, but this time taking care to make it more high resolution.

10.1

Skeuomorphism

What is a skeuomorph?

The term skeuomorph is compounded from Greek skéuos (σκεῦος), meaning ‘container or tool’, and morphḗ (μορφή), meaning ‘shape’.

Readings

In-Class

While I’m meeting individually with various students, please take class time to read the Tow Center’s excellent report, The Platform Press.

11.1

In-Class Design

In-Class

Prototype one of the following:

  1. Reading on mobile, webview inside of Twitter, Facebook, or mobile browser, as you scroll, the visible text is being analyzed and elements are highlighted which are questionable or important, perhaps signalled by color of highlight, and if you tap on a highlighted phrase, you are able to see an expanded view of the sources and other text that support or challenge the phrase.
  2. An extension that records the trail of how you got to the article you’re reading. Who shared it, who first published or linked to it, who originally published it. It’s a reading interface. It tells you not only the primary source but also information about the author and the person who surfaced/retweeted.shared the article with you.

11.2

Hackathon

You have 1 hour to make a prototype that fulfills the following brief:

Create a reading interface for news articles that visually emphasizes who is talking — if it’s a reporter, show their face, if it’s an organization, show their logo. Also reformats the article into “speech bubbles” and is reminiscent of a chat interface.

Additionally, it tells you not only the primary source but also information about the author and the person who surfaced/retweeted/shared the article with you. Ie, it reinforces the provenance of the article by showing you how you got to the article. Eg, Facebook -> Your friend Bob posts a link to the article -> The article on WaPo by Jane Doe.

You may use whatever means you’re comfortable with (Keynote, PSD, AI, paper) but make the most compelling design.