information-density

Name: information-density
Author: Owl-Listener

82stars25forks

How to install information-density?

owl-listener/inclusive-design-skills/information-density

$npx -y skills add Owl-Listener/inclusive-design-skills --skill information-density

Installs into the current project.

Summary

Design interfaces where information density can be adjusted to suit different cognitive needs and preferences. Use when designing dashboards, data tables, feeds, inboxes, settings panels, or any interface with variable amounts of content. Triggers on: information density, too den

Files · 1

View on GitHub

SKILL.md

1	# Information Density
2
3	Design interfaces that let users control how much information they
4	see at once — because the right density for a power user scanning
5	200 rows is the wrong density for someone who needs space to process
6	each item.
7
8	## The Density Spectrum
9
10	### Compact
11	- Minimal spacing, smaller text, more items visible
12	- Suits: power users, data-heavy tasks, large screens
13	- Risks: overwhelming for cognitive disabilities, hard to tap on
14	touch devices, hard to scan for low vision
15
16	### Comfortable (Default)
17	- Moderate spacing, standard text size, balanced visibility
18	- Suits: most users in most contexts
19	- This should be the default — optimise for this first
20
21	### Spacious
22	- Generous spacing, larger text, fewer items visible
23	- Suits: cognitive disabilities, low vision, touch devices,
24	new users, stressful contexts
25	- Risks: requires more scrolling for experienced users
26
27	## Design Patterns
28
29	### Density Controls
30	- Offer 2–3 density options (compact, comfortable, spacious)
31	- Use clear labels — not just icon toggles
32	- Apply density change immediately (no page reload)
33	- Remember the preference across sessions
34	- Place the control near the content it affects
35
36	### What Changes With Density
37	- Vertical spacing between items
38	- Horizontal padding within items
39	- Font size (within accessible range — never below 0.875rem)
40	- Line height (within accessible range — never below 1.5 for body)
41	- Amount of metadata shown per item
42	- Thumbnail or preview sizes
43	- Number of columns in grid layouts
44
45	### What Should NOT Change With Density
46	- Content meaning — no information should be lost at any density
47	- Accessibility — every density level must meet WCAG requirements
48	- Interaction targets — minimum 44×44px on touch regardless of density
49	- Heading structure — structure stays consistent
50	- Keyboard navigation — tab order stays logical
51
52	### Density by Context
53	- Lists and feeds: control row height and visible metadata
54	- Data tables: control row padding and visible columns
55	- Dashboards: control card size and spacing
56	- Inboxes: control preview length and row height
57	- Calendars: control event detail visibility
58
59	## Defaults That Adapt
60
61	### Viewport-Based Defaults
62	- Large screens (1440px+): comfortable or compact
63	- Medium screens (768–1439px): comfortable
64	- Small screens (below 768px): comfortable or spacious
65	- Touch devices: never default to compact
66
67	### Preference-Based Defaults
68	- If system text size is increased: default to spacious
69	- If prefers-contrast is active: increase spacing slightly
70	- New users: default to comfortable
71	- Let users override all defaults
72
73	## Assessment Checklist
74
75	- [ ] At least two density options are available
76	- [ ] Default density is comfortable, not compact
77	- [ ] No information is lost at any density level
78	- [ ] Minimum touch targets (44×44px) are maintained at all densities
79	- [ ] Minimum text size (0.875rem) is maintained at all densities
80	- [ ] Minimum line height (1.5) is maintained at all densities
81	- [ ] Density preference is remembered across sessions
82	- [ ] Density adapts to viewport and system preferences

People who liked this also viewed

6 picks

Type

information-density

82stars25forks

View on GitHub

How to install information-density?

owl-listener/inclusive-design-skills/information-density

$npx -y skills add Owl-Listener/inclusive-design-skills --skill information-density

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Information Density
2
3	Design interfaces that let users control how much information they
4	see at once — because the right density for a power user scanning
5	200 rows is the wrong density for someone who needs space to process
6	each item.
7
8	## The Density Spectrum
9
10	### Compact
11	- Minimal spacing, smaller text, more items visible
12	- Suits: power users, data-heavy tasks, large screens
13	- Risks: overwhelming for cognitive disabilities, hard to tap on
14	touch devices, hard to scan for low vision
15
16	### Comfortable (Default)
17	- Moderate spacing, standard text size, balanced visibility
18	- Suits: most users in most contexts
19	- This should be the default — optimise for this first
20
21	### Spacious
22	- Generous spacing, larger text, fewer items visible
23	- Suits: cognitive disabilities, low vision, touch devices,
24	new users, stressful contexts
25	- Risks: requires more scrolling for experienced users
26
27	## Design Patterns
28
29	### Density Controls
30	- Offer 2–3 density options (compact, comfortable, spacious)
31	- Use clear labels — not just icon toggles
32	- Apply density change immediately (no page reload)
33	- Remember the preference across sessions
34	- Place the control near the content it affects
35
36	### What Changes With Density
37	- Vertical spacing between items
38	- Horizontal padding within items
39	- Font size (within accessible range — never below 0.875rem)
40	- Line height (within accessible range — never below 1.5 for body)
41	- Amount of metadata shown per item
42	- Thumbnail or preview sizes
43	- Number of columns in grid layouts
44
45	### What Should NOT Change With Density
46	- Content meaning — no information should be lost at any density
47	- Accessibility — every density level must meet WCAG requirements
48	- Interaction targets — minimum 44×44px on touch regardless of density
49	- Heading structure — structure stays consistent
50	- Keyboard navigation — tab order stays logical
51
52	### Density by Context
53	- Lists and feeds: control row height and visible metadata
54	- Data tables: control row padding and visible columns
55	- Dashboards: control card size and spacing
56	- Inboxes: control preview length and row height
57	- Calendars: control event detail visibility
58
59	## Defaults That Adapt
60
61	### Viewport-Based Defaults
62	- Large screens (1440px+): comfortable or compact
63	- Medium screens (768–1439px): comfortable
64	- Small screens (below 768px): comfortable or spacious
65	- Touch devices: never default to compact
66
67	### Preference-Based Defaults
68	- If system text size is increased: default to spacious
69	- If prefers-contrast is active: increase spacing slightly
70	- New users: default to comfortable
71	- Let users override all defaults
72
73	## Assessment Checklist
74
75	- [ ] At least two density options are available
76	- [ ] Default density is comfortable, not compact
77	- [ ] No information is lost at any density level
78	- [ ] Minimum touch targets (44×44px) are maintained at all densities
79	- [ ] Minimum text size (0.875rem) is maintained at all densities
80	- [ ] Minimum line height (1.5) is maintained at all densities
81	- [ ] Density preference is remembered across sessions
82	- [ ] Density adapts to viewport and system preferences

People who liked this also viewed

6 picks

Type