Skip to content

Infobox Positioning Comparison

Run the Infobox Positioning Comparison MicroSim Fullscreen
Edit in the p5.js Editor

About This MicroSim

This MicroSim helps learners analyze three different infobox placement strategies—below the diagram, a persistent side panel, or a floating tooltip—and observe how hover versus click triggers reshape the reading experience. A six-region block diagram anchors the comparison so learners can notice how each mode preserves or steals space in different layouts.

Learning objective: Compare the three infobox positioning strategies and hover/click triggers and identify which pairing is most appropriate for a given diagram layout.

How to Use

  1. Use the InfoBox Positioning select list to switch among below, side panel, and floating tooltip modes.
  2. Change the Event Mode to experience continuous hover callouts or deliberate click-driven cards.
  3. Hover over (or click) any of the six colored regions to see where the infobox appears, note the pro/con hint, and decide when the pattern is helpful or risky for a complex diagram.
  4. Toggle modes after you form a prediction so you can compare what you expected with what you see.

Iframe Embed Code

You can add this MicroSim to any web page by adding this to your HTML:

1
2
3
4
<iframe src="https://dmccreary.github.io/infographics/sims/infobox-positioning-comparison/main.html"
        height="602px"
        width="100%"
        scrolling="no"></iframe>

Lesson Plan

Grade Level

Upper high school or undergraduate UX / technical communication courses.

Duration

10-15 minutes

Prerequisites

  • Experience reading block or systems diagrams.
  • Introductory knowledge of UI terminology (panel, tooltip, hover interaction).

Activities

  1. Predict & Observe (5 min): Learners predict which placement best preserves the diagram, then test each mode.
  2. Mode Pairing Discussion (5 min): Pairs justify when hover vs click keeps detail readable for crowded diagrams.
  3. Apply to a New Diagram (5 min): Students sketch another layout and choose the placement/trigger that fits it.

Assessment

  • Exit ticket: Learners explain in two sentences which placement matches their current project diagram and why.
  • Challenge learners to capture a screenshot of their recommended mode as supporting evidence.

References

  1. Jenifer Tidwell, Designing Interfaces (O’Reilly Media, 2020) – Chapter on organizing information spaces.
  2. Nielsen Norman Group (2023). “Tooltips & Hover Text.” Retrieved from https://www.nngroup.com/articles/tooltips/.
  3. McDowell, C. (2024). Infobox Patterns for Technical Diagrams. Internal course notes.