7.6 KiB
7.6 KiB
Interaction Psychology (HCI Laws, Cognitive Biases, Flow)
Compact reference for review and design guidance.
Complements design-psych.md (Norman's conceptual model) with empirically-grounded laws and biases that directly inform design decisions.
A) Classic HCI Laws
Fitts's Law (费茨定律)
- Core idea: the time to reach a target is a function of target size and distance.
- Larger and closer targets are faster and easier to hit.
Practical rules:
- Primary CTA: make it the largest interactive element in its section and place it near the user's visual focus.
- Destructive actions: keep them small and spatially separated from the primary CTA to prevent slips.
- Touch targets: minimum 44×44 CSS px (web) / 48×48 dp (mobile); don't shrink hit area to the glyph.
- Edges and corners of the viewport are effectively infinite-size targets (screen edge stops the cursor) — use them for key navigation (e.g., fixed top nav, bottom tab bar).
Review question: Is the primary action button large enough and close to the user's focus? Are destructive actions physically separated from routine actions?
Hick's Law (希克定律)
- Core idea: decision time increases logarithmically with the number of choices.
- More options → slower decisions → higher abandonment.
Practical rules:
- Limit visible choices: if a list/menu exceeds ~7 items, add grouping, search, or filtering.
- Use smart defaults to eliminate decisions entirely (the best choice is no choice).
- Progressive disclosure: show basic options first, reveal advanced options on demand.
- Avoid "paradox of choice" in onboarding: guide users through a recommended path instead of presenting all features at once.
Review question: Is the user facing too many options at once? Can grouping, search, or defaults reduce the decision burden?
Miller's Law (米勒定律)
- Core idea: working memory holds roughly 7 ± 2 items.
- Exceeding this limit causes cognitive overload and errors.
Practical rules:
- Navigation / tab bars: keep to ≤ 7 top-level items; use grouping or "more" for the rest.
- Long forms: chunk fields into labeled groups (≤ 5–7 fields per group).
- Information display: break long lists into scannable sections with headings.
- Don't force users to remember information across screens — carry context forward.
Review question: Does a single screen require the user to hold more than 7 independent pieces of information in mind?
B) Cognitive Biases in UI Design
Anchoring Effect (锚定效应)
- Users are influenced by the first piece of information they see.
- The first number, option, or example sets a reference point for all subsequent judgments.
Practical rules:
- Pricing pages: show the recommended plan first (or in the center); it becomes the anchor.
- Form defaults: the pre-filled value becomes the user's baseline — choose it carefully.
- Progress indicators: showing "step 2 of 3" anchors the user's effort expectation.
Default Effect (默认效应)
- Users disproportionately stick with the default option.
- Defaults are the most powerful design decision you can make.
Practical rules:
- Set defaults to the safest and most common choice.
- Never use defaults to trick users into unfavorable choices (dark pattern).
- When there is no safe default, force an explicit choice instead of pre-selecting.
Peak-End Rule (峰终定律)
- Users judge an experience primarily by its most intense moment and its ending.
- A painful middle is forgiven if the peak and end are positive.
Practical rules:
- Invest in the completion/success screen — it's the last impression.
- Error recovery experience matters more than error prevention messaging for overall satisfaction.
- Celebrate meaningful milestones (first project created, first successful deploy).
Loss Aversion (损失厌恶)
- The pain of losing something is ~2× stronger than the pleasure of gaining the same thing.
- Users are more motivated to avoid loss than to achieve gain.
Practical rules:
- Destructive actions: frame confirmation around what will be lost ("You will lose 12 files"), not just the action ("Confirm delete").
- Trial expiration: "Your data will be deleted in 3 days" is more motivating than "Upgrade to keep your data."
- Unsaved changes: warn clearly before navigation away; show exactly what will be lost.
Inattentional Blindness (注意力盲区)
- When focused on a task, users fail to notice information outside their attention focus.
- Important alerts placed far from the user's current focus are effectively invisible.
Practical rules:
- Place critical feedback near the user's point of action (inline validation, not page-top banners).
- Don't rely on peripheral notifications for urgent information during focused tasks.
- If you must interrupt, use the user's current focus area (inline message or modal), not a distant toast.
C) Interaction Flow & Rhythm
Interruption Cost (中断成本)
- Every interruption (modal, page redirect, loading spinner) has a cognitive recovery cost.
- Users need time to re-orient after each interruption, and some never return.
Practical rules:
- Prefer inline interactions over modals; prefer modals over page redirects.
- If a sub-task can be completed in the current context, don't navigate away.
- Batch confirmations: one confirmation for a batch operation, not one per item.
Review question: How many page jumps or modal interruptions does it take to complete the primary task?
Action Momentum (操作动量)
- Users build rhythm during sequential operations; design should sustain, not break, this rhythm.
- Unexpected pauses or confirmations in the middle of a flow feel jarring.
Practical rules:
- In batch/sequential workflows, don't require confirmation at every step.
- Tab order between form fields should follow the natural reading/input sequence.
- Auto-advance where appropriate (e.g., after selecting from a dropdown, focus moves to the next field).
Reversibility Principle (可逆性原则)
- Users explore more confidently when they know actions can be undone.
- Irreversibility creates hesitation and anxiety.
Practical rules:
- Provide undo for common actions (delete, move, edit).
- Non-destructive actions should not require confirmation dialogs — let users act and undo.
- For truly irreversible actions, make the consequences explicit and require deliberate confirmation (e.g., type the name to confirm).
D) Attention Economy
Visual Weight Budget (视觉权重预算)
- A page has a finite attention budget. Emphasizing too many things = emphasizing nothing.
- Every bold element, bright color, or large size competes for the same limited attention.
Practical rules:
- One visual focal point per screen section (the primary CTA or key metric).
- Secondary information: reduce contrast, size, or weight to create clear hierarchy.
- If everything looks important, re-evaluate: what is the ONE thing the user should do or notice here?
Review question: Close your eyes, then open them — is the first thing you see the most important thing on the page?
Scanning Patterns (扫描模式)
- Users don't read; they scan. Common patterns: F-shape (content pages) and Z-shape (landing pages).
- Key information must be on the scanning path or it will be missed.
Practical rules:
- Place critical information at the top-left and in headings (F-pattern entry points).
- In data tables, put the most important column on the far left.
- Use visual anchors (bold text, icons, color) to create "scan stops" at key information.
- Front-load sentences and labels: put the differentiating word first ("Save draft" vs "Draft — save").
Review question: If the user spends only 3 seconds scanning, can they extract the most critical information?