Cognitive Load Scoring Model

Rafters assigns every UI component a cognitive load score from 0 to 10. This document explains the theory behind the scores, the five dimensions that produce them, and how screen-level budgets work when components compose together.

No existing design system or academic framework provides a quantitative per-component scoring model. NN/g’s CASTLE framework mentions cognitive load as one of six UX dimensions but recommends post-hoc surveys (NASA-TLX), not automated scoring. Rafters is the first system to assign static, intrinsic scores to components and enforce budgets at composition time.

The Five Dimensions

Every component score is the sum of five dimensions, each contributing 0-2 points. The maximum possible score is 10.

1. Decision Demand (0-2)

How many decisions does the user need to make?

A Button scores 1 here: the user decides whether to click. An AlertDialog scores 2: the user must weigh consequences and choose between action and cancellation.

2. Information Density (0-2)

How much information must the user process simultaneously?

A Button scores 0 here: the label is the entire information payload, and you already know what it says before you look at it. A Combobox scores 2: the user reads the input value, scans filtered options, and compares matches simultaneously.

3. Interaction Complexity (0-2)

How many distinct interaction modes does the component support?

A Button scores 1: you click it. A Combobox scores 2: you type to filter, arrow-key through results, and press Enter or click to select. These are three distinct interaction modes the user must coordinate.

4. Context Disruption (0-2)

How much does the component disrupt the user’s current task context?

A Button scores 0: clicking it doesn’t inherently change context. An AlertDialog scores 2: it blocks the entire application and forces the user into a decision before they can return to anything else.

5. Learning Curve (0-2)

How much prior knowledge does the component require to use correctly?

A Button scores 0: every person who has used a computer knows what a button does. A Command palette scores 2: the user must learn that it exists, how to invoke it, the search syntax, and keyboard navigation.

Scoring Walkthrough: Why a Button is a 3

The @attention-economics metadata adds nuance: variant hierarchy, size hierarchy, and the rule “maximum 1 primary per section.” But the cognitive load score measures intrinsic processing cost, not attention weight.

Scoring Walkthrough: Why an AlertDialog is a 7

The high score comes from disruption and decision stakes, not interaction complexity. This is why AlertDialog has @attention-economics Full attention capture and @trust-building Focus defaults to Cancel.

Screen-Level Budgets

Individual component scores don’t exist in isolation. When components compose into screens, their loads add up. But not linearly. The user doesn’t process every component simultaneously. They focus on one region at a time, with peripheral elements fading into background awareness.

The Budget Tiers

Raw additive scoring overcounts because users focus attentionally, familiarity reduces load on return visits, and progressive disclosure gates content. The tiers account for this.

Applying the Budget

When evaluating a screen composition:

1. Sum the component scores for everything visible simultaneously.
2. Identify the tier based on the interaction context.
3. Compare sum against tier budget.
4. If over budget, look for components scoring 4+ that could be simplified, hidden behind progressive disclosure, or moved to a separate view.

The budget is a lint, not a hard wall. Going 10% over is a design conversation. Going 50% over is a design problem.

What the Score Does Not Measure

The cognitive load score is an intrinsic property of the component. It measures the processing cost of the component itself, independent of:

• Content: a Table is always 3/10 whether it has 5 rows or 5,000.
• Context: a Button in a toolbar costs the same as a Button in a dialog. The screen budget accounts for context.
• Frequency: how often a user encounters the component doesn’t change its intrinsic cost.
• Aesthetic quality: a beautifully styled Combobox costs the same as an ugly one.

The companion @attention-economics tag captures the contextual, relative aspects.

Scoring Reference Table

All 52+ UI components with their scores and primary cost drivers:

No Rafters component scores above 7. Components that would score 8-10 are too complex for a single component: they should be decomposed into multiple lower-scoring components composed together.