Made with 🧠 and πŸ«€ by Youssef Bouksim

Back to library
🧠

Selective Attention

Your brain can't process everything at once, so it filters ruthlessly. Users only notice what they're looking for β€” or what is designed to demand their attention. Everything else gets tuned out.

5 min readUX Β· Product Β· UI

In 1999, psychologists Christopher Chabris and Daniel Simons ran a study that became one of the most famous in cognitive science. They asked participants to watch a video of people passing a basketball and count the number of passes. Midway through, a person in a gorilla suit walked through the scene, stopped, thumped their chest, and walked off. About half of all participants never saw the gorilla.

They weren't distracted. They were focused β€” just focused on the wrong thing. Because their attention was locked on counting passes, the gorilla didn't register at all. This is selective attention: the mind processes only a fraction of what the eyes see, filtering everything else out in order to stay focused on the current task.

In interface design, this plays out constantly. A user looking for the checkout button won't notice the promotional banner at the top of the page. A user reading a form won't notice a small notice buried in the footer. A user focused on filling in their email address won't notice an error message that appeared elsewhere on the screen. Selective attention doesn't mean users are careless. It means they're human.

✦ Key takeaways
βœ“
Users have a task in mind when they arrive. They're not browsing neutrally β€” they came to do something specific. Anything that doesn't relate to that task is filtered out before they consciously process it. This is why banners, promotional content, and secondary CTAs are often invisible to users mid-task β€” not because they're hidden, but because the user's filter is active.
βœ“
Important information must appear where attention already is. Error messages that appear at the top of a page often go unnoticed when the user is focused on the middle of a form. Warnings that appear at the bottom of a modal are missed because the user's eye is already on the confirm button. Place critical information close to β€” or inside β€” the user's likely focus point, not where it's β€œtechnically visible.”
βœ“
Exploiting selective attention is a dark pattern. Some designs deliberately use selective attention against users β€” burying fee disclosures in walls of text, placing unsubscribe links in low-contrast grey, hiding cancellation options in settings menus that users are unlikely to visit. These work precisely because selective attention means users won't notice. Designing around a human limitation to protect the user is good design. Exploiting it to protect the product is manipulation.
β€œWe experience far less of our visual world than we think we do. We believe we see everything, but we're actually only ever seeing a small part of it.”
β€” Christopher Chabris & Daniel Simons, The Invisible Gorilla, 2010

Where the error message lives changes everything

Here's one of the most common selective attention failures in form design. A user fills in a long form and hits submit. There's an error. The error message appears β€” but it appears at the top of the page, while the user's attention is focused at the bottom where they just clicked the button. They see no feedback, assume nothing happened, and click again. Or they give up.

The fix is simple: put the error message where the attention is. Inline errors, right below the field that needs fixing, work because they appear inside the user's active focus zone. A general error banner at the top of the page fails because it's outside it.

BeforeError at the top β€” user's attention is at the bottom
9:41
Create account
Please fix the errors below
Some fields need your attention.
Full name
Youssef Bouksim
Email
youssef@
Password
****
Create account

The error banner is at the top. The user just clicked β€œCreate account” at the bottom. Their eyes are down there β€” not up where the error appeared.

AfterInline errors β€” the message appears where attention already is
9:41
Create account
Full name
Youssef Bouksim
Email
youssef@
Please enter a valid email address
Password
****
Password must be at least 8 characters
Create account

Errors appear directly below the fields that need fixing β€” inside the user's active focus zone. No need to scroll or look away.


The checkout β€” hiding things in plain sight

This is selective attention exploited as a dark pattern. A user at checkout has one thing on their mind: completing the purchase. Their attention is locked on the product, the total, and the confirm button. They are not reading every line of text. They are not examining every checkbox.

Some checkout flows exploit this by placing unwanted add-ons where attention is lowest β€” pre-ticked checkboxes in small print near the summary, fees in light grey text, auto-enrolled subscriptions tucked below the fold. The user isn't stupid. They're just focused β€” exactly as human attention works.

BeforeDark pattern β€” unwanted extras hidden where attention is lowest
9:41
Checkout
SoundPro X3
Wireless headphones
$79
Delivery details
First name
Youssef
Last name
Bouksim
Yes, sign me up for ShopPlus Premium ($9.99/mo after 30-day trial). Cancel anytime.
Add extended warranty for $4.99/mo. Auto-renews annually.
Subtotal$79.00
ShippingFree
ShopPlus trial$0 (then $9.99/mo)
Warranty$0 (then $4.99/mo)
Total today$79.00
*Two recurring charges begin after trial/delivery.
Complete purchase

The user's attention is on the product, the total ($79), and the button. The two pre-ticked add-ons are in 10px light grey text β€” exactly where attention is lowest. Next month the total is $93.98.

The design works against the user because it's built around selective attention. The important things (product, price, button) are visually dominant. The costly extras are placed in the attention shadow. The user isn't tricked β€” they β€œagreed” to both checkboxes. But the design was explicitly built to ensure they wouldn't notice.


Designing with selective attention honestly

The honest version of working with selective attention is about placing information where the user's focus actually is β€” not exploiting where it isn't.

Put error messages next to errors. Put warnings near the action they warn about. Put fees near the total. If something is important enough to affect the user's decision, it should be in their focus zone when the decision is being made β€” not technically on the page somewhere they're unlikely to look.

βœ“ Apply it like this
β†’Place errors inline, directly below the field that needs fixing β€” not in a banner at the top of the form.
β†’Show warnings and important notes close to the action they relate to. A warning about irreversible deletion should be right next to the delete button.
β†’Put all recurring fees and future charges near the final total β€” in the same font size and colour as the amount the user is paying today.
β†’If something requires the user’s active agreement, make it require a conscious action β€” an empty checkbox they must tick, not a pre-ticked one they must untick.
βœ— Common mistakes
β†’Pre-ticked checkboxes for paid add-ons, subscriptions, or marketing opt-ins β€” placed in low-attention areas of the form.
β†’Fees in light grey text that visually recedes from the rest of the summary β€” making them technically present but practically invisible.
β†’Unsubscribe or cancellation links in the footer, in low-contrast text, below a long page β€” placed where selective attention makes them easy to miss.
β†’Important terms buried in walls of legal text β€” counting on the user’s attention filter to skip over them entirely.

Chabris, C., & Simons, D. (2010). The Invisible Gorilla. Crown Publishers. Β· Simons, D. J., & Chabris, C. F. (1999). Gorillas in our midst. Perception, 28(9), 1059–1074. Β· UK Competition and Markets Authority (2022). Online choice architecture: how digital design can harm consumers.