Orientation + free internal links. Add JSON-LD BreadcrumbList.
/USABILITY-SYSTEM
50 UX components
A shopping list for improving the site — from table-stakes navigation to experiments worth A/B testing. Each card: what it is, and where it earns its keep.
BASIC 01–18COMMON 19–38EXPERIMENTAL 39–50MOBILE BONUS 51–56
Basic
Crawlable numbered pages beat infinite scroll for SEO.
Header-level, always visible. The #1 path on index sites.
Sections of one synth page without scroll fatigue.
Native details/summary. FAQ blocks = FAQ rich results.
Jargon hover-help. Keeps spec tables terse.
Transient confirmation, bottom-left, 3s auto-dismiss.
Native dialog element. Reserve for real interruptions.
Keep to one level; deep menus hide the index.
Status context on data. Tinted fills, same ink border.
Scannable attributes; each one links to a filter page.
Completeness cues build trust in a young index.
Perceived speed while search results load.
Dead ends become contribution funnels.
Hidden until focused; first tab stop on every page.
Appears after 2 screens of scroll on long spec pages.
Validate on blur, not on every keystroke.
3px olive outline, 2px offset — everywhere, no exceptions.
Common
Typo-tolerant, ranked by page traffic. Arrow-key nav.
Show result counts; canonicalize filter URLs for SEO.
Active filters visible and removable in one click.
Click headers to sort; show the active column + direction.
X vs Y pages are an SEO goldmine; auto-generate from specs.
Sticky sidebar, highlights the section in view.
Thin bar pinned under the header on articles.
Rule-based (brand, era, type) — the internal-link engine.
End of articles + sidebar. Never a popup on first visit.
AggregateRating JSON-LD → stars in search results.
Copy-link outperforms social buttons on reference sites.
localStorage first; account sync later. Drives return visits.
Footer strip; research sessions span many tabs.
Keeps the footer reachable, unlike infinite scroll.
Table vs card view for browse pages; remember the choice.
Anchor bar that docks under the header on scroll.
Required once ads ship. Small corner card, equal-weight options.
Recover dead SEO traffic with search + popular pages.
Freshness signal for users and crawlers alike.
Foot of every spec sheet; crowdsourced accuracy.
Experimental
Wordmark + search + menu; nav slides in from the right.
One synth, one story, one classifieds gem. Every Friday.
Short licensed clips on every complete spec page.
Used-market ranges with a last-checked stamp.
Deep links to scanned manuals with provenance.
Track lists that cite the actual session, not folklore.
Behringer and Boutique next to the original, labelled.
CC maps as first-class spec data.
What drifts, what to check, what to leave alone.
Curated listings, never scraped marketplace junk.
Card vs table density, remembered per visitor.
One page, no ads, for the bench.
Mobile bonus
Thumb-reach nav for the four core destinations.
Facets move into a sheet; result count updates live on the button.
Chips and cards scroll sideways with scroll-snap; bleed the edge.
Wide tables become key/value rows; comparisons swipe between synths.
One dismissible anchor; never stack it with the tab bar.