cognitive-science

name	Cognitive Science
description	Understanding human mental processes including perception, memory, reasoning, and decision-making to design better experiences
license	MIT
compatibility	universal
audience	designers, developers, product managers, researchers
category	interdisciplinary

Cognitive Science

What I Do

I apply scientific understanding of human cognition to design experiences that work with natural human psychology. I help create interfaces, products, and systems that align with how people actually perceive, remember, think, and decide.

When to Use Me

• Designing user interfaces and interactions
• Optimizing information architecture and navigation
• Creating effective learning experiences
• Understanding decision-making biases
• Reducing cognitive load in complex systems
• Improving memory and recall in applications

Core Concepts

1. Working Memory Limits: The 7±2 items constraint
2. Attention and Focus: Bottom-up vs top-down processing
3. Pattern Recognition: How we identify familiar stimuli
4. Mental Models: Internal representations of systems
5. Decision-Making Biases: Heuristics and systematic errors
6. Memory Encoding: How information enters long-term memory
7. Dual-Process Theory: System 1 (fast) vs System 2 (slow)
8. Perceptual Organization: Gestalt principles in UI
9. Cognitive Load Theory: Intrinsic, extraneous, germane load
10. Flow State: Optimal engagement conditions

Code Examples

Cognitive Load Calculator

class CognitiveLoadCalculator {
  constructor() {
    this.limits = {
      workingMemoryItems: 7,
      chunkSize: 4,
      attentionSwitches: 4
    };
  }
  
  calculateTaskLoad(task) {
    const elements = this.countInformationElements(task);
    const interactions = this.countRequiredInteractions(task);
    const decisions = this.countDecisions(task);
    
    const baseLoad = elements;
    const interactionLoad = interactions * 2;
    const decisionLoad = decisions * 3;
    
    return {
      totalLoad: baseLoad + interactionLoad + decisionLoad,
      breakdown: {
        elements,
        interactions,
        decisions
      },
      recommendations: this.generateRecommendations({
        elements, interactions, decisions
      })
    };
  }
  
  countInformationElements(task) {
    const visibleElements = task.screenElements?.length || 0;
    const requiredFields = task.formFields?.length || 0;
    const navigationSteps = task.?. || ;
    
     visibleElements + requiredFields + navigationSteps;
  }
  
  () {
     (task. || ) + 
           (task. || ) + 
           (task. || ) +
           (task. || );
  }
  
  () {
     task.?. || ;
  }
  
  () {
     maxChunkSize = options. || ..;
     chunkingStrategy = options. || ;
    
     (chunkingStrategy === ) {
       .(data, maxChunkSize);
    }
    
     (chunkingStrategy === ) {
       .(data, maxChunkSize);
    }
    
     .(data, maxChunkSize);
  }
  
  () {
     groups = {};
    
    data.( {
       category = item. || ;
       (!groups[category]) groups[category] = [];
      groups[category].(item);
    });
    
     .(groups).( ({
      name,
      items,
      : 
    }));
  }
  
  () {
     recommendations = [];
    
     (analysis. > ..) {
      recommendations.({
        : ,
        : ,
        : ,
        : 
      });
    }
    
     (analysis. > ) {
      recommendations.({
        : ,
        : ,
        : ,
        : 
      });
    }
    
     (analysis. > ) {
      recommendations.({
        : ,
        : ,
        : ,
        : 
      });
    }
    
     recommendations;
  }
}

Attention Manager

class AttentionManager {
  constructor() {
    this.attentionBudget = 100;
    this.currentLoad = 0;
    this.focusAreas = [];
  }
  
  planVisualHierarchy(content) {
    const elements = this.categorizeByImportance(content);
    
    const hierarchy = {
      primary: elements.filter(e => e.importance >= 0.8),
      secondary: elements.filter(e => e.importance >= 0.5 && e.importance < 0.8),
      tertiary: elements.filter(e => e.importance < 0.5)
    };
    
    return {
      ...hierarchy,
      visualMapping: this.mapToVisualWeight(hierarchy),
      warnings: this.checkAttentionBudget(hierarchy)
    };
  }
  
  categorizeByImportance(content) {
    return content.map( {
       baseImportance = ;
      
       modifiers = {
        : ,
        : ,
        : ,
        : 
      };
      
       importance = baseImportance;
      
      .(modifiers).( {
         (item[key]) importance += value;
      });
      
       {
        ...item,
        : .(, importance)
      };
    });
  }
  
  () {
     {
      : hierarchy..( ({
        ...item,
        : ,
        : ,
        : ,
        : 
      })),
      : hierarchy..( ({
        ...item,
        : ,
        : ,
        : ,
        : 
      })),
      : hierarchy..( ({
        ...item,
        : ,
        : ,
        : ,
        : 
      }))
    };
  }
  
  () {
     warnings = [];
    
     primaryCount = hierarchy..;
     secondaryCount = hierarchy..;
    
     (primaryCount > ) {
      warnings.({
        : ,
        : 
      });
    }
    
     (secondaryCount > ) {
      warnings.({
        : ,
        : 
      });
    }
    
     warnings;
  }
  
  () {
     gazeData = sessionData. || [];
     interactionData = sessionData. || [];
    
     fixationPoints = .(gazeData);
     scanPath = .(gazeData);
    
     {
      : .(fixationPoints),
      : fixationPoints.,
      : scanPath.,
      : .(fixationPoints),
      : .(scanPath, interactionData)
    };
  }
  
  () {
     gazeData.( g. === );
  }
  
  () {
     gazeData
      .( g. === )
      .( ({
        : g.,
        : g.,
        : g.
      }));
  }
  
  () {
     grid =  (, );
    
    fixations.( {
      grid.(f., f., f.);
    });
    
     grid.();
  }
}

Decision Architecture System

class DecisionArchitect {
  constructor() {
    this.biasPatterns = [];
    this.framingStrategies = [];
  }
  
  analyzeDecisionPoint(decision) {
    const context = {
      options: decision.options,
      timePressure: decision.timeConstraint,
      expertise: decision.userExpertise,
      emotionalState: decision.emotionalContext
    };
    
    const biases = this.identifyBiasRisks(context);
    const recommendations = this.recommendFraming(context);
    
    return {
      decision,
      biasRisks: biases,
      framing: recommendations,
      optimalStructure: this.suggestOptimalStructure(decision)
    };
  }
  
  identifyBiasRisks(context) {
    const risks = [];
    
    if (context.options.length > 4) {
      risks.push({
        bias: 'Choice Overload',
        description: 'Too many options can lead to decision paralysis',
        mitigation: 'Reduce to 3-4 options or add sorting/filtering'
      });
    }
    
     (context. && context. < ) {
      risks.({
        : ,
        : ,
        : 
      });
    }
    
     (context..( o.)) {
      risks.({
        : ,
        : ,
        : 
      });
    }
    
     (context..( o.)) {
      risks.({
        : ,
        : ,
        : 
      });
    }
    
     risks;
  }
  
  () {
     {
      : context. ===  ?  : ,
      : context.. <=  ?  : ,
      : context. ?  : ,
      : context. ===  ?  : 
    };
  }
  
  () {
     {
      : decision..( ({
        : o,
        : i <  ?  : 
      })),
      : decision.. >  ?  : ,
      : {
        : decision.. > ,
        : decision. ===  ?  : 
      },
      : .(decision)
    };
  }
  
  () {
     scored = decision..( ({
      option,
      : .(option, decision),
      : .(option, decision)
    }));
    
     scored.( b. - a.);
  }
  
  () {
     score = ;
    
     (option.) score += ;
     (option.) score += ;
     (option. > ) score += ;
     (option.) score += ;
    
     .(, score);
  }
}

Best Practices

1. Respect working memory limits (chunk information)
2. Design for recognition over recall
3. Use consistent patterns to build familiarity
4. Reduce extraneous cognitive load
5. Align with existing mental models
6. Provide clear feedback and confirmation
7. Design for error prevention and recovery
8. Support both expert and novice users
9. Consider emotional context in design
10. Test with real users to validate assumptions