Back to list
matthewharwood

ux-design-principles

by matthewharwood

A fantasy-themed phonics game where kids turn spelling words into creatures, places, and spells through imagination, drawing, and storytelling.

0🍴 0📅 Dec 9, 2025

SKILL.md


name: ux-design-principles description: Cognitive psychology principles for UX design decisions. Use when planning features, structuring interfaces, reducing complexity, or optimizing user journeys. Covers choice architecture, cognitive load, attention, and experience design. (project) allowed-tools:

  • Read
  • Write
  • Edit
  • Glob
  • Grep

UX Design Principles Skill

Psychological principles that guide design DECISIONS. For implementation patterns (colors, spacing, animations), see the corresponding ux-* skills.

Choice Architecture

Hick's Law: Decision Time

Decision time increases with the number and complexity of choices.

Do:

  • Reduce options when quick decisions matter
  • Break complex tasks into smaller steps
  • Highlight recommended or default options
  • Use progressive disclosure for advanced features

Don't:

  • Present all options at once without guidance
  • Oversimplify until purpose becomes unclear

Choice Overload

Too many choices overwhelm and paralyze.

Do:

  • Limit options when quick decisions are important
  • Provide comparison tools (e.g., side-by-side pricing)
  • Prioritize content and offer filters to narrow choices

Don't:

  • Present all possible options at once
  • Force users through large unfiltered selection lists

Serial Position Effect

Items at the beginning and end of lists are remembered best.

Do:

  • Place critical actions at the start or end of navigation
  • Put key information first and last in lists

Don't:

  • Bury important actions in the middle of menus
  • Give equal prominence to all items

Cognitive Load

Cognitive Load Principle

Reduce information users must hold in working memory.

Do:

  • Remove distracting elements that don't help task completion
  • Distinguish essential information from nice-to-have
  • Break complex information into digestible chunks

Don't:

  • Present excessive details or decorative clutter
  • Mix intrinsic complexity with unnecessary extraneous load

Implementation: See ux-spacing-layout for visual chunking patterns.

Law of Pragnanz (Simplicity)

People interpret complex images in the simplest form possible.

Do:

  • Present information in simple, ordered forms
  • Reduce visual complexity to aid comprehension

Don't:

  • Overwhelm users with ambiguous or complex graphics
  • Create layouts that require mental effort to parse

Tesler's Law (Conservation of Complexity)

Every process has irreducible complexity that must be handled somewhere.

Do:

  • Handle inherent complexity in design/development, not on users
  • Provide context-aware guidance within the interface
  • Accept that users are not always rational

Don't:

  • Push system complexity onto users
  • Build only for idealized, rational behavior

Occam's Razor

Simplest solution is usually best.

Do:

  • Eliminate unnecessary elements while maintaining function
  • Continually refine until nothing can be removed without harm

Don't:

  • Add features that complicate without clear user benefit
  • Solve simple problems with elaborate solutions

Attention & Perception

Selective Attention

Users naturally filter out irrelevant content.

Do:

  • Guide attention to relevant information
  • Minimize distractions
  • Ensure only one significant change occurs at a time

Don't:

  • Style important content like advertisements (banner blindness)
  • Introduce multiple simultaneous changes without cues
  • Place essential info in areas typically ignored (ad zones)

Von Restorff Effect (Isolation)

Distinctive items are remembered better.

Do:

  • Make important actions visually stand out
  • Use emphasis sparingly so items don't compete
  • Provide multiple contrast cues (shape, pattern, not just color)

Don't:

  • Rely exclusively on color to convey importance
  • Overuse emphasis (dilutes impact)
  • Use motion effects that trigger discomfort

Implementation: See ux-color-system for emphasis patterns.

User Expectations

Jakob's Law

Users transfer expectations from familiar products.

Do:

  • Design consistent with patterns users already know
  • Leverage existing mental models
  • When making major changes, offer temporary familiar alternatives

Don't:

  • Radically alter established interactions without guidance
  • Force users to relearn common patterns

Paradox of the Active User

Users jump into products without reading instructions.

Do:

  • Expect users to start using immediately
  • Provide contextual help, tooltips, and guidance in-place

Don't:

  • Force users to read manuals before using
  • Hide help or make it difficult to find

Aesthetic-Usability Effect

Beautiful design is perceived as more usable.

Do:

  • Design interfaces that look appealing and polished
  • Use aesthetics to create positive first impressions

Don't:

  • Rely on visual polish to hide fundamental usability problems
  • Assume beauty compensates for broken functionality

Progress & Motivation

Goal-Gradient Effect

People work faster as they sense completion is near.

Do:

  • Display progress toward goals
  • Provide "artificial progress" (e.g., start at 10% complete)

Don't:

  • Leave users unsure how far they've progressed
  • Hide progress information

Implementation: See ux-feedback-patterns for progress indicator patterns.

Zeigarnik Effect

Incomplete tasks stay in memory and motivate continuation.

Do:

  • Clearly signify that more content/steps are available
  • Provide artificial progress toward goals
  • Show progress indicators

Don't:

  • Leave tasks without visible progress indicators
  • Hide future steps or content

Implementation: See ux-feedback-patterns for progress patterns.

Parkinson's Law

Tasks expand to fill available time.

Do:

  • Set clear, reasonable time expectations
  • Reduce task duration below what users expect
  • Use time-saving features (autofill, shortcuts)

Don't:

  • Allow simple processes to take longer than necessary
  • Present long forms without automation

Implementation: See ux-form-design for autofill patterns.

Experience Design

Peak-End Rule

Experiences are judged by peak moments and endings.

Do:

  • Design memorable peaks and strong endings
  • Identify when your product is most helpful and add delight
  • Minimize negative peaks (bad moments are remembered vividly)

Don't:

  • Neglect the conclusion of user journeys
  • Leave negative events unaddressed

Pareto Principle (80/20)

A small number of causes produce majority of outcomes.

Do:

  • Identify and focus on high-impact areas
  • Allocate resources where they benefit most users

Don't:

  • Distribute efforts evenly across all tasks
  • Over-invest in low-impact areas

Input & Error Handling

Postel's Law (Robustness)

Be tolerant of input, strict in output.

Do:

  • Anticipate various user inputs and behaviors
  • Translate diverse input to meet system requirements
  • Provide clear feedback for edge cases

Don't:

  • Rigidly enforce narrow input formats
  • Send malformed or ambiguous output

Implementation: See ux-form-design for validation patterns.

Cognitive Bias Awareness

Cognitive Bias Principle

Mental shortcuts influence decision making.

Do:

  • Recognize that heuristics save mental effort but can skew judgment
  • Raise awareness of your own biases during design
  • Challenge assumptions with your team

Don't:

  • Ignore biases like confirmation bias
  • Seek only information supporting preconceived beliefs

Quick Reference Matrix

SituationApply
Too many optionsHick's Law, Choice Overload
Complex taskTesler's Law, Cognitive Load
Users skip instructionsParadox of Active User
Low completion ratesGoal-Gradient, Zeigarnik
Poor first impressionsAesthetic-Usability
Users confused by changesJakob's Law
Important items ignoredSerial Position, Selective Attention
Long task timesParkinson's Law
Poor memories of experiencePeak-End Rule
Resource allocationPareto Principle
Input validation issuesPostel's Law
Overly complex designOccam's Razor, Pragnanz
  • ux-spacing-layout: Visual chunking, grouping (Law of Proximity/Common Region)
  • ux-color-system: Emphasis, similarity (Von Restorff, Law of Similarity)
  • ux-animation-motion: Response timing (Doherty Threshold)
  • ux-accessibility: Touch targets, focus (Fitts's Law)
  • ux-feedback-patterns: Progress, loading states (Working Memory)
  • ux-user-flow: Navigation, mental models (Flow)
  • ux-form-design: Input tolerance, validation (Postel's Law)

Score

Total Score

75/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

+10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新

+5
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon