focus-attention-design

Name: focus-attention-design
Author: Owl-Listener

82stars25forks

How to install focus-attention-design?

owl-listener/inclusive-design-skills/focus-attention-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill focus-attention-design

Installs into the current project.

Summary

Design interfaces that support sustained focus and reduce distractions. Use when designing for users with ADHD, attention difficulties, anxiety, or any context where focus matters — dashboards, reading experiences, task flows, forms, learning interfaces. Triggers on: focus, distr

Files · 1

View on GitHub

SKILL.md

1	# Focus and Attention Design
2
3	Design interfaces that help people maintain focus on their task by
4	removing unnecessary distractions and giving users control over their
5	attention environment.
6
7	## Core Principle
8
9	Every element on screen should serve the user's current task.
10	If it exists for the business but not for the user, it is a distraction.
11
12	## Design Patterns
13
14	### Single Purpose
15	- One primary action per screen or section
16	- Secondary actions visually de-emphasised (smaller, muted colour, text link)
17	- Remove decorative elements that don't serve the task
18	- Hide advanced options behind "Show more" or "Advanced"
19	- Present choices sequentially, not simultaneously, when possible
20
21	### Interruption Control
22	- No autoplay audio or video
23	- No pop-ups that aren't triggered by user action
24	- Allow users to dismiss or defer notifications
25	- Save state before showing any modal — closing it must not lose work
26	- Never remove content from the screen without user action
27	- If a banner or alert is needed, make it dismissable and non-blocking
28
29	### Visual Calm
30	- Generous whitespace between sections
31	- Limited colour palette (3–4 colours for UI elements)
32	- Subtle borders and dividers, not heavy lines
33	- No flashing, blinking, or rapidly changing content
34	- Animation only for functional feedback (loading, transitions)
35	- Always respect prefers-reduced-motion
36
37	### Time Sensitivity
38	- Avoid time limits unless absolutely essential
39	- If time limits exist, warn well before expiry
40	- Provide easy extension (one click, not multi-step)
41	- Allow at least 20 seconds per required decision
42	- Save progress automatically in timed contexts
43	- For session timeouts: save state and allow seamless return
44
45	## Assessment Questions
46
47	For each screen, ask:
48	1. What is the ONE thing the user should do here?
49	2. Is that one thing the most visually prominent element?
50	3. What on this screen competes for attention? Can it be removed or muted?
51	4. Can the user control interruptions (notifications, modals, autoplay)?
52	5. Is there artificial urgency that doesn't serve the user?
53
54	## Anti-Patterns to Flag
55
56	- Countdown timers on non-time-sensitive actions
57	- "Only 2 left!" urgency messaging
58	- Autoplay video or audio
59	- Multiple competing calls to action
60	- Chat widgets that pop up unsolicited
61	- Moving or animated advertisements near task areas
62	- Layout shifts that redirect attention

People who liked this also viewed

6 picks

Type

focus-attention-design

82stars25forks

View on GitHub

How to install focus-attention-design?

owl-listener/inclusive-design-skills/focus-attention-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill focus-attention-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Focus and Attention Design
2
3	Design interfaces that help people maintain focus on their task by
4	removing unnecessary distractions and giving users control over their
5	attention environment.
6
7	## Core Principle
8
9	Every element on screen should serve the user's current task.
10	If it exists for the business but not for the user, it is a distraction.
11
12	## Design Patterns
13
14	### Single Purpose
15	- One primary action per screen or section
16	- Secondary actions visually de-emphasised (smaller, muted colour, text link)
17	- Remove decorative elements that don't serve the task
18	- Hide advanced options behind "Show more" or "Advanced"
19	- Present choices sequentially, not simultaneously, when possible
20
21	### Interruption Control
22	- No autoplay audio or video
23	- No pop-ups that aren't triggered by user action
24	- Allow users to dismiss or defer notifications
25	- Save state before showing any modal — closing it must not lose work
26	- Never remove content from the screen without user action
27	- If a banner or alert is needed, make it dismissable and non-blocking
28
29	### Visual Calm
30	- Generous whitespace between sections
31	- Limited colour palette (3–4 colours for UI elements)
32	- Subtle borders and dividers, not heavy lines
33	- No flashing, blinking, or rapidly changing content
34	- Animation only for functional feedback (loading, transitions)
35	- Always respect prefers-reduced-motion
36
37	### Time Sensitivity
38	- Avoid time limits unless absolutely essential
39	- If time limits exist, warn well before expiry
40	- Provide easy extension (one click, not multi-step)
41	- Allow at least 20 seconds per required decision
42	- Save progress automatically in timed contexts
43	- For session timeouts: save state and allow seamless return
44
45	## Assessment Questions
46
47	For each screen, ask:
48	1. What is the ONE thing the user should do here?
49	2. Is that one thing the most visually prominent element?
50	3. What on this screen competes for attention? Can it be removed or muted?
51	4. Can the user control interruptions (notifications, modals, autoplay)?
52	5. Is there artificial urgency that doesn't serve the user?
53
54	## Anti-Patterns to Flag
55
56	- Countdown timers on non-time-sensitive actions
57	- "Only 2 left!" urgency messaging
58	- Autoplay video or audio
59	- Multiple competing calls to action
60	- Chat widgets that pop up unsolicited
61	- Moving or animated advertisements near task areas
62	- Layout shifts that redirect attention

People who liked this also viewed

6 picks

Type