DEV Community

張旭豐
張旭豐

Posted on

設計心理學：四大認知法則深度研究

Design Psychology Cognitive Laws - Concise Report

Date: 2026-06-24
Scope: Hick's Law, Fitts's Law, Miller's Law, Gestalt Principles

================================================================================

1. HICK'S LAW (希克定律)

CORE DEFINITION:
The time it takes to make a decision increases logarithmically with the number
of choices available.

FORMULA:
RT = a + b * log2(n + 1)
RT = Reaction Time; n = Number of options; a, b = Empirical constants

KEY INSIGHTS:

  • Decision time grows logarithmically, NOT linearly, with option count
  • Each doubling of options adds a fixed amount of time (~0.15-0.25 seconds)
  • Cognitive load spikes significantly when options exceed 7

DESIGN APPLICATIONS:

  1. Menu Grouping: Categorize large option sets to reduce single-level choices
  2. Progressive Disclosure: Show core options first; expand advanced options on demand
  3. Smart Defaults: Pre-select common choices to reduce decision burden
  4. Search Over Browse: When options are numerous, search beats navigation

EXAMPLES:

  • Amazon places search bar above category navigation
  • Google's homepage: one input field, two buttons

================================================================================

2. FITTS'S LAW (費茨定律)

CORE DEFINITION:
Time to reach a target depends on the distance to the target and its size.

FORMULA:
MT = a + b * log2(1 + D/W)
MT = Movement Time; D = Distance; W = Target Width; a, b = Empirical constants

KEY INSIGHTS:

  • Closer + larger = faster and more accurate interaction
  • Screen edges/corners act as "infinite targets" (cursor stops at boundary)
  • Clickable area size directly impacts hit rate and speed

DESIGN APPLICATIONS:

  1. Enlarge Important Buttons: CTA buttons should be big and prominent
  2. Leverage Screen Edges: Place primary menus at screen top/bottom edges
  3. Shorten Operation Paths: Put frequently used features near cursor/finger
  4. Avoid Tiny Touch Targets: Minimum recommended size >= 44x44 pt (Apple HIG)

EXAMPLES:

  • Windows Start button: bottom-left corner, large, fixed position
  • iOS Tab Bar: puts key navigation within thumb reach
  • YouTube Play/Pause: centered, oversized overlay button

================================================================================

3. MILLER'S LAW (米勒定律)

CORE DEFINITION:
The average person can hold approximately 7 +/- 2 items in short-term memory.

ORIGINAL PAPER:
George A. Miller (1956) "The Magical Number Seven, Plus or Minus Two"

KEY INSIGHTS:

  • Classic claim: 7 +/- 2 (5-9 items)
  • Modern research suggests: closer to 4 +/- 1 chunks
  • "Chunking" allows bypassing limits by grouping small items into meaningful units

DESIGN APPLICATIONS:

  1. Password Display: Group digits (1234-5678-9012) for easier memorization
  2. Phone Number Formatting: (886) 912-345-678 beats raw digit strings
  3. Menu Item Limit: Keep single-level menus to 7 items or fewer
  4. Dashboard Hierarchy: Show key metrics first; secondary info expandable
  5. Paginated Lists: Split content exceeding 7 items across pages/groups

EXAMPLES:

  • Credit card input auto-spaces every 4 digits
  • Phone dialer displays formatted number
  • Browser bookmarks: recommend <= 7-9 frequently used sites

================================================================================

4. GESTALT PRINCIPLES (格式塔原則)

CORE DEFINITION:
The human visual system tends to organize scattered elements into meaningful
whole patterns. Originated by German psychologists Max Wertheimer, Kurt Koffka,
and Wolfgang Kohler (1920s).

SIX CORE PRINCIPLES:

  1. PROXIMITY (相近性)

    • Items close together are perceived as a group
    • Application: Related form fields tightly spaced; sections separated by whitespace
    • Example: Sub-menu items clustered together, distanced from main menu

  2. SIMILARITY (相似性)

    • Visually similar items are grouped as belonging to the same category
    • Application: Same-styled buttons = same function; links use consistent blue underline
    • Example: E-commerce site uses identical font/color for all "price" text

  3. CONTINUITY (連續性)

    • Eyes naturally follow smooth, continuous paths
    • Application: Guide reading along Z-pattern or F-pattern layouts
    • Example: Table row lines guide horizontal scanning

  4. CLOSURE (封閉性)

    • Brain fills gaps in incomplete shapes to perceive wholeness
    • Application: Brand logos often use partial outlines (IBM stripes, WWF panda)
    • Example: Rounded cards with shadows perceived as complete even with breaks

  5. COMMON REGION (共同區域)

    • Items within the same boundary are grouped together
    • Application: Card UI design groups related content with borders/shadows
    • Example: Social media posts each have independent card containers

  6. FIGURE-GROUND (圖底關係)

    • Visual system distinguishes foreground (figure) from background (ground)
    • Application: Modal dialogs darken background to highlight foreground content
    • Example: Dropdown menus cause background to blur or become semi-transparent

DESIGN TAKEAWAYS:

  • Use negative space to organize content rather than relying on lines/borders
  • Maintain visual consistency: same function = same visual language
  • Establish visual hierarchy through size, color, and position
  • Reduce cognitive load by letting interface structure match mental models

================================================================================

5. COMPARATIVE SUMMARY & PRACTICAL GUIDELINES

LAWS AT A GLANCE:
+-------------+------------------+--------------------+------------------+
| Law | Core Question | Key Parameter | Design Mantra |
+-------------+------------------+--------------------+------------------+
| Hick's | How long to | Number of options | Less is more |
| | decide? | | |
+-------------+------------------+--------------------+------------------+
| Fitts's | How fast to | Distance, size | Big & close |
| | interact? | | is easy |
+-------------+------------------+--------------------+------------------+
| Miller's | How much to | Memory chunks | Group for recall |
| | remember? | | |
+-------------+------------------+--------------------+------------------+
| Gestalt | How to | Visual organization| Natural grouping |
| | understand layout? | reduces load |
+-------------+------------------+--------------------+------------------+

COMPREHENSIVE DESIGN PRINCIPLES:

  1. Reduce Choices: Apply Hick's Law - keep navigation and forms minimal
  2. Optimize Interaction: Apply Fitts's Law - big, close targets for frequent actions
  3. Manage Information Load: Apply Miller's Law - chunk and paginate content
  4. Leverage Visual Organization: Apply Gestalt - let structure be self-evident
  5. Prioritize Consistency: All laws share the foundation of predictable interaction patterns
  6. Test & Validate: Usability testing is the only way to confirm law application works

================================================================================

6. REFERENCES

  1. Hick, T.E. (1952). On the Rate of Gain of Information. QJEPP.
  2. Fitts, P.M. (1954). The Information Capacity of the Human Motor System. JEP.
  3. Miller, G.A. (1956). The Magical Number Seven, Plus or Minus Two. Psych Review.
  4. Wertheimer, M. (1923). Untersuchungen zur Lehre von der Gestalt. Psych Forsch.
  5. Norman, D.A. (2013). The Design of Everyday Things (Revised). Basic Books.
  6. Apple Inc. Human Interface Guidelines.
  7. Google Material Design Guidelines.

================================================================================

END OF REPORT

Top comments (0)