Skip to content

Advanced Interaction Pattern Showcase

Run the Interaction Showcase Fullscreen

Sample iframe reference

1
2
3
4
<iframe
   src="https://dmccreary.github.io/infographics/sims/advanced-interaction-showcase/main.html"
   width="100%" height="560" scrolling="no">
</iframe>

About This MicroSim

This showcase presents the same five-stage process ("How a Bill Becomes a Law") through four different interaction patterns. By switching tabs, learners experience firsthand how the choice of interaction pattern affects the user experience, even when the content is identical.

The Four Patterns

  1. Step Reveal — Linear progression with Next/Previous buttons. Best for sequential tutorials.
  2. Scroll Reveal — Content appears as the user scrolls. Best for narrative storytelling.
  3. Zoom & Pan — All content visible at once; zoom in for detail. Best for large diagrams and maps.
  4. Drill Down — Summary cards with click-to-expand detail views and breadcrumb navigation. Best for hierarchical reference material.

Lesson Plan

Learning Objective

Compare four advanced interaction patterns by experiencing each pattern applied to the same dataset, identifying the strengths and trade-offs of each approach.

Activities

  1. Experience all four tabs using the same content. Which felt most natural?
  2. Read the comparison panel below each tab for strengths and limitations.
  3. For each pattern, identify a subject area where it would be the best choice.
  4. Discuss: When would you choose Drill Down over Step Reveal?

References