Four Pricing-Page Layout Patterns: How SHOPLINE, Basecamp, Linear and Figma Arrange Their Plans — and the Real CLS and SEO Cost

The highest-intent page on your site, and the least designed

Nielsen Norman Group states it plainly in its B2B usability research: price is the single most needed piece of information on a website, and test participants who could not find it left for competitors who published theirs (NN/g: State the Price). The hard part in 2026 is not whether to publish a price — it is that the plans themselves have become complicated. Layout now decides whether visitors understand what you are actually selling.

Five pricing pages that are live right now

• SHOPLINE Taiwan: four cards with an "average monthly / annual price" toggle above them. Plans run NT$40,000 / 55,000 / 68,000 / 88,000 per year, each card carries a struck-through list price (NT$246,000 down to NT$88,000), and the one-off NT$5,000 setup fee plus the monthly GMV cut are printed inside the card rather than in a footnote. Below sits a long comparison table grouped by module. Note that the "most popular" badge sits on the top tier, not the middle one (pricing page).
• Basecamp: no feature tiers at all. Two cards representing two billing models — Plus at US$15 per user per month, and Pro Unlimited at a flat US$299 per month (annual) for unlimited people. The break-even lands around 20 people. The question changes from "which features do I need" to "how many of us are there".
• Linear: Free / Basic US$10 / Business US$16 / Enterprise on request, with only annual per-seat pricing shown on the public page. The saving is baked into the default state instead of being left as arithmetic for the visitor.
• Figma: in 2025 it replaced per-product seats with four seat types — Full, Dev, Collab, View (Professional annual at US$15 / 12 / 3). The layout went from a one-dimensional ladder to a two-dimensional plan-by-seat matrix (official notes).
• Vercel: splits the marketing pricing page from a technical reference page. The Vercel Docs pricing page lists team seats at US$20/month, SAML at US$300/month, Observability Plus at US$1.20 per million events, and builds at US$0.0035 per CPU minute. Marketing handles the choice; docs handle the estimate.

The logic underneath: five options is a hard threshold

The NN/g comparison table research shows that people engage in compensatory decision making — weighing pros and cons attribute by attribute — only when there are roughly five options or fewer. Beyond that they fall back to noncompensatory decision making and eliminate options using a single criterion, usually price. Your sixth plan does not add choice; it pushes visitors back to looking only at the number.

The second layer is the decoy effect, or asymmetric dominance, first described by Huber, Payne and Puto in 1982. The Economist subscription experiment run by Dan Ariely is the standard citation: with two options, 68% of students picked the cheaper web-only plan; after a decoy was added — print-only priced identically to print-plus-web — 84% switched to the bundle. The struck-through list price at SHOPLINE and the annual-only rate at Linear are variants of the same anchoring mechanism.

The third layer is an NN/g finding that gets ignored: when pricing is complex, give sample prices for typical scenarios rather than handing the visitor a calculator. Most pricing calculators proved slow and error-prone in testing, and only highly engaged buyers bothered to finish them.

Technical cost: hours, DOM, CLS and SEO

• Hours: a static three-card pricing page with responsive layout and a monthly/annual toggle runs roughly 12–20 hours of design plus front-end work. Adding a 60-row comparison table with sticky headers and a mobile tab fallback adds another 16–28 hours. Syncing prices with your billing provider adds 8–16 more.
• DOM: four plans by eighty rows is 320 cells, which pushes node counts past a thousand and visibly slows style and layout on mid-range phones. That table, not your imagery, is usually the biggest performance liability on the page.
• CLS: the most common toggle bug is a card that changes height because the price string gets shorter or longer. Core Web Vitals expects CLS at or below 0.1 at the 75th percentile; internal testing at Google found shifts of 0.15 and above were consistently perceived as disruptive. The fix is cheap — pin a min-height on the price container or use fixed CSS grid tracks.
• SEO: rendering prices only after JavaScript, or hiding them behind a contact form, removes the most valuable text on your site from the index. When an AI search engine wants to quote your price, it can only quote a stale third-party summary.

Which industries this fits, and which it does not

The right column does not mean skipping a pricing page. It means changing the pattern: three sample scenarios with starting prices plus an estimate form is far more honest than a fake three-column card set.

How to apply this to your site: six steps

• Step 1 — Pick one axis first. Feature tiers, seat types, usage metering, or the billing-model split used by Basecamp. A pricing page can carry one primary axis; two turns it into a matrix and doubles the work.
• Step 2 — Cut to three or four plans. Everything past the fifth becomes "Enterprise — talk to us". This is the highest-return change on the page.
• Step 3 — Choose the default state. Show the billing period you want most people to buy, and print the saving next to the toggle instead of making visitors multiply by twelve.
• Step 4 — Put only four to six deciding differences on each card. Everything else goes into the comparison table below, with sticky headers and a tab or accordion fallback on mobile.
• Step 5 — Print hidden fees inside the card. Setup fees, revenue shares, overage rates, minimum terms — a footnote is the same as not writing it, and it becomes a support ticket at the first invoice.
• Step 6 — Measure CLS and per-card conversion. Use Chrome DevTools Layout Shift Regions while flipping the toggle, and attach a separate event to the CTA on each card so you can tell whether the decoy is working.

Pre-launch checklist:

• ☐ Four plans or fewer, excluding the enterprise contact tier?
• ☐ Card height completely stable when the toggle flips?
• ☐ Every one-off fee and revenue share printed inside the card?
• ☐ Every plan has a value in every comparison-table row?
• ☐ Mobile still supports side-by-side comparison of at least two plans?
• ☐ Price text present in the HTML source rather than injected by JavaScript?

Four common mistakes

• Assuming more plans is more helpful. Past five options, visitors revert to eliminating by price alone. If you need to serve more scenarios, add a by-headcount or by-revenue recommender, not more cards.
• Putting "most popular" on the most expensive plan. That badge is social proof, not ad inventory. If it does not match your real sales mix, the first renewal negotiation will expose it.
• Inconsistent comparison-table rows. NN/g is explicit that the biggest problem with comparison tables is content, not design — missing or inconsistent values make the whole table useless.
• Replacing prices with a calculator. Unless the visitor is already in procurement, a calculator is a deterrent. Put sample prices on the first layer and the calculator on the second.

Further resources

• NN/g — Comparison Tables: row and column conventions, sticky headers, mobile handling.
• NN/g — State the Price: the evidence on publishing B2B prices.
• web.dev — Cumulative Layout Shift: how to measure and threshold shifts caused by toggles.
• Vercel Docs — Pricing: a template for layering complex usage-based pricing.

FAQ

We quote every project individually. What should our pricing page say?

Do not fake a three-column card set. Publish starting prices for three typical scenarios (for example, "five-page brand site from NT$180,000"), add one sentence on what moves the number, then link an estimate form. The NN/g research shows sample prices are enough to satisfy buyers still in the research phase, while publishing nothing sends them straight to a competitor.

Three plans or four?

Judge by whether a visitor can tell the difference at a glance. The NN/g threshold is five or fewer for attribute-by-attribute weighing, so three or four are both safe. The plan to cut is the one that differs by a single minor feature — it adds hesitation, not revenue.

Which billing period should the toggle default to?

The one you want most people to buy, with the difference printed beside it. Linear simply shows annual per-seat pricing; Basecamp lists both US$299 annual and US$349 monthly and lets the gap speak. Re-measure CLS after you build the toggle.

How should the comparison table behave on mobile?

Do not hide it entirely. Three workable options: convert each plan into a tab, convert rows into an accordion, or cap side-by-side comparison at two plans. NN/g cautions that tabs and lists do not support true side-by-side comparison, so keep two columns if you can.

Want your pricing page rebuilt?

If your plan page was laid out three years ago, has grown to six tiers, or needs an engineer every time you change a price, we can rebuild it: axis decision, card and comparison-table layout, plus CLS and conversion instrumentation, delivered in one pass. Get in touch:

• Email: [email protected]
• Phone: 0916-224-047
• LINE: @ufv9089p