Purpose
The supporting information pattern is designed to help users understand complex financial terms in the moment, without losing their place in a journey. It supports confidence, reduces
reliance on external sources (for example, Google), and avoids disrupting task flow by
keeping users on the same page.
Pattern Summary
The icon button triggers a drawer to present the supporting information
- A recognisable ‘i’ icon button placed inline next to a term
- Selecting the button opens additional explanatory content in the appropriate component
-
The drawer provides concise, plain-English explanations, with space for
structured content and links where needed -
The pattern could be used alongside (not instead of) a page-level glossary,
giving users multiple ways to access help
Content Display
The following table outlines the components to use for displaying supporting content.
On the React Native platform, the default approach for all is to use a Drawer.
Why does this pattern exist?
Research showed that users:
- Expect ‘i’ icons to provide explanations of unfamiliar terms
-
Prefer help that keeps them on the same page, rather than opening new pages
or external links - Often skim help content, typically reading only the first sentence, so clarity and brevity is essential
-
Use external sources (Google, FAQs, support) when in-product explanations are
unclear or hard to find
Design principles to follow
• Stay in context - Never navigate users away from their current task to explain a term
• Be familiar - Retain the ‘i’ icon rather than relying on links or styling alone
• Be concise first - Assume users will skim, lead with the most important explanation