1---
2title: Minimize Extraneous Cognitive Load
3impact: HIGH
4tags: ux, cognitive-load, simplicity, noise
5---
6 
7## Minimize Extraneous Cognitive Load
8 
9Remove anything that doesn't help the user complete their task. Decoration, redundant labels, and unnecessary options all add load.
10 
11**Incorrect (extraneous elements):**
12 
13```tsx
14function DeleteDialog() {
15  return (
16    <dialog>
17      <Icon name="warning" size={64} />
18      <h2>Warning!</h2>
19      <p>Are you absolutely sure you want to delete?</p>
20      <p>This action is permanent and cannot be undone.</p>
21      <p>All associated data will be lost forever.</p>
22      <div>
23        <button>Cancel</button>
24        <button>Delete</button>
25        <button>Learn More</button>
26      </div>
27    </dialog>
28  );
29}
30```
31 
32**Correct (essential information only):**
33 
34```tsx
35function DeleteDialog() {
36  return (
37    <dialog>
38      <h2>Delete this item?</h2>
39      <p>This can't be undone.</p>
40      <div>
41        <button>Cancel</button>
42        <button>Delete</button>
43      </div>
44    </dialog>
45  );
46}
47```
48 
49Reference: [Cognitive Load](https://lawsofux.com/cognitive-load/)
50