Pattern 18

Playback and reading positions can differ

Follow the narration without forcing the reader to follow every movement.

Research-informed design proposal

Concrete takeaway

Show the current playback anchor separately from the viewport.

Choose an approach

These are editorial decision conditions to validate. Some alternatives are successive states or can be combined; they are not always exclusive choices.

AlternativeUse whenTradeoff or requirement
A · Follow narrationThe reader wants to follow narrationAutomatic following should yield to manual scrolling
B · Explore freelyThe reader explores elsewhere while listeningThe audio anchor needs a separate label
C · Rejoin playbackThe reader chooses to return to playbackRejoining must not silently save a personal mark

The problem

Someone may scroll ahead or revisit an earlier verse while playback continues. Automatic following can repeatedly pull them back.

The pattern

Show the current playback anchor separately from the viewport. Let users follow or explore freely, then deliberately return to the spoken passage. Use continuous text where the task is sustained reading.

Compare the alternatives

Follow the narration without forcing the reader to follow every movement.

A · Follow narration

Audio and reading · Example interface
‹   Passage context · Schematic text   ⋯
8
9
10
Read-along enabled
Previous paragraph
Edition text.
Currently spoken passage
PlaybackPause · 02:10 / 06:45

The playing passage has a temporary marker.

B · Explore freely

Audio and reading · Example interface
‹   Passage context · Schematic text   ⋯
8
9
10
Reading earlier in the chapter
Earlier passage
Edition text.
Audio continues at Mark 1:8.
Return to spoken passage

Reading elsewhere does not silently change playback.

C · Rejoin playback

Audio and reading · Example interface
‹   Passage context · Schematic text   ⋯
8
9
10
Current audio anchor
Follow narration again
Keep exploring independently

Following resumes only after the reader chooses it.

Original wireframe proposals · No live controls · Grey rows represent schematic text, not loading states · Labelled placeholders are not Scripture quotations

Download this wireframe as SVG

Failure modes

Automatic recentering after manual scroll; stopping playback whenever someone explores; treating the visible paragraph as the actual playback position.

Bible and faith considerations

This pattern separates playback position from reading position. Karaoke granularity is covered by Timing has an honest granularity; styling and no highlighting by Playback cues are a reader preference. Translation switching must preserve the reading anchor and reassess audio alignment.

What to validate

Scroll away during playback, change text size and return to the spoken verse. Does each position remain understandable?

Evidence status

Research-informed design proposal. These visual alternatives have not been tested with users in this atlas. Source findings, documented behaviour and this proposed adaptation are different kinds of evidence.

Sources and adaptation

This card is an original design synthesis. The following sources inform its content distinctions, interaction approach or review requirements; they do not validate the whole pattern.

Common scenarios and flows

Examples in use

Attributed app evidence with dates and review limits. A screenshot illustrates an implementation; it does not establish that the proposal works for every audience.

Explore the growing app-example collection

Design principles in this decision

Editorial application of Missional by Design. These values frame review questions; they do not validate a pattern’s effectiveness.

Compare alternatives using the task and evidence above. Record competing needs instead of treating a principle as an automatic verdict.