Plan Cards & Browsing
Plan Cards & Browsing
How to read plan cards, browse offers, and understand which plan becomes selected as you scroll or page
Quick reference for reading plan cards, choosing by browsing patterns (horizontal selector vs paginated cards), and the rules that determine which plan is preselected when it comes into view.
What this page covers
Card layout & coverage summary
How every plan card presents name, price, recommended badge, coverage bars and downloadable documents so you can compare at a glance.
Browsing patterns
Two primary navigation patterns: a horizontal (swipe/scroll) selector typically used on mobile, and a paginated or multi-column display used for larger screens.
Auto‑preselection logic
The app automatically marks a plan as selected when it becomes the primary visible card — either by being centered in a horizontal scroller or by being the leading item on a page.
Toggle views
Toggle between specialized offer views (example: 100% santé vs classic) to instantly update card visuals and recommended highlights.
Plan comparison modal
Open a comparison modal to inspect full guarantee tables and product sheets before deciding.
Accessible interactions
Cards are actionable elements you can tap or click to explicitly select; keyboard and assistive navigation should be supported by your browser/device.
Intro This deep-dive explains how to read plan cards, how to move through the available plans, and exactly when the interface will automatically mark a plan as selected. It’s written for non‑technical users and product owners who want to understand behavior, edge cases, and best practices when presenting offers to customers.
Start by scanning these elements on each plan card
Look at the card header (plan name + recommended badge), the price line (amount + billing frequency), the coverage summary (compact visual levels), and the downloadable documents section — that gives you a fast, reliable comparison without opening each plan.
Workflow: Read a Plan Card (what to look for)
Step 1 — Locate the card
Find the visible plan card in the offers area. On mobile this will usually be a horizontally scrollable card; on desktop it may appear as a larger featured card.
Step 2 — Check the header
Read the plan name and look for a “Recommended” badge. The badge highlights a plan chosen for its fit with the user’s profile or common recommendations.
Step 3 — Review price & cadence
Confirm the monthly price and whether the amount is shown with taxes included (TTC/mois) and any short label like “TTC/mois”.
Step 4 — Inspect coverage summary bars
Each coverage line shows the benefit name and 1–4 small level boxes. Filled boxes (colored) show the coverage level (higher = better). This is a quick visual to rank plans.
Step 5 — Look at downloads & legal docs
Check the small document links (guarantee table, product info, regulations). Use these before committing as they contain the detailed conditions.
Step 6 — Select if needed
Tap/click the card to explicitly select it. The selected state changes card colors to make it obvious which plan is active.
Use this when you have many plans and a narrow viewport. The horizontal selector shows one main card centered at a time while others peek on the sides. As you swipe, the card that comes into the center becomes highlighted and preselected (so you don’t have to tap it if you’re simply scrolling and then decide to continue).
When to prefer the horizontal selector:
- Mobile-first flows
- Quick visual sweep through many plans
- Smooth swipe/touch interactions
When to prefer paginated or multi-card:
- Desktop where you compare multiple items simultaneously
- Fewer plans where each can be shown in full
- When you want a single featured plan plus alternatives
Workflow: Browse plans using the horizontal selector (mobile-friendly)
Step 1 — Locate the selector
Find the horizontally scrollable area labeled for offers. It will likely say something like “other offers” or be nested under a “recommended for you” heading.
Step 2 — Toggle the offer type (if available)
If a view toggle exists (e.g., 100% santé vs classic), use it to switch offer sets. This updates card visuals and available plans.
Step 3 — Swipe slowly to reveal cards
Swipe left or right. The interface is tuned so that when a card becomes centered (or largely visible), it becomes the active/selected card.
Step 4 — Let the UI preselect as you scroll
When a card reaches the central area of the scroller it will automatically become preselected. This saves you from having to tap every card to preview it.
Step 5 — Tap to confirm selection
If you want to explicitly choose a plan, tap the visible card. The card will change appearance to show the selected state and any “choose” action becomes enabled.
Step 6 — Proceed with the CTA
Use the main CTA (e.g., “Choose this plan and subscribe”) to continue the purchase or sign-up flow with the currently selected plan.
Tip: Use the toggle before browsing for faster comparisons
If you plan to compare only 100% santé or classic offers, toggle that view before swiping — it narrows the set and ensures the preselected card reflects the correct offering family.
Workflow: Browse plans using paginated cards (desktop or grouped lists)
Step 1 — Find the plan grid or featured card
On larger screens, you may see a featured main plan plus two or more side cards. Paging controls (arrows or page numbers) may be visible for long lists.
Step 2 — Use paging controls to move between pages
Click arrows or page numbers to move to the next block of plans. Each page shows a subset of the offer list.
Step 3 — Note the preselected card after page change
After a page change the interface will usually mark the first (or most prominent) card on that page as selected by default. This helps keep an active choice visible without extra clicks.
Step 4 — Manually pick a different card if desired
Click any other card on the current page to change the selection. The card will swap into the selected appearance and the CTA corresponds to that plan.
Step 5 — Open the comparison modal when needed
If you need deeper detail, click the “Compare guarantees” or similar control to open the full comparison, then return to pick the confirmed plan.
Common gotcha: selection vs visibility mismatch
If you scroll quickly or the card is only partially visible, it might not become the active selection. Make sure the card is centered/fully visible (or tap it) to ensure the interface selects the intended plan before you press the final CTA.
Workflow: How preselection logic works (what the user sees and when)
Step 1 — Visible / centered card becomes active
As you scroll horizontally, the card that becomes primarily visible (centered or above the visibility threshold) is automatically marked active so you always have a clear current choice.
Step 2 — Page change selects the leading card
When you change pages, the first (leading) card on the newly visible page is set as the active selection so the UI always shows a current plan even if you don’t click.
Step 3 — Explicit selection overrides auto‑selection
If you tap or click a card, it immediately becomes selected and takes priority over automatic selection until you change view again.
Step 4 — Toggling offer types resets selection to the most relevant card
Switching between offer families (e.g., 100% santé vs classic) will typically reset the selection to the most recommended or first card of that family, so double-check before confirming.
Step 5 — How to force a selection if unsure
If automatic behavior isn’t what you expect, explicitly tap the card you want to choose. This removes ambiguity and ensures the CTA uses your intended plan.
Tip: Confirm selection before committing
Always glance at the selected card’s name and price right before clicking the final confirm/subscribe button — toggles, paging, or fast swipes can cause the current selected plan to change.
Pros of automatic preselection:
- Speeds browsing: no extra taps while previewing.
- Keeps a visible active plan for CTAs.
- Works well for one-at-a-time mobile browsing.
Cons & when to avoid:
- Can lead to accidental selection if you swipe and immediately confirm.
- May confuse users when toggles change available plans and the selection jumps.
- If many plans are very similar, you may prefer explicit taps to avoid mistakes.
Workflow: Best practices for building buyer confidence (for product owners)
Step 1 — Make the selected state unambiguous
Use clear visual contrast for the selected card (color, border, and copy) so users instantly know which plan is active.
Step 2 — Show key details in the card
Surface price, one‑line coverage summary, and the recommended badge on the card — don’t make users open a modal just to get the basics.
Step 3 — Provide an explicit confirmation CTA
CTAs should read the selected plan name or show a confirmation step after clicking so accidental preselection is caught before purchase.
Step 4 — Preserve selection across view toggles when relevant
When users toggle offer families (e.g., 100% santé), consider preserving their selection if that plan still exists in the new view; otherwise, clearly indicate that the selection changed.
Step 5 — Offer a visible comparison option
A short “Compare” button that opens a clear guarantee table helps users move from glance to decision without confusion.
Frequently Asked Questions
Ready to pick a plan?
When you’re ready to choose, confirm the selected plan on the offers page and proceed with the subscription flow. Remember to verify name and price on the final confirmation screen.
Accessibility & keyboard users
Ensure focus styles and keyboard navigation allow users to move between cards and activate selection using Tab + Enter/Space. If your browser/device lacks that, use explicit clicks/taps and the comparison modal to verify details before committing.
Final notes
- Edge cases to watch: very fast swiping, toggling views mid‑scroll, or paging while a selection animation is still running — in those cases use explicit taps to avoid accidental confirmation.
- Recommended UX: always include a final confirmation step that repeats the plan name and price so users can detect and correct mis-selection.