Pattern 30
Preview before deep study
Reveal relevant information from a passage without replacing the reader.
Concrete takeaway
Offer a small selection action menu, then preview the relevant resource before deeper study.
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.
| Alternative | Use when | Tradeoff or requirement |
|---|---|---|
| A · Select an action | The user has selected text | An action menu should stay small |
| B · Preview a resource | A resource can be checked quickly | A preview may omit details needed for study |
| C · Pin the panel | A reference should remain fixed while reading moves | Pinned and following states need distinct anchors |
The problem
Selecting text can expose too many actions or open a panel that unexpectedly changes as the reader moves.
The pattern
Offer a small selection action menu, then preview the relevant resource before deeper study. Let a linked panel either follow the passage or remain pinned, with its current anchor visible.
Compare the alternatives
Reveal relevant information from a passage without replacing the reader.
A · Select an action
Selection exposes relevant choices.
B · Preview a resource
A brief excerpt leads to the complete source.
C · Pin the panel
Following and pinning are explicit modes.
Original wireframe proposals · No live controls · Grey rows represent schematic text, not loading states · Labelled placeholders are not Scripture quotations
Download this wireframe as SVGFailure modes
A panel silently following a different verse; a resource opened without source context; a crowded selection menu that prevents reading.
What to validate
Test moving between verses with a linked and pinned panel. Can readers identify the panel’s anchor and recover the main reading task?
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.
- Resource GuidePublisher feature description reviewed · A product reference; its native interface was not independently tested.
- Where should AI sit in your UIArticle reviewed · Its role interpretations should be tested with the intended audience; they do not establish universal layout rules.
- The Shape of AICatalogue and named entries reviewed · The site states CC BY NC SA. This atlas uses original text and original wireframes; it does not reproduce the source illustrations.
Common scenarios and flows
Use this pattern within a complete journey: define the entry, preserve relevant state, plan recovery and name the endpoint. Explore the scenario library.
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.
A study workspace beside the passage
Publisher help screenshot
Bible Gateway · Desktop webA footnote preview inside the passage
Direct web capture
VSB · Android 17 · Pixel 8 Pro · German interfaceA verse sheet combines media evidence and a summary
Direct Android prototype capture
VSB · Android 17 · Pixel 8 Pro · German interfaceA selection survives returning from its study sheet
Direct Android prototype capture
Design principles in this decision
Editorial application of Missional by Design. These values frame review questions; they do not validate a pattern’s effectiveness.
- Rootedness — Which source and tradition inform this experience, and what meaning or context might this adaptation lose?
Compare alternatives using the task and evidence above. Record competing needs instead of treating a principle as an automatic verdict.