Cognitive load and UI design: designing for the brain, not just the eye

Interface design has never been only about how things look; it’s about how people think. Three principles from cognitive psychology, Hick’s Law, Fitts’s Law and the serial position effect, explain much of what makes an interface feel easy or hard. Used on purpose, they reduce friction, speed up decisions and make an interface feel intuitive, because it’s built for how people actually process information.

Hick’s Law: more choices, slower decisions

Hick’s Law says that the time it takes to make a decision grows, logarithmically, with the number of choices. Confront people with too many options at once (navigation links, form fields, filters) and their cognitive load spikes: they hesitate, or give up. A well-designed interface has fewer decision points, or groups them so they can be taken in at a glance. Google’s home page offers a single search field. That isn’t just minimalism; it’s a decision made easy.

Applying it well goes beyond cutting options: it means designing the choice itself. Progressive disclosure hides complexity until it’s needed; autocomplete and smart defaults take decisions off people’s hands. In enterprise dashboards or online shops, where complexity can’t be avoided, visual hierarchy, chunking and contextual cues guide people through it without overwhelming them. Hick’s Law isn’t about dumbing interfaces down; it’s about designing for how people actually take decisions.

Example: progressive disclosure in a settings panel

HTML has progressive disclosure built in. <details> and <summary> give you the toggle, keyboard support and an expanded or collapsed state that screen readers announce, with no JavaScript at all.

<details>
  <summary>Advanced settings</summary>
  <label>
    <input type="checkbox" name="experimental"> Enable experimental features
  </label>
  <label>
    <input type="checkbox" name="legacy"> Use the legacy rendering engine
  </label>
</details>

Why it works: the common settings stay in view and the rare ones wait one click away, so people face fewer choices at once.

Fitts’s Law: big, close targets are faster

Fitts’s Law predicts that the time it takes to reach a target, such as a button or a link, depends on its distance and its size: larger, closer targets are quicker and easier to hit. That’s why mobile interfaces keep the main actions within reach of the thumb, and why calls to action are generous. It applies to the small things too: close icons, dropdown arrows and checkboxes all benefit from a bigger hit area.

Ignoring it makes interfaces frustrating, especially on touch screens and for people with motor impairments. That’s why WCAG sets minimum target sizes: 24 by 24 CSS pixels at level AA, 44 by 44 at AAA.

Example: a large, clear call to action

<style>
  .cta {
    min-height: 44px;
    padding: 16px 32px;
    font-size: 1.25rem;
    background-color: #00539b;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .cta:hover {
    background-color: #003f75;
  }

  .cta:focus-visible {
    outline: 3px solid #00539b;
    outline-offset: 3px;
  }
</style>

<button class="cta" type="button">Start free trial</button>

Why it works: the button is large, distinct and easy to reach with a mouse, a finger or the keyboard, which cuts both the time to hit it and the chance of missing it.

The serial position effect: first and last are remembered

People remember the items at the beginning (primacy) and the end (recency) of a sequence better than those in the middle. That matters for how we order navigation menus, onboarding steps and product lists. Put the key actions and information at the start and end of a flow and they are more likely to be noticed and remembered. In a multi-step form, the first and last steps deserve the most care.

It can also steer behaviour. A shop that puts popular products at the top and bottom of a list makes them more likely to be chosen; an onboarding flow that opens with a clear benefit and ends with a clear next step keeps people going. The serial position effect is a reminder that an interface isn’t only a layout: it’s a sequence, and people remember sequences unevenly.

Progress bars use both

A progress bar simplifies the mental model of a long task. Instead of one overwhelming form, people see a clear path in defined steps: one complex decision broken into manageable ones, each faster to take, just as Hick’s Law predicts. It helps people feel in control.

It also leans on the serial position effect. The first step sets expectations (primacy), and the last usually ends in a satisfying “Finish” or “Submit” (recency). Watching the progress builds motivation as the end comes closer, a nudge that improves completion rates.

Example: ordering a navigation menu

<nav aria-label="Main">
  <ul>
    <li><a href="/dashboard">Dashboard</a></li> <!-- primacy -->
    <li><a href="/projects">Projects</a></li>
    <li><a href="/reports">Reports</a></li>
    <li><a href="/settings">Settings</a></li>
    <li><a href="/logout">Log out</a></li> <!-- recency -->
  </ul>
</nav>

Why it works: people are more likely to remember and use the first and last items, so the ones they need most, like “Dashboard” and “Log out”, go there.

Designing with cognitive empathy

Interfaces aren’t just visual artefacts; they’re cognitive environments. Hick’s Law, Fitts’s Law and the serial position effect remind us that every element, every interaction and every sequence carries cognitive weight. Reduce the choices, size the targets for the hand that uses them, order things for the memory that holds them, and an interface feels effortless: not because it’s simple, but because it works the way people do.

Designing for the brain means designing for clarity, confidence and momentum. Whether it’s a progress bar that guides people through a form, a button that’s easy to press or a menu that works with memory, the best interfaces don’t just look good. They think well.