A reorganized set of Will's usage notes for Figma Make (Figma's built-in tool that lets you "describe requirements → AI generates runnable prototypes/webpages"), targeted at PMs building AI products who want to produce prototypes quickly. It covers eight major functional modules, each providing "how to use + Why + when to use + pitfalls": ① Basics (three-column interface = chat/preview/code; four input methods = typing/pasting Figma designs/uploading images/clicking the preview to make targeted edits). ② Best practices for writing Prompts and feeding attachments (define the product using a "user capability list" instead of broad category nouns; do layout first then functionality; iterate step by step; use Auto Layout to help AI understand structure; common layouts are more likely to succeed on the first try; desktop version is more stable; never write secret keys in prompts). ③ Templates (publish files with established specifications as templates for the team to copy and remix; use guidelines to lock editable scopes; create/update/unpublish/use; four examples of constraint prompts). ④ Importing Figma design library styles (export the Library as CSS → reference it in Make → UI automatically applies the company's color scheme and fonts). ⑤ Adding Guidelines.md (set rules for AI, including general rules + design system rules + component-level rules; concise and precise rules are better than piling on context). ⑥ Feeding with code files (four types including .tsx/.csv/.json/.html; generate data dashboards with real data; reuse open-source components such as shadcn; real copy typesetting) + a strongly constrained prompt for one-click full-site refactoring to shadcn/ui. ⑦ Adding a backend (connect to Supabase with one sentence to implement login/data storage/secure secret key saving; the judgment mnemonic is "Does this thing need to be remembered?"). ⑧ Publishing (get a figma.site URL with one click, bind a custom domain via TXT+CNAME, upload web fonts, advanced options such as SEO/password protection) + push to GitHub/download code. Division of labor with [[ai-ux-experience-design]]: that article covers "the process methodology of using AI for experience design", while this article is "the functional operation manual for the single tool Figma Make"; it complements the vibecoding mindset in [[ai-vibecoding-design-process]]. The target readers are non-technical PMs, with industry jargon explained in parentheses, and each section includes Why and when to use it.
A distillation of the core principles and foundational dimensions of Google Material 3 (M3), synthesized from Will’s Notion design notes (123 .md files across 12 categories). It covers: ① The soul of M3 — Dynamic Color (extract source color from wallpaper/content → algorithmically generate 5 key colors → tonal palette 0–100 → 26 semantic Color Roles, achieving four goals: personalization, automatic dark mode, user-controllable contrast) and the underlying HCT color model (Hue/Chroma/Tone, closer to human vision than HSL); ② Color role system (Primary/Secondary/Tertiary/Error/Surface + Container + On + Variant naming convention, 3 contrast levels Standard/Medium/High corresponding to 3:1 and 7:1); ③ Type Scale (15 styles across 5 major categories Display/Headline/Title/Body/Label, Major Second 1.125 ratio, variable fonts with 4 axes: weight, grade, width, optical size); ④ Shape (7 corner radius levels None→Full plus rounded/cut corner families); ⑤ Tonal Elevation (levels 0–5 dp; M3 uses tonal differences and overlays instead of shadows); ⑥ Layout (Window Size Classes Compact <600 / Medium 600–840 / Expanded 840–1200 / Large / XL, information density, 48dp touch targets); ⑦ Adaptive (3 strategies: hide/show, float, reflow); ⑧ Motion (easing emphasized/standard × duration 200–500ms); ⑨ Interaction state layers (hover +8% / focus +10% / press +10% / drag +16% opacity overlay); ⑩ Accessibility (WCAG contrast 3:1/4.5:1) and ⑪ Content design (20 English UI copy rules). Value for PMs: use it as a checklist when reviewing design drafts (is contrast sufficient, are touch targets large enough, are color roles used correctly, is copy sentence-case), understand why “design tokens” and “semantic colors” reduce collaboration costs, and which parts of M3 are hard constraints to copy directly (accessibility/touch target sizes) versus stylistic choices that can be deviated from (dynamic color/corner radius/font sizes). Division of labor with [[nngroup-visual-design-systems]]: that article is a general overview of “what a design system is” (Design System vs Style Guide, adopt/adapt/build your own), while this article explains the internal principles and numeric rules of the specific Material 3 design system. Audience = product managers; jargon is explained in industry terms, with a Why for each section.
Complete notes for Course 1 of the Google UX Design Professional Certificate, *Foundations of UX Design*. Covers the 4 qualities of good UX (Usable/Equitable/Enjoyable/Useful) + the designer role spectrum (generalist/specialist/T-shaped + 7 job roles + cross-functional collaboration) + 4 entry paths + 4 steps of user-centered design (understand/define/design/evaluate) + 3 stages of accessibility evolution (universal → inclusive → equitable + AT assistive technology) + cross-platform design + 5 stages of design thinking (empathize/define/ideate/prototype/test, with stage-by-stage method libraries) + 5-day design sprint + sprint brief + retrospective meeting + business requirements (goals + parameters) + 3 categories of UX research (foundational/design/post-launch) + 6 types of research bias + 8 bias mitigation practices. Targeted at PMs, with a comparison to Yitang's five-step method / requirements analysis.
Google UX Certificate Course 2 (Ideation) + Course 3 (Build Wireframes & Low-Fi Prototypes). Covers design ideation (goal statement formula + HMW + Crazy Eights + 5-step competitive audit) + user flows (4 shapes: circle for action / rectangle for page / diamond for decision / arrow for flow) + storyboards (4 elements + 6 panels + two types: big-picture vs close-up) + fidelity concept + wireframes (paper → digital + reverse engineering exercise + industry standard drawing conventions) + information architecture (IA) (organization/hierarchy/sequence + Dan Brown's 8 principles + sitemap parent-child structure) + Figma basics + Gestalt principles (similarity/proximity/common region/closure/continuity/symmetry) + low-fidelity prototypes (Figma connections + 5 benefits of paper prototypes + mobile-first). Aimed at PMs, clearly explaining the stage "from idea to clickable draft".
Job search section of the Google UX Certificate. Cross-device 4C principles (Consistency/Continuity/Context/Complementary) + Mobile-first + Design for Social Good + Portfolio (website best practices / 7 elements of case studies / tailoring to positions / website builders) + Portfolio interview presentation template (Cover → About Me → Project Problem-Process-Final-Impact-Learnings → Key Takeaways → FAQ) + Resume (information hierarchy/grid/two-column/personal branding/tools) + Interview (process/three key points: adaptability-passion-learning/whiteboard interview/STAR/value company culture over company name) + Career path (UX specializations/company types/freelance business plan + client acquisition/UX communities/Impostor Syndrome) + Collaboration with engineering. For PMs
The testing and iteration segment plus design critique from Google UX Certificate Courses 4-5. Covers 3 criteria for judging a design "done" + high-fidelity iteration (prioritize revising static mockups first) + Design Critique (3 roles: facilitator/presenter/reviewer + 4-step process + 5 preparation questions for presenters + reviewer guideline "describe problems, don't give solutions" + tips for giving/receiving feedback + 6 categories for turning feedback into action) + development Handoff (edge cases + accessibility specs + small-company relay handoff vs large-company collaboration + Figma handoff/thumbnail/permissions/view mode). Targeted at PMs, mapped to critique meetings/requirement reviews.
The complete "Using AI for UX" module added to the Google UX Certificate in 2024+. T-C-R-E-I prompt framework (Task/Context/References/Evaluate/Iterate) + Gemini assistance: generate user personas / simplify design specifications (Material) / diverge in design iteration / improve stakeholder communication (remove jargon) / write portfolio copy and case studies / generate realistic placeholder copy. NotebookLM document grounding (project knowledge base + interview preparation + audio overview). Job search AI: Career Dreamer + career identity statement + transferable skills + AI resume revision (basic version + job-tailored version) + cover letter + STAR interview method + Gemini Live mock interview. Directly applicable AI workflows for PMs.
The complete research craft collection from Google UX Certificate Course 2 (Empathize/Define) + Course 4 (Conduct UX Research). Covers 5-step interview SOP + 5 traits of research objectives/participants/questions + empathy map (Says/Thinks/Does/Feels) + persona vs user profile + problem statement (formula + 5W1H) + hypothesis statement (if-then / we believe) + 4-step value proposition + human factors engineering (WWI/WWII history) + design psychology (color/Von Restorff/serial position/Hick's Law/mental model/feedback loop + ethics) + 7 elements of a research plan + usability study (pros and cons of moderated vs unmoderated + best practices before/during/after + note-taking methods) + moderator/participant bias + affinity diagram analysis + patterns → themes + 5 criteria for strong insights + 7 presentation tips. Targeted at PMs, cross-referenced with Yitang research/user interview methodology.
Google UX Certificate Course 5 (Visual Design / Mockups / Design Systems) + Responsive Websites. 4 visual elements (typography/color/iconography/lines, size, shape, images) + color (60-30-10 rule + color psychology + WCAG contrast 4.5:1 + accessibility for color blindness/low contrast/photosensitivity) + typographic hierarchy/legibility + icons (action vs supplementary + text labels + branding) + layout (grids/containers/white space) + visual principles (emphasis/hierarchy/scale & proportion/unity & variety + Gestalt) + Mockups (static high-fidelity) + design systems (4 components + 4 levels of UI patterns + 5 benefits + Sticker Sheets + Figma components/instances + Material/Polaris/Apple HIG/Fluent/USWDS) + responsive design (pros and cons of native apps vs responsive web + hamburger menus/cards/carousels/CTAs) + design ethics (attention economy/dark patterns/marginalized groups). Targeted at PMs
The source of the modern Apple HIG and even the entire field of graphical interface design — two historic classic PDFs. The 1987 *Apple Human Interface Guidelines: The Apple Desktop Interface* (164 pages, the first official HIG) put forward 10 human interface principles; the 1992 *Macintosh Human Interface Guidelines* (418 pages, complete 11-chapter edition) expanded them to 12. The 12 principles: Metaphors / Direct Manipulation / See-and-Point (noun-then-verb) / Consistency / WYSIWYG / User Control / Feedback and Dialog / Forgiveness / Perceived Stability / Aesthetic Integrity / Modelessness / Knowledge of Your Audience. Plus principles of graphic communication (visual consistency / simplicity / clarity). Bilingual. These principles established in 1987 remain the root of [[apple-hig-design-principles]] today.
Starting from reference images and user tasks, use AI to assist in generating UIs, extracting design rules, and filling in interactive states and microcopy; includes prompts and check paths, suitable for collaboration between product managers and designers.
Highlights from a large-scale Icon Association Ranking survey: 107 U.S. participants × 100 icons = 10,700 open-ended responses, covering the primary associated meaning, recognition rate percentage, and 95% confidence interval for each icon when presented alone, without text or context. Core finding: There is no such thing as a "Universal Icon" — no icon is consistently understood across all systems. Recognition rates fall into three tiers: 65–100% (high consensus, e.g., trash can = delete 98%, shopping cart = checkout 98%, pencil = edit 96%, envelope = mail 95%, circled question mark = help 91%, house = home 91%) / 50–64.9% (medium consensus, e.g., hamburger menu = menu only 59%, funnel = filter 53%) / 0–49.9% (weak consensus, e.g., share arrows, sparkles for AI, lifebuoy for help, AR cube). Coverage: survey methodology (two-stage testing: out-of-context vs. in-context) / three icon types (resemblance/metaphorical/arbitrary) and cognitive distance / 10 design principles (follow convention, single concept, consistent meaning, appropriate metaphor, etc.) + real-world counterexamples (Reddit wrench, TripIt star upgrade, Rippling heart for insurance, Lyft golf cart for shopping cart, DoorDash lifebuoy for help) / 8 factors affecting comprehension (consistency, interaction frequency, prior experience, proximity, text labels, orientation, placement, cultural background) / when text labels are mandatory / why emerging icons all fail (AI sparkles 0% recognition, heartbeat for data, lightning for charging 37%). Audience: product managers; jargon explained in plain language; every section includes Why + numbers + counterexamples.
The complete essence of all 28 UX laws and psychological effects from Jon Yablonski’s *Laws of UX* 2.0, distilling decades of experimental findings from cognitive psychology into actionable mantras that PMs can directly apply to design decisions. Grouped into 6 clusters by underlying intent: ① Cognitive Load (Cognitive Load / Working Memory / Miller's Law / Chunking / Tesler's Law (Law of Conservation of Complexity) / Occam's Razor / Law of Prägnanz) — The brain has limited processing power, so subtract ruthlessly and shift complexity from the user to the system. ② Decision Friction (Hick's Law / Choice Overload / Cognitive Bias / Paradox of the Active User) — More options lead to slower, more anxious decisions; framing and wording skew judgment; users never read manuals. ③ Gestalt Grouping (Proximity / Similarity / Common Region / Uniform Connectedness / Closure / Symmetry / Continuity) — The human brain automatically groups visual elements; use spacing, borders, and color to control “what belongs with what.” ④ Time Perception and Motivation (Doherty Threshold 400ms / Flow / Goal-Gradient Effect / Zeigarnik Effect / Parkinson's Law / Peak-End Rule / Serial Position Effect) — Users’ perceived speed, progress, and memory matter more than objective data. ⑤ Familiarity and Resilience (Jakob's Law / Mental Model / Postel's Law) — Users expect your product to work the same way as others’ products; be liberal in what you accept, conservative in what you send. ⑥ Attention and Aesthetics (Selective Attention / Banner Blindness / Von Restorff Effect / Aesthetic-Usability Effect / Pareto Principle 80/20) — Highlight what matters, avoid ad-like visual patterns, and remember that attractive things feel more usable. Each entry includes definition, psychological origin, how to apply it, counterexamples, and when to use it. Written for non-technical PMs, with in-line explanations of jargon, in bilingual Chinese-English format. Designed for quick recall of “which law to remember next time you encounter interface problem X.”
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).
20 curated articles from the 'Artificial Intelligence/AI' topic at Nielsen Norman Group, under the 'AI Product and Conversational Interface Design' subset (focused on the product and interface layer, distinct from the research practice layer). Five core axes: ① Conversational AI experience — 6 types of conversations with generative AI (Search Query / Funneling / Exploring / Chiseling / Pinpointing / Expanding; conversation length ≠ success), Less Chat More Answer (cut pleasantries / scannable lists / answer first then details via the 'Truncated Pyramid' / say plainly when you can't do it / specific over generic), Explainable AI in chat (three placement methods for Source Citations: Perplexity inline / Copilot sidebar / can hallucinate sources; Step-by-step reasoning; clear actionable vs vague Disclaimers; avoid anthropomorphic wording), Sycophancy (contradicting facts to please users · human feedback reward loopholes · recanting when asked 'Are you sure?' · three mitigation approaches). ② Anthropomorphism and trust — 4 degrees of anthropomorphism (Courtesy / Reinforcement / Relayed roleplay / Companionship), Smarts over Sentience (perceived intelligence ↑ trust ↑ · perceived emotion ↑ trust ↓ · warm AI has a 10–30% higher error rate · professionalism ≠ coldness), early user behaviors of Accordion editing and Apple Picking. ③ Prompt UX — 3 types of prompt suggestions (Use-Case / Autocomplete / Followup), design of use-case prompt suggestions (simple pills vs complex cards/carousels · two stages before and after login · specific over vague · personalization), CARE prompt framework (Context / Ask / Rules / Examples), 4 uses of Prompt Controls (discoverability / education and inspiration / constraint / promoting follow-ups · 50% include follow-ups, 77% are multi-turn · 4 best practices). ④ Generative UI (GenUI) — GenUI vs Vibe Coding vs AI-assisted design (who decides to build this UI · execution failure vs judgment failure), the most exciting GenUI development is the return of buttons and checkboxes (AskUserQuestion to collect context), Promptframe (documenting wireframes + AI prompts · 6-step process · Blue Apron case study), 5 fixes for designing interfaces with prompts (precise visual keywords / lightweight reference images / analyze first then generate / real mock data / attach code). ⑤ AI assistant positioning — 4 roles of AI as a UX assistant (content editor / research assistant / creative partner / design assistant · 841-person survey, 92% already use it), AI as a creative partner (P&G 776-person experiment · individuals using AI outperform groups without AI · the Top 10% are still groups), initial review of ChatGPT Agent booking lunch (96 sources in 6 minutes · 11 minutes to fill forms · human-in-the-loop · decision gate), Google AI Mode evaluation (Query Fan-out + RAG · 7 users · poor discoverability / naming confusion / overly long answers), why users switch between GenAI and search (6 out of 9 users switch back and forth · AI clarifies questions, search verifies facts · even citations struggle to build trust). Audience = non-technical product managers, terms explained inline, decision-oriented (when to use / how to choose / counterexamples).
22 curated pieces from the Nielsen Norman Group analytics and metrics knowledge base. Centered on the core theme of "how to use data to prove the value of UX", it clarifies four key topics: ① Choosing the right metrics (avoid Vanity Metrics — isolated numbers that "only go up and never down" such as total downloads, total page views, and total user count; replace them with ratios/proportions, time frames, user segment breakdowns, and the DAU/MAU Stickiness Ratio. Conversion Rate = the most important metric, but it is affected by external interference from price, seasonality, and marketing. Macro vs Micro Conversions = process milestones plus secondary actions. Success Rate (for usability testing, when user intent is unclear) vs Completion Rate (for analytics tools, when user intent is clear). For time on page/page views, "more ≠ better"; you must distinguish between productive tasks and engaging tasks); ② Division of labor between two quantitative methods (Analytics answers "what users did" — large scale, low cost, no context; Quantitative Usability Testing answers "whether users can complete tasks" — ~40 participants, expensive, supports causal inference; the two are complementary); ③ How to calculate UX ROI (four steps: collect UX metrics → select KPIs → convert to monetary value → report responsibly. Health insurance case: 23,000 → 1,100 tickets × $6 = $131,400 saved per month / $1,576,800 saved per year / $4,655,400 return over three years; design system case: calculating just one video plugin was enough to persuade stakeholders; three major misconceptions = ROI is not only about money / does not have to be exact / does not cover every detail; Don't Overthink); ④ Statistical rigor (Statistical Significance vs Practical Significance, example of 72s vs 75s; Confidence Intervals at 95%, e.g., 4.3min → 3.6–4.9min, with sample size and consistency determining interval width; decision-making when results are not significant = 60% maximum likelihood probability plus qualitative insights; Benchmarking requires ≥20 participants, conducted annually, to quantify business value). Supplemented by content on Confounding Variables (randomization, within-subjects design, age, seasonality, pandemics, competition, experience, prior opinions), Convenience Sampling vs Probability Sampling (quantitative studies ≥40, surveys ≥100, simple random vs Stratified), Triangulation (cross-checking multiple methods/metrics to improve credibility), Statistically-Generated Personas (qualitative foundation + ≥100 participants, ideally 500+, latent class analysis), and Long-Tail Data (power-law distribution complemented by the Pareto principle). Intended audience: product managers.
29 curated pieces from the Nielsen Norman Group customer journey knowledge base. The core thread = visualization and operation of "the holistic experience of a user interacting with a product/service across time and channels to achieve a goal". Core artifacts: Journey Map (five elements = Actor / Scenario + Expectations / Phases / Actions-Mindsets-Emotions / Opportunities; top-middle-bottom three-section structure; Emotion Curve), Experience Map (product-agnostic baseline), Service Blueprint (enterprise perspective with four swimlanes = Customer Actions / Frontstage / Backstage / Support Processes; three dividing lines = Line of Interaction / Line of Visibility / Line of Internal Interaction; 1982 Lynn Shostack), Empathy Map (four quadrants: Says/Thinks/Feels/Does), User Story Map (three layers of Activities-Steps-Details + release line, Jeff Patton, Lean UX conversion to Epic/User Story), User Flow (step path for a single product and single task, linear flow diagram), Ecosystem Map, Process Map, Sankey Diagram (nodes-links-columns, used for path analysis, Mixpanel/Amplitude/GA). Method decisions: As-is vs To-be, Assumption-First vs Research-First, low-fidelity vs high-fidelity, hybrid three-step method. Seven journey map analysis methods (unmet expectations / redundant touchpoints / emotional lows / cross-channel breakpoints / time consumption / Moment of Truth / highs). Project operations: journey mapping impact survey (300+/259 respondents, 64% collaborative creation, 56% digital tools, 7 outcome success metrics, 3.5 barrier lines, 8-factor ranking with customer participation highest at 6.08, visual design lowest at 2.18), 7-step interactive Figma maps, CX transformation framework (4 domains x 4 building blocks = 16 tasks), Journey-Centric Design vs Journey Management party hat model, UX vs Service Design, 5-step service blueprint and practice survey (97 respondents, 56% deliverables / 20% frameworks / 15% collaboration tools, focused type <2 weeks + 1 week, panoramic type <1 month). Research foundations: Contextual CUEs framework (Culture / Unspoken / Environment, Distributed Cognition DCog), User Panel 101 (customer-type/goal-type, B2C/B2B/two-sided marketplaces, 6-step setup). Practical cases: four types of luxury shoppers (browsers only / occasional splurgers / big spenders / stylists, consideration stage most critical), healthcare digital interactions (9 participants, 93 diary entries of interactions, 78 on smartphones, 32 on portals, 2/3 digital pain points), four stages of AI image generation (define-explore-refine-export, Midjourney, inspiration-oriented vs deliverable-oriented), UX storytelling (story triangle / Freytag's five-act story pyramid). Target readers = product managers, terms explained in-line, decision-oriented.
17 curated articles from Nielsen Norman Group’s “Organization and Design Process” collection, covering “what actions you take and what you produce during the design process.” Five major themes: ① Discovery Phase — Discovery Mindset (focus on problems rather than solutions, counter Anchoring effect + Confirmation Bias, 3 tactics: Reframe the Goal/Highlight Unknowns and Assumptions/Icebox Favorite Ideas), 7 tips for successful discovery (secure buy-in first/clarify roles and norms/write a problem statement that does not imply solutions/cluster and vote on unknown priorities/timebox to counter planning fallacy, 7-week sample plan: weeks 1–2 framing + weeks 2–4 research + weeks 3–5 analysis + weeks 6–7 opportunities and ideation/all team members participate in research/collaborative analysis and synthesis with How-Might-We), CSD Matrix (Certainties “We know”/Suppositions “We believe” testable/Doubts to be researched, rows grouped by user·business·technology·people·process·status·priority, goal = convert doubts and suppositions into certainties), 4 steps to kick off a new UX project (enter kickoff with a question list/expose information gaps through verbal discussion/schedule based on gaps/pave the way for the future, adapted for Agile + Waterfall); ② Wireframes and Collaborative Sketching — 4 steps to draw wireframes (set aspect ratio 1024x768/1920x1080·navigation and search·largest elements: headings in thick lines, body text in thin lines, images marked with crosses·details: dropdowns, radio buttons, buttons), magic formula to get stakeholders to sketch (thick Sharpie markers + small 8-grid paper + time limit of 5 minutes per sketch + intentionally ugly examples = relaxed sketchers), Promptframes (wireframes + generative AI prompts, replacing lorem ipsum placeholder text, 6 steps: define context, role, organization, goal, tone + write recording prompts + run + collaborate to test and optimize + iterate + manual refinement, 2–3 variants, for internal use only, not for senior leadership); ③ Prototype Fidelity — 7 decision questions for low-fidelity vs. high-fidelity, clickable vs. static prototypes (can all responses be predefined/can it be trialed multiple times/can all issues be fixed/is the design stable/is someone acting as the computer/is page flow the focus/do dynamic changes need to be observed), why test prototypes (save cost/avoid risk/iterate); ④ Design Specs and Deliverables — Dual design spec package (Figma design file: interaction flows·visuals·layout grids·components·real content·accessibility tab order and alt text; Linear development task ticket: goal·scope including inclusions and exclusions·assumptions·success metrics·Figma link·notes) + 4 tips for alignment with developers (invite developers early/leave time for comments/prepare tradeoffs/record and sync updates), 50+ deliverable glossary terms (affinity diagram/antipersona/archetype/CSD matrix/empathy map/experience map/Kano model/MoSCoW/RICE/RACI/service blueprint/persona including proto/qualitative/statistical/prototype/paper prototype/promptframe/sketch test...), most commonly used deliverables (survey of 86 practitioners: static wireframes/interactive prototypes 67%/flowcharts/site maps/usability reports; select by audience: management views interactive prototypes + usability reports + journey maps·clients view interactive prototypes 67% + high-fidelity mockups 47% + competitive analysis 34%·developers view interactive prototypes 63% + flowcharts 55% + style guides 51%); ⑤ Expert Review/Workshops/Storyboards/Surveys — Expert Review (three types: heuristic evaluation/independent design critique/expert review, external perspective is more objective + uncovers blind spots, 5 components: strengths list·issues list·severity high/medium/low·improvement suggestions·best practices, complementary to usability testing, conduct regular reviews every 2–5 years), Workshop Facilitation (4 goals: full and equal participation Diverge-Converge/promote mutual understanding/inclusive collaborative decision-making/shared responsibility, 6 principles: listen·inclusive space·welcome improvisation·authentic and transparent·do not give advice·embrace constructive conflict, toolkit = materials + activities post-up/affinity diagram/forced ranking/role-play/Playback + techniques silence/balancing/connecting), Storyboard (three elements: scenario + visuals + captions, differences from journey maps, 6 steps, low-fidelity sticky notes can be rearranged), In-Process Surveys (4 stages of the design cycle: discover/explore/test/listen, corresponding types for each stage: discovery phase qualitative surveys + stakeholder surveys + diary studies/exploration phase statistical persona surveys + competitor customer surveys/testing phase post-task SEQ single ease question + post-test SUS System Usability Scale 10 items/listening phase NPS 0–10·CSAT 1–5·CES, counterexample = mistakenly thinking surveys are fast and simple). Audience = non-technical product managers, terms explained in-line, decision-oriented (when to use/how to choose/counterexamples), all numbers retained.
19 curated articles from Nielsen Norman Group’s “Visual Design” topic, covering the design systems and icons subset. Six clusters: ① Design systems and style guides (Design System = parent, containing Component Library / Pattern Library / Style Guide; Style Guide = child, divided into content, brand, and frontend types; three implementation approaches with three-way tradeoffs among cost, customization, and brand consistency: adopt / adapt / create; examples include NASA 1976, Material, Carbon, USWDS). ② Icons and signifiers (Icon usability = Recognition, whether users recognize the shape, + Interpretation, whether users understand the meaning; 4 quality criteria: Findability / Recognition / Information Scent / Attractiveness; isolated vs. contextual testing matrix; Accordion signifier experiment with 11 prototypes and 5 variants → Caret dropdown indicator performs best, right arrow ≈ no icon; floppy disk = save 83%, circular arrow = sync/refresh 73%, down arrow + container = download 78%; Sparkles icon AI overuse · none of 107 people associated it with AI · 16.82% misread it as bookmark/favorites). ③ Visual style evolution (Skeuomorphism as learning aid vs. visual trend → Flat → Neumorphism low-contrast pain point; Glassmorphism since 2020 with transparency + background blur + outlined gradients · Apple SwiftUI / Microsoft Fluent Acrylic / Vision Pro · WCAG contrast risk). ④ Clickable element identification (Beyond Blue Links 5 types of cues · Interaction Cost) + Banner Blindness (selective attention · proximity poisoning · hot potato effect · pseudo-advertising · persistent since 1997). ⑤ Animation and motion (6 uses: feedback / state transitions / spatial metaphor navigation / signifiers / attracting attention / attention hijacking dark pattern; restraint principle). ⑥ Visual testing (Attitudinal vs. Behavioral; 5-second test / first click / preference test / open and closed word selection; Microsoft Desirability Toolkit 118 word cards 2002 controlled vocabulary · trimmed to under 25 words · Venn diagram grouping; Mood Board 4–5 keywords → visual collage). Also includes brief summaries and attribution for 3 research/team method misfit articles (affinity diagramming / UX mapping visuals / groupthink / NPS shortcomings). Audience = product managers; in-line terminology explanations, decision-oriented (when to use / how to choose / counterexamples), all numbers retained.
15 curated articles from the Nielsen Norman Group e-commerce UX knowledge base. Reorganized into 8 sections along the shopping decision journey: ① Shopper typology and decision models — 5 types of general e-commerce shoppers (product-focused / browsers / researchers / bargain hunters / one-time) + 4 types of luxury shoppers (window shoppers / stylists / occasional splurgers / big spenders), compensatory vs noncompensatory decision-making (use facets to filter out options → use comparison tables to weigh tradeoffs; 5–7 options is the tipping point); ② Product Listing Page (PLP) browsing — traditional pagination vs Infinite Loading (only use when <40 items and strong filtering is applied) vs Show More button, must display total item count + loading progress (Lululemon: 40 of 333 items) + Save the Spot to preserve browsing position; ③ Category Page — traditional vs Hybrid (place educational content at the top of the listing page instead of forcing a detour), Bonobos direct access vs Eddie Bauer detour; ④ 6 rules for product photos — Large / Consistent / Specific / Dynamic hover / Contextual / Inclusive; ⑤ Multi-variant display — simple variants (color, size) use on-page attribute selectors vs complex variants (TV product lines) use separate pages + similar products module, Best Buy product line dropdown as a counterexample vs Costco separate pages; ⑥ Comparison Table — ≤5 items / static vs dynamic / sticky headers / highlight differences / convert columns to labels on mobile; ⑦ Trust and globalization — Diverse Models / model selection feature / international sizing with both local and original size / brand-specific size charts / one-click Translate All for UGC reviews / Socially Conscious practices (Toms donates $1 for every $3 earned) / AR try-on for makeup and furniture (accuracy determines usefulness); ⑧ Luxury e-commerce — the Consider stage is the weak point, scarcity, price range, deep personal connection. Target readers: product managers; jargon explained in-line, decision-oriented (when to use / how to choose / counterexamples).
