Teaching Storytelling with Turbulent Tech

Erika Lee

School of Informatics and Computing 
Indiana University

Is this you?

"A group of students got ahold of the exam I wrote ten years ago. Guess I'll have to write another."

"This website didn't look like this yesterday. $%&#"

"Honey, in my field, resources from 2004 are like yesterday."

"OMG. This resource is *gasp* from 2014."

Media

Technology

We are here.

Problem #1:

It's hard to stay an expert.

Problem #2:

It's hard to balance
telling a good story with using a cool coded effect.

Problem #3:

It's hard to manage
student expectations
about technology. 

Assess

Evaluate

Troubleshoot

Example Project

Multimedia-rich longform article on the web.
Want to find/use a technique to enlarge images embedded in the story.

Step One:

Research

• What do we want the code
  (app, etc..) to do for us?
• How will it help tell the story?
• Describe what this interaction would do.. what are the advantages and disadvantages?
• How does a plugin like this work?
• What is required?
• And what is this effect called?

Vague google search

More specific google search

Remembering / Understanding

Step Two:

Demo / Tutorial

• Put the 'demonstrate' back into 'demo'
  • show not only the steps, but also the scope and process / workflow.
• Point out pitfalls. Make mistakes or incomplete actions and have students help troubleshoot the problem.
  • Model expert behavior.
• For coded tools, ask what assumptions are being made in the tutorial / documentation?

Understanding / Applying

"Hunh, that's strange. My image is appearing, but it doesn't look quite like what I was expecting. What should we check first?"

Step Three:

Practice

• If it's new to the students, chances are they need practice with only a little risk of failure. 
• Give students the same scope and constraints as in the demo, but making their own content and design choices.

Understanding / Applying

Step Four:

Assess / Rank / Evaluate

• Students search for a resource - in this case, a 'lightbox' plugin.
• Assess each option and rank the top resources found.
• Evaluate the top choice(s) and attempt to implement.

Analyzing / Evaluating

Example Plugin Evaluation:

I. Scope & Features

II. File structure & set up 

III. Design & Accessibility

IV. Functionality

... how much trust would you place in this code based on the website/ the demo/ the documentation ... what assumptions are made in the documentation and set up... did you get it to work? ... was it hard to debug? 

Step Five:

Final Assessment

• Students use the new concepts and skills in a project of their own creation
• Could be with the same scope and constraints, could be as part of a larger project
• Low risk in terms of getting the technology to work = greater risks in storytelling, design, etc...

Apply / Create

Students feel creative and because the technology is now a lower risk, and it leaves most feeling capable of taking larger risks in their content and story. It's no longer good enough that it "just works."