算法艺术创作
algorithmic-art
通过代码和可调参数创作生成艺术与交互式视觉效果。
hicks-law-pricing【设计与创意】Use this skill when designing pricing tables, plan pickers, tier selectors, or any conversion surface where the choice itself is the conversion event. Trigger when laying out 3-tier or 4-tier pricing, when arguing about whether to add a fourth plan, when designing the "Choose your plan" step of onboarding, or when fixing low conversion on a pricing p…
独立 GitHub 快照 · 自动分类 · 以原作者文档为准
hicks-law; read that first if you haven''t already.'A pricing page is a Hick's Law surface where the decision is the page. Every option you add increases consideration time and abandonment risk; every option you remove may push some users toward the wrong tier. The right number of tiers is one of the most studied design decisions in conversion-rate-optimization research, and the answer is consistent: fewer is usually better.
The 3-tier pricing layout (often labeled Starter / Pro / Enterprise, or Free / Pro / Team) is the convention because it works. Three options:
Adding a fourth tier rarely helps. It increases consideration time, splits revenue across more buckets, and dilutes the framing of the middle tier as "the obvious choice." Companies that ship 5- or 6-tier pricing tables usually do so because internal consensus couldn't agree which features belonged where, not because users wanted more choice.
In 3-tier pricing, the middle tier typically captures the bulk of conversions. Designers exploit this with the anchoring effect:
This is well-studied in pricing psychology (Ariely; Thaler & Sunstein on choice architecture). It's effective. It's also ethically defensible when the middle tier is genuinely the right choice for most users — and dishonest when the middle tier is engineered to drive revenue regardless of fit.
Highlight the recommended (middle) tier with stacked emphasis cues:
Do not over-do this. One tier highlighted; the other two visibly available but recessive. Three equally-emphasized tiers undo the recommendation effect.
<div class="pricing-grid">
<article class="plan">
<h3>Starter</h3>
<p class="price">$9 / mo</p>
<ul>
<li>1 user</li>
<li>5 projects</li>
<li>Email support</li>
</ul>
<button class="outline">Start free trial</button>
</article>
<article class="plan plan--featured">
<span class="badge">Recommended</span>
<h3>Pro</h3>
<p class="price">$29 / mo</p>
<ul>
<li>5 users</li>
<li>Unlimited projects</li>
<li>Priority support</li>
</ul>
<button class="primary">Start free trial</button>
</article>
<article class="plan">
<h3>Team</h3>
<p class="price">$99 / mo</p>
<ul>
<li>25 users</li>
<li>Unlimited projects</li>
<li>SSO + audit log</li>
</ul>
<button class="outline">Talk to sales</button>
</article>
</div>
Don't list 30 features in each card. List the 3–6 differentiators that matter for the tier choice. A user comparing 3 tiers across 30 features each is doing a 90-cell evaluation; abandonment spikes.
If you must list comprehensive features, put the comparison in a separate section below the cards (often a "Compare all features" toggle that reveals an exhaustive table). That defers Hick's Law cost to the small fraction of users who care to dig.
Lead with the price for the most-likely billing cycle (usually monthly, though "per user / mo billed annually" is increasingly the default). Offer a billing-cycle toggle (Monthly / Annually) above the cards — annual is typically discounted to nudge that selection.
<div class="billing-toggle" role="radiogroup" aria-label="Billing cycle">
<button aria-pressed="false">Monthly</button>
<button aria-pressed="true">Annual <span class="discount">-20%</span></button>
</div>
Keep the toggle proximate to the cards so the relationship is obvious.
Two common edge cases:
A workable layout: Starter / Pro / Team in three cards; Free as a small banner above; Enterprise as a small panel below. Three is still the visible decision space.
The CTA should make the user's next step obvious and concrete:
Avoid identical "Sign up" CTAs across all tiers — Hick's Law cost is higher when nothing differentiates the action labels.
When the product is genuinely simple and there are only two meaningful states (free vs. paid; basic vs. premium). 2 tiers is a strong "make the simpler choice" stance. Conversion-rate research suggests 2 tiers can outperform 3 when feature parity is tight.
Justified when:
If you can't articulate the persona for each of 4 tiers in a sentence, you have 3 tiers and one of them is confused.
Almost always wrong. Reasons companies end up here: (1) Sales tiering ("we want a plan for $499 and one for $2,999"); (2) feature-debt where every customer's special request became a tier; (3) failure to consolidate after a tier was added. Restructure.
The pricing page that takes the user 3 minutes to scan is a pricing page that loses conversions.
For products with genuinely complex pricing (consumption-based, hybrid SaaS-plus-usage, multiple add-ons), apply progressive disclosure:
The casual visitor sees three tiers and a price. The serious shopper finds the depth as they scroll.
hicks-law (parent).hicks-law-defaults — the recommended-tier highlight is a defaulting pattern.hicks-law-menus — pricing tables are a special case of menus.comparison (cognition) — pricing is a comparison surface; align comparable features.framing (cognition) — how each tier is labeled changes which one users pick.anchoring (related; not in book) — the high-tier anchor makes the middle tier read as reasonable.veblen-effect (aesthetics) — the very-high-priced enterprise tier earns desirability from its price.