KNOWLEDGE NOTESKnowledge 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 notesThe essence of 19 Nielsen Norman Group UX Slogans, which compress decades of accumulated usability common sense into pithy lines you can stick at your workstation. They are clustered into 5 major themes: ① Don’t treat yourself as the user — You Are Not the User / Design for Them, Not for You / UX Is People / Users Aren't Lazy, They're Efficient. ② Less is more (restraint) — Keep It Simple (guard against Featuritis) / Less Is More (focus on core tasks and set a value threshold) / More Choices, More Trouble (choice overload) / Make It Easy (proactively iterate rather than passively exercise restraint, contrasting the “keep” vs “make” in Keep It Simple). ③ Communication is design — Communication, Not Decoration / You Can't Impose Joy (counterexamples: splash screens/animations) / Brevity is Brilliance (cut web copy in half) / This Is Too Easy to Understand, Said No One Ever (even experts prefer clarity) / Clarify, Don't Mystify (Information Scent · anti-clickbait). ④ Understand the problem first — Why Beats What (use Think-Aloud to find root causes) / Stop Solutioneering (list unknowns first, then do research). ⑤ Replace guesswork with evidence — If You're Not Checking, You're Guessing (100% vs 25% empirical evidence from forums) / Show Me the Data (quantitative A/B testing + qualitative interviews) / UX Researchers, We Like to Watch (behavior outperforms self-report · Margaret Mead/Descartes) / It Depends (the spectrum between best practices and context). Target readers = product managers; jargon is explained inline; each cluster comes with a Why explanation + counterexamples.
Will's engineering handbook for the Define & Insight phase of the "AI-Assisted UX Workflow": turning a pile of interviews/data into "design-guiding insights" and communicating them clearly. It covers 6 tasks that can be outsourced to AI — ① Batch extracting insights from user research interview transcripts (framework of pain points + mental models + edge cases + success criteria, with quantifiable citations) ② Generating "insight cards" from a single core question ③ Automatically selecting charts for user research reports + outputting ECharts/HTML code (judgment logic of <3 seconds to read the chart, one conclusion per chart) ④ PM/UX quick reference for selecting among 80 chart types (grouped into 6 families: comparison/correlation/part-to-whole/time/distribution/geography) ⑤ Running AI eye-tracking heatmaps on uploaded UI screenshots (four scanning patterns: F-pattern/spotted/layer-cake/commitment) ⑥ 6-dimension expert review scoring for multiple UI solutions (primary/secondary/edge users + business + accessibility + scalability, final score = starting score − deductions). It also includes "3 criteria for strong insights + causal sentence templates", the "sample → behavior → commonality → insight" reporting structure, and how data and user research divide work across 4 project types: growth/fix/validation/exploration. It complements google-ux-research: that piece covers the manual craft of interviews/usability testing/affinity diagrams, while this piece covers the prompts and judgment rules for accelerating the same set of work with AI. The target readers are PMs building AI products, and each section comes with a Why explanation + reusable prompt skeletons.
All AI techniques for the Deliver phase of Will's "AI-Assisted UX Workflow". The real goal of this phase is not to hand off specs to developers, but to distill the project into a presentable portfolio page plus interview talking points. Therefore, all AI techniques center on two things: "rearranging information into a story-telling visual/layout" and "clearly explaining the human-AI collaboration process". Coverage includes: ① Generating multiple layout options (1:1 text extraction from old layout → content direction exploration → direction selection → final image output) ② Optimizing layouts / migrating visual styles (style transfer from reference images, only changing the skin without altering the bones) ③ Layout-to-code & Figma mockup (single-page image → restoration prompt → HTML → reverse-engineer editable source file via Figma Make) ④ Infographic semantic extraction + visual redraw (strip visuals to retain only logic → 5 styling directions → wireframe → apply style) ⑤ Metric-driven design review using the will-ux-metric-teardown skill (reverse-engineer business model/North Star metric, identify issues by Tier 1-3 priority) ⑥ Showcasing AI capabilities and value in projects (for each UX phase, output "what AI did / interview talking points / what evidence to put in PPT"). Each section provides reusable prompt skeletons + Why reasoning + counterexamples. Interpersonal collaboration rules for design review meetings (roles / receiving feedback / turning feedback into actions) are covered in [[google-ux-testing-iteration]]; this article focuses specifically on prompts and workflows for using AI to run layout generation/code conversion/metric review/value articulation.
This is the prompt and workflow handbook for the first phase (Discover & Research) of Will’s "AI-Assisted UX Workflow". It covers 7 tasks in the discovery and research phase that can be accelerated by AI: ① Distill scattered project background into a professional "Project Background (PB) statement" ② Derive business goals × experience goals × plain-language driving logic from the background ③ Locate experience problems on old interfaces and quantify their metric impact ④ Rewrite vague problems into actionable problem statements + problem overview diagrams ⑤ Use MVP hypothesis/metric scripts for interview verbal delivery ⑥ Generate a fully structured product concept user research report (including simulated data + risk and objection signals) ⑦ Convert content into "chart prompts" for professional infographics. Each section provides reusable prompt skeletons + Why explanations + counterexamples + sample outputs. It also includes the underlying mental models (business outcome = traffic × conversion × cost, experience only acts on the behavioral layer, MVP dual hypotheses, four-dimensional demand scoring). It complements google-ux-research: that piece covers UX research methods themselves (how to conduct interviews/draw empathy maps/run usability tests), while this piece explains how to use AI to quickly turn these research outputs into deliverables suitable for reporting or inclusion in a portfolio. It is oriented toward non-technical PMs, with jargon explained in parentheses.
Will’s prompt manual and methodology for the Ideate phase of the "AI-Assisted UX Workflow". It covers five categories of ideation work: ① Three types of project decision report templates (multi-version optimization / MVP / exploratory innovation) — reverse-engineer an already shipped design into a complete decision chain of "attribution → direction → candidate solution comparison → decision table → PPT → interview talking points", whose core value is "proving you are making judgments rather than executing"; ② AI competitive research and analysis report — the "variable validation method" that breaks down variables, runs frequency statistics, and draws probability-level conclusions, to make near-objective judgments when you cannot access competitors’ real data; ③ Generate innovative products from a one-sentence requirement (Peter Thiel-style PRD prompt); ④ A 5-step chain for optimizing solutions through usability testing (test report → data table → dashboard → revision prompt → new interface); ⑤ Use AI + PRD to generate user flow diagrams (4-node syntax) and wireframes (multi-structure divergence). Each section provides reusable prompt skeletons, Why explanations, counterexamples, and interview talking point formulas. Division of labor with [[google-ux-wireframe-prototype]]: that article covers "hand-drawing methods and symbol standards for user flows/wireframes/IA" (pure manual design language), while this article covers the prompt workflow of "using AI to turn these tasks into reports and decision documents" (the AI acceleration layer), as well as the unique cognition of "design strategy" and "decision-making ability expression" in the ideation phase.
Design highlights from 11 quarterly product Releases of Airbnb from Summer 2021 to Summer 2026, breaking down "why Airbnb designs this way" from a product manager perspective. Two main threads: ① Timeline — 2021 Flexible search + 10-step host onboarding / 2022 Categories system (50+ themes) + Split Stays + free AirCover protection / 2023 Host Passport + total price transparency + Guest Favorite tag + AI photo tours + smart locks / 2024 Icons celebrity immersive experiences + shared wishlists + Co-host marketplace / 2025 Services value-added services + Experiences local experiences + Connections social relationships + task-based AI customer service / 2026 lifestyle services (groceries/transfers/luggage storage/car rentals) + boutique hotels + AI review summaries and comparisons + travel maps. ② Transferable insights — how Airbnb does "dual-track narrative Releases" (every feature communicates both UX value and business value at the same time), how trust is designed into the product (AirCover/identity verification/Guest Favorite/Host Passport), how belonging evolves from "staying in someone else's home" to emotional connection (passport/social/shared itineraries), how the platform strategy evolves from a "booking tool" to an "end-to-end travel and lifestyle platform", and the three overarching threads of flexibility, personalization, and AI. Audience = non-technical PMs; jargon is explained within the industry; each section includes Why and counterexamples; instead of restating feature lists, it distills design motivations.
The entry wiki for the Chinese-English bilingual notes on the Apple Human Interface Guidelines (HIG). It explains the 4 categories of tags in Apple design (philosophy/concept/principle/strategy) + the three-dimensional methodology of atomic design, multi-platform, and hierarchy model + a quick reference for device characteristics and design tradeoffs across the 7 major platforms (iOS/iPadOS/macOS/watchOS/tvOS/visionOS/games) + a reverse lookup map for all 14 apple-hig-* wikis (which wiki to check when you want to look up X). Start here to locate information for any Apple design question.
The 'make way for everyone' layer of Apple design. 6 dimensions of accessibility (Vision / Hearing / Mobility / Speech / Cognition / visionOS) + 9 core accessibility principles (Contrast / Dark Mode / Larger Text / Don’t Rely on Color Alone / Reduce Motion / Voice Control / VoiceOver / Captions / Audio Descriptions) + App Store Accessibility Nutrition Labels evaluation method + Mac VoiceOver acceleration (contain / combine / ignore + rotor + actions) + Inclusive design (diversity factors / inclusive language / avoiding stereotypes) + Privacy (ask for permissions only when needed / purpose strings / location button / data protection) + Writing (tone / action orientation / error messages / empty states) + Right-to-Left RTL (text alignment / numbers do not flip / controls flip / icon localization). Each entry includes real-world test cases from the Landmarks App.
A decision manual for "when to use which" covering all 63 UI components in Apple HIG, organized by 8 functional categories. Menus and Actions (Buttons/Menus/Context Menus/Toolbars/Pop-up Buttons/Pull-down Buttons/Activity Views/Ornaments) · Selection and Input (Text Fields/Pickers/Segmented Controls/Sliders/Steppers/Toggles/Color Wells/Image Wells/Combo Boxes/Virtual Keyboards) · Presentation (Alerts/Action Sheets/Sheets/Popovers/Panels/Windows/Scroll Views/Page Controls) · Layout and Organization (Lists and Tables/Collections/Outline Views/Split Views/Tab Views/Sidebars/Boxes/Labels/Column Views/Lockups/Disclosure Controls) · Navigation and Search (Tab Bars/Sidebars/Search Fields/Path Controls/Token Fields) · Content Containers (Charts/Images/Text/Web Views) · Status Indicators (Progress Views/Activity Rings/Gauges/Ratings) · System Experiences (Widgets/Live Activities/Notifications/Controls/Complications/Shortcuts/Menu Bars/Status Bars/Top Shelf/Watch Faces). Each component includes a definition + when to use it + key do/don't guidance + cross-platform support. Includes anatomy diagrams for Primary/Secondary buttons.
The most 'methodology-focused' layer of Apple's design system — it does not talk about which component to use, but about why. Design philosophy (why Human Interface is called Human · design serves people · 6 qualities of great design) + 12 core design principles (Wayfinding / Feedback / Visibility / Consistency / Mental Model / Proximity / Grouping / Mapping / Affordance / Progressive Disclosure / 80-20 / Symmetry) + 5 elements of Intentional Design (radical simplification / deep understanding / extreme focus / personal connection / direct communication) + Fluid Interfaces (dynamic motion vs timed animation · elastic physics · projected momentum · 6 sub-principles) + complete workflow from concept to interface (structure → navigation → content → visuals, with a vinyl record App hands-on example) + multisensory design (sound design · 3 haptic principles · transient/continuous · technical constraints) + multilingual, intelligence and ML experiences (data/metrics · system intelligence journey) + 60-minute rapid prototyping.
Design guidelines for 13 input methods in Apple HIG. Gestures (consistency of standard gestures · use custom gestures sparingly) / Keyboards (Full Keyboard Access · standard shortcuts · modifier key order) / Pointing devices (three iPadOS content effects: highlight/lift/hover · snapping · macOS pointer style catalog) / Apple Pencil & Scribble (tilt, pressure, azimuth · hover preview · double tap/squeeze/barrel roll · PencilKit) / Digital Crown (primary navigation on watchOS · immersion adjustment on visionOS) / Eyes (visionOS gaze + hover effect · privacy: gaze point not exposed) / Focus and selection (five tvOS focus states · iPadOS focus groups) / Game controls (touch virtual buttons · physical controller ABXY mapping · single-key keyboard controls) / Action button / Camera Control / Nearby Interaction / Gyroscope and accelerometer / Remotes. Each entry includes applicable platforms + best practices + anti-patterns.
Apple HIG 25 cross-component 'interaction flow' design patterns. Onboarding trio (Launching · Loading · Onboarding) / Data and input (Entering data · Drag and drop · Undo and redo · Searching · Charting) / Feedback and interruption (Feedback · Modality · Managing notifications) / Account settings (Managing accounts · Settings · Ratings and reviews) / Content and media (Audio · Video · Haptics · Full screen · Live-viewing) / System collaboration (Collaboration and sharing · File management · Multitasking · Printing · Workouts). Each pattern provides core principles + best practices + anti-patterns + platform differences. For component-level usage, see components; this section covers 'stringing components into flows'.
In-depth design special topic for iPad and Mac platforms (Will’s reorganized deep read of iOS/macOS). Essential differences between Mac and iPad (touch vs. keyboard & mouse · 77% font scaling · neutral colors · gesture mapping) + three major frameworks · information layout / iPadOS 26 new window system (drag handle · window controls inside toolbar · one window per document · descriptive naming) / pointer (1:1 tracking · liquid glass highlight disc) / 3 adaptive cursor effects (Highlight / Lift / Hover) + adaptive vs. traditional pointer (adaptive precision · magnetism · realignment) / material form design / navigation (sidebar ↔ tab bar adaptation · flat vs. hierarchical · Push vs. Modal · navigation design derived backward from core value) / UX copywriting (PACE framework · VOICE & TONE · 4-step tone modulation · 4 improvement tips: delete filler words / avoid repetition / start with why / build a glossary · Great Alerts · Tips · teach users to use the app) / chart system (Marks / Axes / Descriptions / Interaction / Color · static vs. interactive · macro-meso-micro three layers · differentiation across multiple charts · fixed vs. dynamic range) / subscription design (Effortless / Transparent / Engaging · 3 steps 61% vs. 9 steps 7%) / modal sheets / safe area / Live Activities · Shortcuts · App Clips · Intents · Interactive Snippets · custom visual effects (iOS 18 SwiftUI).
Four small platforms in one. watchOS (timely and relevant · brief and efficient · Digital Crown as core · 3 navigation patterns: NavigationSplitView/TabView/NavigationStack · Series 7 three principles · large titles · 4 levels of full-screen materials · Smart Stack layout · Complications/Live Activities · watch faces: Dial/Infograph/List · full keyboard · Always-On Display (AOD) · secondary function controls) / tvOS (10 principles · content first · focus system · 5–10 Top Shelf items · avoid overstimulation · metadata as secondary · pagination arrows) / CarPlay (next-generation design system · modular instrument cluster · deep brand customization · SF variable fonts · dynamic content area · view area and safe area · automatic appearance based on time and vehicle conditions) / Games (core loop: Action-Reward-Expansion · 10 key principles: Be a Good Teacher / Remove Friction / Tune the Core Loop / Design for Touch / Foster Engagement / Background Transfers / Optimize Graphics / Introductory Videos / Localization / Use Cutting-Edge Technology · Touch-See-Hear-Feel perception loop · virtual joystick game input · adaptive layout anchors · Apple Games app + Game Center achievements/leaderboards/challenges/activities · time-limited in-app events for re-engagement).
Integration design specifications for 29 Apple system technologies (each entry = what it is + when to use it + key design points + branding/icon/naming rules). Payments & Wallet: Apple Pay (vs In-App Purchase · button styles · checkout flow)/ In-app Purchase (consumable/non-consumable/subscription · offer codes · Family Sharing)/ Wallet (5 pass types · order tracking · identity verification)/ Tap to Pay (hardware-free payment acceptance)/ Apple Card. Health & Research: HealthKit (Activity Rings specifications)/ CareKit/ ResearchKit (informed consent). Home & Car: HomeKit (home/room/accessory/zone · Siri commands)/ CarPlay (template-driven). Communication: Messages for Business/ iMessage apps & stickers/ Sign in with Apple (private relay email)/ SharePlay (3 Spatial Personas templates)/ Siri (SiriKit intent domains). Media & Recognition: AirPlay/ Live Photos/ ShazamKit/ Photo Editing/ Maps (indoor maps). AI: Generative AI (responsible design · transparency · hallucination prevention)/ Machine Learning (critical vs assistive · calibration · confidence · attribution · limitations · error handling). Identity: ID Verifier/ NFC. Cloud & Gaming: iCloud (transparent sync)/ Game Center (achievements/leaderboards/challenges/activities)/ App Clips (App Clip Codes)/ Mac Catalyst/ Always On.
Complete Apple Vision Pro / visionOS spatial computing design guide. Eye input (gaze = target recognition · gaze point privacy is not exposed · look to scroll) + 3 types of hover interaction (instant / delayed / gradient ramp · two-state switching · anchor elements · avoid unexpected motion) + gestures (system gestures: single tap / double tap / pinch-drag · eye-hand combination precision · direct vs indirect · lack of haptics compensated by audio and visuals) + comfort science (vestibular system vs visual conflict causing motion sickness · avoid head-locked content · 0.2Hz oscillation forbidden zone · depth cue conflict causing ghosting · place reading content beyond arm's length) + spatial UI layout (60pt tap target + 16pt spacing · concentric corner formula · ergonomics: left/right movement better than up/down · windows sized to content) + materials (glass has no light/dark mode · dark materials separate sections, light materials emphasize interaction · vibrancy) + immersion spectrum (Shared Space ↔ Dim ↔ Full Space ↔ Full Immersion · progressive transitions) + spatial widgets (Paper vs Glass · proximity awareness Default/Simplified · fixed physical size · Elevated/Recessed) + SharePlay (window / full space · Side-by-Side / Surround / Conversational modes) + narrative interaction (Encounter Dinosaurs) + spatial audio (randomization · distance perception) + core spatial strategies (key moments · iterative prototyping · complementary experiences).
A decision handbook for the visual "atomic layer" of Apple design. Covers color (system semantic colors · wide color gamut · Liquid Glass palettes) / typography (SF · NY · Dynamic Type · minimum font sizes per platform) / layout (grouping · hierarchy · safe areas · progressive disclosure) / spatial layout (visionOS field of view · depth · scale) / materials (Liquid Glass vs standard materials · thin/thick selection) / motion (purposefulness · optionality · visionOS motion sickness prevention) / dark mode (not a simple inversion · 4.5:1/7:1 contrast ratios) / images (@1x/2x/3x · format selection) / app icons (layering · cross-platform shape · Icon Composer) / interface icons (optical centering · vector) / SF Symbols (4 rendering modes · 9 weights · variants · animation · customization) / branding (yielding to content). Each entry includes best practices, counterexamples, and platform differences.
Starting in iOS 26, Apple’s full new visual language Liquid Glass, plus deepened SF Symbols, typographic optical sizes, and color palette system. Liquid Glass: what it is (digital "meta-material", Lensing effect, gel-like flexibility) / material layers (specular highlights/shadows/internal glow feedback/focus changes) / two variants (Regular vs Clear plus three prerequisites for Clear) / adaptivity (small controls switch between light and dark, large panels only gray at edges, soft/hard scroll edges) / structure (depicting relationships, reflecting navigation focus, elevating controls, extending to edges) / geometric concentricity (three shapes: fixed/capsule/concentric) / legibility, Tinting, accessibility / Icon Composer icon workflow (single artwork → all platforms, six appearance modes, layered export). SF Symbols: 4 rendering modes (monochrome/hierarchical/palette/multicolor), variable color, 9 weights and 3 scales, variants, drawing animations (Draw On/Off, Magic Replace, Wiggle/Rotate/Breathe/Pulse/Bounce/Scale), interpolation principles, custom symbols. Typography: SF/NY/Compact/Mono, optical sizes SF Text/Display, variable fonts, 11 Dynamic Type text styles, tracking and leading, font selection (structure/contrast/display vs text fonts). Color palette: dual tint modes, grayscale fill/separator/system gray, semantic colors.
A summary of Apple's own product operational visual design + the fall 2026 cross-platform OS design language updates (all based on UI analysis from official Apple press releases/events). Apple's Rich Scenario UI (2024+2025 product launch timeline) + Operational Visual Design. 2026 OS update main threads: ① Liquid Glass unifies all platforms (iOS/iPadOS 26 · macOS Tahoe 26 · tvOS 26 · watchOS 26 · visionOS 26) ② Deep Apple Intelligence integration (Live Translation · Genmoji · Image Playground + ChatGPT · Smart Shortcuts · on-device/private cloud models). Highlights: iPadOS 26 new window system + menu bar · macOS Tahoe Phone App + biggest-ever Spotlight upgrade + Live Activities coming to Mac · tvOS 26 Sing karaoke · visionOS 26 spatial widgets + Spatial Scenes + enhanced Persona · Apple Games app + Game Overlay · accessibility nutrition labels / Mac Magnifier / Braille / Accessibility Reader / BCI brain-computer interface · Apple Invites · new Fitness+ 2025 content · Apple Watch health research (people who close their rings have 48% lower rates of poor sleep / 73% lower rates of elevated resting heart rate / 57% lower rates of high stress).
A curated compilation of highlights from 102 Medium UX articles (59 topics) saved by Will, compressed across 7 major clusters into one note that can replace an entire bookmarks folder. ① GenAI/AI UX Patterns — 21 GenAI UX Patterns (augmentation vs automation / three tiers of automation / CoT display / expressing model confidence and limitations / guardrails), seven AI UI layouts (floating window / inline / infinite canvas / centered chat / left panel / right panel / grid), predictive UX (context management controls), five-step framework for designing AI products. ② Research & Experiment Methods — five-step A/B testing method (define success → identify bottlenecks → build hypotheses → prioritize → test, including empirical evidence from the Obama campaign's $57 million and Haiti disaster relief's $1.02 million), macro vs micro vs vanity metrics. ③ Mobile & Trends — nine 2026 mobile trends (predictive / Zero-UI / Agentic / spatial 3D / glassmorphism / microinteractions / adaptive / ethics / passwordless). ④ Inclusivity/Accessibility — 11 tactics (4.5:1 contrast ratio / multi-channel coding / external form labels / alt text / heading hierarchy / touch targets ≥7–10 mm² / keyboard accessibility), including empirical revenue evidence from Tesco/Virgin. ⑤ Information Architecture/Flows/Complexity — collaboration framework (centralized → decentralized shared Commons), how complexity accumulates (feature bloat / process stacking / technical debt + Pareto cuts + complexity budget), value proposition canvas, globalization ≠ translation (Chevrolet Nova / Domino's vs Kellogg's). ⑥ Company Cases — breakdown index for Airbnb/Calm/Canva/Duolingo/Spotify/Uber/Slack/Gmail and more. ⑦ Career/Soft Skills — three types of designers in 2026 (block-shaped generalists / ultra-deep specialists / standout new graduates), real UX competence in the AI era (restraint and judgment > drawing UI), six psychology principles for landing page conversion. For AI product PMs: Why / when to use / counterexamples come first. Highly intertextual with [[shape-of-ai-patterns]] (AI UX Pattern Library), [[ai-ux-interactions]] (Seven AI Interaction Paradigms), [[laws-of-ux]] (Laws of UX), [[nngroup-ux-principles]] (UX Golden Quotes), [[nngroup-information-architecture]], [[nngroup-persuasive-design]], and [[ux-metrics-roi]]; this compilation only adds the checklists, numbers, and cases they do not cover, and does not rewrite them.
