算法艺术创作
algorithmic-art
通过代码和可调参数创作生成艺术与交互式视觉效果。
hicks-law【设计与创意】Use this skill whenever a design has many options the user must choose among — menus, navigation, pickers, plan tiers, settings panels, action toolbars, lists of templates, anything that asks "which one?" Trigger when the user is laying out a navigation menu, designing a settings page, picking the structure of a wizard, building a country/timezone/cu…
独立 GitHub 快照 · 自动分类 · 以原作者文档为准
Hick's Law (more precisely, the Hick-Hyman Law) is the empirical observation that the time required to make a decision among a set of options grows with the logarithm of the number of options. Stated as a formula:
T = b · log₂(n + 1)
Where T is decision time, n is the number of equally likely choices, and b is a constant determined by the cognitive context. The +1 accounts for the time to begin processing the choice set at all. The logarithmic growth is the design-relevant insight: doubling the number of options does not double decision time, but it does add a roughly constant increment each time.
When a user must select one option from a set, the time and cognitive effort required to make that selection rise as the set grows — but not linearly. The user can scan and pick from a small set quickly; they need progressively more time as the set grows; and beyond a certain size (typically around 7–10 options for a flat list) they switch from scanning to searching, which is a different and slower mode.
The takeaway: more options is more decision cost, the cost grows sub-linearly, and beyond about 7 options the dominant cost shifts from "scan and pick" to "search the list."
In product design, every option you put in front of the user is paid for in two currencies: decision time (the user must consider it) and decision fatigue (the user has fewer mental resources for the next decision). On a single screen, the cost of one extra option is small. Across a workflow with many decision points, the costs compound.
Designs that respect Hick's Law feel "easy" — users move through them without stalling. Designs that ignore it feel "complicated" — users hover, deliberate, and sometimes abandon.
Hick's Law is sometimes invoked to justify removing options that users actually need. Beware of these failure modes:
The most direct strategy. Audit the option set: which options are rarely used? Hide them behind "More" / "Advanced" / a command palette. The remaining set should be small enough to scan at a glance.
The 80/20 rule pairs naturally with Hick's Law here: surface the 20% of options that handle 80% of cases; tuck the rest.
A flat list of 30 items is hard. Three groups of 10 items, each with a heading, is much easier — the user makes a fast group choice (Hick's Law on 3), then a slower within-group choice (Hick's Law on 10).
Flat (Hick's cost: log₂(31) ≈ 4.95)
Item 1 … Item 30
Grouped (Hick's cost: log₂(4) + log₂(11) ≈ 2 + 3.46 = 5.46)
Group A
Item 1 … Item 10
Group B
Item 11 … Item 20
Group C
Item 21 … Item 30
The arithmetic suggests grouping is worse by raw Hick's Law math. It isn't, in practice, because:
The math underestimates how badly humans handle long flat lists.
If you can pre-select the most likely option, you've cut the choice from N to "1 (the default) or N−1 (everything else)." Most users accept the default, so most users pay almost no decision cost.
This is the single highest-leverage Hick's Law strategy: a good default eliminates the decision for most users.
Beyond ~10 options, scanning becomes search. The right interaction is no longer a <select> or radio group — it's a typeahead combobox or a command palette where the user types to filter. Filter-as-you-type collapses Hick's Law into the much faster Recognition-over-Recall.
≤ 5 options: radio buttons or segmented control (all visible, instant pick)
≤ 10 options: select dropdown
≤ ~20 options: select with categories
> 20 options: combobox / typeahead / command palette
A common Hick's Law mistake: presenting many options up-front when the user hasn't yet supplied the context that would narrow them. Defer.
If you can predict which options the user is likely to want (from their history, role, recency), put those at the top with a "Recent" or "Suggested" group. The user often finds their option without scanning the full list.
<!-- Anti-pattern: 195 countries in a flat select -->
<select>
<option>Afghanistan</option>
<option>Albania</option>
…
<option>Zimbabwe</option>
</select>
Decision cost is high (effectively a search, not a scan). Plus, the dropdown UI doesn't allow type-to-find effectively.
<!-- Right: combobox with typeahead, plus recents -->
<combobox>
<input placeholder="Search country" />
<listbox>
<group label="Recent">
<option>United States</option>
<option>Canada</option>
</group>
<group label="All countries">
<option>Afghanistan</option>
…
</group>
</listbox>
</combobox>
The user types "ger," sees Germany, picks it. Hick's Law collapsed to recognition.
<!-- Anti-pattern: 14 top-nav items -->
<nav>
<a>Home</a><a>Dashboard</a><a>Projects</a><a>Tasks</a><a>Reports</a>
<a>Calendar</a><a>Files</a><a>Inbox</a><a>Notifications</a><a>Team</a>
<a>Customers</a><a>Vendors</a><a>Settings</a><a>Help</a>
</nav>
User can't decide where to start; eyes sweep, fatigue.
<!-- Right: 5 top-level groups, with sub-nav under each -->
<nav>
<a>Work</a> <!-- Dashboard, Tasks, Calendar, Files -->
<a>Inbox</a> <!-- Notifications, Messages -->
<a>People</a> <!-- Team, Customers, Vendors -->
<a>Reports</a>
<a>Settings</a>
</nav>
Five groups; user picks one in <1 second; sub-nav resolves the within-group choice.
<!-- Anti-pattern: 30 toggles in a flat list -->
<form>
<label><input type="checkbox" /> Send daily summary email</label>
<label><input type="checkbox" /> Send weekly summary email</label>
<label><input type="checkbox" /> Notify on mention in any channel</label>
…(27 more)
</form>
The user is asked to evaluate 30 boolean choices, most of which they don't care about.
<!-- Right: grouped, with strong defaults pre-selected -->
<form>
<fieldset>
<legend>Email digest</legend>
<label><input type="radio" name="digest" value="off" /> Off</label>
<label><input type="radio" name="digest" value="daily" checked /> Daily (recommended)</label>
<label><input type="radio" name="digest" value="weekly" /> Weekly</label>
</fieldset>
<fieldset>
<legend>Push notifications</legend>
<label><input type="radio" name="push" value="off" /> Off</label>
<label><input type="radio" name="push" value="mentions" checked /> Mentions only (recommended)</label>
<label><input type="radio" name="push" value="all" /> All activity</label>
</fieldset>
<details>
<summary>Advanced (Slack, calendar, custom rules)</summary>
…(advanced settings, hidden by default)…
</details>
</form>
Now the user faces 3 + 3 = 6 visible choices, both with sensible defaults. Most users accept the defaults. Power users open the disclosure.
A 4-step wizard with 4 choices at each step has 256 logical paths. The user sees only 4 at a time, so per-step cost is manageable. But cumulative decision fatigue can be high.
Mitigations:
80-20-rule — partner principle; identifies which options to surface and which to demote.recognition-over-recall — the cognitive shift that lets typeahead collapse Hick's Law for very large sets.progressive-disclosure — the structural strategy for hiding the long tail.chunking — the perceptual basis for why grouped options outperform flat ones.satisficing — users pick the first acceptable option; defaults exploit this.flexibility-usability-tradeoff (interaction) — adding options gives flexibility and costs usability; Hick's Law quantifies the cost.hicks-law-menus — applying the law to dropdowns, command palettes, navigation menus.hicks-law-defaults — using defaults as the primary Hick's Law mitigation.hicks-law-pricing — applying the law to plan/tier selection where the choice itself is the conversion event.