Made with 🧠 and 🫀 by Youssef Bouksim

Back to library
👁️

Attentional Bias

We don't look at everything equally. We notice what's already on our mind — and ignore the rest. Designers who understand this can guide attention to what matters. Those who abuse it can hijack it.

5 min readUX · Product · Dark Patterns

You're walking through a city you've never been to. You're hungry. Suddenly, you notice every restaurant on the street — signs you would have walked straight past otherwise. Nothing changed about those signs. What changed was your mental state. Hunger primed your brain to look for food, so food-related information jumped out at you.

This is attentional bias: we tend to pay more attention to things that match what we're already thinking about or feeling. It's not a flaw — it's efficient. Your brain can't process everything at once, so it prioritises what seems most relevant right now.

In interface design, this plays out constantly. A user searching for “UX Designer remote” will notice those words the moment they appear on a page. A user with an anxiety about missing messages will notice every red notification dot. The question for designers is: are you directing that attention toward what genuinely helps the user — or toward what benefits you?

✦ Key takeaways
✓
Users scan, they don't read. Most people don't read a page word by word. They scan for things that match what they came for. If those things aren't visually distinct from everything else, users miss them — even when the information is right there. Highlighting search terms, bolding key facts, and using colour to mark relevant content works because it meets users where their attention already is.
✓
Red and movement are attention magnets. The brain is wired to notice sudden movement and the colour red — both historically signalled danger. In interfaces, red notification badges and animated elements exploit this reflex. That's fine when the notification is genuinely urgent. It's a dark pattern when a “3” badge appears on a tab just because there are three promotional emails — nothing urgent, but the red dot still fires the same alarm.
✓
What you highlight is what you're saying matters. Every visual emphasis decision — a yellow highlight, a bold font, a coloured border, a badge — tells users “look here.” If the thing you're highlighting doesn't genuinely serve the user, you've stolen their attention and given it to yourself. That's the line between good design and manipulation.
“We don't attend to the world as it is — we attend to the world as we expect and need it to be.”
— Daniel Kahneman, Thinking Fast and Slow, 2011

Search results — helping attention land in the right place

When someone searches “UX Designer remote,” those words are already loaded in their head. They're what the user came to find. Highlighting the matching words in search results uses attentional bias honestly — it makes relevant information visually distinct, so the user's eye jumps straight to the words they're looking for.

Without highlighting, every job listing looks the same. The user has to read every card to find the relevant details. With highlighting, those details pop immediately. Same content — completely different scanning experience.

Before — no highlighting
jobs.app.com/search?q=UX+Designer+remote
JobBoard
UX Designer remote
Search
Job type
Full-time
Contract
Part-time
Experience
Entry level
Mid level
Senior
142 results
Senior UX Designer — Growth Team
Figma·Remote / SF
Full-timeRemote$120-150k
Looking for a UX Designer with 4+ yrs to join our Growth team.
Product Designer (UX Focus)
Linear·Remote, Europe
Full-timeRemote€80-100k
Small, focused design team. Strong UX skills required.
UX Researcher & Designer
Notion·Remote
Full-timeRemote$100-130k
Hiring a UX Designer who can run research and ship improvements.
The search was “UX Designer remote” — but nothing in the results reflects that. Users have to read every line to find the matching details.
After — keywords highlighted, eye finds matches
jobs.app.com/search?q=UX+Designer+remote
JobBoard
UX Designer remote
Search
Job type
Full-time
Contract
Part-time
Experience
Entry level
Mid level
Senior
142 results
Senior UX Designer — Growth Team
Figma·Remote / SF
Full-timeRemote$120-150k
Looking for a UX Designer with 4+ yrs to join our Growth team.
Product Designer (UX Focus)
Linear·Remote, Europe
Full-timeRemote€80-100k
Small, focused design team. Strong UX skills required.
UX Researcher & Designer
Notion·Remote
Full-timeRemote$100-130k
Hiring a UX Designer who can run research and ship improvements.
The same three results — but now “UX Designer” and “Remote” are highlighted wherever they appear. The eye lands on the relevant words before the brain has finished a single sentence.

This works because the highlighted words match what the user already has in mind. Attentional bias does the rest automatically. You're not forcing the user to pay attention — you're meeting their attention where it already is.


Notification badges — when red dots work for you vs against you

Red notification badges are one of the most effective attention tools in mobile design — and one of the most abused. The red dot works because our brains are wired to notice red. It originally signalled danger. Today, apps use it to signal “something needs your attention.”

When the badge is honest — “someone replied to your message” — it's genuinely useful. The user needs to know. But when every tab has a red badge just because there are unread promotional emails or marketing notifications, the signal becomes noise. The red still grabs attention. But now it's grabbing it for nothing. After a while, users learn to ignore all badges — including the important ones.

Before — red badge on everything
Messages
Direct messages
M
Mia Santos
Hey, can you review the...
2
Channels
general
14
design
7
random
3
announcements
1
engineering
22
Everything looks urgent. The DM gets lost in the noise.
The DM from a colleague looks exactly the same as 22 unread messages in #engineering. Everything is red — the signal is useless.
After — red only for DMs and @mentions
Messages
Direct messages
M
Mia Santos
Hey, can you review the...
2
Channels
general
14
design
@
random
3
announcements
1
engineering
22
DM / @mention
Unread
The eye goes straight to Mia's message and the @mention in #design. Unread channels just show a bold name or a grey count — readable, not alarming.

The good version is how Slack actually works — and for good reason. Red appears only for direct messages and @mentions — things that require your personal response. Regular unread channels get a bold name or a grey count. The eye immediately goes to the red items. Everything else is readable without being alarming. The same number of unread messages, completely different experience.

This is the ethical test for any attention-grabbing design element: does the user benefit from having their attention pulled here, or only the product? A red badge on a newsletter is stealing attention. A red badge on a direct message is earning it.


Applying this to your work

Every time you reach for bold text, a coloured highlight, a badge, or an animation — you're making a claim about what the user should notice. The claim should be true. If it's not, you're borrowing attention you haven't earned.

A practical rule: highlight the thing the user came looking for, not the thing you want them to buy. Show urgency badges on things that are actually urgent. Use animation for state changes, not decoration. When everything screams for attention, nothing gets it.

✓ Apply it like this
→Highlight search terms in results — meets the user's attention where it already is.
→Use red badges only for things that genuinely need action. Reserve amber or grey for lower-priority unread items.
→Bold the most important piece of information in each block of text — one thing per section, not five.
→Use colour contrast to draw attention to error messages and warnings — users need to notice those immediately.
✗ Common mistakes
→Red badges on promotional content — using urgency signals to drive engagement the user didn't ask for.
→Making everything bold — if everything is emphasised, nothing is. Emphasis only works against a plain background.
→Using animation purely for decoration — movement hijacks attention. If it doesn't carry information, it just drains focus.
→Highlighting your preferred option with colour to exploit attentional bias — the 'most popular' plan badge is fine when honest; it's manipulation when it steers users toward the most profitable plan regardless of fit.

Kahneman, D. (2011). Thinking, Fast and Slow. Farrar, Straus and Giroux. · Posner, M. I. (1980). Orienting of attention. Quarterly Journal of Experimental Psychology, 32(1), 3–25. · Brignull, H. (2010). Dark patterns. darkpatterns.org.