KNOWLEDGE NOTES

Knowledge Notes

Explore curated knowledge, course notes and methods, with their existing content and sources preserved.

This index lists complete English editions. Additional Chinese notes and bilingual updates remain available in the Chinese index.

350knowledge notes
Product Design & UX / NNGroup User Experience

NNGroup Accessibility / Barrier-Free Design (5 Articles · Three Key Distinctions in Inclusive Design · The Science of Dark Mode and 8 Major Pitfalls · Screen Reader User Research · 16 Guidelines for Telephone Voice Trees)

5 curated essential articles from the Nielsen Norman Group accessibility / barrier-free design knowledge base. Four core themes: ① Boundaries of three easily confused concepts — Accessibility (serves only users with disabilities, narrow and evaluable, anchored to WCAG standards) vs Universal Design (one design serves all people without variants, mostly used for physical environments) vs Inclusive Design (allows multiple design variants to cover differences in age, economy, region, language, race, ability, etc., the first choice for digital products because digital interface modification costs are low), with positive examples including Tinder's 30+ gender options, Pinterest's hairstyle filters, Sephora's age group filters, diverse illustrations from Airbnb/Atlassian, and unrestricted surname fields; ② Visual science of Dark Mode — Light mode (dark text on light background) outperforms across all dimensions of visual acuity, proofreading, and quick nighttime browsing for users with normal vision (2013 Ergonomics / 2017 MIT AgeLab / Human Factors: the smaller the font size, the greater the linear advantage of light mode); dark mode enables faster reading for users with cloudy ocular media such as cataracts, and saves 67% power on OLED screens at 100% brightness (only 14% power saving at 30% brightness, Purdue); long-term light mode reading is associated with myopia / choroidal thinning (2018 Nature Scientific Reports); default to light mode + provide a dark mode option + automatically follow system settings; ③ 8 major design pitfalls of dark mode — graphic transparency (use SVG/WEBP/PNG instead of JPG), depth created by shadows fails (switch to darkest color for base layer, lightest color for top layer), fonts that are too thin/too thick/insufficient contrast (WCAG minimum 4.5:1 for normal text, Coinbase's blue button at 4.59:1 barely meets compliance but is still hard to distinguish), high-saturation colors become invisible, inconsistency between dark apps and light web pages across channels, dividers disappear, floating components blend into the background, inverted QR codes cannot be scanned (foreground and background keep the same color across both modes); when to prioritize dark mode (long-duration use / frequent use / low-light environments / media-light content); ④ User research methods — word-of-mouth recruitment for Screen Reader users (contact blind organizations such as NFB to build user panels), in-person is better than remote, print research plans, dual-channel recording of five elements via document camera + screen recording, audio feedback for time announcements; as well as 16 usability guidelines for IVR telephone voice tree systems (auditory information accounts for only 11% of human information intake vs 83% for vision, IRS telephone trees reach as deep as 10 layers). Audience = product managers, terms explained in industry language, decision-oriented (when to use / how to choose / counterexamples).

Accessible DesignInclusive designDark ModeEnglish edition