Mobile ISI design has to pass the same practical prominence test on a phone that it would on desktop: can a reasonably attentive user actually notice, read, and understand the risk information with similar weight to the benefit claims they just saw? That is the real standard behind responsive ISI pharma design, and most brand sites still fail it when risk content is hidden, tiny, delayed, or separated from the claim context.
If your mobile experience makes safety information harder to find, harder to read, or easier to skip than the promotional story above it, you do not have a mobile UX issue alone. You likely have a fair-balance problem too, especially given FDA’s long-standing focus on net impression, comparable prominence, and readable risk presentation in consumer-directed promotion through resources like its prescription drug advertising Q&A, social media guidance hub, and draft risk-presentation guidance (FDA prescription drug advertising Q&A, FDA social media resource page, FDA draft guidance on presenting risk information).
Table of Contents
- The mobile ISI compliance problem
- What FDA prominence means on a 375px screen
- The 7 mobile ISI design patterns
- Design specifications for mobile-friendly ISI
- Accessibility requirements mapped to ISI
- Testing checklist for responsive ISI pharma experiences
- A quick case study note from Shockwave Medical
- FAQ
- Need a mobile ISI audit?
The mobile ISI compliance problem
The biggest mistake teams make with mobile ISI design is assuming that “it exists somewhere on the page” is good enough. It is not. FDA has been clear for years that ad layout affects fair balance, and that factors like type size, white space, headlines, and overall presentation change whether risk information is treated with similar prominence to benefit information (FDA prescription drug advertising Q&A).
That matters more on a 375px screen because the design margin for error is smaller. Mobile compresses visual hierarchy, reduces readable line length, increases distraction from sticky UI, and makes every extra tap more expensive. XDS’s original Important Safety Information best-practices post already points out the obvious reality here: mobile has less real estate, higher cognitive overload risk, and shorter attention windows than desktop.
In practice, the common failures show up fast:
- Collapsed accordions that hide full risk text by default. If the user sees an upbeat claim and a smiling hero image, but the actual risk details are buried behind a small disclosure toggle, prominence is already uneven.
- Text that is technically present but functionally unreadable. Twelve-pixel gray copy over a tinted background may satisfy nobody, least of all a user in bright daylight on a moving train.
- Auto-scroll patterns that jump users past risk information. Anchor links can be useful, but auto-scroll that lands below the risk header or skips the opening context can turn disclosure into a drive-by.
- Bottom-anchored trays that never actually get meaningful attention. A tray pinned to the bottom of the viewport is not inherently compliant if the content inside is cramped, truncated, or rarely expanded.
- Split-page safety experiences. Sending the user to another page for full ISI after a strong benefit claim is risky because the risk context is no longer adjacent to the promotional context.
FDA’s draft guidance on risk presentation is especially relevant here because it does not treat risk communication as a checkbox. It evaluates the net impression of the entire piece and asks whether risks and benefits are presented in a balanced, comparably prominent way from the perspective of a reasonable consumer (FDA draft guidance on presenting risk information). That is exactly the lens mobile teams should use.
A useful working test is this: If an average user with average attention opens your page on an iPhone-width screen, can they read and process the key risk information as prominently as they processed the benefit story? If the answer is no, your responsive ISI pharma experience is probably under-designed.
This is also where compliance and UX stop being opposing forces. As we argued in The Hidden Cost of “Compliance” in Healthcare Websites, healthcare sites break down when compliance theater replaces clarity. Intrusive layers, bloated builds, and poorly handled disclosures do not just hurt conversion. They reduce comprehension.
What FDA prominence means on a 375px screen
Let’s make this concrete. FDA’s older promotion principles already tell us that risk and benefit information should be comparably noticeable, comparably easy to read, and evaluated as part of the whole communication rather than as isolated text blocks (FDA draft guidance on presenting risk information). On mobile, that means prominence is not just about whether ISI appears on the screen at some point. It is about whether users can realistically perceive it before abandoning, bouncing, or mentally checking out.
FDA’s clear, conspicuous, and neutral rule for DTC TV and radio major statements is not a website design regulation. But the rule’s practical readability standards are impossible for digital teams to ignore. FDA says on-screen text in TV ads should use the same words as the audio, remain on screen long enough to be read easily, be displayed in a readable size/style/contrast/placement combination, and avoid audio or visual elements that interfere with comprehension; the rule became effective May 20, 2024, with a compliance date of November 20, 2024 (FDA OPDP FAQ, FDA CCN final rule guide, Federal Register final rule).
The principle transfer to mobile is straightforward: if FDA expects readable, non-distracted risk presentation inside a fast-moving broadcast ad, then mobile web teams should not treat tiny, hidden, or skip-prone risk text as acceptable digital practice. The device changes. The comprehension burden does not.
The draft risk-presentation guidance supports the same logic. FDA says it looks at time and space devoted to risks and benefits, the use of visuals or audio that enhance or distract, and whether the treatment of risk and benefit information is comparably thorough and complete throughout the piece (FDA draft guidance on presenting risk information). That is why a mobile hero with big benefit copy, strong visual contrast, generous whitespace, and fast scrolling paired with a buried, dense ISI block fails the prominence test even if no single sentence is false.
And there is a good reason for that scrutiny. FDA’s draft guidance cites research showing that 60% of patients believe DTC ads do not provide enough information about risks, while 60% of physicians believe patients have little or no understanding of the risks and 72% believe patients have little or no understanding of who should not use the product (FDA draft guidance on presenting risk information). On mobile, where distraction is higher and scan behavior is faster, those comprehension gaps only get more dangerous.
This is why I like the phrase comparable prominence more than “visibility.” Visibility is too weak. A disclosure can be visible and still unread, ignorable, or cognitively subordinate. Comparable prominence asks a harder question: did the risk information get a fair shot?
The 7 mobile ISI design patterns
Not every product needs the same treatment. Risk burden, boxed warnings, indication complexity, audience, and MLR tolerance all matter. But these are the seven patterns teams should evaluate for mobile ISI design.
1) Scrolling ISI below the fold
This is still the safest default for many pharma sites. Put the full ISI on the same page, below the primary content, in a clearly labeled, continuously readable section. Do not collapse it by default. Do not make it a separate destination. Let the user scroll it naturally.
Why it works: it preserves continuity, keeps full safety content in-page, and avoids the “tiny tray with huge legal payload” problem. It also aligns with FDA’s long-standing preference for risks appearing in the same piece and in relation to the claims they qualify (FDA draft guidance on presenting risk information).
What to watch: on mobile, below-the-fold does not mean hidden forever. You still need a clear top-of-page cue such as an “Important Safety Information” jump link, a persistent summary bar, or an in-flow intro that signals where full risk information lives.
2) Sticky summary ISI
This is usually the best compromise pattern for responsive ISI pharma experiences. A compact sticky module can surface a short safety summary or label, keep risk content top of mind, and provide immediate access to the full in-page ISI.
The rule is simple: the sticky unit should summarize, not replace. If the full risk payload only appears after expanding a cramped container, you have likely converted safety information into a hidden state.
A strong sticky summary pattern includes: - a persistent “Important Safety Information” label - one or two high-priority safety cues if legally approved - a clearly labeled “Read full ISI” or “Jump to ISI” action - large tap targets - clear separation from cookie banners, chat widgets, or promo pop-ups
3) ISI-first layout
Sometimes the safest move is to put more risk context earlier than the marketing team wants. If the product has high-risk complexity, a boxed warning, or an especially dense claim environment, an ISI-first or ISI-prominent mobile layout can be the right answer.
That does not mean opening with a wall of legal copy. It means allowing risk context to share the opening hierarchy. A short introductory benefit section followed immediately by a clearly visible ISI module is often stronger than pushing safety to the lower third of the page and hoping users will keep scrolling.
This is also consistent with the broader XDS point that compliance should guide clarity, not destroy it. The right move is often a better hierarchy, not a louder tray (The Hidden Cost of “Compliance” in Healthcare Websites).
4) Integrated ISI callouts
This is an underused pattern. If a page makes a strong efficacy, mechanism, or convenience claim, place short, context-relevant safety callouts near the claim and then route users to the full ISI below. This does not replace the full safety block, but it reduces the cognitive gap between claim and risk.
FDA’s guidance repeatedly emphasizes net impression and the importance of how signals, headings, framing, and placement affect interpretation (FDA draft guidance on presenting risk information). Integrated callouts help ensure the user does not spend the whole upper viewport in benefit mode and the whole lower viewport in legal mode.
Used well, this pattern also supports related topics covered in our posts on fair balance in pharma advertising and FDA social media guidelines for pharma, where space constraints and promotional framing can distort risk treatment even when required copy technically exists.
5) Progressive disclosure
Progressive disclosure is acceptable only when it reveals supporting detail, not when it hides the essential risk payload. In other words, you can progressively disclose deeper sections, secondary explanations, or product-specific branches if the core risk information is already prominent and readable.
Good use of progressive disclosure: - showing a brief visible summary first, then expanding into more detail - letting users open product-specific sub-sections inside a longer safety page - collapsing repetitive low-priority details after the major risks are already visible
Bad use of progressive disclosure: - hiding all meaningful risk information behind “Read more” - defaulting the safety section closed on mobile while claims stay fully open - requiring multiple taps to reveal what should have been visible from the start
6) Accordion ISI
In most cases, this is the pattern I would avoid.
Accordions feel attractive because they save space. But space-saving is exactly the wrong optimization if the result is lower prominence, lower readability, or lower likelihood that a user will ever encounter the full risk content. They are especially weak on mobile when the toggle affordance is small, the expanded panel is short, and the user cannot tell whether more safety content exists below.
If legal requires an accordion, at minimum: - default it open on load for consumer-facing claim pages - make the header unmistakable - ensure full keyboard and screen-reader support - use large touch targets - preserve scroll position and focus state - avoid nested accordions inside the ISI itself
XDS’s earlier ISI post notes that mobile users take roughly 2x more tray-collapse actions, which is exactly why small controls and default-hidden content are so dangerous on phones (Important Safety Information best practices).
7) Split-page ISI
This is the riskiest pattern of the group. Sending users to another page for full risk information breaks context, reduces the chance of completion, and weakens the relationship between claim and risk. It can sometimes be appropriate for deeper prescribing information, full PI, or IFU documentation. It is a poor primary pattern for consumer-facing mobile ISI.
If a separate destination exists, it should be additive. The main claim page still needs meaningful, prominent, readable in-page safety content.
Design specifications for mobile-friendly ISI
Below is the specification set I recommend as a design starting point for mobile ISI design. Some values are UX best-practice recommendations rather than FDA-prescribed numbers, but they are grounded in fair-balance logic, WCAG 2.1 AA requirements, and real mobile reading behavior (WCAG 2 overview, Contrast Minimum, Resize Text, Important Safety Information best practices).
| Element | Recommended mobile spec | Why it matters |
|---|---|---|
| Body copy for page content | 16px target, 14px minimum | Mobile body text should remain comfortably readable without zoom. |
| ISI body copy | 14px minimum, never below 12px absolute floor | Risk text cannot become the smallest text on the page and still feel comparably prominent. |
| Line height | 1.5 to 1.7 | Dense legal copy needs breathing room to remain readable on narrow screens. |
| Text contrast | 4.5:1 minimum for normal text; 3:1 only for large text | Required for WCAG 2.1 AA readability. |
| UI component contrast | 3:1 minimum for controls and states | Disclosure buttons, tabs, and sticky ISI actions must remain visible. |
| Tap target | 44 x 44 px minimum | Small disclosure controls create missed taps and skipped safety content. |
| Paragraph width | Prefer short mobile line lengths, roughly 45–75 characters when feasible | Legal content becomes harder to parse when lines are too long or too cramped. |
| Placement relative to claims | Present risk cues in the same page context as benefit claims; do not force inter-page navigation for core ISI | Proximity supports fair balance and net impression. |
| Expand/collapse behavior | Default visible for core risk content; use disclosure for secondary detail only | Prevents “hidden by design” safety patterns. |
| Sticky safety summary | Allowed as a reminder, not as a substitute for full ISI | Good for awareness, weak as the only exposure. |
| Auto-scroll behavior | Never jump past the beginning of the ISI section | Users need the heading and opening context, not just a random midpoint. |
A quick note on contrast and font size: “technically present” is not the same as “easily readable.” FDA’s CCN guidance explicitly points to size, contrast, placement, and duration as a combination problem, not a single-variable problem (FDA CCN final rule guide). Mobile teams should think the same way.
Accessibility requirements mapped to ISI
ISI is not accessible just because a screen reader can technically find it. Safety content has to be perceivable, operable, understandable, and robust under WCAG 2.1 AA, especially when it appears in sticky trays, tabs, accordions, or jump-link patterns (WCAG 2 overview, Web Content Accessibility Guidelines 2.1).
| WCAG 2.1 area | What it means for ISI | Practical requirement |
|---|---|---|
| 1.3.1 Info and Relationships | ISI structure must be programmatically meaningful | Use real headings, lists, landmarks, and labels rather than visually styled divs. |
| 1.4.3 Contrast (Minimum) | Legal copy must be readable in real viewing conditions | Maintain 4.5:1 contrast for standard text and avoid low-contrast gray-on-gray treatments. |
| 1.4.4 Resize Text | Users with low vision must be able to enlarge text | Ensure ISI text can scale to 200% without clipping, overlap, or broken controls. |
| 1.4.10 Reflow | Narrow screens and zoom states must still work | No horizontal scrolling just to read the safety block. |
| 2.1.1 Keyboard | Disclosure controls must work without touch | Accordions, tabs, and sticky actions must be keyboard-operable. |
| 2.4.1 Bypass Blocks | Users should reach ISI efficiently | Provide skip links or jump links when pages are long. |
| 2.4.7 Focus Visible | Users must see where they are when navigating by keyboard | Every ISI link, tab, and accordion control needs a clear visible focus state. |
| 4.1.2 Name, Role, Value | Interactive components need accessible state changes | Expanded/collapsed states and button roles must be exposed correctly. |
For mobile, the biggest accessibility failure is usually not the text itself. It is the interaction model around the text. A beautifully formatted ISI block still fails if the accordion state is not announced, the sticky tray traps focus, the jump link lands in the wrong place, or zoom breaks the layout.
Testing checklist for responsive ISI pharma experiences
A compliant-looking mobile ISI pattern is not enough. You need proof that it works. At XDS, this is where design, dev, analytics, QA, and MLR should finally be in the same room.
1) FDA-style prominence test
Ask the blunt question: Would a reasonable person perceive the risk information as prominent as the benefit information on this phone? Use actual devices, not just browser previews. Review the experience with hero content, sticky elements, cookie banners, and real copy lengths turned on.
2) Accessibility test
Test screen readers, keyboard flow, focus visibility, zoom to 200%, contrast, orientation changes, and reflow. WCAG 2.1 AA is not a side checklist here. It is part of whether users can actually access the safety content at all (WCAG 2 overview, Resize Text, Focus Visible).
3) Performance test
If your ISI tray depends on heavy scripts, animation libraries, or late-loading modules, risk content may appear too late or behave unpredictably. This is one more reason our healthcare website redesign guide and hidden cost of compliant websites post both stress performance as part of compliant experience design.
4) User comprehension test
Run moderated and unmoderated tests with mobile users. After viewing the page, ask: - What is the product for? - What are the most important risks you remember? - Who should not use it? - Where would you go to read the full safety information?
If users remember the efficacy claim but cannot recall the major risk themes, your layout is doing exactly what regulators worry about.
5) Scroll-depth and engagement instrumentation
Track whether users reach the ISI section, expand related components, interact with jump links, and spend time in the safety area. XDS’s original ISI post recommends exactly this mix of quantitative instrumentation and qualitative testing, and that advice still holds (Important Safety Information best practices).
6) MLR and design review together
Do not let legal approve static copy while UX approves a different interaction pattern in isolation. Review the actual mobile prototype or staging build together, including zoom states and assistive tech behavior.
A quick case study note from Shockwave Medical
XDS’s work with Shockwave Medical is a useful reminder that healthcare website performance and regulatory structure can coexist. XDS overhauled the company’s global website, adding educational content, clinical resources, and a more modern digital experience, and the case study reports a 40% increase in site traffic and a 400% surge in lead generation after launch (Shockwave Medical case study).
What is especially useful from an ISI architecture standpoint is the current Shockwave Important Safety Information hub. It separates Coronary IVL, Peripheral IVL, and Shockwave Reducer safety content into distinct sections and includes product-level indications, contraindications, warnings, precautions, adverse effects, and IFU references in one structured destination.
That does not mean every pharma brand should copy that pattern exactly. It does show the value of a clear safety architecture: separate complex product lines cleanly, keep terminology specific, and make deeper instructions easy to reach without turning risk content into an afterthought.
FAQ
Is mobile ISI allowed to be collapsed by default?
Usually that is a bad idea for consumer-facing claim pages. If the essential risk information is hidden until a user expands it, the design is already weakening prominence relative to fully visible benefit copy.
What is the best mobile ISI pattern for most brands?
A sticky summary plus a full, in-page scrolling ISI section is usually the strongest default because it keeps safety visible without forcing the entire legal payload into a tiny fixed-height tray.
Is a separate safety page enough?
No. A separate page may be useful for PI, IFU, or deeper documentation, but it should not be the main way users encounter core safety information after seeing benefit claims.
What font size should mobile ISI use?
Aim for 14px minimum for ISI body text, with 16px as a healthier default for most mobile reading situations. Never let legal copy become the tiniest text on the page.
Do WCAG rules really matter for ISI if the page is already compliant from a regulatory standpoint?
Yes. If users cannot operate, enlarge, or perceive the safety content, then the design is failing both accessibility and the practical goal of comparable prominence.
Can jump links and auto-scroll help?
Yes, but only if they land users at the beginning of the ISI section, preserve context, and do not skip the opening risk framing.
Why are accordions so common if they are risky?
Because they solve a space problem for internal teams. Unfortunately, they often create a prominence and comprehension problem for actual users.
Need a mobile ISI audit?
If your team is not sure whether your mobile ISI design would hold up under real user behavior, real accessibility testing, and real fair-balance review, that is exactly the moment to audit it.
At XDS Health, we help healthcare and life sciences brands design digital experiences that balance compliance, accessibility, performance, and conversion instead of sacrificing one to protect another. If you want a second set of eyes on your responsive ISI pharma experience, request a mobile ISI audit at XDS Health.
And if you have not read it yet, start with our original cluster anchor on Important Safety Information best practices for healthcare websites. It is still the foundation. This post is the mobile layer.