Page pattern
Narrative / Explanation
“Derived from the page purpose; write it explicitly before implementation.”
Explain a result or decision using a deliberate sequence of key messages and evidence.
Narrative / Explanation — archetype wireframe
[ Key message ] [ Evidence ] [ Supporting charts ] [ Explanation ] [ Next action ]
Reading order follows the zones above, top-left to bottom-right.
Components: Text boxes, Cards, Charts, Smart narrative where appropriate
Hierarchy: Context/control → status/primary answer → explanation/breakdown → detail → next step.
Interaction: Use only interactions that support the page's next analytical step; typical next level: **Supporting analysis**.
Navigation: Supporting analysis
Implementation: Compose from the listed native visuals/controls and the standard interaction patterns in this guide; custom visuals are exceptions.