---
title: "Goal-Gradient Effect"
source: "/reference/goal-gradient-effect"
description: "Motivation can strengthen as people perceive themselves getting closer to a meaningful goal."
---
# Goal-Gradient Effect

Motivation can strengthen as people perceive themselves getting closer to a meaningful goal.



### Principle

Motivation can strengthen as people perceive themselves getting closer to a meaningful goal.

### Why it matters

Visible progress turns an abstract task into a path with a reachable end. Progress indicators, completed steps, milestones, and remaining work can help users sustain effort. The effect should reflect real advancement. Inflated, reset, or misleading progress damages trust and can make completion feel farther away than before.

### Deeper design interpretation

Progress changes effort when the user can see that meaningful completion is getting closer. A visible path converts an abstract task into a bounded journey and reduces uncertainty about how much work remains. This is useful in onboarding, long forms, migrations, uploads, learning, and setup.

Progress must correspond to real work. Decorative percentages or artificially inflated completion can produce the opposite effect when they stall, reset, or reveal unexpected work near the end. Trust in the progress model is part of the experience.

Layr should prefer truthful stages over false precision. When exact percentage cannot be known, milestones such as “ingesting,” “mapping,” “relationships,” and “validation” can be more informative than a number.

### What the agent should reason about

Compare the displayed model of progress with the actual job or task state. Determine whether optional work is counted as required completion. Check whether progress persists across sessions and whether completion clearly communicates what has been achieved.

The agent should also inspect whether the next step becomes clearer as the user advances, rather than only whether a progress bar exists.

### Common failure patterns

- Progress percentages jump or stall without relation to actual work.
- Optional enrichment prevents a task from reaching 100%.
- Long tasks reset visible progress after navigation or refresh.
- Users cannot tell which stages are finished, active, or remaining.
- Completion celebration obscures validation or exceptions.

### Audit questions

- What does the progress indicator actually measure?
- Can the system support the precision it displays?
- Are required and optional work clearly separated?
- Does the user know what completion unlocks or changes?

### Example agent finding

> **High — Migration progress is decorative rather than state-based.** The UI jumps to 80% immediately and remains there through several unrelated backend phases. Replace the fabricated percentage with durable stages and stage-specific counts where measurable so users can understand real advancement and remaining work.

### Agent directive

> Expose honest progress when a task has meaningful stages or accumulated effort. Show what remains and what completion unlocks.

### Apply this when

- Onboarding, checkout, setup, migration, learning, uploads, long forms, rewards, and long-running operations.

### Observable signals

- A multi-step task gives no indication of current stage or remaining work.
- Progress percentages jump unpredictably or stall near completion.
- Completed work is visually indistinguishable from remaining work.
- Optional steps are counted as required progress.
- A long operation resets visible progress when the user returns.

### Recommended actions

- Show stage, completed work, and remaining work using a model the system can support truthfully.
- Use milestones when exact percentage is unknowable.
- Preserve progress across sessions for durable tasks.
- Celebrate meaningful completion without blocking the next action.
- Separate optional enrichment from required completion.

### Do not over-apply

Never fabricate progress. If duration is uncertain, show stages or activity instead of a false percentage.

### Example

**Weak:** An import immediately displays 80% complete, then remains there for twenty minutes because the percentage is decorative.

**Stronger:** The import reports durable stages such as ingesting, mapping, relationships, activity, and validation, with stage-level progress where measurable.

### Evaluation notes

- **Default severity:** Medium; high when misleading progress causes abandonment, duplicate actions, or false expectations.
- **Typical confidence:** High when progress model can be compared with actual job state.
- **Primary evidence:** Job stages, completion logic, progress calculation, persistence, optional/required distinction.
- **Related rules:** Zeigarnik Effect, Doherty Threshold, Parkinson's Law, Peak-End Rule

### References

- [Laws of UX — Goal-Gradient Effect](https://lawsofux.com/goal-gradient-effect/)

## Related rules

- [Zeigarnik Effect](/__layr/pages/reference/zeigarnik-effect.md)
- [Doherty Threshold](/__layr/pages/reference/doherty-threshold.md)
- [Parkinson's Law](/__layr/pages/reference/parkinsons-law.md)
- [Peak-End Rule](/__layr/pages/reference/peak-end-rule.md)

## Agent guidance

Review criteria, the finding contract a report must use, and worked examples.

Established principle; Layr interpretation and agent guidance. Category: Motivation, Progress & Experience Memory.

## Retrieve
- Canonical page: https://layr.design/reference/goal-gradient-effect
- Markdown for agents: https://layr.design/__layr/pages/reference/goal-gradient-effect.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon

## Rule object
```yaml
rule:
  id: "goal-gradient-effect"
  title: "Goal-Gradient Effect"
  category: "Motivation, Progress & Experience Memory"
  origin: established
  canonical_url: "https://layr.design/reference/goal-gradient-effect"
  principle: "Motivation can strengthen as people perceive themselves getting closer to a meaningful goal."
  directive: "Expose honest progress when a task has meaningful stages or accumulated effort. Show what remains and what completion unlocks."
  applies_when:
    - "Onboarding, checkout, setup, migration, learning, uploads, long forms, rewards, and long-running operations."
  observable_signals:
    - "A multi-step task gives no indication of current stage or remaining work."
    - "Progress percentages jump unpredictably or stall near completion."
    - "Completed work is visually indistinguishable from remaining work."
    - "Optional steps are counted as required progress."
    - "A long operation resets visible progress when the user returns."
  audit_questions:
    - "What does the progress indicator actually measure?"
    - "Can the system support the precision it displays?"
    - "Are required and optional work clearly separated?"
    - "Does the user know what completion unlocks or changes?"
  recommended_actions:
    - "Show stage, completed work, and remaining work using a model the system can support truthfully."
    - "Use milestones when exact percentage is unknowable."
    - "Preserve progress across sessions for durable tasks."
    - "Celebrate meaningful completion without blocking the next action."
    - "Separate optional enrichment from required completion."
  avoid_when:
    - "Never fabricate progress. If duration is uncertain, show stages or activity instead of a false percentage."
  common_failure_patterns:
    - "Progress percentages jump or stall without relation to actual work."
    - "Optional enrichment prevents a task from reaching 100%."
    - "Long tasks reset visible progress after navigation or refresh."
    - "Users cannot tell which stages are finished, active, or remaining."
    - "Completion celebration obscures validation or exceptions."
  evidence_types:
    - "Job stages"
    - "completion logic"
    - "progress calculation"
    - "persistence"
    - "optional/required distinction"
  default_severity: "Medium; high when misleading progress causes abandonment, duplicate actions, or false expectations."
  typical_confidence: "High when progress model can be compared with actual job state."
  related_rules:
    - { id: "zeigarnik-effect", title: "Zeigarnik Effect", url: "https://layr.design/reference/zeigarnik-effect" }
    - { id: "doherty-threshold", title: "Doherty Threshold", url: "https://layr.design/reference/doherty-threshold" }
    - { id: "parkinsons-law", title: "Parkinson's Law", url: "https://layr.design/reference/parkinsons-law" }
    - { id: "peak-end-rule", title: "Peak-End Rule", url: "https://layr.design/reference/peak-end-rule" }
```

## What to reason about
Compare the displayed model of progress with the actual job or task state. Determine whether optional work is counted as required completion. Check whether progress persists across sessions and whether completion clearly communicates what has been achieved. The agent should also inspect whether the next step becomes clearer as the user advances, rather than only whether a progress bar exists.

## Routing
Route a review here when the interface manages progress, interruption, completion, waiting, resumption, or emotionally significant outcomes. Avoid inferring motivation from UI alone; tie findings to observable journey states.

## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.

## Finding contract — emit exactly this shape
```yaml
finding:
  rule_id: string
  location: string
  evidence:
    - observable fact
  impact: string
  severity: low | medium | high | critical
  confidence: low | medium | high
  recommendation:
    change: string
    rationale: string
    preserve:
      - existing design-system behavior
      - valid product constraints
```

## Example finding for this rule
High — Migration progress is decorative rather than state-based. The UI jumps to 80% immediately and remains there through several unrelated backend phases. Replace the fabricated percentage with durable stages and stage-specific counts where measurable so users can understand real advancement and remaining work.

## Code reference

The same principle as markup. Compare the structure, not the class names.

```html
<!-- weak -->
<div class="example-ui example-ui-weak">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Import</span>
    <span class="scene-chrome-view">Progress</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel">
      <span class="scene-panel-title">Import progress</span>
      <span class="scene-stat-value">80%</span>
      <span class="scene-progress">
        <span class="scene-progress-fill" style="width:80%"></span>
      </span>
      <div class="scene-row scene-row-muted">
        <span class="scene-meta">Unchanged since 14:02</span>
        <span class="scene-meta">20 min</span>
      </div>
      <span class="scene-note">Decorative percentage · no stage, no remaining work</span>
    </div>
  </div>
</div>
```

```html
<!-- stronger -->
<div class="example-ui example-ui-strong">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Import</span>
    <span class="scene-chrome-view">Progress</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel">
      <span class="scene-panel-title">Import progress</span>
      <div class="scene-track">
        <div class="scene-track-item scene-track-done">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Ingesting</span>
          <span class="scene-meta">1,284 records</span>
        </div>
        <div class="scene-track-item scene-track-done">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Mapping</span>
          <span class="scene-meta">1,284 of 1,284</span>
        </div>
        <div class="scene-track-item scene-track-active">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Relationships</span>
          <span class="scene-meta">412 of 1,284</span>
        </div>
        <div class="scene-track-item scene-track-pending">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Activity</span>
          <span class="scene-meta">Not started</span>
        </div>
        <div class="scene-track-item scene-track-pending">
          <span class="scene-track-node"></span>
          <span class="scene-track-label">Validation</span>
          <span class="scene-meta">Not started</span>
        </div>
      </div>
      <span class="scene-progress">
        <span class="scene-progress-fill" style="width:46%"></span>
      </span>
      <span class="scene-meta">Stage 3 of 5 · times vary by dataset</span>
    </div>
  </div>
</div>
```

```css
/* declarations these studies depend on */
.example-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 17rem; overflow: hidden; border: var(--border-thin) solid var(--color-border-strong); background: var(--color-background); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug); }
.example-ui .scene-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface); }
.example-ui .scene-chrome-app { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-chrome-view { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-body { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.example-ui .scene-body:has(> .scene-panel:only-child) { align-content: stretch; }
.example-ui .scene-panel { display: grid; align-content: start; justify-items: start; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); }
.example-ui .scene-panel-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-heading); }
.example-ui .scene-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-2); width: 100%; min-width: 0; padding-block: var(--space-1); }
.example-ui .scene-panel > .scene-row + .scene-row { border-top: var(--border-thin) solid var(--color-border-subtle); }
.example-ui .scene-row-muted { color: var(--color-text-tertiary); }
.example-ui .scene-meta { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-note { width: 100%; padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.example-ui .scene-progress { display: block; width: 100%; height: var(--space-2); background: var(--diagram-fill); }
.example-ui .scene-progress-fill { display: block; height: 100%; background: var(--color-action); }
.example-ui .scene-track { display: grid; gap: 0; width: 100%; }
.example-ui .scene-track-item { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding-block: var(--space-2); }
.example-ui .scene-track-node { position: relative; justify-self: center; width: 9px; height: 9px; border: var(--border-thin) solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-raised); }
.example-ui .scene-track-item + .scene-track-item .scene-track-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 0; height: var(--space-4); border-left: var(--border-thin) solid var(--color-border-strong); }
.example-ui .scene-track-done .scene-track-node { border-color: var(--color-action); background: var(--color-action); }
.example-ui .scene-track-active .scene-track-node { border-width: 3px; border-color: var(--color-action); }
.example-ui .scene-track-pending .scene-track-node::before { border-left-style: dashed; }
.example-ui .scene-track-label { min-width: 0; overflow-wrap: anywhere; }
.example-ui .scene-track-pending .scene-track-label { color: var(--color-text-tertiary); }
.example-ui .scene-stat-value { font-size: var(--text-lg); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-heading); line-height: var(--leading-none); }
.example-ui { min-height: 15rem; }

/* resolved values */
:root {
  --border-thin: 1px;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --leading-none: 0.98;
  --leading-snug: 1.35;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --text-2xs: 0.6875rem;
  --text-lg: 1.375rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-heading: -0.025em;
  --tracking-label: 0.06em;
}
```

## Weak vs stronger
- Weak: An import immediately displays 80% complete, then remains there for twenty minutes because the percentage is decorative.
- Stronger: The import reports durable stages such as ingesting, mapping, relationships, activity, and validation, with stage-level progress where measurable.

## Reporting rules
- Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences.
- Returning no finding is a valid result when evidence is insufficient.
