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 UX Research Methods Glossary (39 Bilingual Chinese-English Quick Reference Entries)

A quick reference bilingual Chinese-English table of 39 Nielsen Norman Group UX research method terms. Indexed by the categories 'Attitudinal vs Behavioral × Qualitative vs Quantitative + Context/Formative/Summative/Remote', each entry explains in one sentence what the method is and what questions it answers. Coverage includes: Attitudinal methods (Survey, User Interview, Focus Group, Concept Testing, Desirability Study) / Behavioral methods (Usability Testing, Analytics, Clickstream, Eyetracking, First-Click Test, Five-Second Test) / Information Architecture (Card Sorting, Tree Testing) / Experiments (A/B Test, Multivariate Test) / Context (Field Study, Contextual Inquiry, Diary Study, Ethnographic Study) / Prototypes (Paper Prototyping, Prototype Testing, Wizard of Oz, Participatory Design) / Moderation formats (Moderated/Unmoderated, Remote, Think-Aloud, Retrospective Think-Aloud) / Task Analysis, Benchmarking, Formative/Summative. Use this as a lookup handbook; for in-depth methodology, refer to the topic-specific wikis.

UX ResearchResearch methodsTerminology Quick ReferenceEnglish edition
Product Design & UX / NNGroup User Experience

NNGroup UX Strategy · Roadmap · Maps · Risk & Debt · Retrospective · Stakeholders (21 articles · UX Strategy/Three Stages of Complex Applications/CASTLE/Mood Board · Roadmap Roles & Timing + 5 Prioritization Methods + Pareto · Interactive Maps/Asset Mapping/Journey Map Creation Time 73.8h/Skill Map · 6-Step Design Risk + UX Debt + Breakage Tracking RAS · 4-Step Retrospective/7 Elements of Postmortem · Stakeholder Power-Interest Matrix + Interviews + Cross-Team + RACI + Scrum Responsibilities)

21 curated articles from Nielsen Norman Group's organization and design process subset, with the core thread being how UX teams turn strategy into executable work. ① UX Strategy: Three stages of complex application design (Understand/Explore/Materialize), CASTLE framework for work software evaluation (Cognitive load/Advanced feature usage/Satisfaction/Task efficiency/Learnability/Errors, addressing the failure of the HEART framework for mandatory enterprise software), Mood Board (4-5 keywords + visual collage to define visual direction). ② Roadmap: Roadmap vs project plan (strategic questions vs execution tasks), three layers of scope (product/domain/initiative), who builds it and when (annual planning is most common · 34% take over 1 week · monthly updates · three-column storytelling presentation), 5 prioritization methods (Impact-Effort Matrix/IDEO's Feasibility-Desirability-Viability/RICE/MoSCoW/Kano), Pareto 80/20 rule to focus on the critical 20%. ③ UX Maps: 7-8 steps for interactive maps in Figma, Asset Mapping (omnichannel consistency, low effort), journey map creation time (survey of 343 people · total 73.8h ≈ two weeks · research-first vs assumption-first, 62% are assumption-first · assumption-first does not save time), Skill Mapping (radar chart scored 1-5 to identify skill gaps and single points of failure). ④ Risk and Debt: 6-step design risk (risk = probability × impact · risk matrix · mitigation measures), 4-step UX Debt (acknowledge/track/communicate/repair · allocate story points each sprint), Track Breakage (data → finding → insight → recommendation value chain · RAS adoption rate formula = Adoption×0.5 + Fidelity×0.3 + Impact×0.2). ⑤ Retrospective: 4-step Retrospectives (what went well/what to improve/action plan · sailboat metaphor · psychological safety), 7 elements of Project Postmortems (right people 6-10/success criteria/psychological safety/root cause 5 Whys/actionable outputs/owner + deadline/2-3 page archive). ⑥ Stakeholders: Mendelow Power-Interest Matrix (manage closely/keep satisfied/keep informed/monitor + attitude dimension), Stakeholder Interviews (semi-structured · as early as possible · simple collation for ≤5 people, thematic analysis for >5 people), cross-research team collaboration (UX as the central data hub), RACI responsibility matrix, UX responsibilities in 5 Scrum events. Audience = product managers, terms explained in industry language, decision-oriented (when to use/how to choose/counterexamples).

UX StrategyRoadmapUX DebtEnglish edition
Product Design & UX / NNGroup User Experience

NNGroup UX Team Organization and Operations (DesignOps 5 Structures · Centralized/Embedded/Matrix Reporting · MUXI · RACI · Role Responsibilities · 30/60/90-Day Onboarding · UX Research Plan PET(S) · Design Thinking-Strong Teams · Team Decision Quality: Confirmation Bias/Groupthink/Ink Thinking · 6 Levels of UX Maturity and Top Challenges · Refine/Remodel/Rebuild)

13 curated articles from Nielsen Norman Group's "Managing UX Teams" organization and operations subset (two Groupthink articles merged, two RACI articles merged). Seven core pillars: ① Team structure and reporting — 5 DesignOps team structures (Scattered / Solitary / Specialized / Distributed / Elevated, not a maturity model, selected based on fit) + 3 design team structures from a 550-person survey (Centralized 29% / Decentralized 32% / Matrix 31%, no strong correlation between structure and business metrics) + reporting lines (primarily Product Management / C-suite, UX should not report to PMs) + recommended managed UX integration model MUXI (embedded in product teams for work + reporting only to UX leadership, with implementation guidance for startup/small/mid/large four tiers); ② Roles and responsibilities — RACI matrix (Responsible/Accountable/Consulted/Informed, single Accountable, use after retros/at Sprint kickoff, assign based on skills-history-time-interest, design as a process not a service); ③ Hiring and onboarding — successful onboarding + 30/60/90-day goals + pre-day-one preparation; ④ UX research planning — PET(S) principles (Purpose/Expectations/Test Setup/Script) + consent forms + templating; ⑤ Design thinking-strong teams — shared vocabulary/tangible outcomes/trust culture; ⑥ Team decision quality — Confirmation Bias (open-ended questions + Triangulation cross-source verification + fresh perspectives)/ Groupthink (Irving Janis' 4 symptoms + 5 scenario-based prevention measures + dot voting/blind voting)/ Ink Thinking (reflection groups complete 23% more tasks + dual-page decision prediction/reflection recommendations + resistance to hindsight bias); ⑦ Top challenges and transformation — 5 top challenges from a 126-person survey (UX misunderstood + impact hard to quantify + lack of stakeholder support + insufficient resources + market competition) + 6 levels of UX maturity (Absent/Limited/Emergent/Structured/Integrated/User-Driven) + three tiers of experience improvement strategies Refine/Remodel/Rebuild (low/medium/high investment, Casper/Netflix case studies). Audience = product managers, terms explained in context, decision-oriented (when to use/how to choose/counterexamples).

UX OperationsDesign teamTeam collaborationEnglish edition
Product Design & UX / NNGroup User Experience

NNGroup UX: Influencing Upward, Metrics, Strategic Tools, Roadmaps, Careers (13 Articles: Proving UX Value Upward — How to Sell UX "If…Then…" Formula, Rhetorical Triangle ethos/pathos/logos, UX & Marketing Collaboration / UX Metrics Workshop Aligning with Organizational Goals, UX Goals vs OKRs vs KPIs, CASTLE 6 Dimensions for Mandatory-Use Software / Stakeholder Analysis Power-Interest Matrix + Attitude, SWOT Four Quadrants / Roadmap 6 Steps, 5 Prioritization Methods, Journey Map Time Investment 73.8h / Career STAR, METEOR Interview, Portfolio)

13 curated articles from Nielsen Norman Group’s "Managing UX Teams" collection, covering upward influence, metrics, strategic tools, roadmaps, and individual careers (two duplicate versions of the Rhetorical Triangle article from the original source have been merged). Five core themes: ① Proving UX value to stakeholders — How to Sell UX uses the structure "If we build W (solution), then we will solve X (problem); to do this we need Y (resources), resulting in Z (business benefit)" to translate user language into business language (save $5 per call × 1000 calls = $5000, sign-up rate +10% → $2000/month, bounce rate -20% → $50,000 CLV); the Rhetorical Triangle of ethos (credibility)/logos (logic)/pathos (emotion) (Aristotle, case example: 60% checkout abandonment rate vs competitors’ 30%); similarities, tensions, and 4 collaboration strategies between UX and Marketing. ② UX metrics — workshop for aligning metrics with organizational goals (3–4 hours, three pitfalls: vanity metrics, siloed metrics, noise metrics; 8 metric flashcards: conversion rate, completion rate, task time, success rate, SUS, satisfaction, confidence, knowledge check); UX Goals (qualitative vision) vs OKRs (objective + quantified key results) vs KPIs (ongoing pulse, journey completion rate 25%→40%); the CASTLE framework purpose-built for mandatory work software (cognitive load, advanced feature usage, satisfaction, task efficiency, learnability, error rate), filling the gap where Google HEART fails in forced-use scenarios. ③ Strategic tools — stakeholder analysis (Mendelow Power-Interest Matrix four quadrants: Manage Closely / Keep Satisfied / Keep Informed / Monitor, plus attitude dimension: current vs desired); SWOT Strengths/Weaknesses/Opportunities/Threats (internal/external × positive/negative, HiPPO bias, STEEPLE extension). ④ Roadmaps — 6 steps (define goals → gather inputs → create themes (beneficiaries/needs/business goals) → prioritize → visualize → update regularly); 5 prioritization methods (Impact-Effort Matrix: quick wins/big bets/money pits/fill-ins; Desirability-Feasibility-Viability scorecard from IDEO; RICE = R×I×C÷E from Intercom; MoSCoW; Kano); journey map time investment survey (343 respondents, average 73.8 hours ≈ two weeks, 87 hours at large companies vs 64.9 hours at small companies). ⑤ Individual careers — STAR for interviews (behavioral questions, used by 80% of teams) and METEOR (situational questions, used by 63%); do’s and don’ts for portfolio case studies. Audience: non-technical product managers; all jargon explained in context, decision-oriented (when to use, how to choose, counterexamples), all numeric values preserved.

UX StrategyStakeholdersCareer developmentEnglish edition
Product Design & UX / NNGroup User Experience

NNGroup Visual Design Principles: Gestalt Grouping, Visual Hierarchy, Typography, Color, Imagery (19 articles · Five core visual principles / Gestalt proximity-similarity-closure-common region / Visual hierarchy-grid-golden ratio / Typography terminology-pairing-readable typefaces / 60-30-10 color rule / Picture superiority effect-photography-imagery / Aesthetic-usability effect / Glossary)

19 curated core articles from the Nielsen Norman Group visual design principles subset. One core thread breaks "looking good" down into "working well": ① The five overarching visual principles (Scale, with a maximum of 3 size levels; Visual Hierarchy; Balance, covering symmetrical, asymmetrical and radial types; Contrast; Gestalt) form the master framework. ② The four Gestalt grouping principles: Proximity (the strongest grouping cue; split a 12-field form into 3 groups of 4), Similarity (color > shape > size for conveying grouping, with counterexamples of misleading similarity), Closure (the brain fills in missing parts; crop carousels by 40% to imply more content, the illusion of completeness), Common Region (containers/borders/background color > proximity + similarity, the false bottom trap). ③ Implementing visual hierarchy: color contrast (2 primary, 2 secondary, no more than 3 contrast variations), scale (3 levels, no more than 2 large elements), grouping (proximity + common region), the Squint Test; grids (Columns: 12 on desktop, 4 on mobile; Gutters; Margins; 8px grid; column grid/modular grid/hierarchical grid; 1128px 12-column layout with 72px column width and 24px gutter); golden ratio φ≈1.618 (applied to font size/line height/image cropping/two-column layouts). ④ Typography: 30+ entry glossary (baseline/x-height/kerning/leading/ligatures/widows), 6 typeface categories for pairing (serif/sans-serif/slab serif/script/decorative/monospace) plus pairing decorative typefaces with neutral ones, using multiple weights of a single typeface, optimal reading typefaces (352 participants tested 16 typefaces; the fastest was 35% faster than the slowest; reading speed drops 1.5 WPM per year, a 11% decline over 20 years; Garamond was suitable for only 48% of readers; there is no universal best typeface). ⑤ Color (primary/secondary/tertiary colors on the color wheel, 5 harmony schemes, 60-30-10 rule, limit to 3 colors, color meanings are not globally universal). ⑥ Imagery (Picture-Superiority Effect; photos should carry information rather than serve as decoration; 4 types of imagery; lists using color + icons are 37% faster to process than plain text; visual signifiers). ⑦ Aesthetic-usability effect (attractive designs are perceived as easier to use; 1995 Kurosu study of 26 ATMs; it masks minor issues but cannot rescue major flaws, and interferes with usability testing). Intended audience: product managers; terms are explained in industry language, content is decision-oriented (when to use/how to choose/counterexamples), all numeric values are retained.

Visual designTypesettingColor theoryEnglish edition
Product Design & UX / NNGroup User Experience

NNGroup Visual Reference Gallery Index (Chart 80 + UX Research Visualization Examples)

Index pointers to two pure image asset libraries under NNGroup Topics. Chart 80 = 83 chart design examples (for selecting chart types / data visualization reference). UX Research Visualization = 178 UX research outcome visualization examples (journey maps / empathy maps / affinity diagrams / research report layouts, etc.) + 3 PDF + 1 pptx + 1 xlsx templates. These two folders contain no text notes; they are "copy-ready" visual references collected by Will, intended for viewing images only. This wiki does not reproduce the images (the image volume is large, so they are excluded via gitignore and kept locally); it only records what they are, where they are in sources, and when to refer to them. For supporting chart selection / data visualization methodology, see [[nngroup-patterns-feedback-dialogs]] (selecting chart types) and [[nngroup-visual-design-principles]].

Data VisualizationUX ResearchChart designEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns)

The complete curated notes for Adam Wathan & Steve Schoger's *Refactoring UI* (50+ actionable, copy-ready tips). Core stance: Good-looking UI does not rely on artistic talent, but on a set of concrete rules you can memorize — replace "going by feel" with "checking a checklist". Eight main chapters: ① Starting mindset (start from function not layout · lead with black, white and gray · limit options · define systems in advance, turn every detail you agonize over repeatedly into a rule). ② Visual Hierarchy (make important elements pop: rely not just on font size, but on 3 tiers of font weight + color; de-emphasize secondary content instead of emphasizing it; avoid labels whenever possible; classify buttons into 3 levels: primary/secondary/tertiary, dangerous actions do not need to be big and red; visual hierarchy ≠ HTML document hierarchy). ③ Whitespace and spacing (start with too much whitespace then trim back · spacing/size scales need at least a 25% difference · inter-group spacing > intra-group spacing to prevent ambiguity · grids are overrated, fixed widths are often better · do not scale proportionally · you do not need to fill the screen). ④ Color (use HSL not hex · a complete palette needs 8–10 shades of gray + 1–2 primary colors each with 9 steps + semantic auxiliary colors · predefine color steps 100–900 · grays can carry warm or cool undertones · increase saturation when lightening or darkening · shift hue when lightening to avoid washed-out gray · meet WCAG 4.5:1/3:1 contrast ratios and reverse light/dark direction to avoid oversaturation · do not rely on color alone, pair with icons/arrows). ⑤ Typography (hand-pick a type scale instead of using a formula · line length 45–75 characters · line height moves inversely with width and font size · align to baselines, do not center · left-align long text · links do not all need color · add letter spacing for all caps · use px/rem not em). ⑥ Depth (light comes from above → raised elements are bright on top with shadow below / recessed elements have shadow on top · use two layers of shadows: large soft + small sharp · 5 shadow tiers represent elevation · even flat design can create depth with light/dark contrast, solid-color shadows, and overlapping elements). ⑦ Images (use good photos, do not settle · add overlays/glows to background images to guarantee text contrast · do not enlarge small icons, do not shrink screenshots · use fixed display frames + cover for user-uploaded images). ⑧ Finishing touches (use borders sparingly, replace them with shadows/background colors/spacing · a colored top border instantly elevates polish · refine backgrounds · pay attention to empty states · break out of component conventions). Plus 3 before/after practical teardowns (content page / complex form / data dashboard). Audience: PMs building prototypes; jargon is explained inline, every tip includes Why + do/don't, all numeric values are preserved.

UI DesignVisual hierarchyDesign systemEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

Sajid Code UI Design in Practice (Copy Great Work > Originality / Typography Accounts for 80% of UI / Spacing and Color Selection Methods / Fixing Boring UI)

Distilled notes from Sajid's UI video tutorial (from the Will's Design Notes series), covering 7 topics across 8 sections: ① Only newbies obsess over building beautiful websites (design = solving problems, not art; check top sites on Semrush, they are all simple or even boring; five pillars = layout/typography/color/images/content) ② Originality is overrated (flat design/skeuomorphism/hamburger menu/pull-to-refresh/like button/Google/Facebook/Uber/Airbnb are all remixes; innovation lies in execution, not first invention) ③ Typography accounts for 80% of UI (remove typography styling and the interface falls apart; you only need 3 font sizes + font weights + 3 levels of lightness; use em for line-height to get natural breathing room) ④ Five rules for designing top-tier websites (design less/law of similarity and law of proximity/add more spacing then remove it/design systems/hierarchy is everything) ⑤ Fix boring UI (layer same-hue colors with different lightness + shadows; this gives the highest return from ordinary to good) ⑥ Spacing selection method (anchor font size with rem, tight inside groups and loose outside groups, button vertical padding < horizontal padding, reduce from large values downward) ⑦ HSL color palette (only adjust L lightness to create harmonious color scales; light comes from above so top is bright and bottom is dark; dark mode uses 3 lightness layers at 0/5/10%) ⑧ Motion Contract for web animation (translate perceptual motion effects into 6-dimensional parameterized constraints to feed to AI/developers). Sajid's unique arguments that distinguish him from Refactoring UI: three core mantras of 'function > beauty', 'copy mature work > originality', 'typography accounts for 80%' + treating UI as a minimal variable system (4 typography variables + 3 gray scales are enough) + the Motion Contract motion delivery method. Target readers: PMs making prototypes; jargon is explained in-industry, each section comes with Why + numerical values + do/don't. Division of labor with refactoring-ui: that article is a full handbook of 50+ tips, this article highlights Sajid's core mantras and positions plus his two exclusive tricks of motion/lightness layering; overlapping details on spacing/color/typography point to refactoring-ui and are not rewritten.

UI DesignTypesettingVisual hierarchyEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

Shape of AI AI Product UX Pattern Library (Seven Major Categories: Wayfinders/Inputs/Tuners/Identifiers/Governors/Trust/Dark Patterns + Design Guidelines)

A self-contained bilingual essence of Emily Campbell’s *Shape of AI* AI product UX pattern library (all 49 .md files fully read), reorganized into 36 specific patterns across 7 categories plus 1 set of overarching design guidelines, following a queryable structure of “Pattern Name → What Problem It Solves → How to Use It → Examples”. The seven categories are: ① Wayfinders (4 patterns: Follow up / Nudges / Suggestions / Templates) — solves the problem of new users not knowing how to use a blank input box; ② Inputs (8 patterns: Open input / Auto Fill / Inline action / Madlibs / Remix-Blend / Summary / Synthesis / Token layering) — feeds user intent and context to the AI; ③ Tuners (8 patterns: Filters / Parameters / Inpainting / Model management / Personal voice / Primary sources / References RAG / Workflows) — lets users fine-tune or restructure results; ④ Identifiers (6 patterns: Color scheme purple-green / Symbols icons ✨🔮🤖 / Name / Personality / Disclosure / Initial CTA) — distinguishes AI content from human content; ⑤ Governors (9 patterns: Citations / Controls stop/continue / Footprints / Prompt transparency / Regenerate / Sample response / Show the work / Token transparency / Variations) — preserves user agency and explainability while the AI works; ⑥ Trust indicators (3 patterns: Incognito / Memory management / Watermarks C2PA); ⑦ Dark matte hidden patterns (3 patterns: Data Ownership / Caveat disclaimer buck-passing / Rating) — gray-area designs that are questionable or erode trust. For PMs building AI chat or interactive narrative products: this is a quick reference manual for “which pattern to look up when you encounter interaction problem X next time”, with emphasis on Why / When to use / Counterexamples. It complements nngroup-ai-ux-design — the latter offers NNGroup’s conversational interface research perspective (6 types of conversation / no fluff / anthropomorphism / sycophancy), while this piece presents Shape of AI’s perspective as a “reusable UI pattern parts library”.

AI UXInteraction PatternsTrust DesignEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

The 5 Core Principles of the Duolingo Playbook + Green Machine Work Method (Take the Long View / Raise the Bar / Ship It / Show Don't Tell / Make It Fun + Green Machine)

Key takeaways from Duolingo's official culture and product methodology playbook (refined over 14 years of trial and error, signed by Luis von Ahn). Its core is not a set of value slogans, but a transferable operating system for "how to build products": ① Take the Long View — priority order of retention > growth > revenue, betting on technology (machine-generated speech started rough then improved), long-term hiring (better to leave roles open than hire the wrong person, generalists, long average tenure), treating mascot Duo as a competitive moat, enforcing retention thresholds for notifications and ads, and the 2022 switch to the linear Path that sacrificed short-term DAU for actual learning outcomes; ② Raise the Bar — excellence is the baseline not the goal, four product standards (Useful / Intuitive / Delightful / Polished), build V1 not MVP, shake-to-report during dogfooding, be hard on work easy on people (focus on what not who), clear individual Ownership; ③ Ship It — weekly updates plus hundreds of parallel experiments, Clock Speed to shorten interval at every step, Ruthless Prioritization to cut low-impact items, the "99 bad ideas" culture, using mission to resolve the "good and fast" contradiction (meet the bar first then prioritize), using product review PR (borrowed from code review) to quantify process; ④ Show Don't Tell — Numbers Are the Story, TL;DR = conclusion + evidence + action, no PPT for prototypes, good products need no explanation, Disagree and Commit, Trust Battery is charged by results; ⑤ Make It Fun — must be entertaining to compete for attention with TikTok/IG, Committing to the Bit by taking a gag all the way, Duo's dual personality, viral April Fools' stunts, 5-second Super Bowl ad. Plus the 6-step Green Machine work method (assign people → define success → set guardrails → build + feedback loop → urgent high-quality execution → scale what works, stop what doesn't). Target audience: PMs building gamified/AI interactive narrative products; each section includes Why + real Duolingo cases + transferable insights for gamified AI products.

Product MethodsRetentionTeam cultureEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

Typography and Typeface Knowledge (Google Fonts Knowledge: Type Classification & Anatomy / Type Selection & Pairing / Legibility & Accessibility / CJK Multilingual Script / Glossary)

An in-depth Chinese-English typography reference based on Google Fonts' "Knowledge" column, which breaks down typefaces from "looks good by feel" into actionable judgment that PMs can follow when selecting type and setting type. It covers eight main sections: ① Type anatomy and vertical metrics (baseline / x-height / ascenders & descenders / em square · why baselines shift when you change typefaces). ② Type classification (genre: serif / sans serif / slab serif / monospaced / script / display · historical classification · seven Chinese type categories: Song, Kai, Hei, etc. · the three-layer Skeleton-Flesh-Skin type matrix). ③ Type selection methodology (4 major checklists: fit for purpose + design completeness + reliable files + usage license · emotional considerations · selection by project scale / text length / font size · optical sizes · weight and style · avoid fake bold and fake italic). ④ Type pairing (4 reasons why you need a second typeface · family metaphor: brothers / cousins / distant relatives · serif paired with sans serif is the safest choice · differences should be clear but not too distant). ⑤ Legibility and accessibility (legibility vs readability · lookalike characters Il1 / bdpq mirroring · open counters · WCAG contrast ratios 4.5:1 / 3:1 / AAA 7:1 · body text ≥16px · 8% of men have color vision deficiency · Lexend / Atkinson Hyperlegible). ⑥ Fully retained practical typography rules of thumb (line height 115–150% · line length 45–75 characters / 15–20 for Chinese · tracking: tighten for large sizes, loosen for small sizes · kerning almost never needs manual adjustment · widows and orphans · reverse text weight · techniques for breaking the rules). ⑦ CJK and multilingual script (full-width monospacing · no baseline, relies on visual center · no true italic · Chinese punctuation · Japanese three-script system + Tsume). ⑧ A quick-reference glossary of 30+ terms. Target audience: non-technical PMs, with in-line explanations of jargon, and Why / When to use / Counterexamples for each section. Division of labor with nngroup-visual-design-principles (an overview of visual design principles, with only one section on typography) and refactoring-ui (UI rules for non-designers, covering type scale / line length): this piece is a dedicated in-depth typography reference, with more detailed numerical values and glyph feature descriptions.

TypographyReadabilityAccessibilityEnglish edition
Product Design & UX / AI Products and Assisted Design

UX Interaction Paradigms in the AI Era (7 Types: AI Embedded in Traditional UI / Agentive / Conversational / Human-in-the-Loop / Hyper-Personalization / Multi-Modal / Trends)

A "panoramic map of AI interaction paradigms" for AI product PMs, reorganizing the will-design-notes design resource section into 7 paradigms: ① Conversational (linear Q&A, the ChatGPT paradigm, the starting point of the AI revolution) ② AI in old UI (attaching AI to familiar interfaces such as Word/Notion/Figma/Linear, including 6 sub-types: natural language search / referencing to build trust / context-bound preset buttons / flexible batch document extraction / infinite canvas / non-linear conversation) ③ Agentive UX (AI works silently in the background, including 4 sub-types: you complete me intelligent completion / you surprise me proactive prediction / you exist invisible learning / you assist me returnable control) ④ Human in the loop (highlighted text / highlighted visuals / collaborate with me / real-time generation while thinking, AI acts as a partner not a domineering boss) ⑤ Hyper personalization (aiOS conversational operating system / AI as a product standalone hardware Rabbit R1 · Humane Pin) ⑥ Multi-modal (6 natural inputs: shoot / write / see / listen / draw / move, replacing precise prompts) ⑦ Trending (the interface evolution history from CLI→GUI→conversational→intent-driven + 6 major macro trends). Each paradigm includes Why it works + real product cases + design key points + when to use / counterexamples. Target readers = non-technical PMs, with in-line explanations of jargon and real-life analogies. It is complementary to [[shape-of-ai-patterns]] (pattern library, finer-grained reusable components) and [[nngroup-ai-ux-design]] (deep dive into conversational interfaces + empirical research); this article is at the "paradigm classification skeleton" level, and overlapping content is cross-referenced rather than rewritten.

AI InteractionAgent UXHuman-Machine CollaborationEnglish edition
Product Design & UX / Other Product, Design and Learning Materials

UX Metrics and ROI (HEART/SUS/NPS… Metric System + Methods to Convert UX Value into Monetary Terms + Reporting Talking Points)

Highlights from Will's Design Notes *UX Metrics and ROI* (based on the NN/g research report of the same name + a 5-edition case library). It focuses on the three things PMs need most: ① Metric system checklist — what each UX metric (task completion rate / time on task / success rate / conversion rate / retention / CLV / bounce rate…) looks like, how to calculate it, when to use it, and what its limitations are; how to interpret standardized questionnaires SUS (System Usability Scale, full score 100), NPS (Net Promoter Score = %Promoters − %Detractors), and CSAT; the five dimensions of Google's HEART framework (Happiness / Engagement / Adoption / Retention / Task success) as a scaffold for metric selection; what questions each of the four major data sources (surveys / quantitative usability testing / analytics tools / customer service and marketing data) answers. ② UX→ROI conversion methodology — improvement score formula (positive metric = post-change ÷ pre-change − 1; negative metric = pre-change ÷ post-change − 1), three-step method (select KPI → convert UX metrics to KPI by unit → report responsibly), how to convert to monetary value for four types of business models (e-commerce by sales volume / content sites by PV-based advertising / intranets by person-day wages / sites with clear target actions by conversion × average order value), retaining all exact figures including health insurance site saving 1.5 million yuan/year, HR tool saving $6,112 per month / 60% of work hours, financial subscription trial increasing monthly revenue by $20,000 from 76 to 187, and intranet ROI reaching 8/20/50 times the cost for companies with 1,000/10,000/100,000 employees; also presents Athenahealth's chained correlation model of "usability → satisfaction → willingness to recommend → retention and paid referrals", teaching PMs to connect soft metrics to revenue KPIs using statistical correlation. ③ Expectation management and reporting talking points — the "narrowing improvement" pattern that UX redesigns deliver an average 75% lift (95% confidence interval 8%~104%), and that this figure shrank from 247% to 75% from 2006 to 2020 (p=0.017), broken down by metric category (effectiveness 131% / efficiency 104% / adoption & retention 93% / engagement 87% / satisfaction 19%); 5 iron rules for reporting to bosses (estimates are not financial reports / compare against R&D costs / tell stories instead of piling tables / be transparent about assumptions / extend the timeline to 2–5 years) plus counterexamples. It complements *nngroup-analytics-metrics*: that piece covers NN/g's "analytics and measurement perspective" (vanity metrics / confidence intervals / statistical significance / sampling / triangulation / four-step ROI principle), while this piece is a "complete metric system checklist + improvement score math + multi-business-model ROI conversion recipes + empirical baseline magnitude data + reporting talking points"; overlapping content (four-step ROI / HEART / confidence intervals) is only cross-referenced and not rewritten. Target audience: product managers.

UX MetricsUser researchROIEnglish edition
Product Design & UX / NNGroup User Experience

What’s the Difference Between UX, UI, and Usability? An Introduction to User Research and Design Tradeoffs

This article organizes foundational UX concepts from the Nielsen Norman Group, distinguishes user experience, user interface, and usability, explains how to select interviews, behavioral observation, and testing based on the problem, and covers how to choose between solutions using evidence.

UX FundamentalsUsabilityHuman-Centered DesignEnglish edition
Product Design & UX / AI Products and Assisted Design

will-ai-note Getting Started Guide (How beginners can start using this AI-assisted design material pack + route navigation)

Beginner entry page for Will (Xiaohongshu UX job search blogger)'s "AI-Assisted Design" materials. Distills content exclusive to the Let's Start section: ① 6 must-read usage tips before viewing the materials (the product only serves portfolios/interviews, generate AI images in English first then switch to Chinese, download Prompts instead of opening them directly, which parts of the four modules to read, choose Claude between the two tools); ② 5 core capability pillars of the full material set (portfolio narrative / detailed content generation / Vibe Coding / AI capability system / Agent+Skill+MCP) + 3 ready-made combination recipes (end-to-end portfolio from 0 to 1 / quick experience validation); ③ The resume-tailoring skill that comes even earlier than PitchPro (one tailored resume per job posting). Bot usage mindsets, interview question banks, and creative project explanation prompts are all fully overlapping, and point to [[ai-tools-bot-interview]] without rewriting. Targeted at non-technical PMs, with emphasis on Why and onboarding routes.

AI-Assisted DesignUX WorkflowPortfolioEnglish edition
Product Design & UX / AI Products and Assisted Design

Will's AI Bot Usage Principles + Common UX Interview Questions + Creative Project Explanation Prompts

Distilled from the Tools section of Will (a Xiaohongshu UX job search blogger). Three reusable assets: ① Transferable principles for writing portfolio copy/interview scripts with custom GPTs like PitchPro — how to feed context (screenshots + JD + goals), how to drill down into details layer by layer from the big framework, how to use a notepad to save content to avoid full rewrites, how to reverse-engineer data and solutions from UI screenshots, and the most taboo vague instructions; ② 60+ common UX/design interview questions grouped into 8 categories (opening/project background/value metrics/design approach/results/retrospective/cognitive methodology/management) + how to answer each category and the interviewer's real intent; ③ 10 sets of creative narrative prompts to tell projects as stories (documentary/user one-take/suspense/battle/dual-timeline/failure reversal/flashback, etc.). The interview questions complement the presentation templates/STAR method in google-ux-portfolio-career — that piece covers structure, while this one provides the question bank and scripts. Targeted at non-technical PMs, with emphasis on Why and reusable templates.

UX InterviewsPortfolioDesign expressionEnglish edition
Product Design & UX / AI Products and Assisted Design

Will's AI-Assisted UX Workflow Overview (Full A-Discover→F-Deliver Phase Skeleton + Navigation for 12 Sister Wiki Pages)

An "AI-empowered UX workflow path" that strings the full process from "problem discovery to delivery and presentation" into a reusable thinking framework. The main thread runs A-Discover & Research → B-Define & Insight → C-Ideate → D-Experience Design → (E-Validate) → F-Deliver; for each phase, it first lays out "what to do" and then matches it with "how to do it with AI". This article is the entry/table of contents page for the will-ai-note series: it explains the core mindset of the full workflow (why phases are divided this way, what role AI plays in each phase), and provides navigation to each phase's wiki + tool-focused wiki pages, as well as its relationship to the google-ux craft series on "how to do UX" — this series is about "doing UX with AI".

AI-Assisted UXDesign processWorkflowsEnglish edition
Product Design & UX / Yitang Course Notes

Yitang / Complete Demand Analysis System (4 Stages: Decompose-Deduce-Evaluate-Calculate + JTBD)

Complete notes for the 4-session practical course of the "Demand Analysis" module, a required entrepreneurship course from Yitang 01, plus a 1-page template. Lectured by Truman. The in-depth operating system for the first step "Demand" of Yitang's Five-Step Method: the four-character formula "Decompose-Deduce-Evaluate-Calculate" plus six proficiency levels. Covers ① Peel-and-decompose (Decompose) ② Scenario deduction (Deduce, JTBD framework) ③ Qualitative evaluation (Evaluate, beginner/intermediate/advanced) ④ Calculate the ceiling (Calculate, commercial space sizing). Supporting candy: 1-page template "From Task Insight to In-Depth Demand Deduction" (L1-L4 canvas, AI collaboration version)

Requirements AnalysisJTBDUser scenariosEnglish edition
Product Design & UX / Yitang Course Notes

Yitang / Complete System of Product Core + Unit Model (Steps 2+3 of the Five-Step Method)

Complete notes for Yitang 01 Entrepreneurship Required Course: "Product Core" (3 docx files) + "Unit Model" (4 docx files + 1 xlsx file). Lectured by Truman. Covers Step 2 of the Five-Step Method: "Solution / Product Core" (L3 Stripping / L4 Evaluation / L5 Iteration / L6 Full Application) + Step 3: "Business Model / Unit Model" (L3 Selection / L4 Complete Construction / L5 Finding Accurate Baseline Values / L6 Economies of Scale). Covers the 4 key terms of product core (user / willing to choose / minimum / solution) + 3 principles (tool / layered / precision), the 6 proficiency levels of unit models, 15 classic blunders, the top ten unit models, and L6 Economies of Scale (the most complex diagram at Yitang in 2021). Includes candy: Unit Model Calculation Excel Template

Product CoreProduct ModelsBusiness modelsEnglish edition
Product Design & UX / Yitang Course Notes

Yitang / Wang Huiwen's Tsinghua Product Course: Complete 66-Page Notes

Complete notes of 6 lectures plus personal talks from Wang Huiwen (Meituan No.2, co-founder) for the *Internet Product Management* course at Tsinghua University, September–October 2020. An honorary textbook of Yitang, serving as supporting in-depth reading for Endgame Prediction [[yitang-business-prediction-deep]]. Covers 3 entrepreneurship stories (Xiaonei / π-shaped talent / core competitiveness) + 3 categories of internet businesses (pure online / O2O / automation) + 5 types of unsuccessful products (Nokia / MPMan / Kik / Smart ABC / IE) + 5 successful PMs (Neil McElroy / Steve Jobs / Zhang Xiaolong / Pichai) + 5 must-read books (*The PayPal Wars* / *The Tipping Point* / *The Lean Startup* / *The Innovator's Dilemma* / *The Philosophy of Retailing*) + ABC categories of economies of scale + network effects + STP theory + 4P marketing + diffusion of innovations + high-frequency beating low-frequency + incremental vs stock markets + entry timing + Porter's Five Forces + Porter's three generic competitive strategies + Meituan platform strategy + 4 major traits of demand + supply and demand

Product ManagementNetwork effectsMarket strategyEnglish edition