Clicks To Thoughts

How to Design Human–Computer Interfaces

46 modules

186 lessons

—

Part 1

Appendices

Appendix A - Diagram Templates by StepSign in
Appendix B - Mapping Concepts to Real-World Design Systems and Platform GuidanceSign in
Appendix C - Readiness Checklists for Moving from Step N to Step N+1Sign in
Appendix D - Glossary of Canonical TermsSign in

Part 2

Course Setup and the Incremental Ladder

Course Setup and the Incremental LadderSign in
Why "Clicks to Thoughts"Sign in
How to Use This CourseSign in
The Incremental Ladder (Step 0 -> Step 7)Sign in
The Course LensesSign in
Diagram Legend and Notation TypesSign in

Part 3

Interfaces as Conversations

Interfaces as ConversationsSign in
HCI as DialogueSign in
Inputs, Outputs, and Feedback LoopsSign in
System Image vs Mental ModelSign in

Part 4

Perception and Attention

Perception and AttentionSign in
Visual Perception BasicsSign in
Pre-Attentive Processing and SalienceSign in
Scanning and Reading BehaviorSign in

Part 5

Cognition, Memory, and Decision Making

Cognition, Memory, and Decision MakingSign in
Memory LimitsSign in
Cognitive Load and ChunkingSign in
Choice Overload and Decision SupportSign in

Part 6

Mental Models and Conceptual Models

Mental Models and Conceptual ModelsSign in
How Users Imagine Systems WorkSign in
Metaphors, Affordances, SignifiersSign in
Aligning Conceptual ModelsSign in

Part 7

Diagramming HCI Systems

Diagramming HCI SystemsSign in
Task and User FlowsSign in
Screen Flows and Navigation MapsSign in
Component Hierarchies and System MapsSign in

Part 8

Step 0 Perceptual Principles for UI

Step 0 Perceptual Principles for UISign in
Gestalt PrinciplesSign in
Contrast and StructureSign in
Clutter, Noise, and Over-StimulationSign in

Part 9

Step 0 Cognitive Load and Simplification

Step 0 Cognitive Load and SimplificationSign in
Intrinsic vs Extraneous LoadSign in
Progressive DisclosureSign in
Defaults, Templates, and ConstraintsSign in

Part 10

Step 0 Mapping Tasks to Interfaces

Step 0 Mapping Tasks to InterfacesSign in
Task AnalysisSign in
Recognize vs RecallSign in
Novices and ExpertsSign in

Part 11

Step 1 Direct vs Indirect Manipulation

Step 1 Direct vs Indirect ManipulationSign in
Manipulation ModelsSign in
Core Gestures in Pointer InterfacesSign in
When Direct Manipulation BackfiresSign in

Part 12

Step 1 Keyboard, Focus, and Text Interaction

Step 1 Keyboard, Focus, and Text InteractionSign in
Focus and Tab OrderSign in
Text Entry PatternsSign in
Inline Validation and FeedbackSign in

Part 13

Step 1 Touch, Pen, and Gesture

Step 1 Touch, Pen, and GestureSign in
Touch ErgonomicsSign in
Gesture VocabularySign in
Discoverability vs PowerSign in

Part 14

Step 1 Voice, Conversation, and Emerging Modalities

Step 1 Voice, Conversation, and Emerging ModalitiesSign in
Voice and Conversational InterfacesSign in
Turn-Taking and Feedback CuesSign in
Multimodal ExperiencesSign in

Part 15

Step 1 Feedback, Responsiveness, and System Status

Step 1 Feedback, Responsiveness, and System StatusSign in
Microfeedback and StateSign in
Latency and ProgressSign in
Transparency Around WorkSign in

Part 16

Hierarchy and Emphasis

Hierarchy and EmphasisSign in
Visual WeightSign in
Action PrioritySign in
Rhythm and ScannabilitySign in

Part 17

Layout Systems and Grids

Layout Systems and GridsSign in
Grids and ColumnsSign in
Responsive Layout PrinciplesSign in
Alignment and SpacingSign in

Part 18

Typography for Interfaces

Typography for InterfacesSign in
Type HierarchySign in
Readability MechanicsSign in
Typography as Structure and PersonalitySign in

Part 19

Color, Iconography, and Motion

Color, Iconography, and MotionSign in
Color RolesSign in
Icon SystemsSign in
Motion as MeaningSign in

Part 20

Visual Style and Brand

Visual Style and BrandSign in
UI as Brand ExpressionSign in
Neutral vs Opinionated Visual LanguagesSign in
Style Consistency Across ProductsSign in

Part 21

Design Tokens and Foundations

Design Tokens and FoundationsSign in
Token Foundations and Interface InvariantsSign in
Token Naming, Semantics, and ThemingSign in
Light/Dark Modes and Theme StrategiesSign in

Part 22

Components: Building Blocks of Interfaces

Components: Building Blocks of InterfacesSign in
Primitive Components and the Grammar of InteractionSign in
Complex Components and Hidden ComplexitySign in
Component States as a State MachineSign in

Part 23

Patterns: Reusable Interaction Solutions

Patterns: Reusable Interaction SolutionsSign in
Search, Filtering, and Discovery PatternsSign in
Onboarding, Settings, and Creation and Editing FlowsSign in
Matching Patterns to Mental ModelsSign in

Part 24

Design System Architecture

Design System ArchitectureSign in
Libraries and DocumentationSign in
Versioning and AdoptionSign in
The Design-Dev BridgeSign in

Part 25

Governance and Evolution of Design Systems

Governance and Evolution of Design SystemsSign in
Contribution Models and Review ProcessesSign in
Exceptions and One-OffsSign in
Measuring Design DebtSign in

Part 26

Information Architecture Fundamentals

Information Architecture FundamentalsSign in
Content Inventory and ModelingSign in
Hierarchies, Taxonomies, TaggingSign in
Task vs Content-Centric IASign in

Part 27

Navigation Structures and Wayfinding

Navigation Structures and WayfindingSign in
Global vs Local Navigation: How Scope Boundaries Prevent DisorientationSign in
Navigation Primitives: Menus, Sidebars, Tabs, Breadcrumbs, Dashboards and Their Trade-OffsSign in
Reducing "Lostness": Landmarks, Orientation Cues, and Feedback That Keep Users GroundedSign in

Part 28

Flows, Journeys, and Multi-Step Tasks

Flows, Journeys, and Multi-Step TasksSign in
Path Types: Happy Paths, Recovery Paths, and Edge Paths as a Reliability Model for JourneysSign in
Wizards vs Inline vs Multi-View Flows: Choosing the Unit of Progress and the Cost of Context SwitchingSign in
Progress and Completion: Making Long Tasks Survivable With Visibility and CheckpointsSign in

Part 29

Search and Discovery

Search and DiscoverySign in
Search as Navigation: Simple Search, Faceted Search, and Filters as Alternate IA SurfacesSign in
Suggestions and History: Autocomplete, Recents, and "Next Best" as Cognitive ScaffoldingSign in
Ranking, Feedback, and Trust: How Search Results Teach Users What the System IsSign in

Part 30

Cross-Platform IA

Cross-Platform IASign in
Adapting IA Across Devices: Web, Mobile, Desktop Constraints and What "Same Structure" Really MeansSign in
Persistent vs Transient Navigation: Balancing Always-Available Anchors With Screen Real EstateSign in
Keeping Concepts Consistent: Preserving Mental Models While Allowing Platform-Specific ExpressionSign in

Part 31

Prototyping Levels and Fidelity

Prototyping Levels and FidelitySign in
Prototype Spectrum: Sketches, Wireframes, Mid-Fi, Hi-Fi and How Fidelity Changes What You LearnSign in
When to Stay Low-Fi: Validating Structure and Flow Before Polishing VisualsSign in
Clickable vs Code Prototypes: Choosing Speed, Realism, and Measurement BoundariesSign in

Part 32

Task-Based Usability Testing

Task-Based Usability TestingSign in
Defining Tasks and Success Criteria: Turning Goals into Observable OutcomesSign in
Moderated Sessions and Think-Alouds: Eliciting Reasoning Without Steering BehaviorSign in
Behavior vs Opinion: Interpreting What Users Do Versus What They Say They WantSign in

Part 33

Measuring Usability and UX

Measuring Usability and UXSign in
Quantitative Measures: Time-on-Task, Success Rates, Error Rates, and What They Do Not CaptureSign in
Qualitative Insight: Satisfaction Surveys, Interviews, and the Interpretation Risks of Subjective DataSign in
Benchmarking Across Versions: Making Iteration Measurable and Comparable Over TimeSign in

Part 34

Iteration Loops and Design Debt

Iteration Loops and Design DebtSign in
Iteration Cadence: Small Improvements Versus Big Redesigns and the Risk Profile of EachSign in
UX Debt and Paydown: Identifying Compounding Costs in Inconsistent PatternsSign in
Communicating Trade-Offs: Aligning Stakeholders on Constraints, Priorities, and Acceptable FrictionSign in

Part 35

Collaboration Across Roles

Collaboration Across RolesSign in
Cross-Functional Interfaces: How Designers, Engineers, PMs, and Researchers Coordinate Without AmbiguitySign in
Reviews, Crits, Pairing: Feedback Rituals That Improve Quality Rather Than Enforce TasteSign in
Decision Records and Design History: Preserving Rationale So the System Remains Coherent Over TimeSign in

Part 36

Accessibility Foundations

Accessibility FoundationsSign in
Barrier Types: Perceptual, Motor, and Cognitive Barriers, and Why Accessibility Is a Usability MultiplierSign in
Semantic Structure: Headings, Landmarks, Roles, and Why Meaning Must Exist Beyond VisualsSign in
Alternative Inputs: Keyboard, Screen Readers, and Assistive Technologies as Core Interaction PathsSign in

Part 37

Inclusive Design Principles

Inclusive Design PrinciplesSign in
Designing for Variation - Abilities, Devices, and Contexts as the Default AssumptionSign in
Language, Tone, and Culture - How Words and Metaphors Include or ExcludeSign in
Avoiding Assumptions - Designing for the Edges Without Penalizing the CenterSign in

Part 38

Patterns for Accessible Components

Patterns for Accessible ComponentsSign in
Accessible Forms and Error Messaging - Preventing Failure and Enabling RecoverySign in
Dialogs, Navigation, Tables - Focus Management, Structure, and Predictable InteractionSign in
Contrast and Non-Color Indicators - Ensuring Meaning Survives Modality ConstraintsSign in

Part 39

Dark Patterns and Design Ethics

Dark Patterns and Design EthicsSign in
Manipulative vs Empowering Design - Defining User Agency as the Ethical BoundarySign in
Consent, Privacy, Visibility - Making Data Use Legible and ControllableSign in
Trust Over Engagement Hacks - Aligning Incentives with Durable RelationshipsSign in

Part 40

Accessibility as a System Property

Accessibility as a System PropertySign in
Accessibility in Design Systems - Baking Semantics and Constraints into Components and TokensSign in
Automated and Manual Audits - Linters, Checks, and Human Review as Complementary GuaranteesSign in
Training and Accountability - Making Accessibility Durable Through Practice, Not HeroicsSign in

Part 41

Multi-Platform Design Language

Multi-Platform Design LanguageSign in
Cross-Platform Language - Defining Shared Identity Across Surfaces Without Forcing Identical UISign in
Platform-Native vs Cross-Platform UX - When to Conform and When to StandardizeSign in
Tailoring Interactions While Preserving Identity - Keeping Behaviors Coherent Across Device ConstraintsSign in

Part 42

Interface Systems as Products

Interface Systems as ProductsSign in
The UI Layer as a Product - Treating the Design System and Interface Layer as a Maintained AssetSign in
Roadmaps and Backlogs - Prioritizing Foundation Work Alongside Feature RequestsSign in
Reuse Across Teams - Scaling Adoption Through Incentives, Documentation, and SupportSign in

Part 43

Design Ops and Tooling

Design Ops and ToolingSign in
Tools, Libraries, Shared Assets - Enabling Consistency Through Shared PrimitivesSign in
Handoff Workflows - Specs, Tokens, and Code as a Boundary Between Design Intent and ImplementationSign in
Version Control and Collaboration at Scale - Managing Changes Without Fragmenting the SystemSign in

Part 44

Monitoring, Feedback, and Continuous UX Improvement

Monitoring, Feedback, and Continuous UX ImprovementSign in
Analytics for Interfaces: Funnels, Drop-Offs, Engagement, and What Numbers MissSign in
In-Product Feedback: Surveys, Reports, and Qualitative Signals in ProductionSign in
Closing the Loop: Turning Live Data into Design Decisions Without Chasing NoiseSign in

Part 45

Interface Systems in a Larger Ecosystem

Interface Systems in a Larger EcosystemSign in
Brand, Marketing, Docs, Support: Interfaces as One Surface of a Broader Experience SystemSign in
Partners and Extensions: Third-Party Integrations as New UI Boundaries and Failure ModesSign in
Evolving Expectations: Maintaining Coherence as Technology and User Norms ChangeSign in

Part 46

Reference Interface Architectures

Reference Interface ArchitecturesSign in
Interface Archetypes: Dashboard-Heavy SaaS, Consumer Apps, Admin Tools, Design Tools, and the Constraints They ShareSign in
Mapping Steps to Project Phases: How the Ladder Becomes a Delivery Plan for Real TeamsSign in
Pitfalls and Escape Hatches: Common Failure Modes and How to Recover Without Redesigning EverythingSign in

Course overview