Cognitive Psychology & Design

Why Cognitive Psychology in a Component Library?

Most design systems stop at visual consistency — colors, spacing, typography. But the highest-performing interfaces understand how people think, not just what they see.

Users don't make rational decisions. They rely on mental shortcuts (heuristics), fall prey to systematic errors (biases), and process information through predictable cognitive patterns. Cognivo makes these patterns programmable.

The 7 Bias Categories

184 biases organized into 7 categories that map to different stages of the user journey:

How It Works in Practice

The design advisor isn't a separate tool — it's woven into how you build interfaces.

1. Query biases for your context

Building a pricing page? Ask the advisor which cognitive biases are relevant:

import { queryBiases, recommendBiases } from '@cognivo/design-advisor';

// What biases matter for pricing pages?
const biases = queryBiases({
  tags: ['pricing', 'conversion', 'ecommerce'],
});
// → Anchoring Bias, Decoy Effect, Loss Aversion, Price-Quality Inference...

// Get actionable recommendations
const recs = recommendBiases({
  page: 'pricing',
  goals: ['increase conversion', 'reduce abandonment'],
});
// → Returns ranked biases with specific implementation steps

2. Map biases to components

Each bias connects to specific Cognivo components that implement it:

// Anchoring Bias → Show the highest price first
// Component: <ai-ab-test> for testing price anchors
// Component: <cg-metric-card> for displaying reference numbers

// Loss Aversion → Frame outcomes as losses, not gains
// Component: <ai-alert-card urgency="urgent"> for scarcity
// Component: <ai-countdown> for time-limited offers

// Social Proof → Show what others are doing
// Component: <ai-presence> for live user count
// Component: <cg-badge> for "Popular" / "Most chosen" labels

3. Audit your designs

Review any interface through a cognitive lens:

import { auditDesign } from '@cognivo/design-advisor';

const audit = auditDesign({
  components: ['ai-chat', 'cg-button', 'ai-confidence-slider'],
  context: 'AI assistant for financial advice',
});

// Returns:
// - Active biases (what's being triggered)
// - Missing opportunities (biases you could leverage)
// - Risk assessment (biases that might harm trust)
// - Ethical considerations per bias

Bias Card Structure

Each of the 184 biases is a richly structured object — not just a definition, but a complete design toolkit:

interface BiasCard {
  id: string;                          // 'anchoring-bias'
  name: string;                        // 'Anchoring Bias'
  category: BiasCategory;              // 'decision'
  description: string;                 // Full psychological description
  designImplications: string[];        // How it affects UI design
  useCases: UseCase[];                 // When to leverage it
  avoidCases: AvoidCase[];             // When NOT to use it
  realWorldExamples: RealWorldExample[];  // Apple, Amazon, Stripe examples
  implementationSteps: ImplementationStep[]; // Step-by-step guide
  accessibilityGuidelines: AccessibilityGuideline[];
  ethicalConsiderations: EthicalConsideration[];
  relatedBiases: string[];             // Connected biases
  tags: string[];                      // Searchable tags
  strength: 'strong' | 'moderate' | 'subtle';
  reversibility: 'reversible' | 'sticky' | 'permanent';
}

Real-World Examples

Every bias includes documented real-world examples from companies that use them effectively:

Installation & API

pnpm add @cognivo/design-advisor

import {
  // Direct bias access
  anchoringBias, lossAversion, socialProof,
  allBiases, getBiasById,

  // Search & query
  searchBiases, queryBiases, getBiasesByTag, getBiasesByCategory,

  // Recommendations
  recommendBiases,

  // Registry
  BiasRegistry, LazyBiasRegistry,

  // Audit
  auditDesign, getStatistics,
} from '@cognivo/design-advisor';

Web Components

Embed the bias library directly in your app with two components:

// Single bias card with full details
<bias-card bias-id="anchoring-bias"></bias-card>

// Full browsable library with search, filter, category navigation
<bias-library></bias-library>

The design-advisor data (184 bias cards) powers the composable wrappers under /biases.

Ethical Framework

Every bias in the library includes ethical considerations. Cognivo distinguishes between:

The design advisor flags when a bias application crosses from persuasive to manipulative, helping teams stay ethical while still building high-converting interfaces.