The Reader as Player

Lesson 17: The Reader as Player

Introducing interaction patterns.

Objective

Go deep into interactivity and interaction design. We will look at affordances, kinesthetic projection, and common patterns in data visualization. All of this prepares for creating interactive visualizations in the final project.

Outline

This lecture explores the bridge between user interaction and data visualization, introducing common interaction patterns and formalizing the concept of affordances to create more intuitive and engaging interactive experiences.

Acting through tools

Understanding how users interact with digital interfaces requires examining the relationship between action and tool.

• Users act through interfaces.
• The concept of kinesthetic projection: how digital action becomes an extension of one's self.
• Tools should feel like extensions of the user's intent.

Common interaction patterns

The lecture introduces fundamental interaction patterns that recur throughout interactive data visualization.

• Details disclosure
  • Revealing additional information on demand with progressive disclosure of complexity.
  • Example: Podcast Anthropology visualization showing episode details by year.
• Coordinated scrubbing
  • Synchronized navigation across multiple views with time-based or parameter-based coordination.
  • Example: TED visualization showing coordinated exploration of talks.
• Madlibs
  • Structured query interface using dropdown menus and selections with fill-in-the-blank.
  • Approach to data exploration.
• Coordinated filtering
  • Filtering in one view affects all linked views enabling multi-faceted data exploration.
  • Example: Global Plastics AI Policy Tool showing end of life outcomes by region.
• Configuration panel
  • Dedicated control interface for simulation or visualization parameters with multiple input types.
  • Example: Hypothetical Rates Simulator showing agricultural subsidy scenarios.
• Direct manipulation
  • Users interact directly with visual elements by clicking, dragging, or tapping on data representations themselves.
  • Example: FoodSim San Francisco allowing users to place buildings directly on map.

Formalizing affordances

The lecture introduces a formal way to think about interaction design through an action and target framework.

• Action: What the user does (click, hover, drag, type, etc.).
• Target: What the user acts upon (data point, axis, filter, button, etc.).
• Affordances ideally should be discoverable without instruction.
• The design should suggest its own use with immediate and clear feedback.

Together, this hopes to enable interactions to feel natural and intuitive.

Group activity

The lecture included a group activity where students imagined potential interactions for the Census visualization.

• What actions could enhance data exploration?
• How could multiple views be coordinated?
• What filters or configurations would be useful?
• How can direct manipulation reveal insights?

See https://incomegaps.com/.

Road to the final

These concepts prepare students for their final projects.

• Interaction patterns serve as building blocks for rich experiences.
• Combining multiple patterns creates engaging visualizations.
• Balancing guidance with freedom in design.
• Designing for both exploration and explanation.

Interactive Experience

We will start our interactive experience by selecting a video game from the course manual to play over the next few lectures.

• Choose from games listed in the "experience" section of the course manual.
• Look up game-specific instructions after selection.
• Space out gameplay over the next few lectures.
• Be ready to answer additional questions about your game in lesson 20.

Links

Additional resources for exploring kinesthetic projection and affordances.

• Kinect Disconnect: Watch 1:30 to 3:10 for Kinesthetic Projection discussion. See https://www.youtube.com/watch?v=ijcezUy3ZzY&t=99.
• Affordances: How Design Teaches Us Without Words. See https://www.youtube.com/watch?v=QCSXEKHL6fc.

Take Aways

This lecture explores interaction patterns and affordances to create more intuitive interactive data visualizations.

• Users act through interfaces as extensions of their intent using kinesthetic projection.
• Six fundamental interaction patterns: details disclosure, coordinated scrubbing, madlibs, coordinated filtering, configuration panels, and direct manipulation.
• Affordances formalized through action and target framework help designers create discoverable interactions.
• Interaction patterns serve as building blocks that can be combined for rich interactive experiences.
• Design should balance guidance with freedom for both exploration and explanation.

Citations

[1] M. Hoekstra, "MacPaint," Geek Technique, 2007. Available: https://www.geektechnique.org/blog/786/mac-paint.html

[2] J. Portnow, "Kinect Disconnect - How NOT to do Motion Control," Extra Credits, 2012. Available: https://www.youtube.com/watch?v=ijcezUy3ZzY

[3] A. Pottinger, "Podcast Anthropology," Gleap, 2015. Available: https://gleap.org/static/special/podcast_viz/index.html

[4] A. Pottinger, "Ted Viz 2," Gleap, 2013. Available: https://gleap.org/content/ted_visualization_2

[5] A. Pottinger, "Montreal Policy Simulator," University of California, 2025. Available: https://mlf-policy-explorer.org/

[6] A. Pottinger, R. Geyer, N. Biyani, C. Martinez, N. Nathan, M. Morse, M. de Bruyn, C. Boettiger, E. Baker, K. Koy, and D. McCauley, "Global Plastics AI Policy Tool," University of California, 2024. Available: https://global-plastics-tool.org/

[7] A. Pottinger, R. Geyer, N. Biyani, C. Martinez, N. Nathan, M, Morse, C. Liu, S. Hu, M. de Bruyn, C. Boettiger, E. Baker, and D. McCauley, "Pathways to reduce global plastic waste mismanagement and greenhouse gas emissions by 2050," Science, 2024. doi: 10.1126/science.adr3837

[8] A. Pottinger, "FoodSim: San Francisco." 2023. Available: https://foodsimsf.com/

[9] J. Portnow, "Affordances - How Design Teaches Us Without Words," Extra Credits, 2014. Available: https://www.youtube.com/watch?v=QCSXEKHL6fc

[10] A. Pottinger, L. Connor, B. Guzder-Williams, M. Weltman-Fahs, N. Gondek, and T. Bowles, "Climate-driven doubling of U.S. maize loss probability: Interactive simulation with neural network Monte Carlo," JDSSV, 2025. doi: 10.52933/jdssv.v5i3.134

License

This lesson is part of Interactive Data Science and Visualization and is released under a CC-BY-NC 4.0 license.