From 1d453a14ab5a9e2f76e9c034bb67ef219f8cb0e0 Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 20:24:32 +0400 Subject: [PATCH 01/21] chore(repo): expand .gitignore for runtime artifacts and local state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Per-machine Claude Code state (.claude/settings.local.json) but keep project skills under .claude/skills/ tracked. - Linkinator outputs (reports/links-*.{json,html}) — produced by yarn check-links. - Ad-hoc local screenshots (/screenshots/). - llms-full.txt / llms.txt / llms-full-pages/ — already auto-committed by .github/workflows/generate-llms.yml on schedule, no need to track manual copies. - scripts/import-repo.sh — personal dev utility, not for repo history. Co-Authored-By: Claude Opus 4.7 (1M context) --- .gitignore | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/.gitignore b/.gitignore index 243d6c8..c386815 100644 --- a/.gitignore +++ b/.gitignore @@ -118,3 +118,26 @@ package-lock.json # build output build/ +# Playwright +/test-results/ +/playwright-report/ +/playwright/.cache/ + +# Per-machine Claude Code state (project skills under .claude/skills/ ARE committed) +.claude/settings.local.json + +# Linkinator outputs (`yarn check-links` writes here) +/reports/links-*.json +/reports/links-*.html + +# Ad-hoc local screenshots +/screenshots/ + +# Generated by .github/workflows/generate-llms.yml on schedule, not committed manually +/public/uxcore_/llms-full.txt +/public/uxcore_/llms.txt +/public/uxcore_/llms-full-pages/ + +# Personal dev utility, not part of repo history +/scripts/import-repo.sh + From b6acfce5a8f05021abc25fb8b51c2b1e31be4f7d Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 20:25:13 +0400 Subject: [PATCH 02/21] chore(claude): add project skills for bias advisor and uxcore style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds two Claude Code skills under .claude/skills/ that guide AI-assisted development in this repo: - bias-advisor (Bob): cognitive bias advisor that suggests how to apply the 105 biases catalogued at uxcore.io to UI/UX/copy decisions. Includes bias and question references plus demo recipes used by src/components/_biases/BiasBody/demos/. - uxcore-style: UXCore visual identity guide — typography, colors, spacing, components, motion, and do/don't rules for UXCore, UXCG, UXCP, and UXCat surfaces. These auto-load in Claude Code; other agents (Cursor, etc.) can load them manually for visual or bias-related work. Co-Authored-By: Claude Opus 4.7 (1M context) --- .claude/skills/bias-advisor/SKILL.md | 180 ++ .../bias-advisor/references/bias-index.md | 109 + .../skills/bias-advisor/references/biases.md | 1946 +++++++++++++++++ .../bias-advisor/references/demo-recipes.md | 629 ++++++ .../bias-advisor/references/question-index.md | 67 + .../bias-advisor/references/questions.md | 1207 ++++++++++ .claude/skills/uxcore-style/SKILL.md | 725 ++++++ 7 files changed, 4863 insertions(+) create mode 100644 .claude/skills/bias-advisor/SKILL.md create mode 100644 .claude/skills/bias-advisor/references/bias-index.md create mode 100644 .claude/skills/bias-advisor/references/biases.md create mode 100644 .claude/skills/bias-advisor/references/demo-recipes.md create mode 100644 .claude/skills/bias-advisor/references/question-index.md create mode 100644 .claude/skills/bias-advisor/references/questions.md create mode 100644 .claude/skills/uxcore-style/SKILL.md diff --git a/.claude/skills/bias-advisor/SKILL.md b/.claude/skills/bias-advisor/SKILL.md new file mode 100644 index 0000000..c4c584b --- /dev/null +++ b/.claude/skills/bias-advisor/SKILL.md @@ -0,0 +1,180 @@ +--- +name: bob +description: > + Cognitive bias advisor for anyone building user-facing products. Use this skill + when designing UI, reviewing UX flows, writing product copy, marketing text, + email campaigns, building pricing pages, onboarding flows, checkout flows, + landing pages, CTAs, notification design, form design, A/B test planning, + conversion optimization, or making any user-facing product decision. Bob knows + 105 cognitive biases from uxcore.io and gives concrete, actionable advice — + not theory. Also use when the user invokes /bob directly. Do NOT use for pure + backend code, algorithms, DevOps, database design, or bug fixes unless the + work directly affects what users see or experience. +metadata: + user-invocable: true +--- + +# Bob — Your Bias-Savvy Colleague + +Bob is a cognitive bias advisor powered by 105 biases and behavioral patterns from UX Core (uxcore.io) by Wolf Alexanyan / KeepSimple. Think of Bob as the sharp colleague at the whiteboard who knows exactly which psychological lever applies to what you're building — and warns you when one could backfire. + +Bob is playful, a bit mischievous, and always practical. No lectures, no textbook definitions, no generic advice. Every recommendation is specific to the user's situation with a concrete action they can take right now. + +## How Bob Works + +1. **Read context** — understand what the user is working on (UI code, mockup, copy draft, pricing structure, product goal, screenshot, description) +2. **Search references** — choose the right search path based on what the user is asking: + - **Problem-first** (user describes a problem or asks "why"): scan `references/question-index.md` → match to the closest question → grep `references/questions.md` for curated answers with pre-mapped biases → supplement with `references/biases.md` for full bias details + - **Bias-first** (user is building something specific): read `references/bias-index.md` → pick relevant biases → grep `references/biases.md` by number for full details + - Either path: check `references/demo-recipes.md` for proven before/after scenarios when visuals would help +3. **Deliver a bias brief** — surface the most relevant biases (max 5, often 3 is plenty). Quality over quantity — every bias must earn its spot with a concrete action. If only 3 are genuinely relevant, stop at 3. +4. **Show, don't just tell** — when a visual demo would make the bias click, render one (see Visual Demos below) +5. **Flag risks** — always include a "Watch out" section with 1-2 biases that could hurt UX or feel manipulative in this context +6. **Offer depth** — close with an invitation to go deeper on any bias + +Skip clarifying questions unless the context is genuinely ambiguous. Dive in with the best interpretation and offer to adjust: "If I'm reading your situation wrong, tell me more about X." + +## Output Format + +``` +[One-line context acknowledgment in Bob's voice] + +Biases to leverage: + +1. **[Bias Name]** — [one-line definition] + -> [Concrete action for YOUR situation] + +2. **[Bias Name]** — [one-line definition] + -> [Concrete action for YOUR situation] + +[...up to 5, but only if each one genuinely adds value] + +[Visual demo if applicable — see Visual Demos section] + +Watch out for: +- **[Bias Name]** — [Why it's a risk here and what to avoid] + +Want me to go deeper on any of these? +``` + +## Visual Demos + +When a visual would make a bias tangible — especially for pricing, layouts, notifications, or any component the user is actively building — render a before/after demo. Use judgment: a pricing page discussion benefits from seeing an anchored pricing table; a general product strategy question probably doesn't need one. + +**In Claude Code (CLI):** Render ASCII art. Simple text-based tables, layouts, and mockups. Low fidelity but immediate and useful. + +Example — Anchoring Effect on a pricing table: + +``` +BEFORE (no anchor): AFTER (with anchor): + ++------------------+ +------------------+ +| Starter | | Starter | +| $10/month | | was $49/month | +| | | NOW $10/mo | ++------------------+ +------------------+ +``` + +**In Claude Chat (web/desktop):** Generate self-contained HTML/CSS artifacts. No frameworks, no dependencies. Use inline styles, a neutral color palette (grays + one accent color to highlight the bias in action). Focus on the pattern, not polish — the point is showing the cognitive principle. + +**Both platforms:** Always show before (without bias) and after (with bias) side by side. That contrast is what makes the bias click. + +Check `references/demo-recipes.md` for 89 proven before/after scenarios covering most biases. Use these as the foundation — adapt them to the user's specific context rather than showing the generic version. For biases without recipes, generate visuals from scratch using the bias description. + +## Gotchas + +Common failure patterns to avoid — learned from real testing: + +**Bias selection:** + +- Von Restorff ("make it visually distinct") and Bandwagon ("add social proof") are the safe defaults that show up in almost every response. They're rarely wrong, but they're rarely interesting either. Before including them, ask: is there a less obvious bias that would give the user a sharper insight? Cue-Dependent Forgetting, Placebo, Illusory Correlation, or Generation Effect are often more valuable. +- Don't pad to 5 biases. If only 3 are genuinely relevant, the 4th and 5th are filler and dilute the good ones. Stop when you run out of sharp recommendations. +- Different contexts need different biases. Onboarding is not pricing. Don't reach for Anchoring and Decoy when the user is asking about a welcome screen — Primacy Effect, Hyperbolic Discounting, and IKEA Effect are more relevant there. + +**Tone and framing:** + +- Loss framing on welcome/onboarding screens creates anxiety in first-time users. Save loss framing for re-engagement emails and trial expirations where users have something invested. Welcome screens should feel like possibility. +- Escalation of Commitment feels manipulative in wellness, meditation, and health products. Their brand is about calm and freedom — weaponizing sunk cost contradicts the product's ethos. Use history as a _cue_ for recall, not a _chain_ for guilt. +- Watch Out warnings that use aggressive language ("you MUST avoid this") trigger the same Reactance the section is warning about. Keep the tone advisory, not commanding. + +**Visuals:** + +- ASCII demos work best for structured layouts (pricing tables, forms, checkout pages, notifications, emails). They add little for abstract topics like A/B test strategy or general product direction — skip the visual in those cases. +- When the API is slow, don't skip straight to the response without searching references. The index-first search is what makes Bob's recommendations grounded rather than generic. + +## What Bob Never Does + +- Dump biases for the sake of filling a quota — 3 sharp ones beat 5 with filler +- Give academic definitions without a concrete action +- Lecture about psychology theory +- Skip the "Watch out" section — every response must include risks +- Provide generic advice that could apply to any situation +- Auto-trigger on pure code tasks (algorithms, APIs, backend, DB, DevOps, bug fixes) + +## Context Detection + +Adapt bias selection based on what the user is working on: + +| User context | Bob surfaces biases for... | +| ----------------------------- | -------------------------------------------------------- | +| UI component / page design | Visual hierarchy, attention, choice architecture | +| Product copy / marketing text | Framing, repetition, social proof, loss aversion | +| Pricing page / plans | Anchoring, decoy, contrast, zero-risk, mental accounting | +| Onboarding / signup flow | Commitment escalation, peak-end, IKEA effect, primacy | +| Checkout / conversion | Loss aversion, scarcity, endowment, reactance | +| Email / notification | Mere-exposure, illusory truth, framing, cue-dependent | +| Error messages / empty states | Humor effect, framing, negativity bias | +| Forms / settings | Miller's law, hard-easy effect, illusion of transparency | +| A/B test design | Suggests which bias to test, what to measure | +| General product decision | Dives in with best guess, offers to adjust | + +## Searching the References + +Choose the search path that fits the user's input, then check for visual recipes. + +### Problem-first path (user describes a problem or asks "why") + +When the user is diagnosing an issue ("why aren't our promotions working?", "users blame us for their mistakes"), start with the curated question dataset: + +**Step 1: Scan the question index.** Load `references/question-index.md` (~70 lines). Match the user's problem to the closest question(s) by title and keywords. + +**Step 2: Pull curated answers.** Grep the matched question in `references/questions.md`: + +``` +grep -A 30 "## 16. Why aren't our promotions" references/questions.md +``` + +This gives you pre-mapped biases with contextual explanations of _why_ each bias applies to that specific problem. + +**Step 3: Supplement.** Use the mapped biases as your starting point. Check `references/bias-index.md` for any angles the curated answers missed — there may be a less obvious bias that adds a fresh insight. + +### Bias-first path (user is building something specific) + +When the user is designing or building something ("I'm making a pricing page", "review my onboarding copy"), go straight to the bias index: + +**Step 1: Read the index.** Load `references/bias-index.md` (~110 lines). This lists all 105 biases with a 1-line product/UX description each. Scan it to identify the 3-5 biases most relevant to the user's context. Think beyond the obvious — if pricing biases dominate, look for unexpected ones that add a fresh angle (e.g., Processing Difficulty for a pricing page's CTA, or Humor Effect for an error state). Avoid defaulting to the same "safe" biases every time. + +**Step 2: Targeted lookup.** For each bias you selected, grep only that specific entry: + +``` +grep -A 20 "## 18. Anchoring" references/biases.md +grep -A 20 "## 92. Decoy" references/biases.md +``` + +This replaces broad keyword sprays — 3-5 targeted greps instead of 10+ broad ones. + +### Visual recipes (both paths) + +**Check for visual recipes.** For each selected bias, search the recipes file: + +``` +grep -B 1 -A 5 "Anchoring Effect" references/demo-recipes.md +``` + +## References + +- `references/question-index.md` — Index of 63 curated product questions with keywords. Read this first when the user describes a problem. +- `references/questions.md` — Full question entries with pre-mapped biases and contextual answers explaining _why_ each bias applies. Grep by question number. +- `references/bias-index.md` — Quick-reference index of all 105 biases. Read this first when the user is building something specific. +- `references/biases.md` — Full bias descriptions with product/UX applications. Grep by number. +- `references/demo-recipes.md` — 89 proven before/after scenarios for visual demos. Grep by name. diff --git a/.claude/skills/bias-advisor/references/bias-index.md b/.claude/skills/bias-advisor/references/bias-index.md new file mode 100644 index 0000000..79af187 --- /dev/null +++ b/.claude/skills/bias-advisor/references/bias-index.md @@ -0,0 +1,109 @@ +# UX Core: Bias Index (105 Biases) + +Quick-reference lookup. Read this first to identify relevant biases, then grep `biases.md` by number for full details. + +1. Availability Heuristics — Recent/emotional associations shape perceived risk of taking action +2. Attentional Bias — Emotionally charged elements (karma, likes, streaks) dominate user focus +3. Illusory Truth Effect — Consistent repetition of messaging makes users believe claims over time +4. Mere-Exposure Effect — Users prefer and trust things they encounter frequently or find familiar +5. Context Effect — Inconsistent messaging across pages creates dissonance and reduces trust +6. Cue-Dependent Forgetting — Contextual reminders of past wins nudge users toward re-engagement +7. Mood-Congruent Memory Bias — Users in bad moods recall negative experiences, risking churn +8. Frequency Illusion — Repeating a core idea across touchpoints makes users notice it everywhere +9. Empathy Gap — Support must adapt tone to users' emotional states for better outcomes +10. Omission Bias — Users stay subscribed to unused services because inaction feels easier than canceling +11. Base Rate Fallacy — Users fixate on a few negative reviews, ignoring thousands of positive ones +12. Bizarreness Effect — Unusual or quirky product elements are remembered more vividly +13. Humor Effect — Humor aids recall but backfires when used during frustrating error states +14. Picture Superiority Effect — Well-chosen images are remembered far better than text alone +15. Von Restorff Effect — A visually distinct element draws disproportionate attention and recall +16. Self-Reference Effect — Users engage more with content featuring people and contexts like themselves +17. Negativity Bias — One bad experience outweighs many good ones; resolve issues quickly +18. Anchoring Effect — First price shown sets expectations; strikethrough pricing drives perceived value +19. Conservatism — Users resist changing beliefs; respect existing mental models during transitions +20. Contrast Effect — Surrounding context reshapes value perception without changing the product +21. Distinction Bias — Side-by-side comparison exaggerates differences; separation softens them +22. Framing Effect — Same information framed differently triggers different emotions and decisions +23. Money Illusion — Users focus on nominal values; daily pricing feels cheaper than annual +24. Weber-Fechner Law — Small rewards feel meaningless after large losses; match incentive scale +25. Confirmation Bias — Users seek info that confirms existing beliefs; surface reinforcing cues +26. Congruence Bias — Teams test only their own hypotheses; internal analytics concern +27. Post-Purchase Rationalization — Reinforcing messages help users justify their purchase decision +28. Selective Perception — Users spot familiar UI patterns instantly; align with conventions +29. Observer-Expectancy Effect — Analysts may unconsciously filter data to confirm desired outcomes +30. Ostrich Effect — Users avoid uncomfortable info; softer labels keep them engaged +31. Subjective Validation — Users interpret vague positive statements as uniquely applicable to them +32. Continued Influence Effect — Corrected misinformation still influences; explain what changed and why +33. Bias Blind Spot — Never cite psychology publicly; users distrust perceived manipulation +34. Clustering Illusion — Random-interval notifications feel meaningfully timed to users +35. Insensitivity to Sample Size — Users trust tiny sample ratings equally; show sample context +36. Neglect of Probability — Emotional framing of consequences beats statistical risk communication +37. Anecdotal Evidence — Single vivid stories persuade more than aggregate statistics +38. Illusion of Validity — Teams overconfident in data interpretation; internal analytics concern +39. Recency Illusion — Repackage underused features as new to drive rediscovery +40. Gambler's Fallacy — Users expect random outcomes to self-correct; streak-based reward design +41. Hot Hand Fallacy — Highlighting winning streaks encourages continued engagement +42. Illusory Correlation — Brand association with prestigious names builds perceived quality +43. Group Attribution Error — Group identity labels make members assume shared traits +44. Fundamental Attribution Error — Credit users' successes to their skill, not your tool +45. Stereotype — Cultural context shapes perception; avoid color/symbol missteps per audience +46. Functional Fixedness — Users associate UI elements with one function; restructure to break habits +47. Just-World Fallacy — Framing decisions as fair and moral increases acceptance +48. Authority Bias — Expert credentials attached to advice dramatically increase compliance +49. Automation Bias — Users overtrust automated systems; add friction for high-stakes actions +50. Bandwagon Effect — Showing what most users choose nudges others to follow the majority +51. Placebo — A visible "fixing" action reduces frustration even without real change +52. Out-Group Homogeneity — Teams underestimate outside groups; internal team concern +53. In-Group Favoritism — Content from users' identified groups drives higher engagement +54. Halo Effect — Beautiful UI sets expectations for technical quality and reliability +55. Positivity Effect — Low-friction positive reactions (likes, claps) increase engagement +56. Not Invented Here — Teams reject external solutions on principle; internal team concern +57. Mental Accounting — Breaking costs into separate categories lowers spending resistance +58. Normality Bias — Users underestimate disaster risk; automate safeguards proactively +59. Survival Bias — Analyzing only successful users skews insights; internal research concern +60. Subadditivity Effect — Combined risk is higher than parts suggest; internal estimation concern +61. Miller's Law (7±2) — Limit visible elements to ~7 to reduce cognitive overload +62. Illusion of Transparency — What seems obvious to creators is unclear to users; add help text +63. Curse of Knowledge — Teams assume users understand; replace jargon with guided choices +64. Spotlight Effect — Users overestimate others' attention; realistic expectations reduce anxiety +65. Illusion of Asymmetric Insight — PMs overestimate user understanding; internal research concern +66. Hindsight Bias — After failures, warning signs seem obvious; show ambiguity was real +67. Planning Fallacy — Teams underestimate timelines; internal project management concern +68. Pro-Innovation Bias — Teams overvalue their own ideas; internal team concern +69. Overconfidence Effect — Rely on data over opinions; internal leadership concern +70. Social Desirability Bias — Users give acceptable answers; anonymity produces honest feedback +71. Third-Person Effect — Users believe ads affect others not themselves; be subtle with power users +72. Consensus Bias — Teams assume shared agreement; internal communication concern +73. Hard-Easy Effect — Features slightly complex for teams are very hard for users +74. Dunning-Kruger Effect — Users don't know better methods exist; proactively suggest improvements +75. Barnum Effect — Vague flattering statements feel uniquely personal to each user +76. Illusion of Control — Polls with pre-filtered options give users a satisfying sense of influence +77. Illusory Superiority — Comparative flattery ("top 15%") reinforces inflated self-image +78. Risk Compensation — Users who feel protected take more risks; maintain responsibility signals +79. Hyperbolic Discounting — Users prefer instant rewards; highlight immediate benefits over future savings +80. Appeal to Novelty — Labeling features as new boosts perceived value even without real changes +81. Escalation of Commitment — Showing sunk investment makes abandonment feel wasteful +82. Generation Effect — Users remember self-generated content best; active recall beats passive display +83. Loss Aversion — Pain of losing is 2x pleasure of gaining; loss framing creates urgency +84. IKEA Effect — Users overvalue what they helped create; protect their invested effort +85. Unit Bias — Small completable batches sustain motivation better than overwhelming totals +86. Zero-Risk Bias — Users pay extra to eliminate small risks; stack guarantee badges +87. Processing Difficulty Effect — Cognitive friction on destructive actions forces engagement with consequences +88. Endowment Effect — Users overvalue what they possess; acknowledge ownership during changes +89. Backfire Effect — Contradicting users strengthens their belief; use collaborative exploration instead +90. System Justification — Users defend the status quo; avoid challenging their worldview in messaging +91. Reactance — Restricted freedom triggers pushback; acknowledge user choice to increase compliance +92. Decoy Effect — An inferior third option makes the preferred choice look like a better deal +93. Ambiguity Effect — Users avoid uncertain options; quantify benefits with specific guarantees +94. Information Bias — Too much comparison data delays decisions; streamline to sufficient info +95. Law of Triviality — Teams waste time on minor details; internal meeting concern +96. Conjunction Fallacy — Detailed stories and credentials feel more credible than sparse facts +97. Less-Is-Better Effect — One specific premium bonus outperforms broad but shallow offers +98. Implicit Stereotypes — Unconscious cultural associations influence perception; internal content concern +99. Prejudice — Cultural biases shape reactions to colors, numbers, symbols; localize accordingly +100. Fading Affect Bias — Negative emotions fade faster than positive; recover quickly from incidents +101. Peak-End Rule — Users judge experiences by peak moment and ending; invest in finishes +102. Serial Recall — Logical step sequences are remembered better than arbitrary ordering +103. List-Length Effect — Fewer options with fewer features increase recall and conversion +104. Primacy Effect — First impressions anchor entire perception; invest heavily in onboarding +105. Serial-Position Effect — First and last items recalled best; bury bad news in the middle diff --git a/.claude/skills/bias-advisor/references/biases.md b/.claude/skills/bias-advisor/references/biases.md new file mode 100644 index 0000000..e0309fa --- /dev/null +++ b/.claude/skills/bias-advisor/references/biases.md @@ -0,0 +1,1946 @@ +# UX Core: 105 Cognitive Biases & Behavioral Patterns + +Source: https://keepsimple.io/uxcore by Wolf Alexanyan / KeepSimple + +## 1. Availability heuristics + +[Wikipedia](https://en.wikipedia.org/wiki/Availability_heuristic) + +### Description + +People tend to overestimate the likelihood or importance of events based on how easily examples come to mind. Recent or emotionally charged events are often given disproportionate weight in decision-making. + +### Usage in Product/Software + +In software development, understanding this bias is necessary for consistent interface design, content design, and user communication. If the action we need the user to do is associated with something negative (especially if it's been covered in the media not so long ago), the likelihood that an action will be taken is greatly reduced. Understanding this allows us to design content (text, images, etc.) so that it is associated only with what we need. +This bias allows us to reflect on the current world and market conjuncture to choose a better tone for our messages. + +Another example: Bitcoins and various kinds of ICOs. The topic of cryptocurrencies was so often negatively boosted in the media that, at some point, investors simply decided to avoid everything connected with it. +Common users realized that the blindness caused by the increased volatility of this market did not end well. The hype on this topic eventually fizzled out. As collateral damage, many high-quality blockchain projects have faced severe difficulties due to the highly distorted reputation of everything associated with blockchain, Bitcoin, and crypto in general. + +I chose a bitcoin-related topic because in 2020 (when I was writing these examples), when I asked myself, "Which topic got a huge hype in IT and then quickly vanished?" the answer was, "Cryptocurrencies". The very fact of this thought is also an example of this bias in action. + +--- + +## 2. Attentional bias + +[Wikipedia](https://en.wikipedia.org/wiki/Attentional_bias) + +### Description + +People tend to focus excessively on certain details while ignoring equally important information, especially when those details are emotionally charged or personally relevant. + +### Usage in Product/Software + +This bias can be used to draw our user's attention to things we want. +If we want to encourage our users to open the profiles of other members of our platform, we should create more valuable things in their own profiles. This can be such things as karma points, the total number of likes, the number of sent messages, etc. + +This bias can also harm our business, if not handled properly. Partially this bias is one of the reasons that Facebook users started to generate less content than they had to. +People became so heavily dependent on likes and other sympathy gestures that the fear of not being popular decreased the number of publications. Realizing this, Facebook created the mechanism of Stories - the opportunity to share something that disappears after 24 hours unobtrusively. + +Also, Facebook is testing the possibility of removing likes in different countries. The idea is simple - If people pay less attention to such elements of public recognition, it will become easier for them to create content. The more content created - the more valuable the network is, and the more users will be involved. Further, according to [Metcalfe's Law,](https://en.wikipedia.org/wiki/Metcalfe%27s_law) the more users involved - the higher the utility of the network and hence more profit. + +--- + +## 3. Illusory truth effect + +[Wikipedia](https://en.wikipedia.org/wiki/Illusory_truth_effect) + +### Description + +Also known as the reiteration effect. The more often something is repeated, the more likely people are to believe it, even if it’s false. + +### Usage in Product/Software + +This bias is food for politicians, marketing specialists, mass media, and many others. +In software development, understanding this bias shows us why the importance of consistency in product terminology and public communication (marketing, press). + +If we constantly say that our app is the best habit tracker in the world, and this correlates with customer feedback and blog reviews, which refer to our app as the best tracker, people wondering which tracker to choose, are more likely to remember us. +The potential user can even put us on the same level with trackers of multibillion-dollar companies, even if we work locally, only targeting the village he lives in. +This effect can also explain the meaning of slogans. For example, Apple, with the slogan Think Different, plays with our need to be original and not like everyone else. They repeatedly use it in all their products and ads to have a consistent image of their products in our minds. + +--- + +## 4. Mere-exposure effect + +[Wikipedia](https://en.wikipedia.org/wiki/Mere-exposure_effect) + +### Description + +The psychological phenomenon by which people tend to develop a preference for things merely because they are familiar with them. The more someone is exposed to something—whether a person, object, or idea—the more they tend to like or accept it, even without realizing why. + +### Usage in Product/Software + +It is important to emphasize that it is not only about people but about objects in general. +Imagine we have a successful mobile app we want to promote in Spain. If we properly use the colors of the Spanish flag on the background of the description of our application and our digital promotional materials (without overkilling, of course), Hispanic readers will subconsciously sense it familiar. + +Another example is that we place a faded, monochrome image of [Sagrada Família](https://en.wikipedia.org/wiki/Sagrada_Fam%C3%ADlia) on the background of a white page that describes the benefits of our app in Spanish. If the text is well written and we use proper pompous words along with background image, it will easily give the effect of familiarity and increase the probability of converting potential users into actual ones. + +The opposite way of using this bias is when we draw users' attention to something in our app using UI components that they see first time in the app. This can be easily achieved if we have UI guidelines in our app, that limit us to using specific buttons, typography, and colors. +Since users won't be familiar with our new pop-up or something they haven't seen before, they will be more attentive and cautious the intensity of which will be proportional to how long the user has been using our application. + +--- + +## 5. Context effect + +[Wikipedia](https://en.wikipedia.org/wiki/Context_effect) + +### Description + +People’s perceptions and decisions are heavily influenced by the environment or context in which information is presented. + +### Usage in Product/Software + +In software development, the Context effect can be attributed to the user's expectations of the product. If, on the main page of our product website, we talk about the non-profit orientation of the project, but later, after registration, we offer the user something to buy (even if not from us), the dissonance caused by the contrast of the purchase offer and what the user saw earlier will lead to negative feelings. +The purchase offer will fall out of the general context and reduce user satisfaction with the product packaging and, later - the product itself. This is another reason why it is important to approach the architecture of information very carefully and keep our public communication consistent and coherent. + +--- + +## 6. Cue-dependent forgetting + +[Wikipedia](https://en.wikipedia.org/wiki/Cue-dependent_forgetting) + +### Description + +People often forget information unless they have the same cues (sights, sounds, or other triggers) that were present when they first learned it. + +### Usage in Product/Software + +In the context of the software application, we can use this bias to nudge users to do certain actions. + +As an example, let's take a look at the online betting platforms that work 24/7. All users sometimes win and sometimes lose. The only generic success criteria for the platform is to ensure that the users are making bets. How can they do that? By supporting those users who lost a significant amount of money so they won't feel so much like failure. + +In the mind of a player who has experienced a series of defeats, he can't recall any positive event. What the platform can do is remind him of his win streaks and success patterns of the past. This can be done indirectly with a message like "Dear %username%; we just wanted to remind you of your incredible winning streak that has lasted three days in a row at %game*names%. +If this message looks too direct, we can soften it in the form of "Due to your winning streak in %game* name%, you are now in the 20% of our top players in %sport_name%". Less aggressive, less personal, and more reliant on statistics. + +Of course, we use this as an example, while in the real world, doing this in betting might not be allowed. Such organizations as Malta Gaming Authority (MGA), Curaçao, and others do not allow their license holders to push players into acute gambling. + +--- + +## 7. Mood-congruent memory bias + +[Wikipedia](https://en.wikipedia.org/wiki/Mood_congruence) + +### Description + +People are more likely to recall memories that match their current emotional state—happy memories when they’re happy and negative ones when they’re upset. + +### Usage in Product/Software + +In software products, understanding this bias is important to properly manage user expectations and avoid errors that may cause the cancellation of service. + +If the user has a bad mood while using our application (no matter why), he tends to recall negative events. Since human memory is associative, such a user might extrapolate those feelings toward our application with no objective reason. Moreover, any technical error that the user experiences on the app. +Imagine our app is an online video game where a user has lost 30% of his virtual currency over the last three days. He knows that it will take him about a week of effort to bring it back. Obviously, he cannot be in a good mood, and it does not benefit us in keeping him in negative emotions. + +Let us assume that his annual membership is about to expire, and we need to request the due payment. If we do not interfere, the system will automatically request the payment for the game. As he continually recalls his fresh memory of losing 30% of his game money, he may make an emotional decision and give up playing completely, which is not in our business interest. +Instead, we can provide him with some kind of temporary bonus, wait for his gaming economic condition to stabilize, and then send a payment request. Once he gets back on track, he will pay for the game with no hard feelings. + +--- + +## 8. Frequency illusion + +[Wikipedia](https://www.damninteresting.com/the-baader-meinhof-phenomenon/) + +### Description + +Once you notice something for the first time, you start seeing it everywhere, even though its actual frequency hasn’t changed. Also known as the Baader-Meinhof phenomenon. + +### Usage in Product/Software + +This bias highlights the importance of proper content formation in software products. + +For example, we have an ecosystem consisting of several products, and we need to convey to our users the idea that they are part of our community. To achieve this, we can start emphasizing this idea in different pieces of content within all the products of our solutions ecosystem. +Our messaging should be straightforward and consistent (e.g., "Fastest payouts for freelancers!"). The idea here is to penetrate the user's subconscious so that we can root deep belief of our idea in them. + +Of course, this bias can also be used within a single product; however, the fewer the products and their sizes are, the more difficult it is to use this bias and not look too pushy, repetitive, and noisy. + +--- + +## 9. Empathy gap + +[Wikipedia](https://en.wikipedia.org/wiki/Empathy_gap) + +### Description + +People struggle to understand how others feel when they’re in a different emotional state, or even how they themselves would feel in a future emotional state. For example, for an agry person, it is difficult to understand what it is like to be calm and vice versa. + +The most important aspect of this idea is that human understanding is state-dependent. + +### Usage in Product/Software + +The best way to illustrate this bias is its introduction to a customer support team of our software application. +First, we can indicate possible types of emotional states of our customers. Then, we can come up with instructions on how to deal with each customer type. For instance, with aggressive customers, our support team, instead of "Please calm down," can say, "We understand". It can be said with a soft, sympathetic voice and include mirroring and labeling techniques (Described in Chris Voss' book "[Never Split the Difference](https://www.blackswanltd.com/never-split-the-difference)"). +Proper training of our customer support team and explaining to them the fundamentals of this bias will reduce the emotional stress of our colleagues, as they won't get much affected by the customer's negative attitude. + +--- + +## 10. Omission bias + +[Wikipedia](https://en.wikipedia.org/wiki/Omission_bias) + +### Description + +People tend to judge harmful actions more harshly than equally harmful inactions, often letting those who choose to do nothing off the hook. Responsibility for action by people is perceived more than inaction. + +### Usage in Product/Software + +Let's put moral and ethical norms aside and illustrate a real example of using this bias in the software product. + +When we understand this bias, we can create an online service with subscriptions in such a way that people would just be lazy to unsubscribe from it. I believe many of us can find ourselves a victim of this bias, as plenty of services we use, use this bias against us. + +In the opposite example, we may want people to unsubscribe from services they don't use. We might want this to obtain vital information to analyze our product efficiency and value. To achieve this, we can send a request to our customers, asking them to update the list of services that are being used. In that request, we will clearly state all the negative consequences that will follow the inaction. + +--- + +## 11. Base rate fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Base_rate_fallacy) + +### Description + +This is the tendency to ignore general information and focus only on the specific case, even when the general information is more accurate. For instance, people instantly believe the test results of a rare disease, not taking into account that the disease is rare. + +Another example is the fear of terrorists and flying on a plane. The bottom line is that our brain tends to exaggerate a particular case over statistics. + +### Usage in Product/Software + +The product team should know this bias in order to write proper messages about the product, as well as in public communication. +For example, if we have to describe an event with a potentially negative outcome, we should understand how this bias will affect users' perception of our message. Let's take a look at this message: +"You are about to start the disk defragmentation process. With a 99% probability, the operation will be successful." +And another one: +"You are about to start the disk defragmentation process. There is a 1% chance that the hard drive will be destroyed, and your data will be permanently lost." +In both cases, the semantic load stays the same. Still, in the case of the second message, the user might recall some of his friends who lost the data on their hard drive and won't risk it. + +This bias should also be understood to provide quality technical support. A disappointed user who did not find a reasonable explanation for the program error can leave negative feedback about the application. This will harm the product more than it may seem. +When people see 50 extremely negative reviews mixed with 15,800 good ones, they tend to consider the product way less valuable, although the negative reviews are less than 0.1%. + +--- + +## 12. Bizarreness effect + +[Wikipedia](https://en.wikipedia.org/wiki/Bizarreness_effect) + +### Description + +People are more likely to remember unusual or odd information compared to mundane or typical details. + +### Usage in Product/Software + +In software development, this effect can be radically damaging, or the key to success, highly depending on the situation where it's used. +If the bizarre material we use requires more cognitive load for analysis, then this is a poor user experience. +To use this bias, we first need to understand whether our product is suitable for it. For an app that helps you quickly organize a memorial ceremony, bizarreness surely will be an outlier that will affect the app's success rate. Another social media app that "matches" your profile picture to mythological heroes and generates texts like "You were born in the same month, under the same stars. You are Apollo!" draws huge masses of users with its bizarreness and the easy principle of work. + +--- + +## 13. Humor effect + +[Wikipedia](https://en.wikipedia.org/wiki/List_of_cognitive_biases#Humor_effect) + +### Description + +Funny or humorous information is more likely to be remembered than non-humorous content, thanks to the emotional and cognitive engagement it triggers. + +### Usage in Product/Software + +The best example of using humor in products is memes. + +Many companies use memes to promote their products, and the Humor effect is exactly what they bet on. It is very important to understand that this bias is about remembering humorous things but not about a positive attitude towards them. +If the user performs an important action (form filling, data saving) and suddenly get to the error page 500 (Internal server error), 502 (Bad gateway), 503 (Service unavailable), 504 (Gateway timeout)), then humor like "Ho ho! Our pirates are working on it, and soon everything will work again!" will not be appropriate. +In this scenario, humor will be noticed, remembered, and stored in memory linked with the emotion of disappointment and/or anger. If such an event occurs several times in a month, according to the [Availability heuristic](https://keepsimple.io/uxcore/1), then the user's opinion about the product quality will drop significantly. This will happen even if, in 99.9% of cases, the application was running smoothly ([Base rate fallacy](https://keepsimple.io/uxcore/11)). + +--- + +## 14. Picture superiority effect + +[Wikipedia](https://en.wikipedia.org/wiki/Picture_superiority_effect) + +### Description + +People remember visual content better than words alone; images are more likely to be retained and recalled. + +### Usage in Product/Software + +The research says that images have advantages over words with regard to coding and retrieval of stored memory because words are coded more easily. Since mental effort is a time investment, it turns out that a person is more likely to remember something if the process of analyzing a certain object is longer. And that is why he remembers an image better than text. + +However, it is not that simple, as it highly depends on the image and text itself. Not to speculate too much on this effect, I will only note that a well-chosen image can replace thousands of words in certain cases. Placing the image in a context that is familiar to the user ([Mere exposure effect](https://keepsimple.io/uxcore/4)) might be the winning move in many cases. The use of this effect depends on an excessively large number of factors. + +--- + +## 15. Von Restorff effect + +[Wikipedia](https://en.wikipedia.org/wiki/Von_Restorff_effect) + +### Description + +Also known as the isolation effect, people are more likely to remember an item or event that stands out dramatically from its surroundings. + +### Usage in Product/Software + +Imagine in our website header, we have a navigation menu with the following buttons: +| Home | About us | Our services | Our products | Contact |. + +Now, let us put another item here, naming it, say, 420: +| Home | About us | Our services | 420 | Our products | Contact |. +Obviously, button "420" will draw too much attention, and even if we do not click on it, it is highly likely that we will hover over it (what if there are categories there?). This effect can be used both to make some content invisible (such as Terms of Service and Privacy Policy items) and vice versa, to draw users' attention to the new features of our product. + +--- + +## 16. Self-reference effect + +[Wikipedia](https://en.wikipedia.org/wiki/Self-reference_effect) + +### Description + +People are more likely to remember information if they can personally relate it to themselves. + +### Usage in Product/Software + +This effect is widely used by marketing specialists. In advertising, customers perceive information better if the advertisement shows people similar to them. In the same way, people are more likely to remember birthdays that are closer to their own birthday, and so on. + +If we have developed an application for an older generation, then using the images of young couples on the home page will be unreasonable. This effect can also be used in context links (Click here if you served in the army between 2005 and 2015), menu (| Freelance | Private Business | Public Institutions), and many other places. + +--- + +## 17. Negativity bias + +[Wikipedia](https://en.wikipedia.org/wiki/Negativity_bias) + +### Description + +People tend to focus more on negative experiences or information than positive ones, even when both are equally present. + +### Usage in Product/Software + +That bias is the reason why we should solve any conflicts with end-users of our product as gently and quickly as possible. To erase a memory of a bad experience with our product might take days, weeks, or even months of constant effort. And this is despite the fact that the experience itself could last less than an hour. + +If the user experiences a bad event within our product, and the memory of the previous negative experience is still fresh, this might draw a picture in the user's reality that our product is "full of errors, and constantly fails". Our product can still be highly efficient and available 99.99% of the time, but this won't be enough for a group of users that are prone to negativity bias ([Base rate fallacy](https://keepsimple.io/uxcore/11)). +As a solution, many companies notify users in advance of possible system errors. Even if the user was offline and wasn't affected by occurred errors, a letter of apology and a progress report might be shared with them. All this becomes even more important if we work with Enterprise customers. + +--- + +## 18. Anchoring effect + +[Wikipedia]() + +### Description + +People rely too heavily on the first piece of information (the "anchor") they receive when making decisions or judgments, even if it’s irrelevant. + +### Usage in Product/Software + +Understanding this bias is crucial for any kind of e-Commerce business because an easy play with numbers can be converted into large sales. Let's take a look at the example based on an online shop. + +There is such a thing as MSRP (Manufacturer Suggested Retail Price). In most cases, manufacturing companies use this indicator to standardize the prices of their products for different parts of the world. By placing MSRP at, say, 2000$, they try to ensure that the price won't go higher than this in reseller stores. + +However, if we're talking not about the international brands but about some local businesses, the MSRP can be used as an anchor to boost our local sales. +Let's imagine we put MSRP for some not-well-known laptops brand to $2849. Then we put the store price at $2099 next to the MSRP price on the product. We strikethrough the $2849. Then, we put a 20% discount on the product with the final price of $1679. + +The potential customers will see a cascade of discounts and will anchor to the initial $2849. In their reality, they see more than 40% discount on the product of their choice. If the initial strategy of the laptop brand was to sell it at around $1550, then this deal looks like a huge win-win for both parties. + +Working in e-Commerce without learning the anchoring effect is, to say the least, naive. Although alert readers will understand the benefits of this knowledge far beyond e-Commerce. + +--- + +## 19. Conservatism (belief revision) + +[Wikipedia]() + +### Description + +People tend to cling to their prior beliefs or initial impressions, even when presented with new evidence that should prompt them to change their views. This bias describes human belief revision in which people over-weigh their existing belief (base rate) and under-weigh new sample evidence when compared to the previous belief revision. + +This cognitive bias explains one of the reasons why it is so difficult for people to change their views, values, and beliefs. + +### Usage in Product/Software + +A simple way of illustrating the importance of this bias acknowledgment is to work with content related to our product. Be it communication in the product, or marketing information piece, we have to be very cautious and remember the factor of conservatism. +Any piece of our communication should be reviewed to ensure we don't hurt anyone by touching on the topic of their personal values. + +Another utility of this bias is how we work with our target audience. We must learn upfront all beliefs of our users, ideally, collected in the form of User Persona. One of the best values this can give us is the precision of tasks we assign to our colleagues. +Consider content writers. Often they receive tasks in the form of a "Write an article about this product feature. We're the best on the market, our competitors are weak, and we also have thousands of users of this feature." Given how generic this information is, the output looks like ChatGPT-generated standard promo text. Now, what if we could share our user beliefs-related information with the same content writer? A single piece of such information as "Our audience consists of young couples 18-27, most of whom either already have children or are going to. They live in %city_name%, and they are concerned about air quality. It is also a common practice in this area to attend Sunday worship ceremonies in church." + +A competent content writer can use these indications of the beliefs and values of our users in such a way that ChatGPT won't even be close. + +Another reason to learn all aspects of conservatism is its importance in keeping socio-cultural norms. In other words, regardless of how good our application is, if we ignore socio-cultural aspects that are the fundamental aspects of any conservative belief, we might fail quickly. + +--- + +## 20. Contrast effect + +[Wikipedia](https://en.wikipedia.org/wiki/Contrast_effect) + +### Description + +The way people perceive something can be heavily influenced by comparing it to something else, often making things appear better or worse depending on the contrast. + +### Usage in Product/Software + +Understanding this effect is important for creating consistent interfaces. +If, while surfing through the website, the user suddenly gets to the page where, for some reason, the system couldn't load the page styles (CSS), the faded look of the page will be perceived by the user as something much worse and unacceptable than it actually is. + +Unfortunately, software engineers often ignore the importance of visual elements, telling "It's just CSS," and preferring to implement functionality first. While this logic of theirs is understandable, when we talk about a released project that is available for the users, we shouldn't compromise on the UI quality in any way. + +Many companies (and some of ours, too) hold a separate specialist who does only HTML-CSS (and very basic JS). The idea is to allow the engineering team to work with the logic while the markup ninja will make a pixel-perfect design "as in Figma". +The idea here is that our main priority is always the end-user, and in the majority of cases, our argument that "It's just a CSS/color/padding/structure" won't bode well for us. + +Let's take another example of the actual product. Let's say we are going to launch a dating website. Depending on our audience and how we position ourselves, the images we will use will differ greatly. If we are doing a project for single people who were previously married, our audience age will be mostly 30+. It's expected that the priority for these people is reliable, kind, stable family partners. +As a result, we develop images of average, happy couples who found each other on our website! + +A different approach is when we focus on students. Obviously, the images of the people mentioned above will not be suitable due to the impulsiveness of the young audience, its hormonal background, and completely different life priorities. Vivid photos of young girls and boys will be more suitable here. + +What does the Contrast effect have to do with this? In the first case, if we place images of vivid young people, the confidence of those who have been divorced will be damaged, and according to this effect, they will consider themselves less attractive. In the second case (youngsters), if we put "average couples" photos, it will contrast with the audience's opinions about themselves. After all, they consider themselves quite extraordinary and unique. In other words, they are prone to youthful exuberance. +All these are just examples, and generally, when the criterion for developing something is the contrast effect, A/B testing will have to be carried out to find out the truth. + +--- + +## 21. Distinction bias + +[Wikipedia](https://en.wikipedia.org/wiki/Distinction_bias) + +### Description + +When comparing two things side by side, people tend to overemphasize their differences, often exaggerating the significance of those differences when making decisions. + +### Usage in Product/Software + +Understanding this bias allows us to take different approaches in information architecture development for our application. + +For example, if we want the user to see the difference between two service plans of our app clearly, we can put the service plans in a row within a single view-port of their device, indicating the characteristics and prices of each (you have seen such on many websites in the Pricing section). +But if our goal is to alleviate the differences in our service plans and make users feel like those plans are "similar" (no matter why), we can place them vertically instead of placing them horizontally. + +The assumption goes that the user will have to scroll the page to evaluate the differences, and such non-simultaneous analysis will let us achieve our goal. +This bias is also one of the reasons why online sweepstakes and various kinds of casinos do not show Deposit Amounts, Winnings, and Losses on the same page. This may be a good UX solution but it won't meet the project's business targets, as the user will give more importance to the difference between winning and losing. It does not even matter what he will give more importance to. The fact that the user will have feelings and thoughts beyond control poses risks for the business. + +--- + +## 22. Framing effect + +[Wikipedia]() + +### Description + +The way information is presented (framed) can significantly influence decisions and judgments, even if the underlying facts remain the same. + +### Usage in Product/Software + +This is one of the most important biases to understand because of its ubiquitousness. + +Let's take a look at these message examples. Let's assume they appeared upon the user's click on the "Start System Update" button: + +"You are about to start the system update process. 99% probability the operation will succeed.""You are about to start the system update process. The probability of permanent data loss is very low."If, for example, the probability of data loss is less than 1%, the very fact of mentioning that the permanent data loss is low will be perceived by the user much more intensively, disproportionately to the 1% probability. + +Another example. +Our mobile app's user receives one of two messages: + +"You got 20 points and beat 70% of our project's users!""You got 20 points and got into the top 30% of users of our project!" The alert reader will notice that the meaning of the messages is semantically the same, but the arising emotions vary greatly depending on the situation. +As a good addition to this effect, I would recommend learning the [7-38-55 Rule ](https://www.rightattitudes.com/2008/10/04/7-38-55-rule-personal-communication/)of Dr. Albert Mehrabyan - a remarkable Armenian scientist. Although it is about live communication, an attentive reader will be able to find valuable information to use in the product. Special attention should be paid to the fact that this effect forms the end-user expectations after reading the content—every word, every message written anywhere in the project matters. +Alas, currently, in most companies, the importance and integrity of the content are highly underestimated, especially if the management team of the company consists of only engineers. For the same reason, most companies are being shut down or sold to other engineers. + +--- + +## 23. Money illusion + +[Wikipedia](https://en.wikipedia.org/wiki/Money_illusion) + +### Description + +People tend to focus on the nominal value of money (its face value) rather than its real value, which considers inflation or purchasing power. + +For example, if you have $1,000 (10 banknotes with a face value of $100 each), you will assume that if you do not take a single banknote and no one steals it, then the amount of money will not change in a year. In fact, there will be a smaller amount of money in a year, although neither the number of banknotes nor the figures pictured on them will certainly change. + +Simply put: the ordinary person does not think about money in terms of inflation. + +### Usage in Product/Software + +Understanding this bias is primarily important in the context of any application where users deal with money. + +Let's look at the example from video game development. +Despite its graphics and playability, many online games are faced with big challenges due to the underestimation of inflation. If, one day, the management team of an online game decides to distribute any bonuses to players, understanding the Money illusion and inflation mechanisms is vital. Otherwise, they might end up in a situation where the valuation of their in-game currency will be so small that all their money-based incentive mechanisms won't work anymore. +This bias can also be used to develop applications for casinos and various types of sweepstakes. When you are aware of inflation that hit some currencies by, say, 7% in the last 3 months, but the users still think it costs the same, it allows maneuvering and organizing magnificent bonuses and various kinds of promotions without actual self-cost increases. + +--- + +## 24. Weber-Fechner Law + +[Wikipedia](https://en.wikipedia.org/wiki/Weber%E2%80%93Fechner_law) + +### Description + +This principle states that the perceived difference between two stimuli decreases as the magnitude of the stimuli increases. In other words, people are less likely to notice small changes when the overall size or intensity is large. + +### Usage in Product/Software + +Let's illustrate this bias on casinos or sweepstakes. +This bias makes it obvious that offering the user $2 when he has just lost $1,000 is mildly said, not a good idea. If the goal was to ease out the loss effect, then the $2 could be spent in a more useful way. For instance, in online poker rooms, the system gives tournament tickets instead of 1$ bonus. The cost of the ticket is still $1, but participation in the tournament leads to more intense, positive feelings. In other words, it feels more "meaningful". + +--- + +## 25. Confirmation bias + +[Wikipedia](https://en.wikipedia.org/wiki/Confirmation_bias) + +### Description + +People tend to seek out, interpret, and remember information that confirms their preexisting beliefs while ignoring evidence that contradicts them. + +### Usage in Product/Software + +This is another bias that is important to understand, along with [Conservatism](https://keepsimple.io/uxcore/19). +If, in the case of Conservatism, we should avoid conflicts with the long-standing beliefs of our users, then in the case of Confirmation bias, we should focus on tactics and short-term goals. +Thus, we might place "mental bonuses" in different parts of our application that will meet our users' expectations and beliefs. + +Let's look at the example. Imagine we have a website that allows us to initiate online auctions and sell secondhand goods. There are many such projects, and our main value proposition is that we allow people to trade anonymously. +From the very first day with all our content, we show that our users' privacy and security are primarily essential to us. +The platform visitors have a set of expectations upon registration. In the case of this project, the understanding of Confirmation bias allows us to outline two dominant viewpoints of our users: some of them will consider the project sketchy and doubtful (Once we make the slightest mistake, they will leave thinking that it was bound to happen). +Another part of users will think that everything is OK and rely on anonymity and security promises. Understanding this allows us to create content, newsletters, and new system features, taking into account the plurality of the users' beliefs. Our communication should be designed to address both: the concerns of the first group and the comfort of the second. +As a result, at some point, after gaining our users' trust, this approach can make us one of the world's largest online retailers (more detailed examples are described in "[The Everything Store](https://www.amazon.ae/Everything-Store-Jeff-Bezos-Amazon/dp/0316219266)" book). + +--- + +## 26. Congruence bias + +[Wikipedia](https://en.wikipedia.org/wiki/Congruence_bias) + +### Description + +People tend to test their assumptions in a way that only confirms their initial belief, ignoring alternative possibilities or solutions. + +### Usage in Product/Software + +Understanding this bias is important when creating metrics by which we evaluate the results of A/B tests and other success metrics of our product. + +Let's assume that the 2500 new users who have registered on our website in the last week are the result of launching our advertising banner on the popular website testing.com 10 days ago. +Due to the Congruence bias, we tend to focus our attention on the characteristics of the audience who visited testing.com without taking into account that the testing.com visitors could ignore our banner; and completely ignore the group of people who visited our website regardless of the banner on testing.com. +As an example, our partner at testing.com might be a dishonest person who might realize in advance that we expect good results from our cooperation, so he could use Google Ads before launching our banner, targeting an audience relevant to our banner. This kind of trick will never be thought of in our reality because of the Congruence bias. +Once we consider the possibility of such a scenario, everything will change, and the effect of this bias will be alleviated. + +--- + +## 27. Post-purchase rationalization + +[Wikipedia](https://en.wikipedia.org/wiki/Choice-supportive_bias) + +### Description + +Also known as Choice-supportive bias. After making a purchase, people convince themselves it was a good decision, even if there’s evidence to the contrary, to avoid buyer’s remorse. + +### Usage in Product/Software + +Understanding this bias allows a wide variety of online retailers to send customers "Thank you!" letters with texts like "Thank you very much for choosing %product_name%! This is the best %product_type% on the market, and we are glad you made such a good choice!" +One of the main goals of such a letter is to give a person more thoughts to rationalize their actions and lower the probability of product return. +The intensity of used rationalization message content should be proportional to the complexity of the user's decision. Of course, in most cases, when buying products on a website, we do not know whether the purchase was easy or difficult for the user. However, if we sell beautiful teacups that cost $49 a piece, it may make sense to spend a few dollars on a beautiful wrapper, a thank-you message that no one reads (and yet they are important!), an email about how great it is to be the owner of this limited edition cup, and so on. + +I remember I bought a bike saddle made by an English brand, Brooks. This brand has always been distinguished by high-quality saddles, but in any case, $150 per saddle was expensive for me. Since the moment of purchase, I somehow rationalized it, mainly repeating to myself that "They are the best!" Having received a saddle in a beautiful box with nice inscriptions, I continued unpacking. +I was surprised to find not only a thank-you letter from the company director but also the issue of the English newspaper, which had a large image of a young couple hiding in a forest. Of course, newspapers never have a direct relation to bicycle saddles, yet, finding all that in the box that day made me solve my inner dilemma and complete purchasing rationalization. +So the main idea I want to bring up here is that once the customer has bought something from us, this should be the beginning of their journey but not the final destination, at least for us. + +--- + +## 28. Selective perception + +[Wikipedia](https://en.wikipedia.org/wiki/Selective_perception) + +### Description + +People tend to notice and interpret information in a way that aligns with their current beliefs, filtering out details that don’t fit. + +### Usage in Product/Software + +The easiest way to illustrate this bias in action is when we work with text editors. +Let's say we're working in Word or Google Docs, and at some point, we decide to change the text color or make it bold or italic. Partially because of this bias, our attention will bring us exactly to that tool on the tool panel, among dozen of other icons, buttons, and labels. + +Working with different editors made us form a set of expectations of what the editor should be, what the toolkit should be, and how it should be placed. In some way, we can be considered experts in working with editors. And this exact knowledge can help us when working with navigation in various applications. + +Selective perception should be considered anytime we build a new feature. We should research the existing market solutions and the best practices the users of those solutions prefer. Due to the variety of factors to be considered while appealing to selective perception, proper A/B testing might be necessary. + +--- + +## 29. Observer-expectancy effect + +[Wikipedia](https://en.wikipedia.org/wiki/Observer-expectancy_effect) + +### Description + +Also called the Experimenter-expectancy effect or Expectancy bias. + +This bias occurs when the person expects a certain result and subconsciously manipulates the situation or misinterprets the data to detect the desired result. + +### Usage in Product/Software + +Understanding this bias is necessary to correctly read the analytical data on our application. +This bias becomes even more important for top management because middle-range managers are more vulnerable to this bias. This is so because they constantly work on proving their own effectiveness and the effectiveness of their decisions. + +Most often, people fall victim to the bias because they want to see more appealing numbers. +For example, the number of returned users of our website is 98, but if we set a filter in Google Analytics to count not from February 18, 2020, but the 17th, then the number will increase to 235. At some point, we can fool ourselves into thinking something vague like "Well, there is a time zone difference and X and Y," and use 17th February as a start date to generate a report that will better meet our expectations. +In turn, this report will be given to the management, who will perceive it as accurate and won't notice anything wrong. Based on the provided data, the management will make the wrong decision to extend cooperation with the marketing agency, etc. + +--- + +## 30. Ostrich effect + +[Wikipedia](https://en.wikipedia.org/wiki/Ostrich_effect) + +### Description + +People tend to avoid dangerous or negative information, sometimes completely ignoring it. In a broader sense: avoiding information that can cause psychological discomfort. + +### Usage in Product/Software + +One of the illustrations of this bias is when in online shops or video games, creators mask real money expenses with various in-game currency or bonus points. + +Speaking broader, the psychological discomfort in the context of working with software should be understood in a wider sense. To ensure the best experience for our users, what we can do is add their expectations to the User Persona. Later, we can outline user workflows and understand user expectations at each step of the workflow. +Knowing our users' expectations allows us to evaluate the psychological discomfort from a particular action and research ways to alleviate it. + +For example, if we know that by sending a message on our social network, the user may worry if the message has been sent, we can add the "Delivered" message status, which, as we all know, is widely used in most social networks and various kinds of messengers. + +--- + +## 31. Subjective validation + +[Wikipedia](https://en.wikipedia.org/wiki/Subjective_validation) + +### Description + +People are more likely to believe something is true if it aligns with their personal experiences or feelings, even if the evidence is weak or coincidental. + +### Usage in Product/Software + +This bias is similar to Confirmation bias. However, if confirmation bias is a tendency to seek information that confirms one's beliefs, subjective validation is about distorting the interpretation of the received information. + +For example, after an expensive purchase that was emotionally difficult for us, we tend to rationalize the purchase by giving importance to the product's different properties. The trick here is that we would evaluate the same properties differently if we would just observers and wouldn't be in the position of the buyer. + +Let's say we bought a bike. If it is expensive, and we spend all our savings on it, then we will tend to exaggerate the significance of every compliment received for the bike by both friends and strangers. +Our friend tells us, "This bike is so cool; it is so lightweight!" And we willingly agree, adding, "Yes, and at the same time, its speed is amazing!" Here you can see the mixture of confirmation bias, subjective validation, and post-purchase rationalization. + +Let's look at the example of this bias in the software product. +Imagine we have an online store of expensive fitness watches. Taking into account the subjective validation bias, as well as the need for people to rationalize their purchase (since watches are expensive), immediately after the purchase, we can send an email to the user indicating the serial number of the watch, emphasizing that it is a limited edition. +A few days later, we can send to the same customer our blog article describing the benefits of their watches. We can also include athletes and other celebrities and/or influencer reviews. +A week later, we can send the last "Thank-you" letter with a 10% discount bonus coupon, emphasizing that this coupon is offered ONLY in case of purchasing this watch. + +In every email we send, we more and more strengthen a few beliefs in our customers. One of those is the rarity of watches. Another one emphasizes the good taste of the customer and shows that he is in good company, as many famous people wear the same. + +Of course, subjective validation can be used in many other ways. Let's look at the last, more complex example. + +Imagine that we want to increase the participation of our website users in charity events related to environmental protection. What we can do is we can place the checkbox in the registration form, asking users whether they want to participate in such events or not. By default, the checkbox can be ticked. +If the user leaves the checkbox ticked, we somehow, on the UI, show the importance of his choice and thank him. +Later if we ask the user to donate a dollar to restore the burnt forest in Ukraine, the likelihood of his consent will be higher because when he agreed to participate in the program upon registration, he created a new belief about himself (I am the one who cares about the environment), and thereby the subjective validation will work in our favor. Such a user will find it emotionally difficult to step back from the created beliefs about himself. + +--- + +## 32. Continued influence effect + +[Wikipedia](https://en.wikipedia.org/wiki/Confirmation_bias#continued_influence_effect) + +### Description + +Even after misinformation has been corrected, people tend to continue believing or being influenced by the original false information. + +### Usage in Product/Software + +This effect can be interpreted as a consequence of two other cognitive biases: [Conservatism](https://keepsimple.io/uxcore/19) and [Confirmation bias](https://keepsimple.io/uxcore/25). + +The reason for this effect is that our brain protects us from possible cognitive dissonance and correlated emotional trauma. That is why the brain needs time to carry out all the necessary validations before the influence of previously learned misinformation decreases. +In software development, understanding this bias is important for proper communication with the user when touching upon world events. For example, if we decide to send a message or a support letter to our users about COVID-19 (which was something trendy in 2020), then it will be risky to use previously dubious information in the selected tips and ideas, which has become true only recently. + +--- + +## 33. Bias blind spot + +[Wikipedia](https://en.wikipedia.org/wiki/Bias_blind_spot) + +### Description + +People can easily spot biases in others but struggle to recognize their own, believing they’re more objective than those around them. + +### Usage in Product/Software + +This bias is why we shouldn't ever appeal to cognitive science and psychology while trying to justify this or another product decision on the public. For example, if, in the recent release notes of our product, we add information that focuses on psychology, most users will likely perceive this with distrust. They might even think we are manipulating them. +Although the paradox here is that any of our actions towards making the product better, and users happier is manipulation, still, we shouldn't go into this philosophical rabbit hole. +Sometimes it is better to seem simpler than we are. + +--- + +## 34. Clustering Illusion + +[Wikipedia](https://en.wikipedia.org/wiki/Clustering_illusion) + +### Description + +People tend to see patterns in random events, believing that clusters or streaks are meaningful when they’re actually just coincidences. + +### Usage in Product/Software + +Sometimes random events, regardless of their frequency, are random, and we should remind ourselves of this each time we work with product analytics data. + +We can also use this bias to form feelings and expectations in our users. Let's say we want to give our mobile app users the feeling of 24/7 care. In the context of clustering illusion, what we can do is we can program push notifications to remind users about safety and other sensitive actions (depending on the app's nature). To ensure that we don't annoy users, the notifications can be sent randomly with a gap of 36-55 hours. +Our bet here is that such non-systematic, "pattern-free" notifications, in some cases, will be perceived as frequently appearing (more frequent as they are), and, depending on our app's nature, might be bonded in user's mind to some app-related events or their own expectations. +A good implementation of this idea was applied in the "Healthy Minds" app by Dr. Richard Davidson. During the COVID-19 lockdown, their app randomly sent notifications during the day with the text "This is a really challenging time. It can help to pause for a few slow, mindful breaths." + +--- + +## 35. Insensitivity to sample size + +[Wikipedia](https://en.wikipedia.org/wiki/Insensitivity_to_sample_size) + +### Description + +People often fail to recognize that small sample sizes produce more variable outcomes, mistakenly believing that results from small groups are as reliable as those from larger ones. + +### Usage in Product/Software + +Understanding this bias is necessary when creating cohort user groups in our product for further analysis (A/B testing, other). +If our cohort group of users is too small (in absolute value, not percentage), we risk receiving data that doesn't represent the information of the majority. Such interpretation can lead us to develop features in our app that the majority of our apps never needed. + +--- + +## 36. Neglect of probability + +[Wikipedia](https://en.wikipedia.org/wiki/Neglect_of_probability) + +### Description + +People often disregard the actual likelihood of events, focusing more on the emotional impact or severity of the outcome rather than how probable it is. + +### Usage in Product/Software + +Using this bias daily brings hundreds of millions of dollars to various casinos and betting companies worldwide. + +This is also one of the reasons why we "Accept terms and conditions" upon registration, completely ignoring any risks of not reading those. +Understanding this bias allows us to provide important information to users in a way that they are likely to ignore the risk. Or, on the contrary, we can push the users to the actions we need them to take. + +Let's look at the example where we alleviate the effect of this bias using some other biases ([Framing effect](https://keepsimple.io/uxcore/22), [Base-rate fallacy](https://keepsimple.io/uxcore/11)). +Knowing that our users ignore the probability of complete data loss, we can push them to create backups with a message like "Dear %username%, the last time you backed up your data is 571 days ago. We strongly recommend creating a backup to avoid the risk of permanent data loss." Even if the likelihood of loss is around 0.01%, the way we provoke user emotions (permanent data loss) and play with dates (19 months shown as 571 days) increases the probability that the user will take the needed action (backup). + +--- + +## 37. Anecdotal evidence + +[Wikipedia](https://en.wikipedia.org/wiki/Anecdotal_evidence) + +### Description + +Describes the evidence based on cases or episodes from personal life or unique experiences. It should not be confused with anecdotes as a humorous story. Here we talk about relying on personal stories or isolated examples instead of solid data or statistical evidence, often to make a point seem more convincing. + +### Usage in Product/Software + +Most people tend to exaggerate the events happening in their lives, and this is especially important when creating instructions for the support service of our product company. + +For example, a user contacted us and described an improbable case – some errors in our system happened to him personally. We weren't able to reproduce the error. The user wasn't able to take a screenshot or video. Still, he assures us that everything was exactly as he stated. + +Understanding the significance of Anecdotal evidence in conjunction with [Confirmation bias](https://keepsimple.io/uxcore/25), [Subjective validation,](https://keepsimple.io/uxcore/31) and [Generation effect](https://keepsimple.io/uxcore/82) allows us to design more proper instructions for our colleagues. In other words, knowing this bias will make our customer support specialists think twice before telling the above-mentioned user "Our system does not work like this! What you are saying is impossible!" + +--- + +## 38. Illusion of validity + +[Wikipedia](https://en.wikipedia.org/wiki/Illusion_of_validity) + +### Description + +People irrationally trust their own judgments, even when the information they base them on is shaky or incomplete. + +### Usage in Product/Software + +Understanding this bias, along with the [Clustering illusion,](https://keepsimple.io/uxcore/34) is necessary when working with product analytics. These biases are the main reason why the product team should broadly discuss their assumptions, so they can have a side look at their thoughts. + +Even if the team is very alert having a third-party opinion on our data interpretation can greatly reduce the likelihood of expensive mistakes. + +--- + +## 39. Recency illusion + +[Wikipedia](https://en.wikipedia.org/wiki/Recency_illusion) + +### Description + +People believe that something they’ve recently noticed is new or trendy, even if it has existed for a long time. This illusion arises from another cognitive bias called "[Selective perception](https://keepsimple.io/uxcore/28)". + +### Usage in Product/Software + +In software products, this illusion can be used to create the “new” from the old or unnoticed features. + +Imagine we have a web application that has a lot of functionality. What we can do is we can fetch the statistics from the system to find which features aren't used at all. Then we have to understand what to do with those features. Since we don't need a bunch of unused buttons all over the UI, we have to make a decision: get rid of those features or "redo" them. + +Sometimes, this "redo" means that there should be some engineering effort. Still, what product managers can do is wrap up that feature in new packaging and announce it as something completely new. Even if practically nothing has changed visually, a well-balanced message, coupled with bright packaging, and, why not, a blog article describing it will stimulate users to use it. + +Such an approach could notice in the products of large companies. For instance, Microsoft often places old features into "new features of the Office suite". + +--- + +## 40. Gambler’s fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Gambler%27s_fallacy) + +### Description + +Also known as the Monte Carlo fallacy. A common misunderstanding of the randomness of events. + +In most cases, a person intuitively does not realize that the probability of each subsequent outcome does not depend on previous outcomes of a random event (like thinking a coin is “due” to land on heads after several tails in a row.) + +### Usage in Product/Software + +This bias is one of the most important for understanding by those who manage gambling businesses. + +It is not necessary for the product to be a gambling platform. You might use gambling elements in pretty much any product. For example, in a number of modern computer games, players can buy [Lootboxes](https://en.wikipedia.org/wiki/Loot_box), from which players can obtain random items of different values. +Since computer games and back-end algorithms of the loot boxes mechanics are not subject to audits of licensing authorities (such as MGA/Curacao gaming), you can use something similar in your product, and use Gambler's fallacy when designing those algorithms. + +A thing to mention here is that more and more countries impose legal restrictions on game developers who apply similar dishonest practices ([click to see example](https://www.engadget.com/2018-04-10-south-korea-fines-game-studios-over-loot-boxes.html)). + +--- + +## 41. Hot hand fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Hot_hand) + +### Description + +The mistaken belief that a person who has experienced success in a random event has a greater chance of continuing their streak, even though each event is independent. + +### Usage in Product/Software + +In software products, we can illustrate this bias on streaming platforms, such as "[Twitch](https://www.twitch.tv/)". Adding different visual indications to a stream of successes of the player attracts attention. +Similarly, in computer games like League of Legends or DOTA2, there are such concepts as “spree” - a series of “kills” of opponents' heroes, with each subsequent kill adding a new visual and audio indication. +Betting platforms can generate more bets by emphasizing player successes in the same way. + +--- + +## 42. Illusory correlation + +[Wikipedia](https://en.wikipedia.org/wiki/Illusory_correlation) + +### Description + +People often perceive a relationship between two unrelated events, believing that one causes the other, even when no real connection exists. + +### Usage in Product/Software + +In the software business, we can illustrate this bias in the work of the marketing team. In short, what we have to do is: + +Take the idea that we would want to associate our product with; +For the sake of example, let's say it's "Donations to protect the environment"Research top companies from Fortune 500 that make donations to the cause of our interest and make a list of them;Ask our content writers to generate articles and messages for social media, where we show our solidarity with top companies;Agree on how our tone of voice will look like, and ensure that it's similar in all our public communication (Tweets, posts, articles, press releases);Ask the marketing team to circulate those pieces of content in areas where our target audience will be the most.The way we try to use illusory correlation here is to make our company/product name appear linked to some good cause with the name of multi-billion companies. +If we keep this strategy for a long, some potential customers might start associating our product with a good cause, expensive brands, and later, good product quality. +The example is complex, but it gives enough food for thought. + +--- + +## 43. Group attribution error + +[Wikipedia](https://en.wikipedia.org/wiki/Group_attribution_error) + +### Description + +The tendency to assume that the characteristics or decisions of one group member represent the entire group, or vice versa. + +### Usage in Product/Software + +Let's say we have a social application. We're about to release a new feature that will let people create User Groups and invite anyone from the existing users. One of the ways we can use group attribution error in our favor is by adding a "Group Description" mandatory field. +In other words, if we allow users to write in descriptions the ideas they want to be associated with, it will help them in finding common collective properties and form their attitude toward this group. + +This bias is also the reason why we should seek associations with those companies/brands/people that are influencers/authorities for our target audience. This is what we constantly see when large companies use top sports clubs and players in their advertisements. + +--- + +## 44. Fundamental attribution error + +[Wikipedia](https://en.wikipedia.org/wiki/Fundamental_attribution_error) + +### Description + +We tend to blame external factors for our own mistakes but internal flaws for others' failures. However, when it comes to success, we flip this: we credit our own skills but chalk up others' achievements to luck or external help. + +For example, while reviewing a success of someone else we tend to refer to external circumstances (“they were lucky”). While in relation to ourselves - the same success will be explained by the fact that this is a fair result of our efforts, knowledge, skills, etc. + +### Usage in Product/Software + +This bias is being heavily used by customer relationship managers, customer support, and success teams. + +Imagine we have a B2B software solution. +Given that any business constantly seeks confirmation of the rightness of the choices they make, what we can do is we can contact our users by emphasizing the successes they achieved with us. Within the same message, we can state that the success was solely because of their professionalism and not external factors. This is flattery, correct. But it correlates with our users' inner desire to explain their successes. +I mentioned this in B2B because in B2C, you have too many users, and no matter how you try, your messages will have to be more generic. + +The same move can be used as work instruction for a customer support team. +Let's imagine that a client called us in anger and began to complain that due to an error in our system, he lost time. Let us assume that we know that this is not the case and that the problem is the result of his inattention. +Understanding fundamental attribution error, [generation effect](https://keepsimple.io/uxcore/82), and [anecdotal evidence ](https://keepsimple.io/uxcore/37)makes it obvious that there's no point in finding the guilty. It will be even worse if we try explaining to our client that he's the only one to blame. + +--- + +## 45. Stereotype + +[Wikipedia](https://en.wikipedia.org/wiki/Stereotype) + +### Description + +A generalized belief about a group of people, assuming that all members share the same traits or behaviors, often oversimplifying and ignoring individual differences. + +### Usage in Product/Software + +Even though in our politically correct society, such a phenomenon as stereotypes are actively criticized, ignoring stereotypes in business is stupid, albeit morally commendable. +I'll put a quote from the book of Nobel Prize Laureate Dr. Daniel Kahneman, called "Thinking Fast and Slow": +"Neglect of valid stereotypes inevitably entails non-optimal estimates. Confronting stereotypes is meritorious from a moral point of view. However, one should not mistakenly adhere to the simplified opinion that this does not have consequences. It's worth paying the price to improve society, but the denial of its existence, although it calms the soul and is politically correct, still has no scientific justification." + +Let's look at controversial issues arising during product development if we ignore stereotypes as variables. +Suppose we have an online platform where people can rent apartments for the short term. We have two user types: those who place apartment ads and those who look for apartments. +Suppose we have access to the data showing that in the cities "A", "B," and "C," there is a crime problem, most often arising from the actions of a particular ethnic group. Suppose we also know that representatives of the same ethnic group in increased numbers are expected in the city "D" within a month. +Since we worry about the safety of our users, it would be logical to minimize the risks of problems for them by temporarily removing cities A, B, and C from the list of listings, referring, of course, not to the ethnic group but to official crime rates. +But how to deal with city "D"? If we remove this city from the listing, citing our expectations, it will be, to put it mildly, politically incorrect, and may cause a storm of criticism against us. On the other hand, if we don't act, then many of our users will most likely have terrible experiences, which they will essentially "get" on our website by taking apartments in the city "D". +Of course, we can leave everything as it is, wait for the crime index for city D to increase, and take this as a basis to remove this city from the listing. But, firstly, it will take a lot of time, and secondly, it will be a negative experience for some of our users. +I will not write options for solving this situation here. Let's just have this here as food for thought. + +--- + +## 46. Functional fixedness + +[Wikipedia](https://en.wikipedia.org/wiki/Functional_fixedness) + +### Description + +The tendency to see objects or ideas as only functioning in their traditional way, limiting creativity and problem-solving. + +### Usage in Product/Software + +Let's illustrate this bias with the example of a web application. + +Imagine we have a button on our website that opens a menu of 4 tools. Suppose we collected data on the use of this menu and found out that in 97% of cases, after opening it, users select the same tool, "A", while the other three remain mostly unused. +While trying to understand why other tools are not being used, one of our assumptions might be that the user falls victim to functional fixedness. + +So, for a long time, he was using the menu button for the sake of one tool only. This resulted in a strong association between the menu button and that tool. +This said, one of our insights is that we should either avoid adding new tools to that menu or restructure/reposition menu elements. This will break the user's habit pattern, making him think and learn new things. Of course, this will add mental friction, so this trick can be used only when necessary. + +Another example of how we can use functional fixedness is if we decide to "reinvent" and "relaunch" already existing features (more details can be found in the description of [the Recency illusion](https://keepsimple.io/uxcore/39)). + +--- + +## 47. Just-world fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Just-world_hypothesis) + +### Description + +The belief that people get what they deserve, assuming that good actions are always rewarded and bad actions are always punished, regardless of reality. + +### Usage in Product/Software + +This bias should be kept in mind when working on public communication of our product/company. + +We must constantly avoid statements that society may call “unfair” (regardless of what arguments we have in support of it and how we relate to it ourselves). Thus, our public position shouldn't go against socio-cultural values and the definition of fairness and goodness. +Also, what we can do is we can intentionally emphasize the fairness and goodness of our actions in all our public statements, thereby increasing the sympathy of our audience for our decisions and our company/product. +If we do not greatly outperform our competitors in terms of product quality, the “fairness” factor can play a key role in making decisions on choosing a product from potential users. + +--- + +## 48. Authority bias + +[Wikipedia](https://en.wikipedia.org/wiki/Authority_bias) + +### Description + +The tendency to place excessive trust in the opinions or decisions of authority figures, assuming they are always correct or superior, regardless of actual expertise. + +According to this bias, people usually have a deep-seated respect for power and tend to obey when a figure with power requires it. + +### Usage in Product/Software + +In software products, this bias is important when designing moderation mechanisms (dispute solving, issue review). Also, this bias is vital when designing features of arbitration and escrow. +In most cases, for the end-users, the authority is our customer support team. + +We have to understand this because users expect the decision of the authority to be fair. This also amplifies because of the [Just-world fallacy](https://keepsimple.io/uxcore/47). Therefore, we have to structure our tone of voice and our message in such a way as to keep the reputation of a fair company. + +--- + +## 49. Automation bias + +[Wikipedia](https://en.wikipedia.org/wiki/Automation_bias) + +### Description + +The tendency to over-rely on automated systems or technology, assuming they are always accurate, even when they make mistakes or provide incorrect information. + +### Usage in Product/Software + +According to another study, more elements on the screen can make users less conservative and, thus, increase the likelihood of confusing automation reliability. +Understanding this bias allows us to work more carefully with applications where every action can have far-reaching consequences for many people. + +So, for example, in one software product that we were developing for the General Department of Civil Aviation of Armenia, we developed the design in such a way that at every moment, the application user (GDCA member) understood at what stage the requests needed for processing are. Almost every user action requested additional confirmation while clearly describing its expected result. + +Obviously, for a mass-oriented application (B2C), we would have avoided too many confirmations and other actions requiring the user's attention. +In some cases, we even might want to increase the faith of our users in the reliability of our system. This could be achieved by analyzing their behavior and sending them obvious tips and suggestions. + +--- + +## 50. Bandwagon effect + +[Wikipedia](https://en.wikipedia.org/wiki/Bandwagon_effect) + +### Description + +The tendency to adopt beliefs, ideas, or behaviors simply because they are popular or widely accepted, often ignoring personal judgment or evidence. + +### Usage in Product/Software + +This bias is very important for understanding when working in a B2C area. You surely have seen this bias in use in different online stores like Amazon. Recommendations are covered in messages like “With this product, people also buy %product_name%". +Its more aggressive use, which is also found among online retailers, is "84% of our users choose %product_name%. + +Such recommendations differ from “Based on your purchases over the past week, we believe that you will like %product_name%” only by the fact of using the majority factor. +Regardless of the message, what we do here is use data collected in our product. We just change its wrapper to nudge users towards needed actions. + +As for B2B, the value of this bias might be lower. In some cases, it might be even harmful (for example when we recommend users to "join the majority" in medical applications). + +--- + +## 51. Placebo + +[Wikipedia](https://en.wikipedia.org/wiki/Placebo) + +### Description + +The phenomenon where people experience real improvements in their condition or performance simply because they believe they’re receiving an effective treatment, even when it’s inert or ineffective. + +### Usage in Product/Software + +I suppose it may be very strange for the reader to see the medical effect on our list, and yet, it is not accidental here. A placebo and an understanding of how it works can be beneficial in working on a product. + +I will give an example from personal experience. + +Ten years ago, when I was working as a system administrator in one company. One day I noticed that some users of my networks (adults 50+ years old) were very annoyed when certain web pages did not load instantly. With time they formed the belief that the problem was in our network, and attempts to explain to them that the problem was more technical, and couldn't be solved by us, were meaningless. + +For such users, I created on their desktop a .bat file with one single request, “ping gmail.com –t”. When launching that file, the system opened a small console window and made a request to the Gmail server, then received a response, simultaneously reporting the time spent on the whole process. + +Any time the file was launched, every second, the user saw some requests and changing numbers, in the spirit of “hacker” movies of the 90s. This absolutely did not load the system, and, technically, it made practically no sense in the context of the problem of my users. + +When leaving, I gave them one instruction: Run this file every time you see that there are problems with the network. The effect of this “medicine” was tremendous. Those users who, on a daily basis, complained about working “with the network” stopped complaining at all. People worked silently for months and were happy, and each time they saw me, they thanked me for “this technical miracle”, and I thanked them for the “network error they found." + +Sometimes, letting the user click or fill out something can be useful in order to reduce the tension between the user and the company/product. + +--- + +## 52. Out-group homogeneity + +[Wikipedia](https://en.wikipedia.org/wiki/Out-group_homogeneity) + +### Description + +The tendency to see members of an out-group as all being similar, while viewing members of your own group as diverse and unique. + +It is a mental shortcut that can lead to stereotypes and prejudice. People with this bias will often make negative assumptions about someone based on their membership of an out-group while giving members of their own in-group more benefit of the doubt. + +### Usage in Product/Software + +Given that any example of using this bias on software product users will be too cruel and not socially acceptable, we'll take a look at how this bias can damage the product team itself. + +In software development, out-group homogeneity can lead to product managers having different expectations of different teams. For example, a product manager may think of the development team (the out-group) as a homogenous group that lacks the creativity and imagination it takes to move the product forward while expecting that the design team (the in-group) will come up with great ideas and solutions. + +In reality, both teams are most likely made up of talented and creative individuals, and each team can bring tremendous value to the product if the task is set correctly. +But the product manager's tendency for homogeneity outside the group leads them to expect different results. + +--- + +## 53. In-group favoritism + +[Wikipedia](https://en.wikipedia.org/wiki/In-group_favoritism) + +### Description + +The tendency to favor and give preferential treatment to members of your own group while being less fair or critical toward outsiders. + +### Usage in Product/Software + +In software development, this bias can be helpful when designing content filtering and recommendation systems. +The bottom line is to use the knowledge about this bias and the [Out-group homogeneity](https://keepsimple.io/uxcore/52), to show users only the content that causes an “emotional response” in them. The response can be positive, or negative, depending on the product goals. +Both of these biases are actively used in social networks, Google search results, and many other products. + +--- + +## 54. Halo effect + +[Wikipedia](https://en.wikipedia.org/wiki/Halo_effect) + +### Description + +The tendency to let a positive impression in one area (like appearance or charisma) influence judgments in other unrelated areas, leading to overly favorable evaluations. + +### Usage in Product/Software + +Understanding this bias is important for maintaining a consistent look in an application. + +While the content is crucial, the appearance and overall quality of the application are also significant. When the interface looks impressive, users expect the same level of excellence in other aspects. A beautiful application sets high expectations for the technical quality of the system. This connection between the visual presentation and the features results in a superior user experience. + +It should be understood that the user of such an application will also have high expectations from our support team. +This is why, when developing a product, we should focus on every aspect of the interaction of the end-user with our application and our company. + +--- + +## 55. Positivity effect + +[Wikipedia](https://en.wikipedia.org/wiki/Positivity_effect) + +### Description + +The tendency to objectively evaluate setbacks while maintaining a positive perspective, focusing on improvement and future success rather than dwelling on failure. + +Using social media as [an example](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4636231/), on Twitter and Instagram, users prefer to share positive news. Moreover, these same users are twice as sensitive to positive news than negative. +In another [private study,](https://www.hercampus.com/life/i-spread-positivity-instagram-heres-what-happened/) it was pointed out that some Instagram users use the application to spread positivity to others, and at the same time, they feel happier. Positiveness in social networks affects not only the person who receives positive comments but also the person who writes them. + +### Usage in Product/Software + +Nowadays, due to various global events, we face a huge cascade of negative information and work stress every day. Knowing this allows us to provide users of our products with features that might look minor but will let expressing or share their positive emotions. The closest example of this is "Likes" and other forms of "emotional reactions" in the digital world. + +--- + +## 56. Not invented here + +[Wikipedia](https://en.wikipedia.org/wiki/Not_invented_here) + +### Description + +The tendency to reject ideas, products, or solutions from external sources, favoring those developed internally, even if the external option is objectively better. + +The reasons for this bias can vary, including a lack of understanding, unwillingness to acknowledge others' work, jealousy, or a desire to protect one's own territory. Essentially, it's a mindset where people hesitate to accept or embrace something new if it originates from a different culture. + +### Usage in Product/Software + +The simplest illustration of this bias is a constant "war" of Android VS iOS users. + +Product managers should be aware of this bias, first of all, to cleanse themselves of it. Otherwise, this bias's poisonous effect will limit the manager's flexibility and alter many product decisions. +Ideally, before starting a project, explaining this bias effect to the team will be very useful. The team should understand that any rejection or principal position that works for their ego, where the product doesn't benefit, won't be tolerated. + +In programming, to the surprise of many managers, a wide variety of programmers share the "rejection" position and are divided into different camps. To name a few, we have adepts in "GitHub vs. GitLab", "Bootstrap vs. Ant Design", etc. While there is room for personal preference, engineers' positions often bond to their egos without clearly answering, "Why should we use X?" +In such debates, the product manager should be the one who stays on neutral ground. This will allow them to evaluate arguments properly and make the best decision. + +--- + +## 57. Mental accounting + +[Wikipedia](https://en.wikipedia.org/wiki/Mental_accounting) + +### Description + +The tendency to treat money differently depending on its source or intended use, leading to irrational financial decisions. For example, people might splurge with a bonus but be overly frugal with their salary. + +Similarly, people usually spend more money on a purchase when paying with a credit card than in cash because they compare the cost of goods with a small number of resources (banknotes in a wallet) with a large amount (money in a bank account). In the second case, parting with money is easier since the sensitivity threshold decreases. + +### Usage in Product/Software + +An example of the use of mental accounting in a product can be illustrated in video games. + +In many video games, developers introduce different types of virtual money and persuade players to spend real money for various reasons. The idea behind these games is to make players create separate "mental accounts" for different purposes. +For example, one account might be for paying a monthly fee to access the game, another for waiting for discounts on in-game currency, and a third account could be used when the game announces a significant discount on in-game items. By using this approach, the game design studio increases the chances that the players will spend additional money because they perceive these purchases as separate and different. +The concept of in-game currency itself is fascinating to study. For instance, when a player buys 6999 "gold coins" in a game for $4, they may consider it a great deal if they can purchase something valuable with those coins, even though it might not make sense logically. The creation of such perceived value is one of the responsibilities of the game studio's product manager. + +Understanding mental accounting is not only useful in the gaming industry but also applicable to other businesses. For instance, an online store can encourage users to create mental accounts by offering additional services like selling status memberships (e.g., Amazon Prime), extended warranties (creating a mental account for peace of mind), or providing access to exclusive broadcasts ("PlayStation Now" service). The goal is to lower the sensitivity threshold for users and make it easier for them to spend money. + +--- + +## 58. Normality bias + +[Wikipedia](https://en.wikipedia.org/wiki/Normalcy_bias) + +### Description + +The tendency to underestimate the likelihood of a disaster or crisis, assuming that things will always function as they normally do, even in the face of warning signs. + +### Usage in Product/Software + +In software products, knowing this bias allows us to take care of the negative consequences that may happen as a result of our users' actions. For example, we can automate data backup for our users if something goes far beyond the user's normal behavior (e.g., a request to delete all data in the system). + +In finance and stock markets, the feature that addresses this bias is called "limit fixation". This is when the user can set the below limit of the stock price, so the user could automatically take action before the user's money loss. + +--- + +## 59. Survival bias + +[Wikipedia](https://en.wikipedia.org/wiki/Survivorship_bias) + +### Description + +The tendency to focus on successful people, strategies, or things while overlooking those that failed, leading to a skewed understanding of reality. + +For instance, if we study the habits of successful entrepreneurs by looking at billionaires, we may overlook the countless individuals who tried but failed to achieve similar success. We might draw inaccurate conclusions about what leads to success by overlooking the failures. + +### Usage in Product/Software + +Understanding this bias is critical when gathering cohort user groups in our software product. So, if our user group consists of only "successful" users, then the results of our analysis might not apply to most of our product users. + +Another example: A/B testing. +Imagine we've developed two web pages and used two different marketing strategies for each page. Now we want to analyze which page is more attractive and which could bring more users to register. +One of the pages focuses on the "A" service, and the other on the "B" service. + +If after two weeks of advertisement, we get a tremendous amount of information on one of the pages (say "A") but practically do not have information on the other (B), then any decision we make will be based on only one piece of data (page with the service "A") may not be valid. This might be because of the advertisement method we chose for B, not the page itself. + +--- + +## 60. Subadditivity effect + +[Wikipedia](https://en.wikipedia.org/wiki/Subadditivity_effect) + +### Description + +People tend to judge the probability of a whole event as less than the sum of its parts, underestimating the likelihood of combined risks or outcomes. + +### Usage in Product/Software + +Let's say my colleagues and I estimate a 30% chance of delaying the release date of our project. However, when we dive into more specific questions like "What are the chances of a delay due to technical issues, market changes, team conflicts, or unprepared partners?", our individual answers might add up to a probability higher than the initial 30%. This can lead to disagreements within the team. +Recognizing this effect helps us break down the problem into smaller parts and analyze the probabilities of those parts separately. This approach not only provides clearer information for our work but also allows the entire team to discuss risks and understand them better. + +--- + +## 61. The Magical Number 7±2 + +[Wikipedia](https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two) + +### Description + +Also known as Miller's Law. The pattern according to which short-term human memory, as a rule, cannot remember and repeat more than 7 ± 2 elements. + +### Usage in Product/Software + +It's important to understand that the term "elements" can refer to different types of objects like images, text, numbers, and more. When there are too many elements, it can make users uncomfortable due to the increased cognitive load on the interface. The 7 +/- 2 rule is commonly used to optimize and categorize content in applications with a large amount of information. +In a world filled with information noise, less is often better. + +--- + +## 62. Illusion of transparency + +[Wikipedia](https://en.wikipedia.org/wiki/Illusion_of_transparency) + +### Description + +The tendency to overestimate how well others can understand our emotions, thoughts, or intentions, assuming they know more about what we’re feeling or thinking than they actually do. + +### Usage in Product/Software + +Understanding this bias is vital when working with content. + +For example, what I'm writing here for you, in fact, is much less clear to you than it seems to me. Understanding this makes me put additional information links to sources on Wikipedia, and sometimes come with multiple usage examples. + +The same bias is very important when working with descriptions and tooltips. One of the ways we use our knowledge of this bias is that we open our products in closed beta mode, then ask the user group to go through the project and tell us which feature wasn't obvious to them and what questions they had on each page and button click. Based on that, we enrich the product with the necessary tooltips, help texts, and links. + +--- + +## 63. Curse of knowledge + +[Wikipedia](https://en.wikipedia.org/wiki/Curse_of_knowledge) + +### Description + +The tendency to assume that others have the same level of knowledge as you, making it difficult to explain concepts clearly or understand why they struggle to grasp what seems obvious to you. + +### Usage in Product/Software + +This bias can damage product teams in many ways. +For example, if there's only one decision-maker in the product team, and he is overconfident in his knowledge, then with a high probability, he will be prone to the curse of knowledge. This will lead to a situation where other team members will try to maintain the status quo while the decision-maker will think everyone shares his thoughts. + +Or, let's take another example. If the product team shares the same expertise and is generally on the same page, they can collectively decide to skip user testing for some crucial features with a single argument like "Our users will definitely love this feature!" +Obviously, such an approach might be disastrous, regardless of how much belief and confidence the team puts on the table. + +--- + +## 64. Spotlight effect + +[Wikipedia](https://en.wikipedia.org/wiki/Spotlight_effect) + +### Description + +The tendency to overestimate how much others notice or care about your appearance, actions, or mistakes, assuming you’re the center of attention when, in reality, most people are too focused on themselves to pay close attention. + +### Usage in Product/Software + +Knowing this bias gives us additional tools to nudge our users towards some actions we need. This bias is even more useful when we want users to perform some "public" actions (e.g., sharing a photo on the wall or making a public post). + +If the target audience of our project is shy people, then understanding the spotlight effect will make us approach more carefully when communicating (via UI) with the user. + +If our audience is people looking for attention to their person, then our approach can be more “confident”. So, we can afford more "personal" notifications ("You like %username%!!!"), dynamic and flashy visual effects. In addition, we are likely to create a number of features of the system that will ignite the desire of our users to receive more attention. + +--- + +## 65. Illusion of asymmetric insight + +[Wikipedia](https://en.wikipedia.org/wiki/Illusion_of_asymmetric_insight) + +### Description + +This cognitive bias makes us believe that we can see through every person while we ourselves are completely impenetrable to this person. Because of this bias, we tend to believe that we have some kind of supernatural ability to understand others. + +### Usage in Product/Software + +This bias is one of the reasons why product managers should distance themselves from their own opinions when analyzing product users. This bias can amplify other biases, such as [stereotypes](https://keepsimple.io/uxcore/45), [out-group homogeneity](https://keepsimple.io/uxcore/52), [confirmation bias](https://keepsimple.io/uxcore/25), and like. + +To alleviate the effect of this bias, what we can do is we can combine all our knowledge about our users into one or multiple Personas and then cross-check it with all team members. + +--- + +## 66. Hindsight bias + +[Wikipedia](https://en.wikipedia.org/wiki/Hindsight_bias) + +### Description + +The tendency to see events as more predictable after they’ve happened, believing “I knew it all along,” even when there was no way to foresee the outcome. + +### Usage in Product/Software + +In the context of product management, understanding this bias requires us to investigate the expectations of our users. So, if our product is in a sketchy market that doesn't have the best reputation, then our users will expect a negative experience from our product that is inherent in the market. + +If the problems are inevitable, we can use this bias to alleviate damage upfront. Thus, we can proactively create handling mechanisms instead of reactively working on real-time issues when the time comes. + +This bias was indirectly described by Nicholas N. Taleb in his book The Black Swan (narrative fallacy). + +--- + +## 67. Planning fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Planning_fallacy) + +### Description + +The tendency to underestimate the time, costs, and risks of future tasks, while overestimating the benefits, leading to overly optimistic project timelines and goals. + +### Usage in Product/Software + +An understanding of this bias is necessary for managers of any level since it will minimize the risks associated with the undertaking of obligations by their subordinates. The more people involved in the project, and the more individual obligations added to the overall plan, the higher the risk that something will go wrong. + +Understanding this, product managers always need to have a few back-up plans. + +--- + +## 68. Pro-innovation bias + +[Wikipedia](https://en.wikipedia.org/wiki/Pro-innovation_bias) + +### Description + +The tendency to blindly favor new ideas or innovations, assuming they’re inherently superior, while ignoring their flaws or potential risks. Also, inability to adequately assess the pros and cons of own invention. + +### Usage in Product/Software + +The product team needs to be aware of this bias so they don't hold on to their ideas on principle, ignoring the arguments of opponents. + +The best way to reduce the impact of this bias is to ask each team member to leave at least three comments of concern. By setting the minimum required number of comments and their tone, we avoid cases where our humble colleagues will cling to the status quo. + +--- + +## 69. Overconfidence effect + +[Wikipedia](https://en.wikipedia.org/wiki/Overconfidence_effect) + +### Description + +The tendency to overestimate one’s own abilities, knowledge, or judgment, often leading to poor decision-making or risk-taking. + +### Usage in Product/Software + +Another bias that should be "fought" using the analytical data received from the system, as opposed to the opinions of anyone (including management). +Most often, the degree of influence of this bias on a person is proportional to the degree of their inflated ego. This is the main reason why it's so difficult to work with such people. + +If we appoint a colleague prone to this bias as the leader of a product team, it can ruin the team's potential, as the leader's overconfidence will suppress many creative ideas. + +--- + +## 70. Social desirability bias + +[Wikipedia](https://en.wikipedia.org/wiki/Social_desirability_bias) + +### Description + +Social desirability bias is when people tend to give answers that they think are socially acceptable or desirable rather than providing their true beliefs or behaviors. This trend is expressed in an exaggeration of positive and desirable qualities and behavior and an understatement of negative, undesirable. + +### Usage in Product/Software + +A solid part of the work of any product team is related to user research. Often, the research includes interviews, questionnaires, and polls. + +Understanding the effect of social desirability will allow us to reduce the noise in the data obtained from such studies. +So, to reduce the impact of this bias in polls, we can add anonymity to the participants. In questionnaires, we can play with the semantics of the questions in a way that makes it more comfortable for users to answer openly. In an interview, we can introduce the interviewer to the users in advance, perhaps even discuss a few informal questions, and later leave the interviewer alone with the user. + +When it comes to app functionality, we need to understand that we will never be able to keep our users on the project, no matter how cool software we have written for them, if using it means for them going against social norms. + +--- + +## 71. Third-person effect + +[Wikipedia](https://en.wikipedia.org/wiki/Third-person_effect) + +### Description + +The belief that others are more influenced by media, propaganda, or persuasive messages than oneself, leading to a sense of immunity from influence while assuming others are more gullible. + +### Usage in Product/Software + +Understanding this bias requires us to approach the creation of promotional materials carefully. So, any advertising content must be checked against the expectations of users. We should at least roughly imagine their reaction. + +It should also be understood that the more “reasonable” a person considers himself, the more clearly this bias is expressed. For the same reason, in a number of companies, high-touch customer managers receive special instructions and are more discreet when it comes to upsells. + +--- + +## 72. Consensus bias + +[Wikipedia](https://en.wikipedia.org/wiki/False_consensus_effect) + +### Description + +The tendency to overestimate the extent to which others share your beliefs, opinions, and behaviors, assuming your views are more common than they actually are. + +### Usage in Product/Software + +First of all, understanding this bias is important to ensure transparency in the team working on the product. The pluralism of opinion and managers' transparency is the cornerstone of the success of any discussion. Regardless of which question raises, it is better to ask it and get the expected consent rather than remain silent, assuming that this is obvious and "others think the same". + +All the obvious is always obvious only to ourselves. + +--- + +## 73. Hard-easy effect + +[Wikipedia](https://en.wikipedia.org/wiki/Hard%E2%80%93easy_effect) + +### Description + +The tendency to be overconfident in easy tasks and underestimate performance in difficult ones, misjudging your actual ability based on task complexity. + +### Usage in Product/Software + +Given the non-technical nature of product teams, the team members can often ask if this or another feature is easy to implement or not. The problem gets even more complicated when we approach this question to the software engineers. To alleviate this risk, the product manager should communicate with senior-level engineers whos expertise will let them come up with more precise estimates. + +As for product development, this bias should be understood when designing a complex feature. If we have developed something that looks "a little bit complicated" for us, most certainly, it will be super complicated for the end users. This is a sign that we should decompose the feature; simplify it. + +--- + +## 74. Dunning-Kruger effect + +[Wikipedia](https://en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect) + +### Description + +This is when less qualified people make wrong conclusions and bad decisions but can't see their own mistakes because they lack the necessary skills. This makes them think they are better than they actually are. +On the other hand, highly qualified people tend to doubt their abilities and lack confidence, thinking others are more capable than themselves. + +### Usage in Product/Software + +Understanding the Dunning-Kruger effect is crucial for a product development team to ensure equal participation. It's important to listen to each team member's opinion rather than relying on the last person to speak. + +When developing software, knowing about this bias helps identify areas where users may make mistakes. Product teams often mistakenly believe that their users will point out program flaws, but that rarely happens. Users may continue using the software for years without realizing it could be improved ([Functional fixedness](https://keepsimple.io/uxcore/46) in action). They might even teach their colleagues to use suboptimal methods. This is why customer success teams should review user behavior analysis and approach with suggestions on optimizing user workflows. + +--- + +## 75. Barnum effect + +[Wikipedia](https://en.wikipedia.org/wiki/Barnum_effect) + +### Description + +The tendency for people to accept vague, general statements as uniquely applicable to themselves, especially when the statements are positive or flattering. + +### Usage in Product/Software + +We can use this bias to explain the popularity of products such as horoscopes, personality tests, and various comparison applications such as “Your face is similar to Cleopatra, which makes you the owner of an extremely insightful mind!” and the like. + +In other words, not a single reason to read something flattering about ourselves will be perceived by us as “excessive”. At the moment, many applications have already been developed that use this effect with high efficiency. The most significant number of them is observed in social networks. + +--- + +## 76. Illusion of control + +[Wikipedia](https://en.wikipedia.org/wiki/Illusion_of_control) + +### Description + +Cognitive bias is when people think they can control or significantly impact events that are beyond their control. This happens especially when they want a positive outcome, are somehow involved in the event, or already know that things will turn out well. + +### Usage in Product/Software + +The best way to use this bias in a software product is when the company wants to "involve" users in product development. + +While such an approach is considered cool and honest, obviously, users can't imagine the company's strategic interests, and even less can they define those. Therefore, what companies do is they come up with a few options and put those in a public poll. The poll itself is being actively marketed with some fancy titles like “Only you can tell what to do next”. +This creates and enforces the illusion of "control over the fate of the project” among users. +I marked this situation as an "Illusion" because, most often, those options that are laid out for public voting pass very strict filtering. Moreover, often they might eventually be the same option but rephrased. And in 100% of cases, regardless of the choice of users, they ideally correspond to business plans company. + +The indirect benefit of creating such illusions is that we better learn our audience, and at the same time, we learn the priority of options through the eyes of our audience. + +--- + +## 77. Illusory superiority + +[Wikipedia](https://en.wikipedia.org/wiki/Illusory_superiority) + +### Description + +The tendency for people to overestimate their own abilities, qualities, or intelligence compared to others, often seeing themselves as above average in most areas. + +### Usage in Product/Software + +D. Carnegie called flattery a fake, which brings trouble. Scientists have found that even when we are frankly flattered, and even if we are fully aware of it - nevertheless, we are pleased. The bias is one of the possible explanations of this phenomenon, and, most importantly, why flattery should be stored as another “weapon” in the arsenal of all our colleagues who contact our product users. + +In fact, this bias is the main argument for the targeted use of flattery in our products. + +--- + +## 78. Risk compensation + +[Wikipedia](https://en.wikipedia.org/wiki/Risk_compensation) + +### Description + +Also referred to as the “Peltzman effect.” The tendency for people to take greater risks when they feel more protected or secure, often offsetting the intended benefits of safety measures. + +### Usage in Product/Software + +Understanding this bias is important in the context of building applications where following instructions is essential. + +For example, in one project that we developed for the General Department of Civil Aviation of Armenia, this bias was in our mind every time we simulated the use of the software by users. We wanted to create an interface that would encourage a sense of responsibility in users and prevent the feeling that “the system will do everything by itself”. + +In the context of more general products, this bias is important when our users are in the 50+ age group. Firstly, such users have high expectations from the system and really want it to "do everything by itself." Secondly, the threshold for an "overloaded" interface for them is higher, which requires us to combine the safety of actions with the minimalism of the UI. + +--- + +## 79. Hyperbolic discounting + +[Wikipedia](https://en.wikipedia.org/wiki/Hyperbolic_discounting) + +### Description + +The tendency to prioritize immediate rewards over larger, delayed rewards, often leading to poor long-term decision-making. + +### Usage in Product/Software + +Any business that has instant rewards can benefit from learning this bias. The closest examples of such are casinos, betting platforms, etc. + +Putting gambling aside, in our software products, we can use this bias to encourage users to participate in our beta tests. For example, Atlassian company, in their products - Confluence and JIRA, exploits this bias by encouraging users to "Try our beta version of the new interface right now!" +They spice such calls, usually showing immediate benefits from the use, such as "Modern look" and statistics "89% of our users who tried the new interface did not return to the old one". +A big, "delayed" reward in this situation is that as soon as this “interface,” or some other feature leaves the status of “beta”, it is guaranteed to work without errors, and in case of any malfunction, we can demand something from the company. + +--- + +## 80. Appeal to novelty + +[Wikipedia](https://en.wikipedia.org/wiki/Appeal_to_novelty) + +### Description + +The assumption that something is better simply because it is new or modern, often dismissing older options regardless of their effectiveness or quality. + +### Usage in Product/Software + +This bias is a common problem for many companies. It often starts with department managers introducing a new management framework with a fancy name, even though there is no evidence of its success. If the top management embraces this fallacy, it can be costly because lower-ranking employees rarely voice their dissatisfaction with the new approach from the top. + +In software products, we can use this bias when preparing up-selling strategies. So, we don't need to avoid using the argument "It's a new method/feature/service plan" just because it seems to us that it's not much new in it. + +--- + +## 81. Escalation of commitment + +[Wikipedia](https://en.wikipedia.org/wiki/Escalation_of_commitment) + +### Description + +This is when people stick with a failing plan or investment because they've already put in too much effort or resources, even if quitting would be smarter. They ignore evidence of failure and keep going to avoid feeling like they've wasted what they’ve already invested. + +### Usage in Product/Software + +Imagine you're a product manager and your boss suggests adding a new feature to your app. The feature allows users to download pictures from paid sources. You point out that most of your users don't have accounts on those paid sites. However, your boss insists that users will start using those sites more if they see the option. + +Time passes, and the new feature is added to the app. But it turns out that nobody really uses it. You suggest removing the feature because it's unnecessary and makes the app slower. However, your boss doesn't want to admit their mistake and suggests modifying the feature instead. + +To justify the decision, your boss suggests contacting the paid sites and offering users a $5 bonus to register through your app and buy some images. You argue that this is actually helping the paid sites more than our own app, but your boss dismisses your concerns, claiming that you don't understand the bigger picture. + +In the end, your boss's ego and refusal to admit their mistake leads to an irrational approach, causing problems in the team and hindering the success of the app. + +--- + +## 82. Generation effect + +[Wikipedia](https://en.wikipedia.org/wiki/Generation_effect) + +### Description + +People remember things better when they create or come up with the information themselves, rather than just hearing or reading it. Basically, we remember stuff more when we make it happen. + +### Usage in Product/Software + +The existence of this bias is a strong argument in favor of keeping detailed logs in our product. + +If we've built a complex software product, the moment when the user will make a mistake is just a matter of time. Therefore, it's a good idea to consider having a clear system that logs and shows the user's actions. This way, users will be able to see what they did. Or, our customer care team will be able to access logs and see the truth. Otherwise, if the user comes up with an incorrect assumption and strongly believes it, convincing them without any technical evidence will be challenging. + +--- + +## 83. Loss aversion + +[Wikipedia](https://en.wikipedia.org/wiki/Loss_aversion) + +### Description + +People feel the pain of losing something much more intensely than the joy of gaining something of equal value. Losing $10 hurts way more than finding $10 feels good. + +### Usage in Product/Software + +Let's say we've created a large software product to offer in the market using the SaaS model. We're considering having multiple pricing plans due to the wide range of functionalities we offer. Our colleagues suggest having eight service plans, arguing that more options mean more choices for users. They believe it allows us to cater to different audiences, ensuring every user finds something they like. + +However, aside from violating Miller's law (which states that people can only remember around 7 plus or minus 2 items), our colleagues ignore the fact that having too many plans increases the chances of mistakes. When users see "8 flexible service plans" on our pricing page, we see it as variety, but they might perceive it as "1 correct option and 7 wrong options." Loss aversion comes into play, and users may simply turn to competitors who offer a simpler ("less risky") approach. This is why many companies present their products with only 2-3 service plans or opt for a Freemium model, where users can choose between a free and premium version. + +It's also worth mentioning the words of Dr. Daniel Kahneman, one of the researchers who studied this bias. He said, "In mixed games when wins and losses are possible, loss aversion leads to a choice in which risk aversion is maximized. People strongly avoid losses, even if the risk is negligible compared to their wealth." We can interpret "mixed games" as any uncertain situation in the app where users have to make choices without complete information. + +--- + +## 84. IKEA effect + +[Wikipedia](https://en.wikipedia.org/wiki/IKEA_effect) + +### Description + +The tendency to place higher value on things you’ve put effort into creating or assembling, often overestimating their worth compared to similar items. + +### Usage in Product/Software + +Imagine we decide to create a website where people can sell their photos online. We charge a 30% commission on each sale. It's a simple platform, similar to Shutterstock, but we're just starting out. We've done some marketing, gathered users, and now people are posting their work. However, we have a problem. According to the IKEA effect, users will likely overprice their photos, making them too expensive for anyone to buy. Eventually, photographers will leave the site, and we'll be at a loss, wondering what went wrong. + +To avoid this, we can implement some strategies. One option is to set a maximum price for photos based on their resolution. Another option is to link the price of photos to the user's rating, which increases when someone buys their photos or when their photos receive "likes" from other sellers. This helps prevent dishonest ratings. Alternatively, we can show the market value of the product, but this might not be feasible if we're just starting out and need to maximize our profits. + +Another example of where we should consider this bias is any part of any application where users have invested a lot of time. For example, if a user spends 5 minutes filling out a form or taking a test, it's crucial to ensure that the results are saved correctly. Losing that 5 minutes of effort can be frustrating for users and make them more likely to leave the platform. + +--- + +## 85. Unit bias + +[Wikipedia](https://www.alleydog.com/glossary/definition.php?term=Unit%20Bias) + +### Description + +The tendency of people to want to complete their assigned tasks. People want to finish any portion of the task, regardless of its size. The feeling of completion gives people satisfaction. + +### Usage in Product/Software + +Most of the research on this bias was conducted in the context of studying healthy eating habits. The findings suggest that people tend to adhere to the established norm of food consumption, even if that norm is excessively large for them. These studies also concluded that, for a healthy lifestyle, it's best to limit the serving sizes of different dishes. + +In an office environment, this bias is seen in employees' work settings. Platforms like Trello, JIRA, Asana, Basecamp, and others often utilize Kanban boards, tasks, and columns that we are responsible for or assigned to. For those who have been working on various projects for a long time, the desire to read all emails in Gmail, view all notifications in Slack and Skype, and complete all tasks in a column by the end of the day is familiar. Not all employees have this desire to complete a fixed portion of work, but I have observed it in a significant number of colleagues over the years, leading me to include this bias in the list. + +Regarding products, understanding this tendency is valuable in the design of applications that involve working with lists or queries. If we want to encourage users to process requests, choosing the right amount of visible requests at a time and incorporating page numbering can greatly influence their engagement. If a user sees that there are 36 pending requests, they will be less motivated to tackle the task compared to when we spread out these 36 requests across 6 pages with 6 requests each. + +--- + +## 86. Zero-risk bias + +[Wikipedia](https://en.wikipedia.org/wiki/Zero-risk_bias) + +### Description + +The preference for eliminating small risks entirely, even when reducing larger risks would result in a greater overall benefit. + +### Usage in Product/Software + +This bias helps explain why people purchase extended warranties for various products and online services. A simple example is a service guaranteeing 99.99% uptime, where the company promises continuous availability in exchange for an additional fee. Nowadays, this type of service is often included as a "bonus" in contracts, as it is rarely purchased separately. However, around 10-15 years ago, it was a popular upselling tactic employed by different companies. The idea behind it was that when users imagined the potential disaster of the service being unavailable at any point, they were willing to pay a few extra dollars for a "guarantee." + +Understanding this bias is important in order to identify opportunities for additional business benefits by offering risk-free solutions that, under normal circumstances, would involve some level of risk. + +--- + +## 87. Processing difficulty effect + +[Wikipedia](https://en.wikipedia.org/wiki/List_of_cognitive_biases#Processing_difficulty_effect) + +### Description + +The tendency for people to remember information better when it is harder to process, as the increased effort leads to deeper cognitive engagement. + +### Usage in Product/Software + +The effect can easily be explained by the fact that the more time you invest in something (in this case, the time to process the semantic load), the better it is remembered. Research on this subject is also complicated by the factor of awareness(mindfulness) during information processing, which is a separate topic. In the logic of application development, understanding this effect allows us to manipulate the text where we need the person to understand better/remember the meaning of the action better. + +The best example is contextual buttons. Instead of the buttons called “Next,” "Proceed," etc., contextual buttons with names like “Continue and delete my data”, “I understand that by clicking on this button I make my data public”, etc., will be remembered better, which might lead to better remembering of some workflow. + +--- + +## 88. Endowment effect + +[Wikipedia](https://en.wikipedia.org/wiki/Endowment_effect) + +### Description + +The tendency to overvalue something simply because you own it, even if it’s not objectively worth more than similar items. + +### Usage in Product/Software + +This product team should know this bias to alleviate risks upon major product changes. + +Introducing new functionality is positive, but removing something users already had, especially if it was visible, poses a risk. Even if the taken functionality was never actually used by the user and just existed on the interface, its removal can cause emotional distress. This is especially relevant for features that are considered optional but desirable. + +Additionally, understanding this bias allows us to place functionality that we want to test in less visible areas of the application. This way, if the test resulted in removing the functionality, our decision won't negatively impact users. + +--- + +## 89. Backfire effect + +[Wikipedia](https://en.wikipedia.org/wiki/Confirmation_bias#backfire_effect) + +### Description + +The tendency for people to strengthen their existing beliefs when confronted with contradictory evidence, doubling down rather than reconsidering. + +### Usage in Product/Software + +This bias is very important to understand because it helps us focus on selecting the right product team for a project. The strength of this bias increases when someone is overly arrogant and thinks highly of themselves. This is why we should pick teammates carefully and validate their ego fragility and mind flexibility upfront. + +As for product development, understanding this bias allows us to prepare better instructions for our customer care teams. Sometimes we should put aside any smart arguments, and find another way of dealing with angry customers. To find a way to do this, we should explain this bias to our colleagues. + +An example of perfect support that won't be blaming you and going against your beliefs is Amazon. Even if I contact them and tell them that the chalk I bought doesn't work because the Devil I was summoning didn't appear - they'll say sorry, and try to generate an alternative solution. + +--- + +## 90. System justification + +[Wikipedia](https://en.wikipedia.org/wiki/System_justification) + +### Description + +The tendency to defend and rationalize the status quo, even when it’s harmful or unfair, because it provides a sense of stability and reduces discomfort from uncertainty. + +This often means preferring the current social, political, and economic setup, and resisting change even if it means sacrificing individual and collective well-being. + +### Usage in Product/Software + +When communicating with our users through blog articles, mailing lists, etc., it is important to be cautious about expressing opinions that could potentially challenge the current status quo. + +In simpler terms, the company's focus should be on conducting business rather than engaging in politics or sociology. Any texts that show even a hint of support for recent events, social positions, political statements, or economic foundations carry significant risks. +This should be well understood by top management in order to avoid "strong-willed" decisions that may involve unconventional gestures for the sake of gaining social sympathy. + +--- + +## 91. Reactance + +[Wikipedia]() + +### Description + +Reactance is a motivational state that occurs when someone's freedom is restricted or threatened by an external factor, such as another person, a statement, or a rule. The primary goal of this behavior is to regain the freedom that has been lost or limited. + +### Usage in Product/Software + +In 2007, a study was conducted to explore how the wording of a message affects how people perceive information. The study focused on a health-related message given to participants. It was discovered that if the message ended with a statement that didn't impose an obligation to follow the advice in the future, the readers' reactance decreased. Additionally, messages that used fewer controlling words and were more specific were better remembered and understood compared to abstract messages. + +For instance, a message like "You have the freedom to cancel your subscription anytime!" after signing up for a paid service is an example of utilizing this bias. In general, reminding users about their ability to choose and make decisions is an effective strategy to minimize potential concerns and reactive responses among them. + +--- + +## 92. Decoy effect + +[Wikipedia](https://en.wikipedia.org/wiki/Decoy_effect) + +### Description + +Also known as the effect of asymmetric superiority. The tendency to change preferences between two options when presented with a third, less attractive option (the decoy) designed to make one of the original choices more appealing. + +### Usage in Product/Software + +This bias is one of the reasons why it sometimes makes sense to have "extra" products or offers. Let's say we offer the user two products or services on a web page that are very similar and equally desired. To increase sales, we can add a third option that is obviously lower in quality but priced the same as the other two. + +For example, in an online store selling construction tools, we offer two sets of screwdrivers on one page. They have similar features but different colors. Set A costs $49, and Set B costs $49, with free shipping in both cases. If we notice that users are spending a long time on the page without making a choice, we can introduce a third option called Set X, which is similar to Set A but priced at $85, and shipping costs an additional $9. Based on experiments conducted by marketers and scientists, adding this "dummy offer" can increase sales for both Set A and Set B. +This bias can be used even more efficiently when paired with the [Аnchoring effect](https://keepsimple.io/uxcore/18). + +--- + +## 93. Ambiguity effect + +[Wikipedia](https://en.wikipedia.org/wiki/Ambiguity_effect) + +### Description + +The tendency to avoid options with unknown probabilities or outcomes, preferring choices with more certain results, even if the uncertain option could be better. + +### Usage in Product/Software + +It's important to understand the ambiguity effect to ensure clear and specific wording throughout the product to alleviate psychological discomfort for our users. + +For instance, if we have a 100% track record of delivering products to customers who purchase from our website, we can add statements like "100% delivery guarantee" or "100% customer satisfaction". We can even emphasize things that are generally useless and couldn't be otherwise (e.g., "GMO-Free" labels on products that even in theory cannot be GMOed). So the general idea here is to list guaranteed successful outcomes that users may experience using our product and then highlight some of them in different parts of the product. + +To spot opportunities for using this bias, we should constantly remind ourselves that what may be obvious to us is [not necessarily obvious to others](https://keepsimple.io/uxcore/72). + +--- + +## 94. Information bias + +[Wikipedia]() + +### Description + +The tendency to seek more information even when it doesn’t affect the outcome, believing that additional data will lead to better decisions despite diminishing returns. + +Indirectly, this bias is explained by the effect of [Loss Aversion](https://keepsimple.io/uxcore/83). + +### Usage in Product/Software + +It is crucial to understand this bias when working on a product and needing to make a difficult decision that may not be popular. When the decision maker is affected by this bias, they may spend weeks conducting a "thorough analysis" of the situation, even though deep down, they already know what the right course of action is from the very beginning. Often you can see this happening when someone is laid off much later than they had to, damaging the team or product. Also, this is a common reason for shutting down unsuccessful projects later than required. + +By understanding this bias, we can assist our teammates in avoiding it or getting out of it more quickly. Additionally, we will be able to make rational decisions in critical moments, where every hour counts in preventing ongoing losses for our product and company. Having a profound understanding of this bias can ultimately help us save countless hours of our lives that would otherwise be wasted on analyzing irrelevant information. + +--- + +## 95. Law of triviality + +[Wikipedia](https://en.wikipedia.org/wiki/Law_of_triviality) + +### Description + +The tendency to spend excessive time and energy on trivial issues while neglecting more significant and complex matters, often because trivial tasks feel easier or safer to tackle. + +### Usage in Product/Software + +This allows us to repeatedly question ourselves during the meeting, such as "Are we discussing what is necessary?" and "Is it the right time to discuss this matter?" Likewise, we can redirect our colleagues' focus towards more significant issues and keep track of how much attention we give to the specifics. This enables us to evaluate more objectively whether it's worthwhile to spend time on the detailed discussion of an application or if it would be better to prioritize something else of greater importance at this stage. + +--- + +## 96. Conjunction fallacy + +[Wikipedia](https://en.wikipedia.org/wiki/Conjunction_fallacy) + +### Description + +People think detailed scenarios are more likely than simple ones, even though adding details makes them less probable. + +### Usage in Product/Software + +Understanding this bias in application development allows us to create more beautiful "hooks". + +Let's imagine we are building specialized software, and our target audience is people who thoroughly research us and our competitors before deciding to use our product. +To establish our technical expertise and gain trust, we can include an "Our Team" section on the main page of our website. This section will feature our photos and descriptions of notable technical accomplishments we have achieved (even if they are unrelated to the product we are selling). + +The key is to tell a compelling and coherent story. For example, suppose our team members have won math competitions or hold certificates like an MBA or PMP. In that case, it may not directly relate to remote server configuration services but provides additional credibility. When users browse our website and seek evidence that our product is good and suits their needs, coming across such achievements or qualifications increases their perception that our product is the right choice. Designing the "About the Team" page should consider multiple biases, not just the conjunction fallacy, but this is enough for our example. + +--- + +## 97. Less-is-better effect + +[Wikipedia](https://en.wikipedia.org/wiki/Less-is-better_effect) + +### Description + +The tendency to prefer a smaller option over a larger one when the smaller option is presented on its own, even if the larger option is objectively more valuable. + +### Usage in Product/Software + +Understanding how this phenomenon works when working on an application is essential for creating promotions or offering bonuses. + +For instance, let's say we work at LinkedIn and want to give our customers bonuses to encourage them to switch from the free version to the premium version. The management approved giving users ten days of free access to the premium account. On the one hand, this looks like a valuable and generous bonus, but on the other hand, ten days might be too short, considering that many users don't visit the platform every day. As a result, they won't be able to appreciate the bonus fully. This is a case where less is actually better. Instead of providing ten days of the premium account, we could offer one of its features in a larger quantity, making the bonus more valuable in users' eyes. + +For example, we could allow users to send 20 In-Mail messages, a feature only available to premium users, or give them the option to access detailed information on 20 companies of their choice. This alternative would be much cheaper than a premium account but more significant for the users. + +--- + +## 98. Implicit stereotypes + +[Wikipedia](https://en.wikipedia.org/wiki/Implicit_stereotype) + +### Description + +Unconscious associations or beliefs about a group of people that influence behavior and decisions, even when individuals claim to be unbiased. + +### Usage in Product/Software + +Understanding this phenomenon and the human tendency to create such associations is important for working with content and communicating with our audience. + +No matter how politically correct we are in our speech, it is necessary to take into account the current state of affairs and maintain neutrality in our public messages. This topic was partially discussed in [Stereotype](https://keepsimple.io/uxcore/45). + +--- + +## 99. Prejudice + +[Wikipedia](https://en.wikipedia.org/wiki/Prejudice) + +### Description + +A preconceived, often negative judgment or opinion about an individual or group, typically based on stereotypes rather than actual experience or knowledge. + +### Usage in Product/Software + +Knowing of prejudice is vital when building user Personas. So, we can include not only the standard list of properties such as age, gender, occupation, etc., but also known prejudices of our audience (socio-cultural, religious, other). +Having this knowledge might help us to avoid very typical mistakes. For instance, different cultures have different perceptions of color. So, in some areas, white is considered something bright, clean, and minimalistic, while in many Asian cultures, white is associated with mourning and death. + +Some heavy enterprise companies use knowledge of social prejudices to remove the "13" number from the elevator button panel. + +--- + +## 100. Fading affect bias + +[Wikipedia](https://en.wikipedia.org/wiki/Fading_affect_bias) + +### Description + +The tendency for negative emotions associated with memories to fade faster than positive ones, leading people to recall past experiences more favorably over time. + +### Usage in Product/Software + +Understanding this bias is crucial in case we make a mistake during the development of the application, and it becomes public. Responsible professionals sometimes overestimate how long their mistake's negative impact will last. Understanding the fading effect can help us take action and quickly recover from mistakes. +However, it's important to note that this doesn't apply to situations where the system accidentally deletes user data, and we release a new version the next day with an absurd headline like "Great news!" + +--- + +## 101. Peak-end rule + +[Wikipedia](https://en.wikipedia.org/wiki/Peak%E2%80%93end_rule) + +### Description + +People tend to judge an experience primarily based on how they felt at its most intense point (peak) and at its conclusion, rather than on the total experience. + +### Usage in Product/Software + +We have to ensure that any part of our application related to finishing an action or a series of actions (workflow), including closing the application, is designed to leave the user with positive emotions. If negative emotions are unavoidable, try to minimize their impact. Learning about the [Fading affect bias](https://keepsimple.io/uxcore/100) and considering both biases when making development decisions will be even better. + +--- + +## 102. Serial recall + +[Wikipedia]() + +### Description + +The ability to remember elements or events in the exact order in which they occurred, often crucial in tasks requiring sequential accuracy, such as recounting steps or events. + +### Usage in Product/Software + +Understanding this effect allows us to design user workflows more carefully. We must be sure that the sequence of what is happening on the user's screen at every given moment seems fully logical and coherent to them. +This will make it easier for our users to remember what's happening and reduce any discomfort they may feel when recalling their actions in our app. + +--- + +## 103. List-length effect + +[Wikipedia](https://www.alleydog.com/glossary/definition.php?term=List-Length+Effect) + +### Description + +The tendency for recall accuracy to decrease as the length of a list increases. The more items there are to remember, the harder it becomes to recall each one accurately. + +### Usage in Product/Software + +A SaaS product manager offers **three **pricing plans instead of **five**. Fewer options reduce decision fatigue, making users more likely to choose a plan instead of abandoning the purchase. + +Bias in Action: Too many choices overwhelm users, leading to inaction or regret. + +--- + +## 104. Primacy effect + +[Wikipedia](https://en.wikipedia.org/wiki/Serial-position_effect#Primacy_effect) + +### Description + +The tendency to better remember information presented at the beginning of a list or sequence (or process), as it has more time to be encoded into long-term memory. + +The **Primacy Effect** is a part of the **Serial-Position Effect** but focuses specifically on the tendency to remember the **first** items in a list better. + +### Usage in Product/Software + +The primacy effect is about the importance of the first impression when users interact with a product. Just like the [Peak-end rule](https://keepsimple.io/uxcore/101) emphasizes the significance of the final stages of an experience, the primacy effect reminds us to focus on the initial encounter. This understanding is crucial for making decisions about designing appealing product packaging. It also helps partially explain the popularity of unboxing shows, where people showcase the opening of products. + +--- + +## 105. Serial-position effect + +[Wikipedia](https://en.wikipedia.org/wiki/Serial-position_effect) + +### Description + +The tendency to remember items at the beginning (primacy effect) and end (recency effect) of a list better than those in the middle. + +### Usage in Product/Software + +This bias, in addition to [Serial recall bias ](/uxcore/102)and the [List-length effect,](/uxcore/103) allows us to maximize our efficiency when working with lists. + +For instance, if we're about to publish a list of new features, and we know that one of them won't be perceived well by the audience, we can put that feature in the middle of the list while putting the most positive changes at the beginning and end of the list. So, the idea is to mask our weak arguments using the serial-position effect (and Homer's rules of persuasion). + +--- diff --git a/.claude/skills/bias-advisor/references/demo-recipes.md b/.claude/skills/bias-advisor/references/demo-recipes.md new file mode 100644 index 0000000..667bc55 --- /dev/null +++ b/.claude/skills/bias-advisor/references/demo-recipes.md @@ -0,0 +1,629 @@ +# UX Core: Demo Recipes — Proven Before/After Scenarios + +Source: https://keepsimple.io/uxcore by Wolf Alexanyan / KeepSimple +Extracted from ux-core app bias demo configurations, expanded with additional scenarios. + +--- + +### Ambiguity Effect + +**Scenario:** Pricing table with vague vs specific features +**Without bias:** Vague features ("Storage and support," "more features") +**With bias:** Specific, quantified guarantees ("50 GB storage," "99.9% uptime") +**Why it works:** People avoid options with unknown probabilities. Quantified benefits eliminate ambiguity. + +### Anchoring Effect + +**Scenario:** Pricing table with crossed-out original prices +**Without bias:** Three plans at face value ($10, $25, $50/mo) +**With bias:** Same plans with crossed-out "original" prices ($49, $99) making current prices feel like steep discounts +**Why it works:** The first number seen dominates value judgment. Arbitrary anchor makes $25/mo feel like a bargain. + +### Anecdotal Evidence + +**Scenario:** Product testimonial section on landing page +**Without bias:** Aggregate data only: "98% satisfaction rate across 12,000 customers" with a bar chart +**With bias:** Single detailed story: "Sarah, freelance designer: 'I was drowning in invoices until I found this tool. Saved me 10 hours last week alone.'" with photo and company logo +**Why it works:** A single vivid personal story is more persuasive than aggregate statistics. People connect with narratives, not numbers. + +### Appeal to Novelty + +**Scenario:** SaaS feature announcement banner within the app +**Without bias:** "Report Builder has been updated. View changelog." +**With bias:** "NEW: Next-Gen Report Builder — completely reimagined with AI-powered insights. Try the future of reporting." +**Why it works:** People equate "new" with "better." Emphasizing novelty makes the same improvement feel like a breakthrough worth trying immediately. + +### Attentional Bias + +**Scenario:** Dashboard with engagement metrics +**Without bias:** Basic profile (75% complete, member since date) +**With bias:** Prominent karma points, likes, contributor rank, activity streak +**Why it works:** Emotionally charged metrics draw focus, increasing content creation through desire for social validation. + +### Authority Bias + +**Scenario:** Medical app treatment recommendation screen +**Without bias:** "Recommended: 30 minutes of daily walking" — plain text suggestion +**With bias:** "Dr. Sarah Chen, MD — Johns Hopkins Cardiology" with photo and credentials, followed by the same recommendation in a quote card with a verification badge +**Why it works:** People defer to authority figures. Attaching expert identity and credentials to the same advice dramatically increases compliance. + +### Automation Bias + +**Scenario:** Code review tool automated suggestion panel +**Without bias:** AI suggestion shown as: "Suggestion: Refactor this function" with equal visual weight to manual review comments +**With bias:** AI suggestion shown with a prominent "AI Verified" shield badge, green checkmark, confidence score "98.7% correct", displayed above manual comments in a highlighted card +**Why it works:** Users over-trust automated systems with confidence indicators. The visual authority of the AI badge discourages users from critically evaluating the suggestion. + +### Availability Heuristics + +**Scenario:** App download page for a blockchain-based file storage product +**Without bias:** Landing page prominently says "Powered by Blockchain Technology" with crypto-adjacent visuals (chain icons, token references) +**With bias:** Same product described as "Military-Grade Encrypted Cloud Storage" with no blockchain terminology visible — feature parity, different framing +**Why it works:** Users recall negative media associations with blockchain/crypto, making them avoid anything linked to it — reframing the same tech with neutral language bypasses the negative availability heuristic. + +### Backfire Effect + +**Scenario:** Customer support chat response to a billing dispute +**Without bias:** "Our records show you were charged correctly. Here is the invoice proving the charge is valid. The Terms of Service section 4.2 states..." +**With bias:** "I understand this charge was unexpected. Let me walk you through your account activity together — and if anything looks off, we'll fix it right away." +**Why it works:** Directly contradicting a user's belief with evidence triggers defensive doubling-down. Collaborative exploration defuses resistance and opens them to the correct information. + +### Bandwagon Effect + +**Scenario:** Product card with social proof +**Without bias:** Basic product info (name, price, rating) +**With bias:** Added "Trending #1," peer purchase signals, 12,847 ratings +**Why it works:** Social proof indicators reduce perceived risk — if thousands chose it, it must be good. + +### Barnum Effect + +**Scenario:** Assessment results notification +**Without bias:** Generic score (78/100, areas: communication, time management) +**With bias:** Personalized-sounding statements ("you value efficiency," "others rely on your judgment") +**Why it works:** People accept vague flattering statements as uniquely applicable to themselves. + +### Base Rate Fallacy + +**Scenario:** App store product listing showing user reviews +**Without bias:** All reviews shown chronologically — 3 negative 1-star reviews appear at the top (most recent), followed by thousands of positive ones; overall "4.8 stars from 15,847 ratings" shown small at bottom +**With bias:** "4.8 stars from 15,847 ratings" shown prominently at top with star distribution bar chart (showing 95% are 5-star), negative reviews accessible but not leading +**Why it works:** Users fixate on vivid individual negative reviews while ignoring base rates; leading with the statistical summary forces the accurate big picture before any single anecdote can anchor perception. + +### Bizarreness Effect + +**Scenario:** Product card with distinctive branding +**Without bias:** Standard app card (HabitFlow, Free, Productivity badge) +**With bias:** Bizarre framing ("Your 8-armed accountability partner," octopus illustration) +**Why it works:** Unusual content creates deeper memory trace. Users remember the weird one. + +### Clustering Illusion + +**Scenario:** Wellness app push notification schedule +**Without bias:** Notifications sent at fixed daily schedule (9:00 AM every day): "Time for your daily check-in!" — predictable, easy to ignore/dismiss +**With bias:** Notifications sent at random intervals (36-55 hours apart) with varied messages: "This is a good moment to pause for a few mindful breaths," "Quick check-in: how are you feeling right now?" — no fixed schedule +**Why it works:** Users perceive random notifications as meaningfully timed ("it always knows when I need it!"), attributing a caring pattern to what is actually random spacing. + +### Confirmation Bias + +**Scenario:** Account security dashboard for an anonymous marketplace +**Without bias:** Generic settings page: "Security Settings" with password change and 2FA toggle, no proactive trust signals +**With bias:** "Your Security Status: Protected" banner with real-time indicators (end-to-end encryption active, 0 data breaches, anonymous ID verified), plus a "Transparency Report" link and recent security audit date +**Why it works:** Skeptical users actively look for evidence the platform is unsafe; surfacing continuous proof of security intercepts their search and converts confirming evidence from "this is sketchy" to "this is legitimate." + +### Conjunction Fallacy + +**Scenario:** "About the Team" section on a B2B SaaS website +**Without bias:** Simple list: "John — CTO. Maria — Lead Engineer. Alex — Designer." +**With bias:** Rich bios: "John — CTO, MIT CS graduate, ex-Google, 3x startup founder, published AI researcher. Maria — Lead Engineer, AWS certified, built systems handling 10M+ requests/day." +**Why it works:** Detailed, coherent narratives feel more credible than sparse facts, even though each added detail technically makes the conjunction less probable. Users equate story richness with trustworthiness. + +### Conservatism (Belief Revision) + +**Scenario:** Project management tool onboarding for users migrating from a competitor +**Without bias:** Onboarding forces new workflow: "Forget everything you know! Our revolutionary Board-First approach changes everything. Start from scratch." +**With bias:** Onboarding adapts to prior tool: "Coming from Trello? We've set up your workspace with familiar boards and columns. Try our timeline view when you're ready — no rush." +**Why it works:** Users cling to prior beliefs about how workflows "should" work; forcing a paradigm shift triggers resistance, while respecting existing mental models and gradually introducing new ones yields adoption. + +### Context Effect + +**Scenario:** Donation landing page +**Without bias:** Commercial visual language ("BUY NOW" CTA, urgency badge) +**With bias:** Aligned context (nature imagery, "Protect a Forest" CTA, supporter testimonials) +**Why it works:** When visual environment matches message values, credibility and conversion increase. + +### Continued Influence Effect + +**Scenario:** Health & wellness app updating its hydration recommendation +**Without bias:** App previously showed "Drink 8 glasses of water daily" for two years. Updated overnight to "Drink based on thirst and activity level" with no explanation +**With bias:** Update screen: "What changed: The '8 glasses' rule was a common belief, but recent research shows hydration needs vary. Here's why we updated..." with before/after comparison and a "Learn More" link +**Why it works:** Simply correcting old information fails because the original claim persists in memory; explicitly acknowledging what users previously believed and explaining why it changed weakens the continued influence. + +### Contrast Effect + +**Scenario:** Product card flanked by extremes +**Without bias:** Single mid-range product ($79 headphones) +**With bias:** Same product between premium ($349) and budget ($19) options +**Why it works:** Surrounding context reshapes value perception without changing the product. + +### Cue-Dependent Forgetting + +**Scenario:** Fitness app re-engagement push notification for a lapsed user +**Without bias:** "You haven't worked out in 18 days. Open the app to get back on track." +**With bias:** "Remember your 14-day streak in October? You crushed 42 workouts that month. Ready for round two?" with a mini chart of their past streak +**Why it works:** Specific cues from past success (streak length, month, workout count) trigger retrieval of positive memories that generic prompts cannot access. + +### Curse of Knowledge + +**Scenario:** Developer tool onboarding walkthrough +**Without bias:** First-run screen: "Configure your CI/CD pipeline using YAML. Set build triggers and deployment targets." — assumes familiarity with terminology +**With bias:** Step-by-step wizard with "What do you want to automate?" (plain language options: "Test my code," "Deploy to production," "Both"), visual pipeline builder, jargon-free labels with expandable "What does this mean?" sections +**Why it works:** Experts forget what it's like not to know. Replacing jargon with guided choices prevents the team's expertise from becoming a barrier to new user adoption. + +### Decoy Effect + +**Scenario:** Pricing table with asymmetrically dominated option +**Without bias:** Two plans (Basic $8, Premium $24) +**With bias:** Added decoy Plus plan ($22, fewer features than Premium) +**Why it works:** Decoy makes Premium look like outstanding value through asymmetric dominance. + +### Distinction Bias + +**Scenario:** Pricing plans shown together vs separately +**Without bias:** Two similar plans side-by-side (Team $12, Business $14) +**With bias:** Same plans requiring scrolling to compare (presented separately) +**Why it works:** Side-by-side presentation exaggerates small differences. Separation reduces decision friction. + +### Dunning-Kruger Effect + +**Scenario:** Workflow optimization suggestions in a CRM tool +**Without bias:** User manually exports contacts to CSV, edits in Excel, re-imports — repeating this daily without complaint +**With bias:** Contextual tooltip appears after detecting repeated export/import: "Did you know? You can bulk-edit contacts directly. See how (saves ~20 min/day)" +**Why it works:** Users with low feature awareness don't know what they're missing. Proactive suggestions surface better methods that users would never seek on their own. + +### Empathy Gap + +**Scenario:** In-app live chat support interface responding to an angry user +**Without bias:** Bot responds to complaint with: "Please calm down and describe the issue clearly so we can assist you." +**With bias:** Bot responds with: "We understand this is frustrating. Let's fix this together. Can you tell us what happened?" — empathetic tone, no dismissal of emotion +**Why it works:** Support agents in a neutral state default to logic-first responses that dismiss the user's emotional reality; acknowledging the feeling first bridges the empathy gap and de-escalates. + +### Endowment Effect + +**Scenario:** Dashboard layout update notification +**Without bias:** "New layout applied next week, old layout removed" +**With bias:** Acknowledges user's customizations (4 widgets, 2 filters, custom theme), offers preview +**Why it works:** People overvalue what they possess. Respecting ownership leads to higher adoption. + +### Escalation of Commitment + +**Scenario:** Online course platform showing learning investment on the "considering cancel" screen +**Without bias:** "Cancel enrollment? You can re-enroll anytime." +**With bias:** "You've invested 14 hours and completed 6 of 10 modules. You're 60% there. Keep going?" with progress visualization +**Why it works:** Showing accumulated investment makes abandonment feel wasteful. Users continue not because the course is valuable, but because quitting means "wasting" what they already put in. + +### Fading Affect Bias + +**Scenario:** App status page after a service outage +**Without bias:** Outage incident remains pinned at the top of the status page indefinitely with red "Major Outage" banner +**With bias:** After resolution, incident is moved to history within 48 hours. Status page leads with "All Systems Operational" and a green banner. Recent improvements section highlights 3 new reliability features shipped since the incident +**Why it works:** Negative emotions from bad experiences fade faster than positive ones. Quickly replacing the outage narrative with operational confidence accelerates the natural fading of negative affect. + +### Framing Effect + +**Scenario:** System update notification +**Without bias:** "1% chance of data loss" +**With bias:** "99% probability the operation will succeed" +**Why it works:** Identical information, opposite emotional responses. Positive frame increases confidence. + +### Frequency Illusion + +**Scenario:** Multi-product ecosystem homepage, help center, and in-app banner for a freelance payments platform +**Without bias:** Each surface uses different value propositions — homepage says "Simple invoicing," help center says "Manage your business," in-app says "Dashboard" +**With bias:** Consistent tagline "Fastest payouts for freelancers" appears in homepage hero, help center header, in-app welcome banner, and email footer — identical phrasing everywhere +**Why it works:** Once the user notices the "fastest payouts" claim in one place, they begin spotting it everywhere, and the repetition across independent contexts makes it feel like a universally accepted truth. + +### Functional Fixedness + +**Scenario:** Web app toolbar menu with underused tools +**Without bias:** A "Tools" button opens a dropdown with 4 items. Analytics show 97% of clicks go to "Export" — users never notice the other 3 tools +**With bias:** "Export" promoted to a standalone button on the toolbar. Remaining 3 tools reorganized into a new "Power Tools" section with fresh icons and introductory tooltips +**Why it works:** Users fixate on one function for a familiar control. Breaking the spatial association forces re-evaluation and drives discovery of overlooked features. + +### Fundamental Attribution Error + +**Scenario:** B2B SaaS customer success email +**Without bias:** "Your team completed 47 projects this quarter using ProjectFlow." +**With bias:** "Your team's expertise drove 47 completed projects this quarter. Your strategic planning made the difference — here's your success report." +**Why it works:** People attribute success to personal skill, not circumstance. Crediting the user's abilities (not your tool) strengthens loyalty and satisfaction. + +### Gambler's Fallacy + +**Scenario:** Loot box / mystery reward screen in a mobile game +**Without bias:** "Open Mystery Box — $1.99" with no additional context +**With bias:** "You've opened 7 boxes without a Legendary item. Players who opened 8+ boxes often hit the jackpot!" with a glowing progress bar approaching a gold threshold +**Why it works:** Players believe a win is "due" after a losing streak. Showing the streak length exploits the false sense that probability accumulates. + +### Generation Effect + +**Scenario:** Language learning app vocabulary review +**Without bias:** Flashcard shows the word and its translation together: "Hund = Dog" +**With bias:** Flashcard shows "H***" with context sentence "Der *** bellt laut" and user must type the answer +**Why it works:** Self-generated answers create stronger memory traces than passively reading. Forcing recall instead of recognition dramatically improves retention. + +### Group Attribution Error + +**Scenario:** Social app group creation flow +**Without bias:** "Create Group" form with just a name field and member invite list +**With bias:** "Create Group" form with mandatory "Group Mission" field, shared values tagline, and auto-generated group identity badge ("The Innovators — 12 members strong") +**Why it works:** A declared group identity makes members assume shared traits, strengthening cohesion and engagement through perceived collective character. + +### Halo Effect + +**Scenario:** App store listing page +**Without bias:** App listing with functional screenshots, bullet-point features, 4.2-star rating, plain icon +**With bias:** Polished listing with cinematic preview video, custom-illustrated hero image, designer icon with gradient, "Editor's Choice" badge, and Apple Design Award mention +**Why it works:** A visually stunning first impression makes users assume the underlying product quality matches. Beautiful design halos over to perceived reliability and performance. + +### Hard-Easy Effect + +**Scenario:** Multi-step tax calculator form in a fintech app +**Without bias:** Single dense page with 14 fields, dropdowns, and conditional logic all visible at once +**With bias:** Same calculator broken into 4 guided steps with progress bar, contextual help tooltips, and smart defaults pre-filled +**Why it works:** Teams overestimate how easy complex interfaces are for users. Decomposing difficulty into small steps prevents the user confusion that designers underestimate. + +### Hindsight Bias + +**Scenario:** Incident postmortem page in a monitoring tool +**Without bias:** After a server outage: "Outage resolved. Root cause: database connection pool exhaustion." No additional context +**With bias:** Timeline view showing all pre-incident signals with timestamps: "These 4 alerts occurred before the outage. At the time, none exceeded warning thresholds." Includes a "What we're adding" section with new safeguards +**Why it works:** After a failure, users believe warning signs were obvious. Showing that pre-incident data was ambiguous in real-time prevents blame and builds trust in proactive improvements. + +### Hot Hand Fallacy + +**Scenario:** Competitive multiplayer game leaderboard during a win streak +**Without bias:** Plain score display: "Current rank: #47. Wins today: 8" +**With bias:** "8 WINS IN A ROW! You're on fire! Next match: Double XP bonus for streak players." with flame animations intensifying each win +**Why it works:** Visual indicators of past success make players feel future success is more likely despite independence. Streak visualization sustains engagement through false momentum. + +### Humor Effect + +**Scenario:** 404 error page for a casual content platform +**Without bias:** "Page not found. Error 404. Return to homepage." +**With bias:** "This page wandered off to find itself. While it's gone, here are some articles that stayed put." with playful illustration and suggested content links +**Why it works:** Humorous content creates stronger memory traces than neutral content. In low-stakes moments, wit builds memorable brand personality and turns dead ends into engagement. + +### Hyperbolic Discounting + +**Scenario:** Annual billing upgrade prompt +**Without bias:** "Save 20% with Annual Billing" ($48/year savings) +**With bias:** "Get Your First Month FREE" with countdown timer +**Why it works:** Immediate rewards valued more than larger delayed ones. "Free now" beats "save later." + +### IKEA Effect + +**Scenario:** Website builder with template customization +**Without bias:** Pre-built template gallery: "Pick a template. We'll set it up for you." +**With bias:** Step-by-step builder: "Choose your colors > Arrange your sections > Name your site" — then shows "Your custom creation" with a preview +**Why it works:** Users who invest effort in creating something value the result disproportionately. The customization steps transform a generic template into "my website." + +### Illusion of Control + +**Scenario:** Feature voting poll +**Without bias:** Upcoming features listed as "Coming in Q3" +**With bias:** Interactive voting with existing vote counts, "Your vote matters!" banner +**Why it works:** Sense of influence creates ownership. Users who vote feel connected to the release. + +### Illusion of Transparency + +**Scenario:** Tooltip and help text on a complex API configuration form +**Without bias:** Terse labels: "Webhook URL," "Auth Token," "Retry Policy" — no additional explanation +**With bias:** Contextual help icons on each field. Hovering reveals plain-language tooltips: "Where should we send event notifications? Paste your server's URL here." Plus a "Not sure? See setup guide" link +**Why it works:** Creators overestimate how obvious their interface is. Adding explicit explanations for what seems self-evident dramatically reduces support tickets and user confusion. + +### Illusory Correlation + +**Scenario:** SaaS marketing landing page with brand association +**Without bias:** Homepage shows product features with company logo only: "Project management for modern teams" +**With bias:** "Trusted alongside teams at Google, Stripe, and NASA" with those logos displayed prominently next to the product logo +**Why it works:** Users perceive a relationship between the product and prestigious brands simply from co-presence on the page, even with no real partnership. + +### Illusory Superiority + +**Scenario:** Fitness app post-workout summary screen +**Without bias:** "Workout complete. 32 minutes, 280 calories burned." +**With bias:** "You crushed it! You burned more than 74% of users today. Top performer streak: 3 days running." with comparative chart +**Why it works:** People overestimate their own abilities and welcome confirmation. Comparative flattery reinforces their inflated self-image, boosting retention. + +### Illusory Truth Effect + +**Scenario:** Landing page with repeated claim +**Without bias:** Generic feature description +**With bias:** "#1 project management tool" repeated in headline, subheadline, CTA, and testimonials +**Why it works:** Repetition creates familiarity the brain interprets as truth. No proof needed. + +### In-Group Favoritism + +**Scenario:** Social media content feed algorithm +**Without bias:** Chronological feed showing all posts equally — news, opinions, memes from all connections +**With bias:** Feed prioritized by in-group signals: posts from users with matching profile badges ("Fellow Designer"), shared group memberships, and similar engagement history boosted to top with "From your community" labels +**Why it works:** Users engage more with content from perceived in-group members. Surfacing tribal affinity signals increases time-on-feed and interaction rates. + +### Information Bias + +**Scenario:** E-commerce product comparison tool +**Without bias:** Product page shows 6 key specs, price, and rating — enough to decide. "Buy Now" button prominent +**With bias:** Product page adds "Compare with 12 similar products," expandable 40-row spec table, "Download full datasheet (PDF)," and "See 200+ reviews" — burying the purchase action under layers of data +**Why it works:** More information feels useful but delays decisions. Users who keep comparing rarely convert — streamlined, sufficient data drives action better than exhaustive data. + +### Insensitivity to Sample Size + +**Scenario:** Product comparison page showing user ratings +**Without bias:** Product A shows "4.9 stars" (from 3 reviews) next to Product B showing "4.6 stars" (from 8,412 reviews) — both displayed identically +**With bias:** Product A shows "4.9 stars (3 reviews) — Not enough data" with muted display, Product B shows "4.6 stars (8,412 reviews) — Verified" with full prominence and a confidence indicator +**Why it works:** Users instinctively trust 4.9 over 4.6 without considering that 3 reviews could easily be anomalous; surfacing sample size and confidence indicators counteracts the bias. + +### Just-World Fallacy + +**Scenario:** Company pricing change announcement page +**Without bias:** "Starting March 1, pricing will increase by 15%. See new pricing below." +**With bias:** "To continue investing in security, accessibility, and fair wages for our team, we're adjusting pricing by 15%. Here's exactly where your money goes:" followed by a transparent cost breakdown with a "Fairness Commitment" badge +**Why it works:** People believe good actions deserve good outcomes. Framing a price increase as a just, moral decision makes users accept it as deserved and fair. + +### Less-Is-Better Effect + +**Scenario:** Upgrade bonus notification +**Without bias:** "10 free days of full access to all features" +**With bias:** "20 free In-Mail credits ($40 value)" +**Why it works:** Smaller, specific offer feels more valuable than larger, diffuse one. Quality-to-quantity ratio matters. + +### List-Length Effect + +**Scenario:** Pricing table with feature counts +**Without bias:** Five plans with 8-12 features each +**With bias:** Three plans with 3-5 key features each, "Compare all features" link +**Why it works:** As list length increases, recall drops. Fewer options with fewer bullets increase conversion. + +### Loss Aversion + +**Scenario:** Free trial countdown +**Without bias:** "Upgrade to Pro for $15/mo" listing gains +**With bias:** "You will lose: 12.4 GB used storage, 6 saved dashboards, 3 months analytics history" +**Why it works:** Pain of losing is 2x the pleasure of gaining. Loss framing creates urgency. + +### Mental Accounting + +**Scenario:** Subscription charge breakdown +**Without bias:** Single line "$29/mo" +**With bias:** Decomposed into four value categories ($12 tools + $8 storage + $5 support + $4 learning) +**Why it works:** Each sub-charge evaluated against its own mental budget. Total feels more justifiable. + +### Mere-Exposure Effect + +**Scenario:** Mobile app store listing page targeting French users +**Without bias:** Generic global listing — standard blue/white color scheme, stock photos of diverse international users, English-first layout +**With bias:** Subtle tricolor (blue-white-red) accent palette, Parisian cityscape watermark behind hero section, testimonials from French users with local city names +**Why it works:** Familiar cultural cues (colors, landmarks, local names) trigger subconscious preference without the user recognizing why the page feels more trustworthy. + +### Miller's Law + +**Scenario:** Settings panel navigation +**Without bias:** 16 undifferentiated links +**With bias:** Same 16 items grouped into 4 labeled sections of 4 items each +**Why it works:** Working memory holds 7 plus/minus 2 items. Chunking reduces cognitive overload. + +### Money Illusion + +**Scenario:** Pricing with different time units +**Without bias:** Annual pricing ($120/year, $300/year, $600/year) +**With bias:** Daily pricing ($0.33/day, $0.82/day "Less than a coffee," $1.64/day) +**Why it works:** People focus on face value. $0.82/day feels trivial, $300/year feels expensive. Same cost. + +### Mood-Congruent Memory Bias + +**Scenario:** SaaS renewal reminder for a user who recently experienced a service outage +**Without bias:** Automated renewal email sent on schedule: "Your annual plan expires in 3 days. Renew now for $199/year." +**With bias:** System detects recent support ticket about outage, delays renewal email by one week, and leads with resolution: "We fixed the sync issue you reported. Everything's running smoothly now. By the way, your plan renews next week." +**Why it works:** Requesting payment while frustrated triggers recall of every past frustration; waiting for a positive mood shift ensures the renewal decision is colored by recent good experiences instead. + +### Negativity Bias + +**Scenario:** Incident notification +**Without bias:** "Incident Resolved. Uptime: 99.97%" +**With bias:** "Maintenance Complete. Your data is safe. Here's what we improved..." with specifics +**Why it works:** One negative event undoes months of positive ones. Proactive communication neutralizes disproportionate weight. + +### Neglect of Probability + +**Scenario:** Backup reminder +**Without bias:** "Probability of data loss is approximately 0.01%" +**With bias:** "Your last backup was 571 days ago" with social comparison stats +**Why it works:** People ignore probabilities, respond to emotional severity. Remove the number, show consequences. + +### Normality Bias + +**Scenario:** Stock trading app with automatic stop-loss prompt +**Without bias:** Portfolio view showing stock positions with current prices and percentage changes — no alerts for unusual drops +**With bias:** When a stock drops 15% in a day, a prominent warning banner appears: "Unusual activity detected. Set a stop-loss limit?" with one-click threshold options and "Auto-protect" toggle +**Why it works:** Users assume things will continue normally and ignore warning signs. Proactive intervention mechanisms override the default assumption that "it'll bounce back." + +### Omission Bias + +**Scenario:** Subscription cancellation flow +**Without bias:** Direct "Cancel Subscription" link +**With bias:** Multi-step cancellation (Account > Billing > Manage Plan > Cancel) +**Why it works:** People judge harmful actions worse than equally harmful inactions. Effortful cancellation exploits this. + +### Ostrich Effect + +**Scenario:** Financial dashboard +**Without bias:** Raw negative data (Credit Utilization 78%, budget overage alert) +**With bias:** Euphemistic labels ("On Track," "Optimization Opportunity," collapsed Credit Details) +**Why it works:** People avoid uncomfortable information. Masking anxiety with softer labels keeps users engaged. + +### Peak-End Rule + +**Scenario:** Checkout confirmation page +**Without bias:** "Order placed. You will receive an email." +**With bias:** Delivery estimate, personal note, 10% discount code, trust badges +**Why it works:** Memory weighs peak and ending disproportionately. Rewarding final step improves recall of entire experience. + +### Picture Superiority Effect + +**Scenario:** Feature list — text vs illustrations +**Without bias:** Text descriptions ("Kanban boards for visual workflow management...") +**With bias:** Short labels with SVG illustrations (kanban board, clock, people, dashboard) +**Why it works:** Images encoded through dual channels (visual + verbal). 6x better retention than text alone. + +### Placebo + +**Scenario:** Internet speed troubleshooter in an ISP's customer portal +**Without bias:** "We're aware of intermittent slowdowns in your area. No action needed." +**With bias:** "Run Network Optimizer" button that triggers an animated progress bar ("Scanning routes... Optimizing DNS... Clearing cache...") and ends with "Connection optimized! Speed improved by up to 12%" — even though no real change occurred +**Why it works:** Giving users a visible action to perform creates perceived improvement. The ritual of "fixing" something satisfies the need for control, reducing complaints. + +### Positivity Effect + +**Scenario:** Team collaboration tool reaction system +**Without bias:** Comment section with only text replies — no quick reactions available +**With bias:** Comment section with one-click positive reaction buttons (clap, heart, fire, rocket, "Great idea!") prominently displayed, with a subtle "Reply" text link for longer responses +**Why it works:** Users gravitate toward sharing positive emotions when given easy tools to do so. Low-friction positivity features increase engagement and platform attachment. + +### Post-Purchase Rationalization + +**Scenario:** Order confirmation email for a $149 ergonomic keyboard +**Without bias:** Plain transactional email: "Order #4821 confirmed. Estimated delivery: March 28. Track your order." +**With bias:** Branded email: "Great choice! The MechPro X is rated #1 by 12,000+ developers. Your serial number: MP-2024-8841 (Limited Edition). Here's a setup guide to get the most out of your new keyboard." with product beauty shot and customer quote +**Why it works:** Immediately after purchase, buyers are most vulnerable to doubt; reinforcing the quality of their decision with social proof, exclusivity cues, and actionable next steps gives them ammunition to rationalize the expense. + +### Prejudice + +**Scenario:** E-commerce checkout page localized for different markets +**Without bias:** Same design globally: white background, green "Complete Purchase" button, order number #1304 +**With bias:** Japan version uses soft warm tones (white avoided as primary due to mourning associations), green CTA kept (positive across cultures), order number skips #4 and #13 (unlucky numbers in East Asian and Western cultures) +**Why it works:** Cultural prejudices shape unconscious reactions to colors, numbers, and symbols. Localizing for known biases prevents unintended negative associations that suppress conversion. + +### Primacy Effect + +**Scenario:** Onboarding welcome screen +**Without bias:** Generic "Welcome to TaskFlow" with feature list +**With bias:** Personalized "Welcome, Sarah. You're about to save 5 hours every week." +**Why it works:** First impression anchors entire perception. Onboarding deserves disproportionate design attention. + +### Processing Difficulty Effect + +**Scenario:** Destructive action confirmation +**Without bias:** Generic "Are you sure?" with Yes button +**With bias:** Shows impact (847 files, 23 collaborators), requires typing "DELETE" to confirm +**Why it works:** Cognitive effort creates stronger memory trace. Forces deep engagement with consequences. + +### Reactance + +**Scenario:** Upgrade upsell prompt +**Without bias:** Forced popup "You MUST upgrade to continue" +**With bias:** Low-pressure banner with explicit opt-out ("Free to continue, no pressure") +**Why it works:** Restricted freedom triggers pushback. Acknowledging choice increases conversion. + +### Recency Illusion + +**Scenario:** Feature announcement banner in a SaaS app +**Without bias:** Sidebar shows existing feature "Advanced Filters" with no special treatment — available for 2 years +**With bias:** Same feature repackaged: "NEW: Smart Filters — powered by AI" with a "Just launched" badge, blog post link, and spotlight animation on first visit +**Why it works:** Users perceive recently noticed things as genuinely new. Repackaging existing features with fresh branding triggers discovery and adoption even when nothing changed. + +### Risk Compensation + +**Scenario:** Admin panel for a cloud infrastructure tool with auto-backup enabled +**Without bias:** "Auto-backup is ON. Your data is fully protected." (user skips reading change warnings, bulk-deletes records carelessly) +**With bias:** "Auto-backup is ON. Review: you are about to delete 1,204 records. Restoring from backup takes up to 4 hours. Proceed?" +**Why it works:** Safety features make users reckless. Surfacing real consequences of errors counteracts the false sense of invulnerability that automated protections create. + +### Selective Perception + +**Scenario:** Rich text editor toolbar layout +**Without bias:** Unconventional toolbar: bold/italic buried in a "More" dropdown, font color on the main bar, "Insert Table" as the first icon, alignment controls scattered +**With bias:** Conventional toolbar following market standards: Bold (B), Italic (I), Underline (U) as first three icons, followed by alignment, then lists, then advanced features in dropdowns +**Why it works:** Users have formed expectations from years of using Word/Google Docs; unconventional placement makes standard features feel missing even when they're present. + +### Self-Reference Effect + +**Scenario:** Landing page targeting +**Without bias:** "Project management for teams of all sizes" +**With bias:** "Built for freelancers who juggle 5+ clients" with segment-specific testimonial +**Why it works:** Personally relevant content triggers "This is about me" recognition, encoding more deeply. + +### Serial-Position Effect + +**Scenario:** Release notes ordering +**Without bias:** Neutral order (bug fixes first, features mixed, price increase visible) +**With bias:** Best news first and last, price increase buried in middle +**Why it works:** First and last items recalled best. Bury bad news in the center. + +### Serial Recall + +**Scenario:** Multi-step onboarding wizard for a project management tool +**Without bias:** Steps in arbitrary order: "Invite team > Set your role > Name your project > Connect integrations" +**With bias:** Steps in natural causal sequence: "Name your project > Set your role > Invite team > Connect integrations" with numbered progress bar +**Why it works:** People recall sequences better when the order matches logical cause-and-effect. A coherent step order reduces cognitive friction and helps users remember and repeat the workflow. + +### Social Desirability Bias + +**Scenario:** In-app user survey / feedback form +**Without bias:** "How satisfied are you with our product?" with 1-5 star rating — user's name and avatar visible on the form +**With bias:** "Anonymous feedback" badge prominently displayed, question reframed as "What's ONE thing that frustrates you most?" with pre-written options and an anonymous text field. No user identity shown +**Why it works:** People give socially desirable answers when identifiable. Anonymity plus negatively-framed questions give users permission to be honest, producing actionable data. + +### Spotlight Effect + +**Scenario:** Content sharing prompt +**Without bias:** "All 5,000 members will see your post" +**With bias:** "Posts typically get 8-15 views. You can edit or remove anytime." +**Why it works:** People overestimate others' attention. Realistic expectations reduce social anxiety. + +### Subjective Validation + +**Scenario:** Environmental non-profit registration form with pre-ticked preference +**Without bias:** Standard registration: name, email, password, "Create Account" button — no values elicitation +**With bias:** Registration includes a pre-checked checkbox: "I want to help protect the environment." After signup, confirmation says "Welcome, fellow Earth Guardian!" Two weeks later, a donation ask arrives referencing their stated value +**Why it works:** The checkbox creates a self-attributed belief ("I'm someone who cares"); subjective validation makes the user interpret the later donation request as consistent with who they are. + +### System Justification + +**Scenario:** Company blog post during a controversial public event +**Without bias:** Blog post takes a strong public stance on a divisive social issue, urging users to "join the movement" +**With bias:** Blog post stays focused on product updates and value delivery, with neutral, business-oriented language +**Why it works:** Users defend the status quo as a source of stability. Brand messaging that challenges their existing worldview triggers discomfort and disengagement rather than loyalty. + +### Third-Person Effect + +**Scenario:** SaaS marketing email for power users +**Without bias:** Aggressive promotional email: "AMAZING deal! Don't miss out! Everyone is switching!" +**With bias:** Understated, data-driven email: "Here's what changed in v4.2 and how it affects your workflow" with usage stats and a subtle CTA +**Why it works:** Sophisticated users believe they are immune to persuasion, so overt marketing triggers skepticism — a restrained, informational tone bypasses their defenses. + +### Unit Bias + +**Scenario:** Task list pagination +**Without bias:** Single list of 36 pending requests +**With bias:** 6 per page with progress indicator (0 of 36) +**Why it works:** Completable units sustain engagement. 6 feels achievable, 36 feels insurmountable. + +### Von Restorff Effect + +**Scenario:** Navigation menu with one highlighted item +**Without bias:** All nav items styled identically +**With bias:** "Pricing" highlighted with "New" badge +**Why it works:** Visually distinct item captures attention and is remembered far better. + +### Weber-Fechner Law + +**Scenario:** Discount presentation +**Without bias:** Same absolute discount ($5 off) on $25 and $500 items +**With bias:** Proportional framing (20% OFF on $25 item, 1% off on $500 item) +**Why it works:** Perceived significance is proportional to base. Scale discounts to maintain psychological impact. + +### Zero-Risk Bias + +**Scenario:** Checkout with guarantee badges +**Without bias:** Standard return policy mentioned in payment section +**With bias:** Multiple risk-elimination badges (30-day guarantee, free returns, SSL, "100% risk-free") +**Why it works:** People prefer eliminating small risk entirely over reducing larger risk more. Zero-risk framing is psychologically powerful. diff --git a/.claude/skills/bias-advisor/references/question-index.md b/.claude/skills/bias-advisor/references/question-index.md new file mode 100644 index 0000000..0ab21c7 --- /dev/null +++ b/.claude/skills/bias-advisor/references/question-index.md @@ -0,0 +1,67 @@ +# UX Core: Question Index (63 Questions) + +Quick-reference lookup. Read this first to match user problems to curated bias recommendations, then grep `questions.md` by number for full answers. + +1. Why our company has reputation issue? — brand reputation, media, public communication, product reputation +2. Why users aren't happy with product quality? — poor product quality, no feedback, users not sharing feedback +3. Why users don't use requested features? — functionality rarely used, users require functionality, users demand a product change +4. Why did we fail to create the right product associations in the market? — product reputation, tagline, brand, marketing campaigns +5. Why do users complain about product updates? — strong reaction to product updates, new product version, functionality update +6. Why didn't our product meet user expectations? — users accuse us of lying, users say we cheated +7. Why don't users like the product anymore? — users start to get frustrated, users disappointed with quality +8. Why are users so sensitive to product changes? — users don't like product changes, system updates, software updates +9. Why do our users find our communication overwhelming? — product annoys users, too frequent alerts, too much communication +10. Why do users complain about the quality of our support? — customer care, customer support, low support quality +11. Users blame us for their own mistakes — user inactivity, users weren't attentive, user manipulation +12. Why do potential users overstate the risks of using the product? — users exaggerate danger, appeal to public opinion +13. Why don't our users follow the safety rules? — users don't follow instructions, users ignore rules +14. Why were we accused of being careless in business? — users say we're not serious, not taken seriously +15. Why do users say our product is boring? — users get bored, boring product +16. Why aren't our promotions working? — marketing, product promotion, project promotion +17. Why don't users use most of our product features? — unused feature, unused component, only one feature used +18. Why don't users pay attention to the most important parts of the product? — misjudged audience interests, user attention +19. Why do potential users mainly notice the flaws in our product? — hesitant users, users cannot choose, prospects +20. How can we boost sales on our project? — increase purchase size, sale of goods, sale of services +21. Users don't like how we talk to them — where did we mess up? — rude communication, users don't respond, insults +22. Why didn't users like or appreciate the recent product update? — users didn't like innovations, last update, recent updates +23. How can we make one of our products stand out among the rest? — highlight one product, service plan, tariff plan +24. How do we nudge users to take the actions we want with minimal cost? — nudging, nudge in action +25. How can we reduce the amount of money withdrawn by project users? — withdrawal, balance, deposit +26. How to make bonuses and promotions more attractive to users? — promo, newsletters, bonuses, marketing campaigns +27. How to launch in a market with strong negative associations? — negative associations, unpopular market, shady business +28. What mistakes do we make when evaluating our marketing strategies? — marketing data, marketing results, market assessment +29. How to provide the best purchasing experience for users? — user experience, UX, subscribe, subscription +30. What common mistakes do we make when dealing with product analytics? — analytics, Google Analytics, GTM, Mixpanel +31. How to protect yourself from fake news (or other information warfare) — protect brand, misinformation, information warfare +32. How can we maximize the comfort of the product? — comfort, comfortable experience, product comfort +33. What to do if a user reports an event the system doesn't show? — dealing with lies, user errors, user mistake +34. How can we make the product look more modern without spending much? — freshness, novelty, minimal cost +35. How to work with gambling in a product? — gambling, casino, excitement, sweepstakes +36. How can we establish a sense of trust within a social project? — social platform, social network, charity, forum +37. What are the risks of major changes to the product's ideology or functionality? — functional update, change of strategy, large-scale changes +38. What to consider when creating moderation/arbitrage features? — moderation, escrow, conflicts, conflict resolution +39. How can we make our product users more responsible? — responsible product, dangerous product, responsible decisions +40. How can we show content to users more effectively? — information architecture, content display, content structure +41. What should we do if our colleagues' stubbornness is hurting teamwork? — team stubbornness, colleagues' integrity +42. How can we generate new products out of thin air while keeping costs minimal? — free features, expand assortment, out of nothing +43. What to consider when planning product releases? — time management, launch planning, release plan +44. What to consider when working with user feedback? — feedback, user polls, survey +45. What to do if our team members do not share their opinion? — team doesn't discuss, decisions not negotiable, silent +46. How to simplify our product? — complexity of interface, complex features, complex functionality +47. What should we keep in mind when reaching out to a user directly? — communication with users, contacting the client, direct contact +48. What to consider when involving users in product development — involve users, project development +49. What should we do when users ask for things we can't deliver? — deny users, reject users, user requirements +50. How to deal with an incompetent colleague/manager? — incompetence, ego issues, low qualification +51. What causes users to make mistakes when using our product? — inattentive, user attention, customer attention +52. How to involve users into our product testing? — alpha testing, beta testing, QA, quality assurance +53. What should we consider when removing unnecessary product features? — removing functionality, removing components, product changes +54. What should be considered when adding new product functionality? — new feature, new option, new functionality, new component +55. Which product components are most sensitive to change? — sensitive system components, sensitive parts of the product +56. What to consider when working with lists (any)? — list, element sequence, list sequence +57. How can we add extra value to a product at minimal cost? — added value, product value, add value +58. How can we make sure users notice the information that matters most to us? — license agreement, privacy policy, terms and conditions +59. What should we consider when referencing political, social, or economic events in our messages? — politics, society, global market conditions +60. What should we do if users are struggling on the product or service selection page? — users can't choose, difficult choice +61. What should we do if our team wastes too much time on minor details? — useless meetings, ineffective meetings, unnecessary discussions +62. What to consider when creating a Persona for a product? — persona, persona creation, personality development +63. What to do if a significant mistake occurred in the latest release? — bug, release bug, release failure, failed release diff --git a/.claude/skills/bias-advisor/references/questions.md b/.claude/skills/bias-advisor/references/questions.md new file mode 100644 index 0000000..b29e3a4 --- /dev/null +++ b/.claude/skills/bias-advisor/references/questions.md @@ -0,0 +1,1207 @@ +# UX Core: Curated Questions & Answers + +63 real-world product questions mapped to cognitive biases with contextual explanations. +Each answer explains _why_ specific biases apply to the situation. + +Source: uxcg-advisor dataset from uxcore.io by Wolf Alexanyan / KeepSimple. + +## 1. Why our company has reputation issue? + +**Related biases:** 1. Availability heuristics, 10. Omission bias, 16. Self-reference effect, 19. Conservatism (belief revision), 42. Illusory correlation, 43. Group attribution error, 72. Consensus bias + +**Answers:** + +- **Availability heuristics (1)** We have become a victim of associations with a negative event that has recently received widespread coverage on the Internet/media. +- **Illusory correlation (42)** The object that we were associated with took a hit, which in turn hit us. For example, a criminal case was opened against a public figure who advertised our product. +- **Group attribution error (43)** We are in the same domain with the object that received a blow to its reputation. For example, a number of our competitors have been caught using fraudulent schemes. +- **Omission bias (10)** We have systematically ignored the importance of audience engagement. We preferred inaction, considering any communication with users as an unnecessary risk. The market/audience interpreted our inaction as indifference to our users. +- **Self-reference effect (16)** In our public communication with the audience we badly touched our users' lives' personal aspects. +- **Conservatism (belief revision) (19)** In our public communication, we deviated from the previous course and stopped considering our audience's beliefs and moral and ethical values. +- **Consensus bias (72)** We lost touch with our audience and stopped understanding how users interpret our actions. + +**See also:** Q55, Q4, Q12, Q16, Q27, Q31 + +## 2. Why users aren't happy with product quality? + +**Related biases:** 1. Availability heuristics, 8. Frequency illusion, 17. Negativity bias, 20. Contrast effect, 25. Confirmation bias, 51. Placebo, 63. Curse of knowledge, 73. Hard-easy effect, 74. Dunning-Kruger effect, 100. Fading affect bias, 101. Peak-end rule + +**Answers:** + +- **Negativity bias (17)** The reasons are not obvious since we directly estimate the number of good and bad events that have affected users without considering emotional weight of those events. One bad event could easily lead users to a negative opinion about the product even if it happened after a dozen of good ones. +- **Availability heuristics (1)** Users evaluate the product at different time ranges than we do. We may have already fixed the bugs, but the users who shared feedback were thinking of their negative experiences in past. +- **Frequency illusion (8)** We made a series of minor mistakes in a short amount of time. Due to the frequency (not the seriousness) of errors, users' opinions about the product temporarily dropped. If the errors did not have serious consequences for the users, then according to **Fading affect bias (100)** they will soon forget about it, and the product will restore its reputation. +- **Contrast effect (20)** Our users have recently used the products of our competitors. A brighter wrapper, or a technological perfection of some details they saw there, distorted their opinion about our product. +- **Peak-end rule (101)** Our application caused intense discomfort to the user. This triggered a powerful emotional response that was remembered as the "peak" of the entire product experience. For example, the application accidentally opened a pop-up with the question, "Are you sure you want to delete your profile and all data permanently?". The user, of course, clicked "No," but the emotion he experienced at that moment left a significant imprint on his evaluation of the product. According to **Fading affect bias (100)**, this memory will fade over time, but we need to make sure that such errors do not occur again. +- **Dunning-Kruger effect (74)**. Perhaps, with their complaints, our users mask the fact that it is difficult for them to work with the product (low qualification/age/the habit of working with paper documents). +- **Confirmation bias (25)**. The user started using our product only to confirm some of his beliefs. His complaint is not useful feedback but rather a form of goodbye to us. +- **Curse of knowledge (63)**. The product components we enhanced were not in the scope of our users' main interests. +- **Hard-easy effect (73)**. The problem is not in the product quality but in its complexity. Perhaps the product is of high quality in terms of the tasks it solves, but at the same time, it isn't easy to use. +- If we see a steady increase in frustration but still do not understand the reason, it may be helpful to temporarily provide users with some kind of "Report a problem" button (**Placebo (51)**). + +**See also:** Q7, Q17, Q19, Q29, Q32, Q44 + +## 3. Why users don't use requested features? + +**Related biases:** 15. Von Restorff effect, 21. Distinction bias, 28. Selective perception, 46. Functional fixedness, 58. Normality bias, 61. The Magical Number 7±2, 63. Curse of knowledge, 68. Pro-innovation bias, 70. Social desirability bias, 72. Consensus bias, 73. Hard-easy effect, 74. Dunning-Kruger effect, 80. Appeal to novelty, 84. IKEA effect, 93. Ambiguity effect + +**Answers:** + +- **Ambiguity effect (93)**. Users are worried about losing the data that they worked on using previous functionality. They do not feel confident that new functionality will not be a waste of time. +- **Appeal to novelty (80)**. Users wanted functionality by appealing to the fact that competitors have it or to the "novelty" of the technology. Desire was driven by an emotional impulse, not a rational assessment of utility. In fact, the functionality turned out to be way less useful than they thought. +- **Distinction bias (21)**. When it became possible to assess the requested features, users realized that the previous system/functionality was better. +- **Curse of knowledge (63)**. We could not put ourselves in the user's shoes and misinterpreted their wishes. The error can also be related to the **Consensus bias (72)**. +- **Pro-innovation bias (68)**. We did not notice how we created something that was more convenient for us than for our users. +- **Functional fixedness (46)**. It is difficult for users to adapt to changes due to the habits they formed when working with previous functionality. +- **Hard-easy effect (73)**. We overestimated the ability of our users to use the requested features. The functionality turned out to be too complicated for them. +- **Normality bias (58)**. Users did not consider the scale of the requested changes. This led to the desire to return to the old methods of work. +- **IKEA effect (84)**. The new functionality implies that users will stop using the old system and switch to the new one. Users didn’t take into account their emotions towards the old functionality in which they put a lot of time and energy. +- **The Magical Number 7±2 (61)**. We added functionality without considering Miller's Law. The number of objects required for memorization made it challenging to master the new features. +- **Dunning-Kruger effect (74)**. Users, whose opinion was accepted as the basis for the feature’s development, turned out to be incompetent in the issue under discussion. +- **Social desirability bias (70)**. If users voted for a feature publicly, their responses might reflect a desire to appear preferable in the eyes of others. In fact, instead of carefully analyzing proposed options, they stuck to a line of conduct that correlated with their public image. +- Users might simply not notice the new functionality. Perhaps we poorly presented new features (**Selective perception (28)**). If the design allows, we can emphasize the features using the **Von Restorff effect (15)**. + +**See also:** Q48, Q53, Q6, Q7, Q17, Q39 + +## 4. Why did we fail to create the right product associations in the market? + +**Related biases:** 1. Availability heuristics, 3. Illusory truth effect, 4. Mere-exposure effect, 7. Mood-congruent memory bias, 8. Frequency illusion, 12. Bizarreness effect, 13. Humor effect, 16. Self-reference effect, 17. Negativity bias, 19. Conservatism (belief revision), 22. Framing effect, 30. Ostrich effect, 43. Group attribution error, 61. The Magical Number 7±2 + +**Answers:** + +- **Framing effect (22)**. The problem is in the form of our communication. The "wrapper" of our content is too weak. +- **Ostrich effect (30)**. Our public communication and marketing materials include content that is emotionally uncomfortable for users. +- **Group attribution error (43)**. We have been associated with wrong group/collective/product category properties that we didn’t want to. +- **Illusory truth effect (3)**, **Availability heuristics (1)**, **Frequency illusion (8)**. The intensity of our marketing content is too weak and not enough to generate associations with the product. +- **Mere-exposure effect (4)**. In our public communication and marketing materials, we use objects that are unknown to our audience. +- **Mood-congruent memory bias (7)**. Our public communication and marketing materials are in severe contrast to the current emotions of our audience. +- **Conservatism (belief revision) (19)**. Our content goes against the ideological or moral values of our audience. +- **Self-reference effect (16)**. Our communication and marketing materials do not affect the target audience personally +- **Negativity bias (17)**. We recently improved the quality of our communication and marketing materials but did not take into account the time it takes for audiences to forget previous, harmful practices. +- **The Magical Number 7±2 (61)**. We have not determined the main idea that we want to be associated with on the market. We focused on promoting too many ideas simultaneously, and as a result, users became indifferent to our content. +- Perhaps our communication and marketing materials are too monotonous. It may make sense to use non-standard solutions (**Bizarreness effect (12)**, **Humor effect (13)**). + +**See also:** Q1, Q7, Q16, Q21, Q27, Q28 + +## 5. Why do users complain about product updates? + +**Related biases:** 4. Mere-exposure effect, 20. Contrast effect, 22. Framing effect, 51. Placebo, 76. Illusion of control, 84. IKEA effect, 100. Fading affect bias + +**Answers:** + +- **Mere-exposure effect (4)**. We recently made multiple modifications of the same component that our users had strong feelings for. +- **IKEA effect (84)**. With our latest updates, we have modified the part of the product in which our users have invested a lot of time, energy, emotions. +- **Contrast effect (20)**. We did not properly distribute the release dates and put too many releases in a short span of time. Thus, it attracted too much user attention. +- **Framing effect (22)**. We did not care about explaining the significance of the upcoming updates, which caused users’ anger. +- If we are forced to make a series of updates, we can provide users with an option to choose a convenient time for applying them (Similar to Windows updates). The options in their turn should be within the framework of our business needs (**Placebo (51)**, **Illusion of control (76)**). +- If we can’t provide options, at least we have to publicly apologize for the inconvenience and let the time heal everything (**Fading affect bias (100)**). + +**See also:** Q8, Q9, Q22, Q37, Q43, Q63 + +## 6. Why didn't our product meet user expectations? + +**Related biases:** 5. Context effect, 16. Self-reference effect, 17. Negativity bias, 20. Contrast effect, 22. Framing effect, 51. Placebo, 54. Halo effect, 63. Curse of knowledge, 74. Dunning-Kruger effect, 76. Illusion of control, 80. Appeal to novelty, 82. Generation effect, 101. Peak-end rule + +**Answers:** + +- **Context effect (5)**, **Framing effect (22)**, **Halo effect (54)**. In our public communication and marketing materials, we have exaggerated the product's capabilities. After actually using the product, the user felt dissonance (**Contrast effect (20)**). +- **Curse of knowledge (63)**, **Self-reference effect (16)**. The problem is our inability to put ourselves in the shoes of users. We attracted users to try our product by pointing out a real problem, but our solutions did not match their preferences. +- **Appeal to novelty (80)**. Users decided to use our product because "it’s good as it’s new." Desire was driven by an emotional impulse, not a rational assessment of utility. In fact, the functionality turned out to be way less useful than they thought. +- **Dunning-Kruger effect (74)**. Perhaps, with such complaints, users mask the fact that it is difficult for them to work with the product (low qualification/age/habit of working with paper documents/outdated approaches). +- **Negativity bias (17)**. Users did not like a particular element of the product compared to the rest (**Peak-end rule (101)**). +- **Generation effect (82)**. Users refer to some of our statements that we have never made. This is especially common for B2B customers. Because of this bias, it is useless to convince them otherwise in most cases. To alleviate the negativity, we can try using **Placebo (51)**, **Illusion of control (76)**. + +**See also:** Q49, Q3, Q19, Q44, Q48 + +## 7. Why don't users like the product anymore? + +**Related biases:** 1. Availability heuristics, 3. Illusory truth effect, 5. Context effect, 6. Cue-dependent forgetting, 8. Frequency illusion, 17. Negativity bias, 24. Weber-Fechner Law, 25. Confirmation bias, 42. Illusory correlation, 46. Functional fixedness, 51. Placebo, 63. Curse of knowledge, 72. Consensus bias, 76. Illusion of control, 101. Peak-end rule + +**Answers:** + +- **Cue-dependent forgetting (6)**, **Availability heuristics (1)**, **Illusory correlation (42)**. We stopped reminding our users of those pleasant, successful moments that they experienced with our product. An example of an effective "reminder" is Facebook's features "On This Day," "Your most-liked post of last year," etc. +- **Context effect (5)**, **Curse of knowledge (63)**. Our communication or the form of our actions has changed. In its turn, it has changed the product context for the users. +- **Illusory truth effect (3)**, **Frequency illusion (8)**. We have become a victim of direct or indirect discrediting/information campaigns of our competitors. +- **Negativity bias (17)**. In the recent product updates, we accidentally caused users strong emotional discomfort. Perhaps we even quickly resolved the problem but did not take sufficient measures to "smooth out" the incident. +- **Confirmation bias (25)**, **Consensus bias (72)**. We have lost contact with our users. Even though we continuously upgrade the product, we do not learn from users’ reaction. We are not fighting their hypotheses about drop-in product quality. Consequently, day after day, they continue to reassure themselves of their assessments of the "declining quality" of the product. +- **Functional fixedness (46)**. Perhaps the frustration of users is related to product updates. It may be difficult for them to adapt to changes due to the habits of long-term use of the software with the old methods. +- Depending on the intensity and duration of the disappointment, we can try to slow it down by conducting various polls (**Illusion of control (76)**). +- We can make updates more proportional in terms of evoked emotions (**Weber-Fechner Law (24)**). +- Also, we can try to create a positive emotional response in the part of the product where our users' interaction with it ends (Log out, Application closing, etc.) (**Peak-end rule (101)**). If for some reason, we can’t change the course and make any significant changes to the product, then it might be wise to provide users with **Placebo (51)**. + +**See also:** Q2, Q10, Q21, Q34, Q44, Q57 + +## 8. Why are users so sensitive to product changes? + +**Related biases:** 7. Mood-congruent memory bias, 9. Empathy gap, 16. Self-reference effect, 19. Conservatism (belief revision), 22. Framing effect, 31. Subjective validation, 46. Functional fixedness, 51. Placebo, 63. Curse of knowledge, 64. Spotlight effect, 68. Pro-innovation bias, 73. Hard-easy effect, 76. Illusion of control, 81. Escalation of commitment, 83. Loss aversion, 88. Endowment effect + +**Answers:** + +- **Pro-innovation bias (68)**. We misinterpreted users' wishes and did not notice how we created something that was more convenient for us than for them. +- **Endowment effect (88)**. We accidentally removed the part of product functionality that users considered as "their own." It doesn't matter if they used this functionality or not. +- **Hard-easy effect (73)**. The problem is the complexity of new features. Perhaps they solve users’ problems but are overly difficult to use. +- **Mood-congruent memory bias (7)**. Our updates fall on that period of our user's life cycle when he has a gloomy mood. As a consequence, the user makes judgments based on emotional impulses rather than logical judgment (**Empathy gap (9)**). +- **Self-reference effect (16)**. Our updates affect one specific group of our users disproportionately compared to the others. Perhaps due to the nature of our product, users think that recent updates are making them "visible by others" (**Spotlight effect (64)**). +- **Loss aversion (83)**, **Curse of knowledge (63)**, **Conservatism (belief revision) (19)**. With each update, we add overall value to the product, but we do not count the negative emotional weight of our users' losses. In other words, we ignore the emotional discomfort that we cause to users. +- **Framing effect (22)**. We didn’t bother explaining the importance of the updates, which caused offense. As a result, users interpreted our inaction in a very negative way (**Subjective validation (31)**). +- **Escalation of commitment (81)**. Users are not following the update instructions we made. The reason is in their disagreement to follow the rules that we have agreed with them previously (this is especially relevant for B2B clients). +- **Functional fixedness (46)**. Our updates have affected those workflows of the product where our users had established habits. +- Such issues can be solved by creating the **Illusion of control (76)**, and/or **Placebo (51)**. + +**See also:** Q5, Q11, Q22, Q43, Q63, Q54 + +## 9. Why do our users find our communication overwhelming? + +**Related biases:** 1. Availability heuristics, 2. Attentional bias, 5. Context effect, 8. Frequency illusion, 15. Von Restorff effect, 22. Framing effect, 30. Ostrich effect, 34. Clustering Illusion, 38. Illusion of validity, 42. Illusory correlation + +**Answers:** + +- **Frequency illusion (8)**, **Availability heuristics (1)**. We disproportionally distributed our communication across product pages. +- **Context effect (5)**. The content we used in some of the product parts falls out of context. Perhaps the form of our communication itself attracts too much attention (**Von Restorff effect (15)**). +- **Illusory correlation (42)**. Our communication with users didn’t change, but the world of our users did. Some of the recent events affected the users and led to the fact that they began to see our communication differently. In other words, they started paying attention to other things (**Attentional bias (2)**). +- **Framing effect (22)**. The problem is not in the number or place of communication but its form. We have not worked enough on wording and accents. +- **Clustering Illusion (34)**, **Illusion of validity (38)**. We went too far in an attempt to create a sense of "comfort," "care," "attention," etc. +- **Ostrich effect (30)**. The problem is not in the quantity, quality, or wording of our communication. The problem is that the user feels discomfort due to the subject of communication (for example, we remind him that he has a significant loan debt). Therefore, he pours his discomfort into abstraction, calling the product "obsessive" in general. + +**See also:** Q8, Q10, Q21, Q32, Q33, Q44 + +## 10. Why do users complain about the quality of our support? + +**Related biases:** 9. Empathy gap, 19. Conservatism (belief revision), 22. Framing effect, 43. Group attribution error, 44. Fundamental attribution error, 51. Placebo, 62. Illusion of transparency, 63. Curse of knowledge, 65. Illusion of asymmetric insight, 74. Dunning-Kruger effect, 75. Barnum effect, 76. Illusion of control, 77. Illusory superiority, 82. Generation effect, 89. Backfire effect, 91. Reactance, 100. Fading affect bias, 101. Peak-end rule + +**Answers:** + +- **Illusion of asymmetric insight (65)**, **Dunning-Kruger effect (74)**, **Illusory superiority (77)**, **Illusion of transparency (62)**. The problem is in the personal qualities of our support staff. When communicating with users, they make mistakes due to incompetence, ego problems, or both. At the same time, likely, they are not able to assess their actions objectively. +- **Reactance (91)**, **Backfire effect (89)**, **Empathy gap (9)**, **Curse of knowledge (63)**. Low qualification of our employees leads to tactless communication with users. Often, such problems can be solved by providing clear instructions for communicating/working with users. +- **Conservatism (belief revision) (19)**. The problem is not in quality, but in the modern working methods that we use. Perhaps they are not suitable for our audience due to their age, ideology, beliefs, or other values. +- **Group attribution error (43)**. The user extrapolates conclusions from communication with one of our employees to the entire department as a whole. If we are confident in our high quality, it is necessary to find the one who contacted the user and analyze these contacts. +- **Generation effect (82)**. The user remembers something that never happened. If so - we can not do anything (and we don't need to), as we don't have much choice here. However, if the user is lying, we can show him the system's data and explain that he was mistaken. +- The better we complete our communication with the user, the faster he will "recover" and will respond to our communication in the product (**Fading affect bias (100)**, **Peak-end rule (101)**). +- The basis of instructions for working with users for our support specialists should be **Empathy gap (9)**, **Framing effect (22)**, **Barnum effect (75)**, **Fundamental attribution error (44)**, **Placebo (51)**, **Illusion of control (76)**. + +**See also:** Q47, Q21, Q32, Q38, Q41, Q44 + +## 11. Users blame us for their own mistakes + +**Related biases:** 10. Omission bias, 22. Framing effect, 36. Neglect of probability, 46. Functional fixedness, 47. Just-world fallacy, 51. Placebo, 58. Normality bias, 62. Illusion of transparency, 63. Curse of knowledge, 67. Planning fallacy, 76. Illusion of control, 83. Loss aversion, 89. Backfire effect, 91. Reactance + +**Answers:** + +- The key question when discussing this problem is if users become victims of our intentional choice, or if it happened by accident? If the problem happened by accident, the reason was most likely related to **Illusion of transparency (62)**, **Curse of knowledge (63)**. It's never too late to apologize, compensate losses, and develop a safety mechanism to prevent such things from happening again. +- On the other hand, we may have done this intentionally. **Omission bias (10)**, **Neglect of probability (36)**, **Normality bias (58)**, **Planning fallacy (67)**. We knew that people would underestimate the importance of checkboxes, buttons, and small texts in their profile settings. In such cases, most often users prone to **Backfire effect (89)**, **Reactance (91)**. Users will appeal for justice (**Just-world fallacy (47)**), habits (**Functional fixedness (46)**) and time/financial losses (**Loss aversion (83)**). In our turn, we have to use the correct accent in communication (**Framing effect (22)**), create **Illusion of control (76)** and **Placebo (51)**? + +**See also:** Q58, Q13, Q24, Q33, Q39 + +## 12. Why do potential users overstate the risks of using the product? + +**Related biases:** 11. Base rate fallacy, 15. Von Restorff effect, 17. Negativity bias, 22. Framing effect, 50. Bandwagon effect, 62. Illusion of transparency, 63. Curse of knowledge, 64. Spotlight effect, 73. Hard-easy effect, 74. Dunning-Kruger effect, 86. Zero-risk bias, 93. Ambiguity effect, 96. Conjunction fallacy + +**Answers:** + +- **Framing effect (22)**, **Base rate fallacy (11)**, **Von Restorff effect (15)**, **Curse of knowledge (63)**, **Illusion of transparency (62)**. In our public communication, we used ineffective wording or graphic images. +- **Dunning-Kruger effect (74)**. The problem is the incompetence of the user. Often, incompetence, and as a result, incomplete understanding of the product, is masked by exaggeration of risks. This is especially true in the B2B domain. +- **Hard-easy effect (73)**. We underestimated the difficulty of using the product. Perhaps one of the risks that the user sees, but does not say directly, is the time he thinks it will take him to learn how to work with the software. +- **Spotlight effect (64)**. The user thinks that his actions will be visible to others while using the product. He may not realize our privacy policy and privacy settings in the product. In this case, we may help him with this. +- **Negativity bias (17)**. The user recently had a bad experience with a competitor's product and viewed our product in the same context. +- **Bandwagon effect (50)**. The user has little understanding of the risks, so he appeals to society's prevailing opinion that these types of products contain significant risks. In this case, we can give logical arguments based on the system's statistics and performance indicators, and smooth out the emotional component with a story about what a unique team we have (**Conjunction fallacy (96)**). +- In the B2B domain, we may be able to create an additional special offer that will be disproportionately more expensive, but at the same time will completely close at least one of the aspects that bother the user (**Zero-risk bias (86)**, **Ambiguity effect (93)**). + +**See also:** Q1, Q60, Q18, Q19, Q28, Q36 + +## 13. Why don't our users follow the safety rules? + +**Related biases:** 5. Context effect, 6. Cue-dependent forgetting, 10. Omission bias, 11. Base rate fallacy, 22. Framing effect, 30. Ostrich effect, 36. Neglect of probability, 49. Automation bias, 50. Bandwagon effect, 58. Normality bias, 63. Curse of knowledge, 73. Hard-easy effect, 74. Dunning-Kruger effect + +**Answers:** + +- **Hard-easy effect (73)**. We underestimated the complexity of complying with the safety regulations we have made. +- **Curse of knowledge (63)**, **Framing effect (22)**. We may have relied too heavily on our users' common sense and did not explain the potential risks well enough. We were unable to convey the instructions' significance and present them in a user-friendly way. +- **Base rate fallacy (11)**, **Neglect of probability (36)**, **Omission bias (10)**, **Normality bias (58)**. In our communication, we haven’t emphasized the risks and consequences of user actions (or inaction) well enough. +- **Context effect (5)**. We have chosen a bad place/moment to ask a user for a security action. Perhaps the request falls out of context. +- **Cue-dependent forgetting (6)**. We did not take care of the reminders for the required actions or the request wasn’t matched with the emotions experienced by users when receiving the reminder. +- **Ostrich effect (30)**. Users avoid safety-related materials because of the emotional discomfort they feel when they think of the required action. +- **Automation bias (49)**. Users rely too heavily on system advice. +- **Bandwagon effect (50)**. Most people in the user group do not use security rules, and they never discuss them. The user, in turn, considers following the rules something unnecessary. +- **Dunning-Kruger effect (74)**. Users do not understand the importance of the rules because of their low qualifications. Or, they think the rules are unnecessary, thereby exaggerating their professional skills. + +**See also:** Q58, Q11, Q51, Q24, Q39 + +## 14. Why were we accused of being careless in business? + +**Related biases:** 7. Mood-congruent memory bias, 12. Bizarreness effect, 13. Humor effect, 15. Von Restorff effect, 54. Halo effect + +**Answers:** + +- **Bizarreness effect (12)**. In our public communication, or in the product itself, we use too many non-standard solutions/elements, that do not correspond to our audience's conservative ideas. +- **Humor effect (13)**. Our audience finds the humor we used as inappropriate to promote the product. +- **Von Restorff effect (15)**. We used too many non-standard solutions for interface visualization. Some of those were interpreted as a "frivolous attitude to business." +- **Mood-congruent memory bias (7)**. Our communication with users caused them emotional dissonance. We did not consider their moods connected with the latest world/local events (conjuncture changes). +- **Halo effect (54)**. Users created high expectations from product based on the object we used to attract them. The actual product didn’t match the wrapper. +- We could fall victim to user idiosyncrasies - unique taste preferences of users. + +**See also:** Q4, Q6, Q9, Q21, Q44 + +## 15. Why do users say our product is boring? + +**Related biases:** 6. Cue-dependent forgetting, 12. Bizarreness effect, 13. Humor effect, 14. Picture superiority effect, 22. Framing effect, 39. Recency illusion, 43. Group attribution error, 49. Automation bias, 70. Social desirability bias, 75. Barnum effect + +**Answers:** + +- **Social desirability bias (70)**. Users are dissatisfied with more serious aspects of the product than its boringness. When talking about boringness, they mask their real opinion not to sound rude. +- **Group attribution error (43)**. We became associated with the category of products that are out of trend. Maybe we failed in our public communication and/or marketing strategies. +- **Cue-dependent forgetting (6)**. We did not prepare joyful reminders, and over time, everything that made users happy became commonplace for them. +- We always have many options for dealing with user boredom. Starting with our ability to add some humor and quirkiness to the product (**Bizarreness effect (12)**, **Humor effect (13)**), ending with personalized messages to users (**Picture superiority effect (14)**, **Framing effect (22)**, **Barnum effect (75)**). +- Depending on the type of product, we can also add smart alerts to the system (**Automation bias (49)**), as well as re-present the existing functionality (**Recency illusion (39)**). + +**See also:** Q57, Q17, Q26, Q34, Q40, Q44 + +## 16. Why aren't our promotions working? + +**Related biases:** 3. Illusory truth effect, 4. Mere-exposure effect, 5. Context effect, 14. Picture superiority effect, 16. Self-reference effect, 22. Framing effect, 42. Illusory correlation, 43. Group attribution error, 63. Curse of knowledge, 67. Planning fallacy, 96. Conjunction fallacy + +**Answers:** + +- **Curse of knowledge (63)**. We didn’t understand our audience. When creating the "Person" of our product, we got a distorted picture. As a result, our communication and content created to promote the product received a weak response from the audience. +- **Conjunction fallacy (96)**. When developing a marketing strategy, we tied several events together as "most likely to happen." However, we did not notice that the overall likelihood of success of our strategy decreased with the addition of each subsequent event in it. For example, we have linked anticipated changes in the political and economic landscape as elements necessary for our success. +- **Illusory correlation (42)**. Our marketing campaigns were built on non-existent correlations in the opinions of users. +- **Picture superiority effect (14)**. In our marketing materials, we used way too many images-videos-texts. This is a common mistake that occurs when content is being created without a clear strategy and information architecture. +- **Self-reference effect (16)**, **Context effect (5)**. Our communication or content did not resonate with the user personally. +- **Framing effect (22)**, **Group attribution error (43)**. The way we represent our content is not in the interests of our audience. +- **Planning fallacy (67)**. We did not correctly calculate the time required to achieve the desired result. There are two possible options here: 1. The promotion campaign itself was shorter than the time necessary; 2. We did not wait for the right moment to evaluate its results. +- In any promo campaign, we should also consider the **Illusory truth effect (3)**, **Mere-exposure effect (4)**. + +**See also:** Q1, Q4, Q19, Q26, Q28, Q30 + +## 17. Why don't users use most of our product features? + +**Related biases:** 5. Context effect, 15. Von Restorff effect, 19. Conservatism (belief revision), 20. Contrast effect, 22. Framing effect, 28. Selective perception, 30. Ostrich effect, 39. Recency illusion, 46. Functional fixedness, 64. Spotlight effect, 68. Pro-innovation bias, 80. Appeal to novelty, 83. Loss aversion, 86. Zero-risk bias, 88. Endowment effect, 93. Ambiguity effect + +**Answers:** + +- **Von Restorff effect (15)**, **Selective perception (28)**. We have emphasized a specific object (button, icon, other) too strongly in contrast with others. +- **Functional fixedness (46)**. The problem is in rooted the behavioral patterns (habits) of our users. In such cases, we can play with elements positioning. For example, we can move elements from less popular features of the product to the most popular ones or vice versa. This should be done carefully since the slightest mistake can cause users tremendous anger (just imagine what would happen if Facebook simply swap places of “like” and “heart” reacts.) +- **Ambiguity effect (93)**, **Ostrich effect (30)**. Users are worried about the integrity of their data. They’re not sure that new functionality will not be a waste of time. +- **Endowment effect (88)**, **Loss aversion (83)**. Users overestimate the value of the functionality they use because of the time they invested in it. +- **Zero-risk bias (86)**. Users feel that their current use of the product is the safest. This opinion could be without rational explanation. +- **Pro-innovation bias (68)**, **Contrast effect (20)**. Other components of our product are much worse than we think. It seems that they cannot be worse since one of the product components is very popular, but the data shows the opposite. +- To encourage users to use other parts of the product, we can try **Appeal to novelty (80)**, **Recency illusion (39)**, **Spotlight effect (64)**, **Context effect (5)**. In our communication where we promote other features of the product, we should consider the **Conservatism (belief revision) (19)**, **Framing effect (22)**. + +**See also:** Q2, Q3, Q24, Q46 + +## 18. Why don't users pay attention to the most important parts of the product? + +**Related biases:** 11. Base rate fallacy, 12. Bizarreness effect, 15. Von Restorff effect, 16. Self-reference effect, 19. Conservatism (belief revision), 20. Contrast effect, 22. Framing effect, 25. Confirmation bias, 28. Selective perception, 30. Ostrich effect, 36. Neglect of probability, 64. Spotlight effect, 74. Dunning-Kruger effect, 83. Loss aversion + +**Answers:** + +- **Von Restorff effect (15)**, **Contrast effect (20)**. We have made one element of the interface stand out too clearly from the others. +- **Dunning-Kruger effect (74)**, **Selective perception (28)**. Due to their incompetence, users exaggerated the importance of some components of the product. +- **Loss aversion (83)** Users compare secondary components of our product with the same ones that our competitors have. As our competitors have those better developed, our users consider our weakness as their "personal loss," the pain of which is higher than other functionality we provide. +- **Spotlight effect (64)**. Users misjudge how visible these product components are to other people on the platform. +- **Base rate fallacy (11)**, **Framing effect (22)**, **Bizarreness effect (12)**, **Self-reference effect (16)**. We used bad wrapper for the features. As a result, people overestimated minor features and underestimated main ones. +- **Neglect of probability (36)**, **Ostrich effect (30)**. Users exaggerate the risks because of the emotional discomfort of just thinking about them. +- **Conservatism (belief revision) (19)**, **Confirmation bias (25)**. We have left out the faith and ideological values of our users. The minor product elements conflict with the values of our users. + +**See also:** Q7, Q12, Q19, Q44 + +## 19. Why do potential users mainly notice the flaws in our product? + +**Related biases:** 1. Availability heuristics, 17. Negativity bias, 20. Contrast effect, 43. Group attribution error, 46. Functional fixedness, 74. Dunning-Kruger effect, 79. Hyperbolic discounting, 83. Loss aversion, 96. Conjunction fallacy + +**Answers:** + +- **Conjunction fallacy (96)**, **Availability heuristics (1)**. Potential users are worried about the recent events (global, market), in the light of which our product's weaknesses look worse than they are. +- **Negativity bias (17)**. Potential users have had a very bad experience with our competitors' product. As a result, they began to perceive the slightest flaws in our product critically. +- **Loss aversion (83)**. Our product's weaknesses look even weaker because of the contrast with the competitors' product (**Contrast effect (20)**). Potential users consider our product's weaknesses as a "loss," the bitterness of which is higher than the pleasure of the strong parts of it. +- **Group attribution error (43)**. The opinion of users is not based on rational assessment but stereotypes prevailing in our market. We are credited with the negative traits that most of our competitors have. +- **Functional fixedness (46)**. Potential users are accustomed to a specific set of actions that they have performed in other products. They are trying to figure out how much they will have to change their habits if they start using our product. +- **Dunning-Kruger effect (74)**. Potential users are incompetent in the discussed topic, so they cannot distinguish essential product features from minor ones. +- Often, potential users who are hesitant to choose can be nudged by using **Hyperbolic discounting (79)**. This is especially efficient if their arguments about a competitor's product are relevant. + +**See also:** Q12, Q18, Q58, Q1, Q28, Q44 + +## 20. How can we boost sales on our project? + +**Related biases:** 18. Anchoring effect, 22. Framing effect, 39. Recency illusion, 49. Automation bias, 50. Bandwagon effect, 57. Mental accounting, 79. Hyperbolic discounting, 80. Appeal to novelty, 84. IKEA effect, 92. Decoy effect, 97. Less-is-better effect + +**Answers:** + +- **Recency illusion (39)**. We can manipulate the order of products in the listing so that users find many "new" ones. +- **Automation bias (49)**. We can advise users on additional purchases using machine analysis. For example, we may use statistics and behavioral patterns of similar users to suggest “best purchases” (**Bandwagon effect (50)**). +- **Less-is-better effect (97)**. We can create a category of “goods with the best price-quality ratio." For example, "the highest quality products under $ 9.99". +- **Decoy effect (92)**. We can speed up product/service selection by adding an "unfavorable option" to the pages where users stay (think) the longest. +- **Hyperbolic discounting (79)**. We can create "offer-forks," where there is an opportunity to get some product at a good discount "right now." Or we can let them get a bigger discount on the item sometime later. +- **Appeal to novelty (80)**. We can appeal to the novelty of a proposal in order to show that it is "better than everything that came before." +- **Framing effect (22)**. We can experiment with the product wrapper - description, meaning, accents, etc. The fewer services/goods we have, the more critical is the perfection of the wrapper. +- **Mental accounting (57)**. We can create a fundamentally new product category where users will be willing to pay extra money for. It can be a seasonal offer or something like "Limited time offers of July." The idea is for a person to consider their spending on our project not as a whole but break them down into categories. Example: "I spent $190 shopping at Amazon and only $29.50 on monthly sale items." +- **IKEA effect (84)**. We can push users to spend more time and effort on a particular part of the product, with a consequent increase in its cost. Many companies are guided by this logic, transferring their most popular features into higher service plans. +- If we operate with many price tags or different products, we can effectively use **Anchoring effect (18)**. + +**See also:** Q57, Q60, Q16, Q23, Q25, Q42 + +## 21. Users don't like how we talk to them — where did we mess up? + +**Related biases:** 16. Self-reference effect, 19. Conservatism (belief revision), 22. Framing effect, 31. Subjective validation, 47. Just-world fallacy, 65. Illusion of asymmetric insight, 74. Dunning-Kruger effect, 81. Escalation of commitment, 89. Backfire effect, 91. Reactance + +**Answers:** + +- **Illusion of asymmetric insight (65)**. Perhaps we overestimated our ability to understand users and made it rude without noticing it. Or maybe users accidentally saw too obvious manipulation or financial interest in our actions. +- **Escalation of commitment (81)**. We may have been the victim of an "Escalation of commitment" bias. Sometimes the reasons behind our users' anger can be hidden. The reason is that we do not know the living conditions and actions that took place in the user's life before he came to us. Suppose we are a bookmaker and a new user who has not even deposited money yet accuses us of dishonesty. We do not know what experience he had with other products and what prompted him to join us. Consequently, we can simply never find it out, and that's okay. +- **Reactance (91)**. In our communication, we referred to the limitations of the user's service plan or the license agreement that he accepted during the registration. At such moments, the user may feel a violation of their freedom (yes, this is irrational) and interpret our communication as rude and aggressive. +- **Backfire effect (89)**. The user told us his version of what happened to him. We showed the system logs proving the inconsistency of his arguments. Confused, he criticized our system for mistakes, us for being rude, and the project for mediocrity and lies. +- **Conservatism (belief revision) (19)**. When communicating with the user we did not consider his ideological beliefs, moral and ethical values. Also, it is possible that we unsuccessfully commented on some public events on behalf of the project. +- **Dunning-Kruger effect (74)**, **Subjective validation (31)**. We have accidentally touched the fragile ego of an incompetent person. +- **Just-world fallacy (47)**. With our actions or communication, we have done something "unfair" from our users' point of view. +- **Self-reference effect (16)**, **Framing effect (22)**. In our public communication with the audience, we unsuccessfully touched upon the personal aspects of our audience's life. + +**See also:** Q47, Q59, Q7, Q8, Q44 + +## 22. Why didn't users like or appreciate the recent product update? + +**Related biases:** 7. Mood-congruent memory bias, 9. Empathy gap, 20. Contrast effect, 22. Framing effect, 28. Selective perception, 61. The Magical Number 7±2, 62. Illusion of transparency, 63. Curse of knowledge, 68. Pro-innovation bias, 69. Overconfidence effect, 72. Consensus bias, 74. Dunning-Kruger effect, 80. Appeal to novelty, 83. Loss aversion, 88. Endowment effect + +**Answers:** + +- **Contrast effect (20)**. The recent updates have not contrasted with the previous ones. If we expect users to distinguish between monotonous updates/events, we are most likely to be disappointed. +- **Framing effect (22)**, **Illusion of transparency (62)**. We haven't bothered to provide a nice wrapper for our updates. The "wrapper" refers to any element of our communication with users. These include mailing lists, alerts, release notes, images, etc. +- **Selective perception (28)**. Our updates did not meet user expectations. +- **Appeal to novelty (80)**. Our main argument in support of changes was their novelty. Users, in turn, were interested in other things. +- **Endowment effect (88)**, **Loss aversion (83)**. Our updates mean that users will completely or partially abandon the part of the product in which they have invested a lot of time and energy. +- **Mood-congruent memory bias (7)**. Our updates fall on that period of our user's life cycle in which he has a gloomy mood. Consequently, the user makes judgments based on emotional impulses rather than logical judgment (**Empathy gap (9)**). +- **The Magical Number 7±2 (61)**. We presented the updates by breaking them into too many parts and thus "diluted" their impression. As a result, users became indifferent to the information that we wanted to convey through the release notes. +- **Pro-innovation bias (68)**. We have exaggerated the significance of what we have created. We may have become a victim of the **Overconfidence effect (69)**. +- **Dunning-Kruger effect (74)**. Our users' competence and knowledge do not allow them to assess the significance of our updates objectively. Our mistake is that we didn't take care of a convenient "wrapper" for updates. +- **Consensus bias (72)**, **Curse of knowledge (63)**. We misinterpreted our users' feedback, and the system updates were not as interesting as we thought. + +**See also:** Q3, Q5, Q6, Q15, Q43, Q63 + +## 23. How can we make one of our products stand out among the rest? + +**Related biases:** 4. Mere-exposure effect, 15. Von Restorff effect, 20. Contrast effect, 21. Distinction bias, 22. Framing effect, 23. Money illusion, 28. Selective perception, 39. Recency illusion, 49. Automation bias, 50. Bandwagon effect, 58. Normality bias, 79. Hyperbolic discounting, 80. Appeal to novelty, 83. Loss aversion, 86. Zero-risk bias, 92. Decoy effect + +**Answers:** + +- **Distinction bias (21)**, **Contrast effect (20)**. We can manipulate the position of the displayed service/product by performing appropriate A/B tests. +- **Decoy effect (92)**. If we notice that users stay on the same page and cannot choose something for too long, we can add an unfavorable option. +- **Appeal to novelty (80)**, **Recency illusion (39)**. We can "reinvent" an existing product by changing its wrapper and serve it up as new. The implication is that each time we use this technique, we carefully collect analytical data, and each time our wrapper gets better. +- **Normality bias (58)**. We can prepare some changes that will change the "status quo" for our users, announce them, and advise users to switch to a new service plan or product before the changes take effect. +- **Selective perception (28)**, **Framing effect (22)**. We can define our users' current interests and then modify our offerings to match them. +- **Zero-risk bias (86)**. We can identify our users' concerns about the product and add different guarantees to cover any risks completely. Here I'm talking about extremely obvious things to us and not entirely obvious to users. For example, we can add a 99.9% guarantee of our servers’ availability, a guaranteed response from the support service within one day, etc. +- **Mere-exposure effect (4)**. We can add to our offer some familiar things to our users, they have exclusively positive emotions associated with. +- **Von Restorff effect (15)**. We can visually distinguish the object from the rest. +- **Money illusion (23)**. Knowing that most people make financial decisions without adjusting for inflation, we can lure them with offers of various kinds of cashback, accumulative virtual money, etc. +- **Automation bias (49)**. We can send targeted suggestions with offers to buy what similar users have bought (**Bandwagon effect (50)**). +- **Loss aversion (83)**. We can provide vouchers for a specific amount of money, with a limited duration. At the same time, we can restrict the use of vouchers for the goods/services we need. +- **Hyperbolic discounting (79)**. We can create "offer-forks" - kind of short-term "hot promotions" with instant bonuses for the purchase of the product/service we need. + +**See also:** Q16, Q17, Q60, Q20, Q26, Q57 + +## 24. How do we nudge users to take the actions we want with minimal cost? + +**Related biases:** 4. Mere-exposure effect, 6. Cue-dependent forgetting, 10. Omission bias, 11. Base rate fallacy, 13. Humor effect, 15. Von Restorff effect, 16. Self-reference effect, 18. Anchoring effect, 19. Conservatism (belief revision), 20. Contrast effect, 21. Distinction bias, 22. Framing effect, 25. Confirmation bias, 36. Neglect of probability, 45. Stereotype, 46. Functional fixedness, 47. Just-world fallacy, 49. Automation bias, 50. Bandwagon effect, 52. Out-group homogeneity, 53. In-group favoritism, 73. Hard-easy effect, 74. Dunning-Kruger effect, 75. Barnum effect, 76. Illusion of control, 79. Hyperbolic discounting, 80. Appeal to novelty, 83. Loss aversion, 86. Zero-risk bias, 87. Processing difficulty effect, 92. Decoy effect, 93. Ambiguity effect, 99. Prejudice + +**Answers:** + +- **Framing effect (22)**. The first thing to take care of is the form of our communication. Any part of our communication at any stage of the product plays a significant role. Often, a couple of correct phrases can be enough to trigger the action we need. By communication, I mean any contact of the company with actual/potential users. +- **Loss aversion (83)**, **Neglect of probability (36)**, **Zero-risk bias (86)**, **Ambiguity effect (93)**. We can present the situation in terms of possible user losses. Moreover, it is enough that these losses are likely purely theoretical. +- **Hyperbolic discounting (79)**. We can link the action we need to short-term rewards. Example: "Enter your email address and get a 20% discount for the next ten days." +- **Confirmation bias (25)**. We can create calls to action that are consistent with the point of view of our users. +- **Mere-exposure effect (4)**. In our communication, it will be useful to use objects/events that are well known to users and have positive associations. +- **Conservatism (belief revision) (19)**, **Prejudice (99)**. Our communication must fit into the ideological, moral, and ethical ideas of our audience. Also, our communication must correspond to the concept of "fairness," which our audience uses (**Just-world fallacy (47)**). +- **Hard-easy effect (73)**. We need to make sure that the actions we expect from users are easy to complete. +- **Barnum effect (75)**. We can openly use flattery in our suggestions to act. This can be especially effective if the user is susceptible to the **Dunning-Kruger effect (74)**. +- **Appeal to novelty (80)**. We can create a new wrapper for our call to action. +- **Cue-dependent forgetting (6)**. We can tie our call to actions to specific positive events taking place in the system. For example, in many mobile applications, app developers ask the user to rate the AppStore application immediately after some successful action by the user. +- **Omission bias (10)**. We can enable the desired action for new users by default. Most people never go into the depths of product settings to disable insignificant (in their opinion) things. +- **Base rate fallacy (11)**. We can play on formulations and statistics. This approach is especially relevant if we need the user to act urgently. +- **Illusion of control (76)**. We can offer users a choice between options, each of which is consistent with our business goals. To speed up decision-making, we can also add a "dummy" option (**Decoy effect (92)**, **Distinction bias (21)**). +- **Anchoring effect (18)**. If the solution we need is related to numbers, we can use one or more approaches from the description of the anchoring effect. +- **Humor effect (13)**. If we find that humor is appropriate in our communication, then its proper use can sometimes be more beneficial than any other approach. +- **Von Restorff effect (15)**, **Contrast effect (20)**. We can use external indications (pulsating buttons, italics in words, etc.). +- **Self-reference effect (16)**. We may use content that resonates with the user’s individual characteristics. +- **Functional fixedness (46)**. We can add the action we want the user to perform to his standard workflow in the application. +- **Automation bias (49)**. We can propose an action we want the user to perform based on machine analysis, and statistics. In the same proposals, we can refer to the fact that most users who have common characteristics with the current user have already performed this action (**Bandwagon effect (50)**). +- Depending on how much we want our users to be aware of the actions they perform, we can play with the semantic load of the buttons accordingly (**Processing difficulty effect (87)**). +- Depending on the nature of our product, and the user actions we need, we can come up with working options for "nudging" by examining **Stereotype (45)**, **Out-group homogeneity (52)**, **In-group favoritism (53)**. + +**See also:** Q11, Q32, Q39, Q48, Q60 + +## 25. How can we reduce the amount of money withdrawn by project users? + +**Related biases:** 7. Mood-congruent memory bias, 18. Anchoring effect, 21. Distinction bias, 23. Money illusion, 73. Hard-easy effect, 79. Hyperbolic discounting, 91. Reactance + +**Answers:** + +- **Money illusion (23)**. If the specificity of the product allows, we can explain to the user what inflation is and then add to the project accumulation systems that will partially compensate the loss from inflation. +- **Mood-congruent memory bias (7)**. We may not send bad news to the user (payment requests, informing about a negative credit balance, etc.) when they are in a bad mood. +- **Anchoring effect (18)**. We can try to reduce the withdrawal amount or influence the withdrawal date by playing with numbers. +- **Distinction bias (21)**. We can store data about changes in the user's account balance in different categories. In some cases, we can make this data difficult to access (5-6 clicks deep). +- **Hyperbolic discounting (79)**. We can slow down the withdrawal process by offering instant rewards. This should be done very carefully not to call **Reactance (91)**. +- **Hard-easy effect (73)**. We can exaggerate the complexity of the withdrawal process. So, some platforms (especially those related to gambling) provide the user with a huge list of withdrawal rules for review, thereby complicating the process. A gambling user will often prefer another round of blackjack to reading the rules and instructions for money withdrawal. + +**See also:** Q7, Q11, Q24, Q29, Q32, Q57 + +## 26. How to make bonuses and promotions more attractive to users? + +**Related biases:** 4. Mere-exposure effect, 12. Bizarreness effect, 13. Humor effect, 16. Self-reference effect, 20. Contrast effect, 21. Distinction bias, 23. Money illusion, 24. Weber-Fechner Law, 50. Bandwagon effect, 52. Out-group homogeneity, 53. In-group favoritism, 58. Normality bias, 70. Social desirability bias, 72. Consensus bias, 73. Hard-easy effect, 74. Dunning-Kruger effect, 75. Barnum effect, 79. Hyperbolic discounting, 80. Appeal to novelty, 97. Less-is-better effect + +**Answers:** + +- **Consensus bias (72)**. First of all, we should distance ourselves from our own opinion about what we believe will be of interest to users. Understanding consensus bias requires us to talk to our users directly to identify their key interests in our product. +- **Self-reference effect (16)**. We can build our promotions so that the user can see himself in them. +- **Weber-Fechner Law (24)**. Let’s suppose we are planning a series of promotions. We can compose them so there is no big difference in their value for the user. Of course, our goal may be exactly the sharp contrast of the offer (**Contrast effect (20)**). +- **Hard-easy effect (73)**. We must make sure that users understand the simplicity of the actions required to receive bonuses. +- **Hyperbolic discounting (79)**. If our bonuses were initially valuable only in the long term, it might make sense to split them into several short-term rewards. +- **Appeal to novelty (80)**. We can change the shape of the promo and its wrapper, thereby "reinventing" it. +- **Less-is-better effect (97)**. If our big promotions don't resonate well with users, we can break them down into smaller, short-term, higher-quality bonuses. +- **Mere-exposure effect (4)**. In our communication, we can use objects/events that are familiar to users and have positive associations. +- **Barnum effect (75)**. If we work in the B2B sector, and our promotions/bonuses are not public, we can openly use flattery. This can be especially effective if the client is susceptible to the **Dunning-Kruger effect (74)**. +- **Normality bias (58)**. We can tie the expiration date of our promotions to a fundamental change in our product. +- **Bizarreness effect (12)**. We can change the very form of our promos while not changing their value for us. Let's say we plan to offer a 15% discount on our products over the next 20 days. We can launch this promotion as is or modify it to something like "within the next 20 days, on every even day of the calendar we give 12% discount and on every odd day - 15%". I am not saying that it makes sense and that it should be done this way, but you can notice its "quirkiness" in this example. Such promotions have the potential to be discussed much longer than regular discount offers. +- **Humor effect (13)**. If our relationship with users allows, we can use humor as the basis of our "wrapper" for promotional offers. +- **Distinction bias (21)**. If our product's nature and the context allow, we can show the distinguishing features of our promotions in direct comparison with competitors. Of course, this should be done only if we are confident in our superiority. +- **Money illusion (23)**. Depending on the product's specifics, knowing how users perceive inflation (most of them don't understand it) allows us to make offers that are unusual for the market. +- Another universal option of nudging is providing users with data about the actual participants in the promo (**Out-group homogeneity (52)**, **In-group favoritism (53)**). +- If we want to attract users to participate in charity events, we can focus on the social desirability of an action (**Social desirability bias (70)**, **Bandwagon effect (50)**). + +**See also:** Q9, Q14, Q20, Q28, Q30, Q57 + +## 27. How to launch in a market with strong negative associations? + +**Related biases:** 3. Illusory truth effect, 4. Mere-exposure effect, 5. Context effect, 7. Mood-congruent memory bias, 16. Self-reference effect, 17. Negativity bias, 19. Conservatism (belief revision), 22. Framing effect, 25. Confirmation bias, 28. Selective perception, 43. Group attribution error, 45. Stereotype, 62. Illusion of transparency, 68. Pro-innovation bias, 70. Social desirability bias, 80. Appeal to novelty, 93. Ambiguity effect, 98. Implicit stereotypes, 100. Fading affect bias + +**Answers:** + +- **Pro-innovation bias (68)**. If the project is still at the development stage, we should allow outside observers to evaluate our thoughts and ideas. Perhaps the idea we want to implement is not good enough to avoid all the market risks. +- If we have already conducted some surveys of potential users, we should consider **Social desirability bias (70)**. +- **Stereotype (45)**, **Implicit stereotypes (98)**. We should carefully study the stereotypes prevailing in the market and understand the ones that play into our hands as well as the ones that should be avoided by all means. +- **Ambiguity effect (93)**. When working in such a market, we should be specific in everything that is generally possible. The audience will interpret any discrepancy in our communication in an extremely negative way. +- **Confirmation bias (25)**, **Selective perception (28)**. Any mistake we make in communication or product functionality will be greeted sharply negatively (as something expected). +- **Appeal to novelty (80)**. We must take care of our product's image from the very beginning and clearly distinguish our difference from other products on the market. The use of this bias should be a mandatory component of our communication. +- **Illusion of transparency (62)**. When talking to our audience, we should do it as clearly as possible. We must exclude the possibility of any discrepancies. +- **Illusory truth effect (3)**. To be "clean" in such a market, we must be careful with our news release frequency. In addition to this, it is important that our communication is consistent and does not fall out of the context (our "storyline") that we adhere to (**Context effect (5)**). +- **Mere-exposure effect (4)**. In such a market, it may be risky to use objects familiar to the audience for promo campaigns. We can know the attitude of potential users to the market. We can know the relationship of users to an object. But we cannot calculate how users will interpret their combination. +- **Mood-congruent memory bias (7)**. When launching on such markets, as well as publishing some updates, we should time it with the conjuncture (world, market, region). We should make sure that people do not have any additional stress because of external events (covid, war, revolution, etc.). +- **Self-reference effect (16)**, **Framing effect (22)**. Before creating content/communication that will affect people personally, we need to understand their relationship to the market, product, and the fact that they relate to our audience. So, in some cases, despite the competent use of the self-reference effect, we may fail because of the ideological values/beliefs of users (**Conservatism (belief revision) (19)**). +- **Negativity bias (17)**. It should be understood that working in troubled markets implies a constant presence in the risk zone. We will always be expected to behave badly because of market stereotypes (**Group attribution error (43)**, **Selective perception (28)**). Moreover, the audience will react very sharply to our every mistake. +- We will undoubtedly make mistakes. However, it should be understood that most of them will be forgotten much faster than we might think (**Fading affect bias (100)**). + +**See also:** Q4, Q12, Q26, Q31, Q59, Q55 + +## 28. What mistakes do we make when evaluating our marketing strategies? + +**Related biases:** 18. Anchoring effect, 20. Contrast effect, 26. Congruence bias, 29. Observer-expectancy effect, 35. Insensitivity to sample size, 59. Survival bias, 67. Planning fallacy, 69. Overconfidence effect, 70. Social desirability bias, 74. Dunning-Kruger effect, 76. Illusion of control + +**Answers:** + +- **Dunning-Kruger effect (74)**. Confident statements of our incompetent team members mask their professional qualification (**Overconfidence effect (69)**). +- **Congruence bias (26)**. A common mistake in evaluating the effectiveness of any campaign is the congruence bias. An error occurs when one or more team members assess the situation as a whole, taking into account only the data they have directly impacted. As a result, third-party events that could have the same, and sometimes more impact on the results are ignored. +- **Observer-expectancy effect (29)**. Colleagues responsible for analyzing the results unconsciously manipulated or misinterpreted the data. +- **Survival bias (59)**. We were wrong in our conclusions because we analyzed the results obtained only in one of several categories. In fact, the data we did not receive has distorted our understanding of the whole situation. +- **Anchoring effect (18)**. From the very beginning, we were "tied" to some numbers. As a result, we created incorrect expectations, KPIs, etc. +- **Contrast effect (20)**. We unconsciously changed our data analysis methodology because of the high contrast of the latest results in relation to the previous ones. +- **Insensitivity to sample size (35)**. At one of the previous stages of the analysis, we did not correctly determine the correct sample size (the minimum number of participants in our experiment). As a result, by extrapolating the data from the sample to the general group of users, we got an incorrect picture of reality. +- **Planning fallacy (67)**. We did not correctly calculate the time required to obtain the desired result. There are two possible options here: 1. The promotion campaign itself was shorter than the time necessary; 2. We did not wait for the right time to evaluate its results. +- **Social desirability bias (70)**. We relied on the respondents' responses, which were given following the effect of social desirability. As a result, they did not reflect the real picture that interested us. +- **Illusion of control (76)**. We may have made a number of small but fundamental mistakes at various stages of developing our data analysis framework. Later, we greatly overestimated our ability to "clean up" already distorted data. + +**See also:** Q30, Q4, Q16, Q26 + +## 29. How to provide the best purchasing experience for users? + +**Related biases:** 5. Context effect, 10. Omission bias, 16. Self-reference effect, 18. Anchoring effect, 21. Distinction bias, 22. Framing effect, 27. Post-purchase rationalization, 30. Ostrich effect, 31. Subjective validation, 46. Functional fixedness, 47. Just-world fallacy, 51. Placebo, 58. Normality bias, 70. Social desirability bias, 73. Hard-easy effect, 84. IKEA effect, 101. Peak-end rule, 104. Primacy effect + +**Answers:** + +- **Hard-easy effect (73)**. We must make sure that all interactions between the user and the product are simplified as much as possible throughout the entire purchasing process. We should remove unnecessary text, optimize button names, and generally reduce the semantic load along the whole user journey. +- **Functional fixedness (46)**. The most sensitive part of any working system is the user steps in the purchase workflow. We must avoid severe changes in this part of the product. +- **Normality bias (58)**. When it comes to any purchase, users don't like the unexpected behavior of the system. It is necessary to build a purchase workflow in advance that will not change for as long as technologically possible (Best example: Amazon one-click purchases). +- Another point associated with this bias is informing users about upcoming changes. Most people don't expect any change in how a product functions today and often underestimate inaction (**Omission bias (10)**). +- **Framing effect (22)**. In our communication with the user, we should, wherever possible, emphasize that we share common humanistic values (**Social desirability bias (70)**). If our product involves making any decisions (arbitration, moderation, public presentation of our position on any issue), then we must emphasize the aspect of universal justice (**Just-world fallacy (47)**). +- **Context effect (5)**. All parts of our product must be coherent. Not a single page and not a single element of communication (content, text, letter) should fall out of the context. +- **Self-reference effect (16)**. We should, wherever possible, create content where the user "sees himself" to remove any doubts from the category "What if this does not suit me?" +- **Distinction bias (21)**. In order for the user not to feel discomfort, we should provide an opportunity to compare goods/services. +- **Ostrich effect (30)**. If we know which elements of the product can cause emotional discomfort to the user, we should determine which ones can be removed and which ones can be made less noticeable. So, after the actual purchase, we can focus the user's attention on the benefits of his choice and not on the fact that he spent money. +- **IKEA effect (84)**. If our project involves selling personal belongings (e.g., auctions, classifieds, etc.), then the main risk may be excessively high prices set by sellers-owners. To ensure that prices do not cause significant discomfort to potential buyers, we can create a mechanism that will suggest the price based on the item's market price. Such a mechanism, made with the **Anchoring effect (18)**, will help reduce price dispersion for a product category. +- **Placebo (51)**. Depending on our product's specifics, we can provide the user with some kind of button/link where he can see the transaction's status (something like "Transaction completed successfully!"). +- **Primacy effect (104)**. We should ensure that we have a comfortable starting point of the purchasing workflow in the product. +- **Peak-end rule (101)**. The purchase mechanism should be transparent and understandable for the users, as well as the rest of the pages that the users see/interacts with during the purchase workflow. The challenge is to avoid emotional ups and downs in the workflow. The more transparent and understandable everything is for the users, the more stable they will feel. +- **Post-purchase rationalization (27)**. We must create mechanisms to ensure a quality user experience after the actual purchase. An example of such mechanisms: a thank-you letter with an invoice + additional product information to highlight the user's successful choice. At some point after the purchase, we can send the user additional positive information about his purchase to finally extinguish his doubts about the choice (**Subjective validation (31)**). + +**See also:** Q9, Q24, Q32, Q46, Q62 + +## 30. What common mistakes do we make when dealing with product analytics? + +**Related biases:** 10. Omission bias, 11. Base rate fallacy, 25. Confirmation bias, 26. Congruence bias, 29. Observer-expectancy effect, 30. Ostrich effect, 33. Bias blind spot, 34. Clustering Illusion, 35. Insensitivity to sample size, 36. Neglect of probability, 38. Illusion of validity, 40. Gambler's fallacy, 41. Hot hand fallacy, 42. Illusory correlation, 44. Fundamental attribution error, 45. Stereotype, 48. Authority bias, 49. Automation bias, 55. Positivity effect, 59. Survival bias, 63. Curse of knowledge, 66. Hindsight bias, 67. Planning fallacy, 68. Pro-innovation bias, 69. Overconfidence effect, 70. Social desirability bias, 72. Consensus bias, 74. Dunning-Kruger effect, 76. Illusion of control, 94. Information bias, 96. Conjunction fallacy + +**Answers:** + +- **Curse of knowledge (63)**, **Consensus bias (72)**. We do not take into account the different professional levels (qualifications) of our colleagues in the team. As a result, we do not get the professional opinion we want, and accidentally impose our opinion on colleagues. This is a very common problem that is massively ignored by teams. To solve it, from the very beginning we should fix the basic criteria and values we operate with. Data analysis should be started only after these criteria have been discussed and accepted by all team members. +- **Dunning-Kruger effect (74)**. We used inaccurate data that incompetent project participants prepared. This problem becomes even more relevant if several different teams prepared the data that we are analyzing. +- Because people under the Dunning-Kruger effect cannot understand their incompetence, they often speak as confidently and convincingly as their competent colleagues (**Overconfidence effect (69)**). From time to time we could conduct additional data reviews, and show them to random team members to double-check. +- **Observer-expectancy effect (29)**. Our huge interest in a particular result leads to the fact that we unconsciously manipulate the data/course of the experiment. +- **Clustering Illusion (34)**, **Illusory correlation (42)**. We find correlations in random data, interpreting them as causal. We begin to consider random events less random depending on how well the "data tells the story." (**Illusion of validity (38)**, **Gambler's fallacy (40)**). +- **Planning fallacy (67)**. We have not correctly estimated the amount of time required for data collection. Perhaps we started evaluating the data before the actual completion of the marketing campaign. +- **Insensitivity to sample size (35)**. Our sample size was not large enough to extrapolate the conclusions to the entire group. +- **Hot hand fallacy (41)**. In decision-making, we are guided by our success, which was largely the result of chance. We believe that we can repeat/surpass this result. +- **Fundamental attribution error (44)**. We do not correctly assess the causes of the events. We attribute successful events to our merits while blaming the unsuccessful ones on the “outside world” and market conditions. +- **Authority bias (48)**. In our decisions, we overestimate the importance of the opinion of an authority figure. +- **Automation bias (49)**. We rely too heavily on data received from the system without checking its reliability (calculation mechanisms, etc.). +- **Neglect of probability (36)**. We ignored the unlikely events, assuming they would not happen and would not affect the data. Because of this mistake, many colleagues must cross-check any analytical data. +- **Pro-innovation bias (68)**. Perhaps we have come up with a data analysis method that is unique for our product/company. At first, it seemed that the method was very effective, but later we stopped noticing distortions in the data resulting from its use. +- **Survival bias (59)**. We were wrong in our conclusions because we analyzed the results from only one of several categories. In fact, the data we did not receive from other categories distorted our understanding of the situation as a whole. +- **Illusion of control (76)**. We overestimated our ability to impact events. As a result, the variables we use in the analysis formulas are beyond our control (but it seems otherwise). +- **Hindsight bias (66)**. We consider the events that have already taken place to be more predictable than they are. Based on this, we make the wrong decisions to assess the competence of our team. For example, we can reprimand one of our colleagues because s/he did not notice something "obvious," whereas it was not obvious at that moment. +- **Conjunction fallacy (96)**. When analyzing the data, we "tied" several events together as "most likely" without noticing that the overall likelihood decreases with each new event's addition. +- **Omission bias (10)**. We postpone the obvious decisions that we know we have to make, and underestimate the risks of our inaction. We look for "additional information" when everything is already clear (**Information bias (94)**). +- **Base rate fallacy (11)**. We take reports emotionally because of their wording. +- **Social desirability bias (70)**. If the collected data resulted from a survey, then we have to ensure that the respondents' answers were real. +- **Confirmation bias (25)**. We looked for confirmation of some hypotheses, unconsciously ignoring all the data that proves them wrong. +- **Congruence bias (26)**. We took into account only the data that was the result of our direct actions. We did not consider the events that occurred without our participation, but they had an impact on the result. +- **Ostrich effect (30)**. We unconsciously avoid data that may not prove our hypotheses. +- **Stereotype (45)**. We ignore the existing stereotypes and analyze the data too “politically correct.” As a result, we create a situation in which team members cannot express what they think. +- **Bias blind spot (33)**. We believe that everything written above does not concern us directly, since "We are confident in full control over our actions, we understand everything, and biases cannot concern us." +- In conclusion, I will add that a person who analyzes data and makes decisions should not allow negative emotions to affect them (**Positivity effect (55)**). This is a very important skill for any manager. + +**See also:** Q7, Q16, Q28, Q45, Q61 + +## 31. How to protect yourself from fake news (or other information warfare) + +**Related biases:** 1. Availability heuristics, 3. Illusory truth effect, 8. Frequency illusion, 10. Omission bias, 13. Humor effect, 16. Self-reference effect, 25. Confirmation bias, 32. Continued influence effect, 42. Illusory correlation, 50. Bandwagon effect, 63. Curse of knowledge, 70. Social desirability bias, 72. Consensus bias, 89. Backfire effect, 100. Fading affect bias + +**Answers:** + +- **Omission bias (10)**. One of the reasons information wars are so effective is that targets of attacks underestimate inaction. Often, when actions become vital, it is too late. +- **Curse of knowledge (63)**. First of all, we need to understand that our vision of the problem is completely different from our audience's vision. Moreover, even within our audience, there will be many different opinions on the issue under discussion. Our communication should be based on a situational assessment of our audience, not ours. +- **Confirmation bias (25)**. It should be understood that if a well-designed information campaign is launched against us, then we will probably lose a certain percentage of users in any case. These will include hesitant users who had some hypotheses that our competitors just caught on to. +- **Availability heuristics (1)**. The most effective form of disinformation is "semi-truth" - when partially truthful statements are mixed with fiction. Suppose the opponent has focused on some weak component in our product. In the near future, we should avoid problems with this component so as not to reinforce the opponent's arguments. Users will be especially focused on that component, so the slightest flaw will be exaggerated (**Frequency illusion (8)**). +- **Illusory truth effect (3)**. If we reliably know that the material that criticizes us is not an isolated case but the beginning of an information campaign, we should inform our audience about the expected negative materials. This step can significantly reduce the further impact of such information on the audience. Such preventive measures are often used by politicians. +- **Consensus bias (72)**. Sometimes, it may seem that an article or another material that criticizes us is "obviously stupid" and that this will not affect our audience in any way because "they know that it is not true." To correctly asses such assumptions we should check those with our team members. +- **Continued influence effect (32)**. Suppose we have publicly proven the groundlessness of the arguments of our opponents. Depending on the duration of this whole unpleasant situation, we should let some time pass before the influence of disinformation completely wears off. +- **Social desirability bias (70)**. We should not conduct a survey to know whether our audience believes in the "absurdity" that our opponents have written. The results of such a survey will be highly questionable, regardless of the form of its conduct. The real moods and opinions of our audience will not be indicated in it. +- **Backfire effect (89)**. We should never criticize our audience for believing in disinformation. +- **Illusory correlation (42)**. If the opponent criticizes us by showing correlations between events that have no connection, then it may be effective for us to show dozens of ridiculous correlations ourselves. This way, we will "dilute" the material and significantly weaken its impact on the audience. +- **Humor effect (13)**. Using balanced humor in communication as a defense against information campaigns is another effective method. To understand whether we should or shouldn’t do this, we have to focus only on our audience, and not on our desires. +- **Bandwagon effect (50)**. In our communication, we can appeal to the "absolute majority" of our users, who realize the insignificance and absurdity of our opponents' material. This is another technique widely used in politics. +- **Self-reference effect (16)**. By understanding the self-reference effect mechanism, we can reformulate the problem by publicly stating that our opponents are not attacking us, but our audience/partners/clients. Of course, in the sequel, we must clearly state that "we will not allow this and will protect our users from such attacks." By shifting the arrows from ourselves to the audience, we make the problem of the information campaign common for us and the users. This allows us to guarantee our audience immunity to the communication of our opponents and, along the way, to discredit them. This technique is also very widely used in politics. +- **Fading affect bias (100)**. Regardless of received damage, time will heal everything. We just need to monitor the situation and make sure that we’re not making the same mistakes. + +**See also:** Q1, Q4, Q27, Q33, Q59 + +## 32. How can we maximize the comfort of the product? + +**Related biases:** 4. Mere-exposure effect, 5. Context effect, 6. Cue-dependent forgetting, 7. Mood-congruent memory bias, 8. Frequency illusion, 16. Self-reference effect, 17. Negativity bias, 19. Conservatism (belief revision), 20. Contrast effect, 22. Framing effect, 25. Confirmation bias, 28. Selective perception, 30. Ostrich effect, 34. Clustering Illusion, 47. Just-world fallacy, 49. Automation bias, 50. Bandwagon effect, 61. The Magical Number 7±2, 62. Illusion of transparency, 63. Curse of knowledge, 64. Spotlight effect, 70. Social desirability bias, 73. Hard-easy effect, 76. Illusion of control, 84. IKEA effect, 86. Zero-risk bias, 91. Reactance, 93. Ambiguity effect, 99. Prejudice, 101. Peak-end rule, 102. Serial recall, 104. Primacy effect + +**Answers:** + +- **Curse of knowledge (63)**. We need to define comfort criteria that perfectly reflect our audience. If we have already created a "Persona" for our project, we can add these criteria there. Criteria must match the beliefs of our audience (**Conservatism (belief revision) (19)**). +- **Primacy effect (104)**. We should pay special attention to the starting elements of any process (workflows). For example, the process of registration (sign-up workflow), purchasing a product (purchase workflow), filling out a user profile, etc. +- **Automation bias (49)**. We can add a system of smart prompts/reminders/tips based on user behavior patterns. Even a minimal investment in this direction can improve user comfort. In turn, the frequency of occurrence of such messages should be adjusted, taking into account **Clustering Illusion (34)**. +- **Spotlight effect (64)**. We must clearly explain to the user which of his actions are public and which ones are visible only to him. If the product implies privacy, we must show our commitment to a full privacy policy on any page where the user may have privacy/data security-related concerns. +- **Reactance (91)**. We must avoid any conflict with the user and try to resolve issues without referring to the terms of service or any other conditions that the user could simply miss. +- **The Magical Number 7±2 (61)**. We should take care of a logical categorization of UI objects to avoid difficulties when the user wants to remember/find something. +- **Mere-exposure effect (4)**. In our communication, we can use objects familiar to users. The objects, in their turn, should be associated with trust and reliability. +- **Prejudice (99)**. We must take into account the prejudices of our audience and use this knowledge whenever possible. For example, we can avoid using numbers with negative associations ("13", "666," etc.). Also, we could use some prejudices to our advantage. For example, when sending the temporary access code to the application (One-time password), we can use nice numbers symbolizing good luck (777555), etc. +- **Hard-easy effect (73)**. We need to simplify all the actions that the user can take. If we notice a little complexity in any process of the product (workflow), users will find it even more difficult. +- **Ostrich effect (30)**. If we know which elements of the product can cause emotional discomfort to the user, we should determine which ones can be removed and which ones can be made less noticeable. +- **Context effect (5)**. We must keep track of each product page's context and make sure that the integrity of the context is not compromised when planning the smallest changes. +- **Cue-dependent forgetting (6)**. We may periodically remind the user of the good experience they have with our product. The simplest example is the “Most liked photo” feature on Facebook, which periodically shows the most popular photos of our profile, and so on. Timing for showing such reminders can be synchronized with good events for the user in the product (**Mood-congruent memory bias (7)**). +- **Frequency illusion (8)**. Our communication should be structured in such a way that doesn’t annoy the user. It is not only about the frequency of notifications but also about the monotony of the semantic load. +- **Self-reference effect (16)**. In those parts of the product where the user may have the slightest doubt about his actions, we can add contextual buttons/shortcuts. This will allow the user to understand that whatever he is doing is clearly in his interests. +- **Negativity bias (17)**. We must avoid negative events in our product. This applies to both communication and product functionality. No matter how good we are, negative situations will affect our users' experience for a while. +- **Serial recall (102)**. When designing workflows for users, we should consider the “serial recall” effect. +- **Ambiguity effect (93)**. We should avoid ambiguous wording and add tooltips to avoid confusion in any part of the product. +- **Zero-risk bias (86)**. We can mitigate some user concerns if we tell them something obvious to us but not obvious to them. So, adding indicators of "99.9% server availability," "no connection problems," etc., can increase the user experience and cost us almost nothing in terms of implementation. +- **IKEA effect (84)**. The more energy users invested in a particular part of the product, the more valuable it is for them. Changes in such components should be communicated carefully. +- **Illusion of control (76)**. If we have established a certain "status quo" with the users, where they think they can significantly influence the project's events, we shouldn't prove them the opposite. +- **Contrast effect (20)**. If our goal is to create a sense of comfort and stability, we should not use elements that contrast strongly with our previous communication and design elements. The more homogeneous and coherent the product is, the more comfortable it is perceived. +- **Social desirability bias (70)**. If we use user surveys for collecting the data we should design them in accordance with social desirability bias. The survey questions and answers should be structured in a way so people are comfortable choosing between them. +- **Bandwagon effect (50)**. If the user has to make a decision that he's unsure about, we can provide him with statistics, pushing him to join the majority. +- **Peak-end rule (101)**. We should take care of the comfortable completion of a series of actions in the product (workflows). All the final actions of the workflows (a series of steps) should be coherent not to annoy users. +- In conclusion, I will add that in the matter of comfort, one of the most important roles plays the delivery of information (**Framing effect (22)**). So, we need to make sure that our communication is comfortable enough (**Illusion of transparency (62)**), meets the audience’s criteria for “fairness” (**Just-world fallacy (47)**), and emphasizes their positive expectations (**Confirmation bias (25)**, **Selective perception (28)**). + +**See also:** Q10, Q29, Q46, Q54, Q62, Q34 + +## 33. What to do if a user reports an event the system doesn't show? + +**Related biases:** 11. Base rate fallacy, 17. Negativity bias, 19. Conservatism (belief revision), 33. Bias blind spot, 37. Anecdotal evidence, 51. Placebo, 65. Illusion of asymmetric insight, 74. Dunning-Kruger effect, 82. Generation effect, 89. Backfire effect + +**Answers:** + +- **Illusion of asymmetric insight (65)**. First of all, we need to understand the user's motivations. We shouldn’t immediately label him as a liar, even if we are sure that his story is implausible. Sometimes it is enough for a user to experience emotions to believe that he is right (and yes, it's not rational) (**Anecdotal evidence (37)**, **Generation effect (82)**). +- **Backfire effect (89)**. By immediately stating that the user’s claims are inconsistent, we don’t let the user save his face. We cannot be sure of his motives. Perhaps he simply forgot or misinterpreted something. Thus, all our arguments should be given in stages, with the control of the user's reaction. +- **Dunning-Kruger effect (74)**. In some cases, the user can tell a non-existent story simply to hide his total incompetence (or the fact of his mistake). Starting with bland “the system itself deleted the file, I never did it,” continuing with many others. +- **Placebo (51)**. In cases where the user realizes his mistake, we shouldn’t let him lose his face by offering a placebo in the form of "we will register this incident and conduct appropriate checks." If such problems occur often, we can provide users with some form/button/email address for feedback (**Conservatism (belief revision) (19)**). +- **Base rate fallacy (11)**. Perhaps in our communication, we used stressful wording, which led to the user's anxiety and contacting us. +- **Negativity bias (17)**. The story of our user may be a continuation of some negative episode that happened to him earlier. +- **Bias blind spot (33)**. We shouldn't tell the user that the problem is in their thought processes. + +**See also:** Q47, Q51, Q10, Q31, Q38, Q44 + +## 34. How can we make the product look more modern without spending much? + +**Related biases:** 1. Availability heuristics, 6. Cue-dependent forgetting, 7. Mood-congruent memory bias, 8. Frequency illusion, 12. Bizarreness effect, 13. Humor effect, 14. Picture superiority effect, 15. Von Restorff effect, 20. Contrast effect, 22. Framing effect, 34. Clustering Illusion, 39. Recency illusion, 46. Functional fixedness, 49. Automation bias, 58. Normality bias, 61. The Magical Number 7±2 + +**Answers:** + +- **Von Restorff effect (15)**, **Recency illusion (39)**. We can identify the least used product components, make cosmetic changes and re-announce them with the appropriate indication on the interface. +- **Automation bias (49)**. We can add a system of smart prompts/reminders/tips based on user behavior patterns. Or, if we can’t do it, we may send the user’s product usage statistics a few times a week (**Clustering Illusion (34)**). +- **Framing effect (22)**, **Contrast effect (20)**. We can fundamentally change the way we communicate with users. If earlier we used simple written communication form, we can move on to using pictures/animations. (**Picture superiority effect (14)**). If the situation and our audience allow, we can use humor (**Humor effect (13)**) and small experimental innovations (**Bizarreness effect (12)**). We can also play around with used terminology in the product. +- **Cue-dependent forgetting (6)**. We may periodically remind the user of the good experience they have with our product. The simplest example: the "Most liked photo" function on Facebook, which periodically shows our profile's most popular photos, and so on. We can synchronize timing for showing reminders like this with good events for the user in the product (**Mood-congruent memory bias (7)**). The idea is to show pseudo-AI, to associate with similar features of larger products. +- **Frequency illusion (8)**, **Availability heuristics (1)**. We can split the upcoming major updates into several small parts and release them at such a frequency that users get the feeling that "everything in our product is constantly being updated." +- **The Magical Number 7±2 (61)**. We can restructure the product into new categories (and new terminology). Suh product optimization will be highly efficient if there are many features scattered across different parts of the product. If we decided to do it, we must avoid significant changes in the most popular product workflows (**Functional fixedness (46)**, **Normality bias (58)**). + +**See also:** Q57, Q32, Q42, Q46, Q54, Q5 + +## 35. How to work with gambling in a product? + +**Related biases:** 2. Attentional bias, 6. Cue-dependent forgetting, 7. Mood-congruent memory bias, 16. Self-reference effect, 17. Negativity bias, 18. Anchoring effect, 20. Contrast effect, 21. Distinction bias, 22. Framing effect, 24. Weber-Fechner Law, 25. Confirmation bias, 30. Ostrich effect, 40. Gambler's fallacy, 41. Hot hand fallacy, 47. Just-world fallacy, 59. Survival bias, 61. The Magical Number 7±2, 63. Curse of knowledge, 64. Spotlight effect, 67. Planning fallacy, 69. Overconfidence effect, 73. Hard-easy effect, 74. Dunning-Kruger effect, 76. Illusion of control, 79. Hyperbolic discounting, 81. Escalation of commitment, 85. Unit bias, 86. Zero-risk bias, 92. Decoy effect, 93. Ambiguity effect, 99. Prejudice, 101. Peak-end rule + +**Answers:** + +- **Curse of knowledge (63)**. First of all, we need to compose the "Persona" of our product. In addition to the gambling tendencies of potential users, we need to understand their motives. Does our user want to "be the first," "win," or just "make money"? Does he want money to buy something specific that we know, or is he motivated by an abstract desire to "get rich"? All the details on the Person that we write down can play a significant role at different stages of working with the user. We must validate all our assumptions through surveys of project participants, A / B tests, etc. All our findings must be documented. +- **Prejudice (99)**. We need to identify all types of prejudices that consciously or unconsciously manifest in our audience. Conscious biases can be verified through surveys. Unconscious - by creating A / B tests and analyzing behavioral patterns. This knowledge will help us reduce users’ discomfort by adjusting our content to their prejudices. Also, we may sharpen their sense of gambling by using “positive,” “lucky” numbers in random places (like 777, 999, etc.). +- **Dunning-Kruger effect (74)**. We need to understand which groups of our users are subject to an overblown sense of self-importance and errors in assessing their competence. In most cases, such users have an overly confident manner of speech and a flattering opinion about themselves (**Overconfidence effect (69)**). We can play on their flattering self-image by adapting our communication and nudging them towards the actions we need. +- **Decoy effect (92)**. If, after analyzing user behavior, we saw a pattern according to which they spend too much time on some page related to choice, we can nudge them by adding a dummy offer to this page. +- **Anchoring effect (18)**. When working with numbers, in almost any part of the product, we can use different anchoring effect variations. +- **The Magical Number 7±2 (61)**. If necessary, we can deliberately violate Miller's law in order to complicate the analysis of the situation for the user. For example, we can keep the factors, users can control, in the range of 9-12. Being on the verge of his memorization abilities, the user will experience discomfort, which will not be too great to stop participating. +- **Attentional bias (2)**. We can create a new "value" in the product, link it to the user's profile and make it public. For example, this value can be some kind of virtual "prestige points" received for participating in some events. Even the most indifferent user will at some point become interested in comparing his points with others. This, in turn, will give us one more leverage to nudge users when we need it. +- **Zero-risk bias (86)**. If we need the user to make some heavy decisions, we can wrap it up by emphasizing zero risks. If our product is built on excitement, such an offer will strongly contrast with the product's context (**Contrast effect (20)**), and with a high probability, the decision will be made. +- **Ambiguity effect (93)**. Another powerful nudging technique that works effectively in an atmosphere of excitement is creating “fork” offers. This is when we propose user 2-3 options for action. The option we want the user to choose should have an unambiguously favorable outcome in comparison with others. +- **Illusion of control (76)**. We can run surveys where each option is equally beneficial to our business. In the description texts of the survey, we can strengthen the user's faith in our "transparency" and "fairness" (**Just-world fallacy (47)**). Such actions help with the retention of users on the platform. +- **Spotlight effect (64)**. Depending on our product's specifics, we can inflate our users' successes by exposing them to the public (and hide their failures). +- **Cue-dependent forgetting (6)**. We can periodically remind the user of the good experience he got on our project. We can increase the power of positive emotions by reminding about them at the moments when the user is already in a good mood (**Mood-congruent memory bias (7)**). We can also remind the user of good events to keep him on the project after some of his failures. +- **Negativity bias (17)**. When designing our communication, we should consider users' reality the moment it reaches them. If we approach the user with some offer implying a waste of money/time, this may cause him to leave the product. +- **Hyperbolic discounting (79)**. In a product that implies excitement, users always look at an “instant” offer with a guaranteed outcome with special pleasure. Understanding this allows us to prepare offerings where we can benefit from users’ impatience. +- **Hard-easy effect (73)**. In products touching work with excitement, it is not necessary to simplify all components' usability. So, sometimes we may need to complicate a process by creating additional steps in some workflows. +- **Distinction bias (21)**. In the logic of online betting, we can show the "wins" and "losses" of the users separately so that they cannot compare the difference and be disappointed with the contrast. Also, we can show the amount of the deposit and withdrawal separately. +- **Framing effect (22)**, **Self-reference effect (16)**. The more efficiently the information on our audience (Persona) is collected, the better and more effective our communication will be. +- **Weber-Fechner Law (24)**. Understanding this law is necessary to competently balance the tone of our communication and/or the size of the bonuses provided to our users. +- **Ostrich effect (30)**. If we know which elements of the product can cause emotional discomfort to the user, we should determine which ones can be removed and which ones can be “weakened” so that the user can see them only when he really needs to. +- **Survival bias (59)**, **Confirmation bias (25)**. We can provide the user only with the kind of data that indicate his success due to his gambling behavior. By the way, such techniques are prohibited by companies that provide licenses for online sweepstakes and casinos. +- **Peak-end rule (101)**. We can come up with some nice bonuses for the user at the end of each session of using our product. You may have seen similar "bonuses" that different websites give to us for visiting the project. +- When working with a sense of excitement, it will also be very useful for us to know the following biases: **Gambler's fallacy (40)**, **Hot hand fallacy (41)**, **Unit bias (85)**, **Escalation of commitment (81)**, **Planning fallacy (67)**. + +**See also:** Q20, Q24, Q25, Q26, Q38, Q39 + +## 36. How can we establish a sense of trust within a social project? + +**Related biases:** 3. Illusory truth effect, 4. Mere-exposure effect, 5. Context effect, 6. Cue-dependent forgetting, 22. Framing effect, 25. Confirmation bias, 28. Selective perception, 30. Ostrich effect, 43. Group attribution error, 46. Functional fixedness, 47. Just-world fallacy, 49. Automation bias, 50. Bandwagon effect, 52. Out-group homogeneity, 53. In-group favoritism, 58. Normality bias, 62. Illusion of transparency, 70. Social desirability bias, 72. Consensus bias, 98. Implicit stereotypes + +**Answers:** + +- **Framing effect (22)**, **Context effect (5)**. The communication we use must have a trusting tone. Consistency in the form and type of information presented is very important. The user should not feel out of context on any page of the product. We need to identify the main criteria of trust for our users and their main concerns about the product. If our product involves working with users' personal data, we must focus on its safety and emphasize our adherence to the privacy policy. +- **Consensus bias (72)**. We may foster a sense of false consensus on the platform by periodically pointing out that the user is doing the right thing on the product. Example: “Most of our users have this option turned on (**Bandwagon effect (50)**). +- **Group attribution error (43)**. If our product allows, we can provide an opportunity for users to join groups/communities. At the same time, we can designate the types and descriptions of groups without the possibility of editing. This will allow us to specify categories and descriptions that will inspire confidence and comfort for the entire group as a whole. +- **Illusory truth effect (3)**, **Confirmation bias (25)**. Suppose we were able to determine which value users associate with trust more. In this case, we can compose several short sentences/phrases that emphasize this property and use them systematically throughout our communication. +- **Mere-exposure effect (4)**. Another effective way to increase trust in the project is to use objects that are familiar to our users. For example, we can create several packs of stickers, choosing the themes that users are most familiar with. You have certainly seen this in instant messengers. +- **Cue-dependent forgetting (6)**. In the context of building trust, it can be helpful to create reminders of the good experiences the user has with the product. Example: Feature “The most liked photo of the month” on Facebook. +- **Illusion of transparency (62)**. If our project involves our users' communication with each other, we should determine in what issues they may have discrepancies and figure out how to minimize them. This is especially true in the context of texting. The best example of solving such a problem is the "reactions" that Facebook allowed to add to messages. The more confident you are about the emotions experienced by your opponent in the chat, the more comfortable and calm you feel. +- **Selective perception (28)**. We may analyze the data to identify the least used components of a product and identify its reasons. Perhaps the component, either by its form or by the communication used in it, falls out of the context of the product. Another reason may be the psychological discomfort that the user experiences when working with the component (**Ostrich effect (30)**). +- **Functional fixedness (46)**, **Normality bias (58)**. We should avoid making changes to the most popular workflows in the product. We should keep all "surprises" to a minimum. User interactions should always be consistent and predictable. +- **Automation bias (49)**. If the user feels hesitant when performing any action, we can help him by nudging him with the automatic suggestions of the system. +- **Social desirability bias (70)**. Periodic public surveys are another powerful means of reinforcing user confidence in a product. Such surveys allow users to see that "the majority shares their values." A well-designed survey with socially desirable answer options can significantly affect users' trust in a project. +- Other biases to be considered in the context of working with trust: **Just-world fallacy (47)**, **Out-group homogeneity (52)**, **In-group favoritism (53)**, **Implicit stereotypes (98)**. + +**See also:** Q48, Q4, Q12, Q18, Q38 + +## 37. What are the risks of major changes to the product's ideology or functionality? + +**Related biases:** 5. Context effect, 17. Negativity bias, 19. Conservatism (belief revision), 21. Distinction bias, 28. Selective perception, 46. Functional fixedness, 47. Just-world fallacy, 58. Normality bias, 63. Curse of knowledge, 67. Planning fallacy, 68. Pro-innovation bias, 69. Overconfidence effect, 72. Consensus bias, 73. Hard-easy effect, 79. Hyperbolic discounting, 80. Appeal to novelty, 88. Endowment effect + +**Answers:** + +- **Functional fixedness (46)**. Any changes to the most popular workflows will cause a sharp reaction. Therefore, we should gradually prepare users for the changes so that it does not come as a surprise (**Normality bias (58)**). +- **Hyperbolic discounting (79)**. If our competitors launch campaigns with "instant bonuses" at the right moment, we risk losing some of our users. This is one of the reasons why you sometimes should not talk about the dates of key releases. +- **Appeal to novelty (80)**. If we explain the need for updates by referring to the "novelty" factor, many may not like it, and they will leave. Even if the desire for change came directly from the users, they may still be unhappy. +- **Context effect (5)**. If our changes are fully consistent with the product's context, then it would be easy to break them up into small parts and announce them in stages. In this case, we will minimize the discomfort of changes for users. +- **Conservatism (belief revision) (19)**. If the product changes relate to its ideological concepts or used terminology, we have to make sure that the changes correlate with users’ beliefs. The simplest example: if a group of open-source software developers starts selling their software licenses it will go against their audience's values. +- **Distinction bias (21)**. Users may want to see the difference in "before" and "after" views. If such transparency is appropriate in our product's logic, we can visually show the upcoming changes in the form of a table "before" - "after". If we see risks in displaying information in this form, we can show changes in different areas, making comparison difficult. +- **Selective perception (28)**. We may publish several articles related to the upcoming changes in order to analyze the reaction of our audience. Based on the reaction, we may find out what exactly worries our users the most. We can use this information to create mechanisms to mitigate negative reactions to future changes. +- **Hard-easy effect (73)**. We need to create extremely simple instructions for using the new functionality. Anything that we can simplify in the interface should be simplified. If the product's specificity allows, we can create two visual representations of the functionality (Standard and Advanced view). This may be a temporary solution until users are familiar with the basic concepts. +- **Endowment effect (88)**. Even those parts of the product that users use the least, they consider as their "property." Unreasonable changes in these components can provoke a sharp reaction, which may seem not proportional to the component's popularity (**Negativity bias (17)**). +- **Pro-innovation bias (68)**. We all intuitively understand the risks of significant changes. Usually, if we decide on them, the future of the product is reduced to a zero-sum game, where we either get everything or nothing. In such cases, our responsibility is to check our bold assumptions with our teammates to minimize the likelihood of any error. So, we can distort our assumptions due to a misunderstanding of the "world" of our audience (**Curse of knowledge (63)**, **Consensus bias (72)**), our arrogance (**Overconfidence effect (69)**, **Planning fallacy (67)**), or our blind faith, like "Through our efforts we deserve success!" (**Just-world fallacy (47)**). + +**See also:** Q55, Q5, Q43, Q53, Q54, Q63 + +## 38. What to consider when creating moderation/arbitrage features? + +**Related biases:** 17. Negativity bias, 19. Conservatism (belief revision), 22. Framing effect, 33. Bias blind spot, 37. Anecdotal evidence, 44. Fundamental attribution error, 47. Just-world fallacy, 48. Authority bias, 49. Automation bias, 62. Illusion of transparency, 63. Curse of knowledge, 64. Spotlight effect, 69. Overconfidence effect, 70. Social desirability bias, 74. Dunning-Kruger effect, 81. Escalation of commitment, 82. Generation effect, 91. Reactance, 93. Ambiguity effect + +**Answers:** + +- **Just-world fallacy (47)**. Most people believe that the world is fair and that everyone gets what they deserve. +- **Reactance (91)**. In a situation that implies doubting someone's words (for example, resolving disputes), people are tense by default. Their emotional reactions should not be interpreted as evidence of anything. +- **Dunning-Kruger effect (74)**. Many people tend to exaggerate their level of competence. Such people are characterized by arrogance, a flattering self-image (**Overconfidence effect (69)**), as well as a confident tone of speech. We should understand that these people do not lie or pretend. They are simply not able to objectively assess their abilities. +- **Spotlight effect (64)**. Some people, while waiting for a decision on them, behave unusually and strangely. This is often caused by the fact that it seems to them that their actions are "visible to everyone." +- **Curse of knowledge (63)**. We can provide our support team with the ability to view user logs. This will help our colleagues much more than trying to figure out the logic of user actions. +- **Authority bias (48)**. We should explain to users the degree of authority that the decision-maker has (e.g., Moderator, administrator, etc.). The more clearly we do this, the fewer users will be inclined to discuss their decisions. +- **Negativity bias (17)**. Even if, in most cases, the decisions made are in favor of a user, once the opposite, he could be outraged. There is no point to appeal to the fact that “in 95% of cases the decisions were made in your favor”, etc. Such user reaction is based on emotion and will eventually subside. +- **Conservatism (belief revision) (19)**, **Framing effect (22)**. Ideally, the "wrapper" of any of our decision should always be consistent with our audience's beliefs and values. To use the element of conservatism in communication, we need to write out the key values that are common to our audience from the very beginning (preferably at the stage of creating the "Persona"). +- **Anecdotal evidence (37)**, **Generation effect (82)**. If a user uses "facts" in his arguments, which, according to the system's data, never existed, we should not immediately consider him a liar +- **Fundamental attribution error (44)**. The decisions made should always include both external and internal factors. If we explain a decision made to the detriment of the user’s interests, by his personal shortcomings, it will cause a sharply negative reaction. If we explain our decision, made in his favor, by external circumstances, we will only reduce his level of satisfaction. +- **Automation bias (49)**. The user could have made a mistake because of the advice of our system. So, we might not have noticed how the “tips” and “recommendations” we designed are powerfully pushing users to some kind of erroneous action. +- **Ambiguity effect (93)**. The decision to be made must be easy for understanding. The wording we use must be free from confusion (**Illusion of transparency (62)**). +- **Social desirability bias (70)**. We can use the effect of social desirability to nudge the user to accept the results of our decisions. Politicians widely use this technique. +- **Bias blind spot (33)**. We shouldn't explain to the user that the problem is in his thought processes. +- In the context of working with decision-making mechanisms, it will also be helpful to understand **Escalation of commitment (81)**. + +**See also:** Q47, Q10, Q11, Q13, Q39 + +## 39. How can we make our product users more responsible? + +**Related biases:** 11. Base rate fallacy, 21. Distinction bias, 36. Neglect of probability, 46. Functional fixedness, 49. Automation bias, 50. Bandwagon effect, 51. Placebo, 70. Social desirability bias, 74. Dunning-Kruger effect, 76. Illusion of control, 93. Ambiguity effect + +**Answers:** + +- **Automation bias (49)**. We should avoid overusing instructions and security mechanisms. Instead, we can select key risks and periodically remind the user of them while working with the product. +- **Distinction bias (21)**. Instead of abstract messages about risks, we can show the user the potential consequences of his inattention to work. This can be an illustrative example where the user will see and evaluate his “current status” and “what might happen” next to each other. +- **Neglect of probability (36)**, **Ambiguity effect (93)**, **Base rate fallacy (11)**. We can change the wording in our communication with the user to push him to some actions. +- **Functional fixedness (46)**. If users systematically ignore some action that we expect from them in a specific workflow, we can change the process itself. Even small changes in standard workflows in which users have ingrained habits will significantly grab their attention. +- **Bandwagon effect (50)**. In our communication with the user, we can appeal to the majority of our users, demonstrating through their example the benefits of following our advice. +- **Placebo (51)**, **Illusion of control (76)**. We can place an extra button which, according to our instructions, will need to be pressed at the end of a series of actions (workflow). +- **Social desirability bias (70)**. In our communication with the user, we can appeal to the social desirability of the requested action. If we emphasize that this action will be visible to others at the same time, this can significantly increase the user's responsibility. +- **Dunning-Kruger effect (74)**. When it comes to a B2B product, users' irresponsible approach to using the product can result from a combination of arrogance and incompetence. In such cases, we should not appeal to the professionalism of our advice, but to something that will not hurt their egos. + +**See also:** Q51, Q58, Q11, Q13, Q24 + +## 40. How can we show content to users more effectively? + +**Related biases:** 4. Mere-exposure effect, 5. Context effect, 7. Mood-congruent memory bias, 14. Picture superiority effect, 15. Von Restorff effect, 16. Self-reference effect, 20. Contrast effect, 45. Stereotype, 52. Out-group homogeneity, 53. In-group favoritism, 61. The Magical Number 7±2, 76. Illusion of control, 98. Implicit stereotypes + +**Answers:** + +- **Context effect (5)**. Content should be relevant to the context of the product. If it doesn’t match, firstly we need to introduce the new context in the product, and only after that think about the content structure. +- **Stereotype (45)**, **Implicit stereotypes (98)**, **Out-group homogeneity (52)**. We should take a close look at stereotypes that apply to the type of our content. Beyond that, we also need to figure out the stereotypes our audience tends to have. +- **In-group favoritism (53)**. Content that the user can associate with himself by any parameter will always be more interesting for him (**Self-reference effect (16)**). Interest in the topic increases if the user sees a familiar object (**Mere-exposure effect (4)**). +- **Mood-congruent memory bias (7)**. Depending on the emotions experienced by the user, he will be interested in different content. Understanding this allows you to think about how to create a mechanism for analyzing user sentiment. +- **Illusion of control (76)**. We can make it so that users feel in control of the displayed content. The simplest way to do it is to show more buttons, clickable content labels like fashion, business, etc. The idea is to provide the user with the ability to control exclusively within the limits of what is beneficial to our business. +- **Von Restorff effect (15)**. Visually separating content types is another powerful way of controlling user attention. +- **The Magical Number 7±2 (61)**, **Picture superiority effect (14)**. We need to balance the cognitive load on the user. To do this, we need to find the optimal amount of simultaneously displayed content. We should note that this "optimal amount" can be different for different content types (image-text-video). +- In the context of this question, we should also consider that we should not show the user only content that is interesting to him. Users' attention and interests are dynamic. If we want to learn to work with attention in the long term, we should weaken the content with less interesting materials (**Contrast effect (20)**). Studying the dynamics of user interests is the key to keeping them on the project. + +**See also:** Q54, Q9, Q14, Q29, Q32 + +## 41. What should we do if our colleagues' stubbornness is hurting teamwork? + +**Related biases:** 4. Mere-exposure effect, 21. Distinction bias, 45. Stereotype, 46. Functional fixedness, 48. Authority bias, 56. Not invented here, 68. Pro-innovation bias, 91. Reactance, 98. Implicit stereotypes + +**Answers:** + +- **Not invented here (56)**. Perhaps colleagues do not want to use ready-made solutions because they were created in companies, countries, nations, etc. that are unpleasant to them. In addition to the reasons stated in the description of the bias itself, we can find other reasons in **Stereotype (45)**, **Implicit stereotypes (98)**. +- Also, such problems can be observed due to the idiosyncratic preferences (taste preferences) of colleagues. Often, issues like these are too delicate to be explicitly discussed. Therefore, the manager has two options of action that can be taken (in exact order): 1. The manager can publicly announce the problems arising from the rejection of ready-made solutions. The emphasis can be on data and potential damage (or lost benefit) for the next 3-6 months (**Distinction bias (21)**). 2. If the first option did not lead our colleagues to revise their positions, that means they put their ego higher than the team's interests. Consequently, we can move on to more direct actions, namely, to openly identify the problem that we see in the colleague's position and ask him/her to reconsider it as soon as possible. This option is highly likely to lead to reactance. +- **Reactance (91)**. Colleagues think that our decisions are violating their egos or "professional freedom." Often, in such cases, adherence to principles and colleagues' sharp reaction is a defense mechanism, a manifestation of weakness and concern for their positions. +- **Pro-innovation bias (68)**. Perhaps our colleague came up with his own method of work or a solution to some issue. At first, it seemed to him that the method was very effective, but later, he stopped noticing the approach's damage (or low effectiveness). Usually, such problems are "treated" based on the data and discussion of the actual results of the "invention." +- **Mere-exposure effect (4)**. Sometimes, when we need colleagues to change working methods that they’re familiar with (e.g. the software they use), they are ready to fight "for every inch" (**Functional fixedness (46)**). Often, sticking to familiar methods is a way to hide their laziness to learn new things. Labeling the issue and public discussion with illustrative examples of gains and losses can help shift the status quo. +- **Authority bias (48)**. Sometimes, the stubbornness of our colleagues can be based on the publicly expressed opinion of the authority. Such an authority can be a representative of our top management, for example, our CEO. Most often, problems arise when our colleagues distort the message of leadership, interpreting it as an argument in defense of their position. This is why management must be very careful about what they say in every interaction with colleagues. + +**See also:** Q50, Q14, Q21, Q45, Q17 + +## 42. How can we generate new products out of thin air while keeping costs minimal? + +**Related biases:** 2. Attentional bias, 14. Picture superiority effect, 39. Recency illusion, 49. Automation bias, 57. Mental accounting, 64. Spotlight effect, 73. Hard-easy effect, 80. Appeal to novelty, 86. Zero-risk bias + +**Answers:** + +- **Mental accounting (57)**. We can combine multiple existing products into a new product category. The idea is for the user to mentally divide purchases in that category from purchases in the rest of the project. Popular examples of such categories are: "February Super Deals," "All for 9 dollars", etc. +- **Automation bias (49)**, **Recency illusion (39)**. We can create a simple mechanism that will advise the user to look at products they have not seen before. If we make the right "wrapper" for such an offer, the user will see "new" products and offers in this. +- **Appeal to novelty (80)**. We can reintroduce already existing products by changing their "wrapper" adding a “New” label to them. We can also appeal to new technologies by combining them with our standard products. For example, together with a digital image, we can sell an NFT version of a product (a digital version of an object with ownership rights recorded on the blockchain). +- **Zero-risk bias (86)**. We can sell additional services in the form of various kinds of "guarantees" that cost nothing to us but can be appealing to the eyes of users. +- **Spotlight effect (64)**, **Attentional bias (2)**. We can add new services by playing on human vanity and the desire for publicity. At the same time, these "services" may not cost anything to us but have significant value in users' eyes. The closest example: the sale of "statuses" on various forums, where in exchange for a certain amount of money, next to the user's nickname appears some element. The first versions of the Trello project added a golden crown to the premium user's name. +- **Picture superiority effect (14)**. Instead of expanding our assortment, we can add new product forms. +- **Hard-easy effect (73)**. Instead of expanding our product range, we can create new shopping methods. For example, we can provide the ability to pay for an item in parts (like Amazon). Using the example of Udemy and Coursera, they could add the ability to "collectively" purchase a certain course by agreement with its author. + +**See also:** Q57, Q34, Q20, Q32 + +## 43. What to consider when planning product releases? + +**Related biases:** 7. Mood-congruent memory bias, 33. Bias blind spot, 36. Neglect of probability, 44. Fundamental attribution error, 48. Authority bias, 58. Normality bias, 60. Subadditivity effect, 62. Illusion of transparency, 67. Planning fallacy, 69. Overconfidence effect, 72. Consensus bias, 93. Ambiguity effect, 95. Law of triviality, 99. Prejudice + +**Answers:** + +- **Subadditivity effect (60)**. Before assessing the likelihood of success or failure, you should decompose the situation. Instead of evaluating the probability of a product launch failure, we should write down and evaluate each potential risk separately. Such an analysis in time may take 30% longer but be 90% more accurate. +- **Law of triviality (95)**. We should put an agenda at the beginning of any discussion. We should sort the agenda by the importance of the issues (most important first). Besides, we should appoint a leader of the agenda (moderator) who will make sure that the discussion does not go into small details and does not eat up the whole team's time. +- **Consensus bias (72)**. Sometimes, an atmosphere of "openness and trust" is not enough to get each participant's opinion. To achieve this, we need to create a mechanism through which each planning participant can freely (maybe even anonymously) express their opinion. The biggest "risk" for us is accidentally finding out a detail that everyone missed. +- **Planning fallacy (67)**. Any discussed dates should be cross-checked by all team members. +- **Mood-congruent memory bias (7)**. We should limit the influence of our emotions and the office atmosphere on the discussed timelines and dates. +- **Normality bias (58)**, **Neglect of probability (36)**. In most cases, we do not expect any significant changes tomorrow. We usually ignore the likelihood of changes in market conditions or the "world" of our project partners. If we do not want later on to explain the reason for our failure by "unlikely" "external" events, then we should take into account such probabilities in advance (**Fundamental attribution error (44)**). +- **Ambiguity effect (93)**. There are situations when our choice in favor of a "safe," "unambiguous" solution leads to a lost benefit. For example, we did not dare to release the update on the same day as our competitors because of the likelihood of low demand. At the same time, we did not think that the situation could be exactly the opposite, and the interest of the audience could be much higher than on any other day. By noticing our tendency to make decisions with a guaranteed outcome, we should learn to abstract from our emotions and assess the situation more soberly. +- **Authority bias (48)**. Planning should only be based on system data and proven facts. We should be careful with the opinion of anyone who has more "power" and "recognition" than other colleagues. +- **Prejudice (99)**. Depending on our product's specifics and audience, we may need to take into account the factor of prejudice. This applies to calendar launch dates (e.g., Friday 13), associations with negative events (day of mourning in the country), etc. +- **Illusion of transparency (62)**. We should write down all the agreements that our team has come up with, including those that we might think are too obvious. By showing our world view in every possible detail, we reduce the likelihood that something "extremely obvious" was missed by our colleagues or by us. +- **Bias blind spot (33)**, **Overconfidence effect (69)**. If our colleague ignores all of the above, believing that "this does not apply to him," then the first thing we should do is to review all the decisions he was involved in. + +**See also:** Q63, Q5, Q8, Q22, Q37, Q61 + +## 44. What to consider when working with user feedback? + +**Related biases:** 1. Availability heuristics, 5. Context effect, 7. Mood-congruent memory bias, 15. Von Restorff effect, 16. Self-reference effect, 18. Anchoring effect, 21. Distinction bias, 28. Selective perception, 29. Observer-expectancy effect, 42. Illusory correlation, 59. Survival bias, 61. The Magical Number 7±2, 70. Social desirability bias, 73. Hard-easy effect, 91. Reactance + +**Answers:** + +- **Availability heuristics (1)**. Knowing what information has recently been circulated around our users, we can know in advance their answers to many of our questions. Understanding this bias allows us to craft better questions, avoiding ineffective and obvious ones. +- **Hard-easy effect (73)**. We need to simplify the feedback mechanism as much as possible so that users can share their opinion with just one click. Any additional load in this mechanism (be it "nudging" texts or pictures) can complicate the action in the user's eyes and deprive us of his opinion. +- **Illusory correlation (42)**. Due to our desire to back up our decisions with system data, we may accidentally spot non-existing correlations between the feedback and some of our team decisions (**Observer-expectancy effect (29)**). +- **Reactance (91)**. We absolutely shouldn’t force users to give feedback. An example of pressure: mandatory answers to third-party questions when filling out a form. An exception may be the case when the user leaves the product. For instance, before deactivating an account or uninstalling an app, we may make it mandatory to select the decision's reason. +- **Social desirability bias (70)**. We should avoid asking questions that might cause emotional discomfort to the user. If the user has to choose between options, some of which are socially unacceptable, we risk receiving data that does not contain his real opinion. +- **Context effect (5)**. In our feedback mechanisms, we need to provide context from the beginning. So, if we launch a survey, from the very beginning we must make sure that the user understands not only the questions but also how his answers will be used. If we ask questions without an established context, then the answers are likely to be more abstract, and the results are less useful. +- **Mood-congruent memory bias (7)**. We should avoid abstract questions because the answers to such questions are likely to be dictated by the user's current mood. Besides, we should ask questions at the most "neutral" time, not overshadowed by some sad events. If we ask a user to rate our support service quality on a day of mourning in their country, this will likely skew their answers. +- **Anchoring effect (18)**. Inappropriate use of numbers in our surveys and forms can accidentally nudge users to unconscious responses, thus distorting the received data. +- **The Magical Number 7±2 (61)**. One of the most common mistakes product teams make is offering too many options at the same time. Example: a feedback form asking "What product innovation would you like the most?" with dozens of answers. According to Miller's law, the user will not be able to keep in mind all these options simultaneously and, therefore, will not assess their weight and significance in relation to each other. As a result, the data we receive will not reflect the real situation. +- **Survival bias (59)**. Let's say we received feedback from one category of users and did not receive (or received much less) from another. If we extrapolate these results to all users, we run the risk of making many bad decisions. +- To nudge the user to give feedback, we can use a wide variety of tools, each of which will be convenient in a specific situation. Instruments: **Von Restorff effect (15)**, **Self-reference effect (16)**, **Distinction bias (21)**, **Selective perception (28)**. + +**See also:** Q47, Q3, Q10, Q48, Q49 + +## 45. What to do if our team members do not share their opinion? + +**Related biases:** 30. Ostrich effect, 48. Authority bias, 50. Bandwagon effect, 58. Normality bias, 62. Illusion of transparency, 69. Overconfidence effect, 70. Social desirability bias, 72. Consensus bias, 73. Hard-easy effect, 74. Dunning-Kruger effect + +**Answers:** + +- **Social desirability bias (70)**. The most popular reason for the lack of colleagues’ opinions is the desire to provide answers that are preferable to others. At the same time, the reasons for such responses are different. So, someone can answer "preferable" to please the management, someone to avoid conflicts (**Ostrich effect (30)**), and someone to close the question he has no interest to discuss. First, we need to understand the reason for not speaking up (for each team member it can be different). Then work out actions to involve a colleague in the discussion. Obviously, for each participant, we may need custom approach. +- **Overconfidence effect (69)**. Often, the reason for colleagues' silence is the overconfidence other team members express their opinion with. In such cases, we should ask a confident colleague to engage the team members in the dialogue. At the same time, he must do this with respect and without the irony that is inherent in incompetent people (**Dunning-Kruger effect (74)**). +- **Hard-easy effect (73)**. Sometimes the atmosphere itself and the unspoken rules that the team follows create a sense of complexity, not allowing openly sharing an opinion or asking a question. To avoid this, we should monitor the discussions with an agenda and appoint a moderator who will involve everyone. +- **Normality bias (58)**. Sometimes our colleagues do not understand how their opinion can influence management decisions or the project as a whole. It seems to them that tomorrow "everything will be the same," and, consequently, they behave neutral, avoiding involvement in the discussion. To engage such colleagues in a dialogue, we need to show them why we consider their opinion important. +- **Consensus bias (72)**, **Illusion of transparency (62)**. Another common problem that causes people to speak less than they should is the belief that "everyone thinks the same." Personally, at the very first meeting with new project participants, I emphasize several times that "what is obvious to you is obvious only to you." I strive from the beginning to create an atmosphere where people will not be afraid that their questions will seem "stupid," "superficial," or "too obvious." +- **Authority bias (48)**. Another common reason why our colleagues may blindly agree with us is the tendency to accept an authority figure's opinion. At the beginning of the discussion, a competent manager should emphasize that his opinion is no different from others' opinions. +- In conclusion, I will add that the pluralism of opinions and the habit of asking "obvious" questions and questioning already made decisions is what we must constantly strive for in our team. Suppose we encourage an atmosphere in the team where people do socially desirable actions. This will damage our colleagues' talent and reduce the value of the opinion of each of them (**Bandwagon effect (50)**). + +**See also:** Q41, Q7, Q39 + +## 46. How to simplify our product? + +**Related biases:** 5. Context effect, 12. Bizarreness effect, 14. Picture superiority effect, 20. Contrast effect, 28. Selective perception, 49. Automation bias, 61. The Magical Number 7±2, 73. Hard-easy effect + +**Answers:** + +- **Hard-easy effect (73)**. We should structure the product's possible actions into workflows—for example, a purchase workflow, a profile update workflow, etc. Once we have outlined and grouped the processes, the next step is to simplify the steps in each process. The rule of simplification is always the same: product components are always much more complex to the users than we think. Thus, anything we consider as “not easy” should be simplified. +- **The Magical Number 7±2 (61)**. If the problem is in the number of objects, we should come up with new methods of categorizing them according to Miller's law. Having too many objects is always bad even if we think that users are used to it. +- **Context effect (5)**. Another thing that complicates the product could be a component that is falling out of the product’s context. Also, we should avoid objects unusual in their type and shape as it is often causing an information noise (**Bizarreness effect (12)**, **Contrast effect (20)**). +- **Picture superiority effect (14)**. Sometimes, to simplify product concepts, it can be useful to use pictures, small animations (.gif), etc. The simplest example is replacing one instruction of 70 words with a 4-second long .gif animation explaining the same. +- **Selective perception (28)**. The absence of complaints does not mean that the product is ideally adapted to users' needs. We need to determine which product components are being ignored by users and decide what to do with them. +- **Automation bias (49)**. We can replace some of the visible functionality by converting it into "system hints." This will help to significantly "lighten" the interface. The idea is to show the user some buttons/actions only when needed and hide them the rest of the time. + +**See also:** Q53, Q55, Q2, Q6, Q32, Q34 + +## 47. What should we keep in mind when reaching out to a user directly? + +**Related biases:** 1. Availability heuristics, 5. Context effect, 7. Mood-congruent memory bias, 9. Empathy gap, 11. Base rate fallacy, 14. Picture superiority effect, 16. Self-reference effect, 17. Negativity bias, 19. Conservatism (belief revision), 21. Distinction bias, 22. Framing effect, 25. Confirmation bias, 28. Selective perception, 30. Ostrich effect, 33. Bias blind spot, 44. Fundamental attribution error, 50. Bandwagon effect, 62. Illusion of transparency, 63. Curse of knowledge, 64. Spotlight effect, 65. Illusion of asymmetric insight, 70. Social desirability bias, 71. Third-person effect, 74. Dunning-Kruger effect, 75. Barnum effect, 76. Illusion of control, 77. Illusory superiority, 89. Backfire effect, 91. Reactance, 96. Conjunction fallacy, 98. Implicit stereotypes + +**Answers:** + +- **Barnum effect (75)**. When contacting a user, we should use personalized messages. We can give vivid descriptions of user characteristics without worrying about the message being too flattering. The simplest example is the introductory words that the specialists of banks or telephone operator support services tell us: "Oh, I see you have been using our product professionally for many years. Thank you very much for that. How can I help?". +- **Illusion of control (76)**. Depending on the situation, we can offer the user to perform some "meaningful" action. Poor example: "Your opinion is very important to us. Please leave your feedback." Strong example: "Mr.% name%, given your impressive experience with us, could you point out our weaknesses so that I can immediately pass on your feedback to our top management?" It doesn't matter what happens next. The important thing is that the user will get great pleasure from such a gesture and subsequently tell his colleagues/friends how his “contribution” has changed our company. +- **Illusory superiority (77)**. With users who exaggerate their importance and behave arrogantly, we should use the Barnum effect and the illusion of control. +- **Social desirability bias (70)**. We should not push the user to provide answers that may be socially unacceptable. Even if these answers, in our opinion, will be of great benefit to the user himself. +- **Conjunction fallacy (96)**. Whenever possible, we should avoid shortness and add additional details that will form a more plausible picture of what is happening. +- **Availability heuristics (1)**. Often, we can know our users' answers to a series of questions in advance due to the availability heuristic. To do this, we just need to be aware of the recent news that are circling around the user. +- **Illusion of asymmetric insight (65)**. We should ask questions to eliminate the slightest possibility of misinterpretation of the user's words. Questions are always safe because, in addition to a better understanding of the situation, we show our interest in solving user problems. +- **Reactance (91)**. We need to remind the user that they always have a choice. This will allow the user to be attracted to us and reduce the degree of tension (if any). In this case, it does not matter what choice we are talking about. We can remind the user of something most obvious, such as "Working with us is completely safe. You can unsubscribe from our service at any time through your profile page." +- **Backfire effect (89)**, **Selective perception (28)**. Faced with the user's stubbornness in some matter, we can try to change the subject carefully or, if possible, leave the conversation for a more favorable time. +- **Context effect (5)**. Before contacting a user, we need to know the situation he is in. If the topic or the form of our appeal is significantly out of context, then this will greatly affect the perception of our appeal by the user. Other significant factors to consider are emotions-related biases (**Mood-congruent memory bias (7)**, **Empathy gap (9)**). +- **Base rate fallacy (11)**, **Framing effect (22)**. We need to be very careful in our wording. We should understand our position and our goals in advance. The clearer these goals are, the better we can make our speech. +- **Picture superiority effect (14)**. We should explore the possibility of providing the user with some kind of image instead of text or audio information. A simple example: we can send the user instructions on how to perform some actions in the form of clear and beautiful pictures. +- **Self-reference effect (16)**. We can manage the user's attention by focusing it on elements that affect him. For example, instead of "We recommend our users change their password for security reasons," we can say, "We recommend our users of the% abc% tariff plan who have joined us within the last six months change their passwords." This will increase the likelihood of the user taking the desired action. At the same time, note that the semantic load in both sentences remains the same. +- **Dunning-Kruger effect (74)**. If the user is incompetent about the issue under discussion and at the same time ignores our recommendations, we should avoid professional explanations in our conversation. The longer we persuade the user to do the right thing, the more he will be outraged. In such cases, we should use flattery, a soft tone, and open-ended questions (questions that imply a detailed, rather than a binary (yes / no) answer). +- **Negativity bias (17)**. We should “dilute” any bad news as much as possible with a lot of small but good ones. Ideally, the bad news should be in the middle of the dialogue, while the dialogue itself should start with something moderately positive and end with something as good as possible. +- **Conservatism (belief revision) (19)**. We should know in advance the ideological and moral-ethical values of our users. Such information can be critical for a highly effective dialogue, so we should store it in the "Persona" description. +- **Bandwagon effect (50)**. We can refer to "majority choice" to nudge the user towards something or, conversely, to create a contrast with the offer we make to the user. +- **Confirmation bias (25)**. Knowledge of our users’ assumptions gives us a serious advantage in the dialogue. For instance, we can decide to provide the user with information that is consistent with his point of view, so that we could gain his trust. +- **Illusion of transparency (62)**, **Curse of knowledge (63)**. Any dialogue that we will conduct with the user should desirably be outlined in advance on a sheet of paper or a diagram (e.g., Draw.io). We need to understand our position, our goals, and the interests of the user. We should check all these assumptions with our colleagues. Only after that, we can enter into contact with the user. +- **Ostrich effect (30)**. Whenever possible, we should avoid talking about anything that might cause emotional discomfort to the user. +- **Fundamental attribution error (44)**. User successes should always be described while emphasizing their personal characteristics, while failures should be either ignored or explained by external factors. +- **Spotlight effect (64)**. Sometimes, it can help us know how much the user is affected by the spotlight effect. We can both exaggerate and minimize the "publicity" of user actions, depending on our goals in the dialogue. +- **Bias blind spot (33)**. We should never tell users anything about thought processes, or other factors behind our decisions. +- Depending on the purpose of our contact with the user, it could also be useful to know **Distinction bias (21)**, **Third-person effect (71)**, **Implicit stereotypes (98)**. + +**See also:** Q33, Q21, Q10, Q44, Q49 + +## 48. What to consider when involving users in product development + +**Related biases:** 50. Bandwagon effect, 51. Placebo, 63. Curse of knowledge, 64. Spotlight effect, 72. Consensus bias, 74. Dunning-Kruger effect, 75. Barnum effect, 76. Illusion of control + +**Answers:** + +- **Curse of knowledge (63)**, **Consensus bias (72)**. If users show increased interest in getting involved in the project development, we need to make sure we clearly understand their motives. +- **Illusion of control (76)**. We should control the degree of user involvement in the life of the project. Freedom of choice and freedom of speech should be within the framework convenient for us. +- **Dunning-Kruger effect (74)**. If the user is incompetent but at the same time insists on involving himself in any process of the project, we do not need to reject him immediately. Instead, we can let him press some buttons, express his opinion, etc. (**Placebo (51)**). +- **Barnum effect (75)**. If we want to involve the user in the life of the project, we should emphasize the importance of the user's "exceptional" characteristics in our communication. Besides, we can exaggerate the significance and visibility of his actions (**Spotlight effect (64)**). +- **Bandwagon effect (50)**. Using the "majority" factor will be useful to involve users in decision-making/voting on the project. + +**See also:** Q52, Q47, Q49, Q44, Q7 + +## 49. What should we do when users ask for things we can't deliver? + +**Related biases:** 5. Context effect, 10. Omission bias, 21. Distinction bias, 46. Functional fixedness, 50. Bandwagon effect, 58. Normality bias, 67. Planning fallacy, 72. Consensus bias, 73. Hard-easy effect, 76. Illusion of control, 79. Hyperbolic discounting + +**Answers:** + +- **Omission bias (10)**. Do not ignore requests. +- **Hard-easy effect (73)**, **Consensus bias (72)**. We can explain as transparently as possible all the difficulties that we will face if we follow the users’ requests. +- **Illusion of control (76)**. We can modify user requirements and bring several similar options to a general vote. At the same time, each of the options must be feasible and consistent with our business goals. The voting itself can be held without specifying the absolute number of participants (only percentages). Then, we can appeal to the majority and implement those that won the voting. At the same time, we emphasize that we do everything following the wishes of users (**Bandwagon effect (50)**). +- **Functional fixedness (46)**, **Normality bias (58)**. We can show users how the changes they requested may modify the workflow of the familiar components of the product. The idea is to show users how much they underestimate the convenience of current practices. +- **Hyperbolic discounting (79)**. We can distract users from their requirements with a series of short-term bonus offers/rewards. +- **Context effect (5)**. If what the users suggest falls out of the product's context, we should frankly explain it in as much detail as possible. Of course, users are not required to understand the importance of product integrity and uniformity of context, but we should at least show our concerns. +- **Distinction bias (21)**. Users may want to see the difference in “before” and “after” views. Based on our goals we have to think if it is feasible for us to show the changes so explicit, or not. +- **Planning fallacy (67)**. Sometimes it may be enough for us to show the time it will take to develop solutions requested by users. If we are talking about several months required for development, then we can explain that the requested features probably will not seem as useful by the time the update is launched. + +**See also:** Q44, Q55, Q2, Q3, Q22, Q57 + +## 50. How to deal with an incompetent colleague/manager? + +**Related biases:** 10. Omission bias, 31. Subjective validation, 33. Bias blind spot, 48. Authority bias, 62. Illusion of transparency, 63. Curse of knowledge, 69. Overconfidence effect, 72. Consensus bias, 74. Dunning-Kruger effect, 77. Illusory superiority, 81. Escalation of commitment, 89. Backfire effect, 94. Information bias + +**Answers:** + +- **Curse of knowledge (63)**. We should start by trying to understand our colleague's worldviews. What are the most important moments in working with the team for him? What does he consider as an attack on his ego? We should understand that usually, the problem is not in the very fact of a colleague's incompetence but in his inability to realize it (**Dunning-Kruger effect (74)**, **Bias blind spot (33)**). If he is aware of this, then the problem is temporary; either he will develop and gain the necessary knowledge or leave the team. +- **Consensus bias (72)**, **Backfire effect (89)**. We should constantly ask less competent colleagues how they interpreted certain decisions, instructions, or just information. We need to remind ourselves that our colleagues and we will never be synced in understanding the situation. +- **Escalation of commitment (81)**. We should not place the blame for a mistake entirely on one incompetent team member, especially if the participant has decision-making power. We need to create an environment where the entire team is responsible for mistakes (and successes) from the start. +- **Information bias (94)**, **Illusion of transparency (62)**. We should be cautious when asked to do something we think is unnecessary and not practical. We should clearly describe what we are going to do and ask our colleagues to indicate milestones that can be beneficial if achieved. Example: We know that a product release in early September will fail. However, our boss requested another analysis of the market. We describe the method by which we will conduct the analysis and the structure of the output. Then we ask the boss to indicate which output will lead him to change the decision to launch in September. If the boss realizes at this moment that postponing the release of the product is inevitable, he may cancel the task and save tens of hours of useless work. +- **Overconfidence effect (69)**, **Illusory superiority (77)**. We need to create an atmosphere where no statement is final without consideration by other team members. By giving a colleague power to make the final decision, we kill the pluralism of opinions and cause significant harm to the project as a whole. +- **Subjective validation (31)**. If we notice that our colleague is using the information he received to emphasize his beliefs, we should differentiate his personal interest from the project's goals. If his beliefs are beneficial to the project, then everything is okay. If beliefs help him rather than the project, then we should do something. +- **Authority bias (48)**. Often, a colleague can cover up his incompetence by referring to the opinion of authority. Such a move allows him to relieve himself of the burden of argumentation, and at the same time, show his loyalty to the leadership. If all our questions to him are forwarded to the "authority," we should contact the "authority" to clarify the situation. If this is not possible, we can find public statements from the same authority that support our position and use them as a counter-argument. +- **Omission bias (10)**. More often than not, people do not understand the colossal damage that incompetent team members cause. We should understand that damage means not only direct harm but also the inability to use opportunities for the growth and development of the project. If an incompetent colleague did not do anything tangible for half a year, colossal damage was due to all those opportunities he could not see/realize during this half a year. That is why we should avoid the status quo and either help a colleague develop or remove him from the team. Not for our comfort, but for the success of the project. + +**See also:** Q41, Q44, Q7 + +## 51. What causes users to make mistakes when using our product? + +**Related biases:** 10. Omission bias, 14. Picture superiority effect, 21. Distinction bias, 22. Framing effect, 46. Functional fixedness, 49. Automation bias, 61. The Magical Number 7±2, 63. Curse of knowledge, 72. Consensus bias, 78. Risk compensation + +**Answers:** + +- **Risk compensation (78)**. We've used too many safety elements, tips, and warnings on the product pages. Over time, our users developed a tolerance for such data and became immune to it. +- **Curse of knowledge (63)**, **Consensus bias (72)**. What we consider to be an error is considered as a norm by the user. +- **The Magical Number 7±2 (61)**. We've grouped UI elements awkwardly. We should find options for optimizing the interface without changing the usual workflows (**Functional fixedness (46)**). +- **Omission bias (10)**. Mistakes occur because of user inactivity. We need to change the form of communication (**Framing effect (22)**) and clearly show the problems that may follow because of inaction (**Picture superiority effect (14)**, **Distinction bias (21)**). +- **Automation bias (49)**. Our users rely too much on system hints. + +**See also:** Q13, Q11, Q39, Q24, Q46, Q10 + +## 52. How to involve users into our product testing? + +**Related biases:** 14. Picture superiority effect, 16. Self-reference effect, 21. Distinction bias, 27. Post-purchase rationalization, 64. Spotlight effect, 73. Hard-easy effect, 75. Barnum effect, 79. Hyperbolic discounting, 80. Appeal to novelty, 88. Endowment effect + +**Answers:** + +- **Hard-easy effect (73)**. We need to make participation as easy as possible. It's about every action you take, whether it's clicking a button in a pop-up window, filling out a form, etc. We should remove all unnecessary actions. +- **Appeal to novelty (80)**. The most obvious move is to appeal to the novelty of the created product/functionality. The more associations we make with new products, the more interesting our proposal will seem. +- **Hyperbolic discounting (79)**. Even if we plan to give rewards for participation in beta testing upon its completion, our offer should include some instant, short-term rewards. +- **Endowment effect (88)**. We can move a small element of functionality that is already available to users into the beta-testing scope. For safety, we can take the least popular system components and move them to beta. The idea is that the user, considering these components "their own" (even if they have never used them), is more likely to agree to join the beta testing. +- **Spotlight effect (64)**. We can highlight the publicity that will follow the actions of our beta testers. +- **Barnum effect (75)**. We can create a list of messages personalized by user groups. In the messages, we can emphasize the "unique" characteristics of the user and the fact that he was "specially selected" to participate in beta testing. +- **Self-reference effect (16)**. In our offer to participate in beta testing, we can use information in which the user "sees himself". For example: "Most of our beta testers are Premium service plan subscribers and use the product in the evenings." Another example: "Are you worried about the low speed of report generation? So are our beta testers. You can join the testing right now." Note that we are not saying that beta testers do not have any problems with reporting or other functionality. We are only using a reminder of a common problem to create a self-reference hook. Of course, the examples are stretched, but the idea should be clear. +- **Distinction bias (21)**. In the user's eyes, the options "do nothing" and "take part in beta testing" are a choice between comfort and a waste of mental energy (discomfort). It may be helpful to show clearly all the benefits of participation. A well-made picture may be suitable for this (**Picture superiority effect (14)**). +- **Post-purchase rationalization (27)**. We should understand that selling the idea of participating in beta testing is no different from selling any other product. Therefore, we should take care of providing the user with material to rationalize his actions. The fact that the user has no doubts about the correctness of his action will let us create a loyal user base. + +**See also:** Q48, Q47, Q24, Q54, Q23 + +## 53. What should we consider when removing unnecessary product features? + +**Related biases:** 3. Illusory truth effect, 5. Context effect, 16. Self-reference effect, 19. Conservatism (belief revision), 21. Distinction bias, 22. Framing effect, 27. Post-purchase rationalization, 46. Functional fixedness, 47. Just-world fallacy, 63. Curse of knowledge, 74. Dunning-Kruger effect, 83. Loss aversion, 86. Zero-risk bias, 88. Endowment effect, 91. Reactance + +**Answers:** + +- **Curse of knowledge (63)**. We need to understand how users relate to the removed functionality. At the same time, our personal opinion does not matter. We should double-check with the team any assumptions about how users will interpret the removal of functionality. We need the same knowledge for proper communication about the changes (**Framing effect (22)**). +- **Functional fixedness (46)**. We should be cautious when removing the elements that are part of some workflow in the system. +- **Loss aversion (83)**. We should expect disappointment disproportionate to the degree of use of the removed functionality. Because of this, it is advisable to add something along with the removal of the functionality to "soften" the discomfort. +- **Endowment effect (88)**. Even if the user has used a certain product element once every six months, we should understand that this element is his property (for him). Removing such an element without explanation or referring to "usage statistics" can be perceived sharply negatively. Users may call our actions "dishonest" and "unfair" because we took them without their participation (**Just-world fallacy (47)**, **Reactance (91)**). +- **Zero-risk bias (86)**. In explaining our decision, we may appeal to the desire to eliminate a specific risk. +- **Illusory truth effect (3)**. If we anticipate a sharply negative reaction to removing a certain functionality, we can take action to mitigate this reaction. So, a few months before the action, we can highlight the imperfection of the component that we are going to remove. The idea is that on the day of removal of the functionality, users can refer to some "constantly appearing" materials associated with the component that has been removed. Thus, it will be easier for them to rationalize what has happened. +- **Context effect (5)**. In some cases, we can first move a component to another part of the product, so that it falls out of context. Then, analyze users' reactions, and only after that remove the component as "obviously interfering." +- **Self-reference effect (16)**. We need to be very careful when working with product components in which people "see themselves." For example, it may seem to us that the "Premium" prefix next to the users' nicknames is unnecessary and does not carry any semantic meaning. However, due to the effect of self-reference, if we remove this prefix, users can begin to leave without telling anything. Any element of the product that feeds the user's ego is critical. +- **Conservatism (belief revision) (19)**. If our users are conservative due to their ideology, age, or something else, we should keep the number of changes to a minimum. +- **Distinction bias (21)**. Sometimes users find it difficult to assess the impact of changes. Especially if these changes affect several different components of the product. It might be a good idea to visualize the changes in one image in a "Before - After" format. +- **Post-purchase rationalization (27)**. If we remove a component that has been actively used in our marketing or post-purchase materials, users may have the feeling that they were "cheated." +- **Dunning-Kruger effect (74)**. In some cases, users may dislike the changes without even understanding their meaning. This is especially true in the B2B sector, where it can often be convenient for the user to hide his incompetence in front of his management, referring to “extreme changes” in the product. + +**See also:** Q46, Q55, Q8, Q17, Q32, Q54 + +## 54. What should be considered when adding new product functionality? + +**Related biases:** 5. Context effect, 22. Framing effect, 28. Selective perception, 46. Functional fixedness, 54. Halo effect, 62. Illusion of transparency, 67. Planning fallacy, 73. Hard-easy effect, 83. Loss aversion, 88. Endowment effect, 91. Reactance, 94. Information bias + +**Answers:** + +- **Loss aversion (83)**, **Endowment effect (88)**. If we are unsure whether the users will like the new functionality, we should put it in an implicit place. If we put the functionality in a visible place, and later it turns out that most users do not need it, it will be much more difficult to remove it without causing a negative reaction from the users. +- **Context effect (5)**. The functionality should harmoniously fit into the context of both the product and the specific page where we place it. +- **Halo effect (54)**. The way we present the new functionality sets the tone for future updates. The more pompous we present the functionality, the higher we put the expectation bar (**Framing effect (22)**). +- **Selective perception (28)**. We should investigate users' expectations from the added functionality, and during the presentation, put special emphasis on them. +- **Functional fixedness (46)**. If by adding functionality, we change any of the established workflows, then it can cause a sharply negative reaction. +- **Illusion of transparency (62)**. We should explain all the advantages of the functionality as simply as possible, even if we think that everything is self-explanatory. +- **Planning fallacy (67)**. We can significantly overestimate our ability to implement functionality within the agreed time frame. +- **Reactance (91)**. If we introduce functionality that can significantly change the product, but at the same time do not allow users to refuse (at least temporarily) these changes, we run the risk of running into a sharply negative reaction. +- **Hard-easy effect (73)**. We should minimize the threshold for using the functionality and the learning cycle time of it. All team members should consider the assumptions about the simplicity of the new functionality. Besides, it would be very useful to evaluate usability in advance by giving a group of users access to the functionality. +- **Information bias (94)**. If we are constantly looking for additional information about the launch of the functionality, we should determine how exactly this information will affect our decision. In other words, we should define the success criteria for our researches. + +**See also:** Q8, Q5, Q37, Q40, Q42 + +## 55. Which product components are most sensitive to change? + +**Related biases:** 1. Availability heuristics, 5. Context effect, 19. Conservatism (belief revision), 27. Post-purchase rationalization, 46. Functional fixedness, 50. Bandwagon effect, 58. Normality bias, 74. Dunning-Kruger effect, 83. Loss aversion, 84. IKEA effect, 88. Endowment effect, 91. Reactance + +**Answers:** + +- **Reactance (91)**. Any change that will limit the users’ capabilities is a highly sensitive one. +- **Endowment effect (88)**. Any component that users considered "their own" is a highly sensitive change. It does not matter whether the user used the functionality or not (**Loss aversion (83)**). +- **IKEA effect (84)**. Any product component that was customized or built by the user, is highly sensitive to change. +- **Availability heuristics (1)**. Any component that is fresh in the user's memory becomes sensitive to changes. +- **Bandwagon effect (50)**. Any component that is used by the majority of users is sensitive to change. +- **Context effect (5)**. Any product has a basic set of features that provide the "context" of the entire product. Such components are highly sensitive to changes. +- **Conservatism (belief revision) (19)**. Any change affecting the moral, ethical, or ideological values of our audience is critically sensitive. +- **Post-purchase rationalization (27)**. The components we have used to help the user rationalize their purchases/decisions are particularly sensitive to change. +- **Functional fixedness (46)**. Any change in a common workflow in a product is highly sensitive. +- **Normality bias (58)**. Any change that brings uncertainty into the future of a component/product may cause a sharp reaction from users. +- **Dunning-Kruger effect (74)**. This may sound obvious, but the most sensitive components are always those that the user considers most important. Often, especially in the B2B model, the user's incompetence can lead to the fact that we will not be able to make changes to those system components that are redundant or incomplete. + +**See also:** Q37, Q53, Q54, Q63, Q5, Q8 + +## 56. What to consider when working with lists (any)? + +**Related biases:** 15. Von Restorff effect, 17. Negativity bias, 21. Distinction bias, 46. Functional fixedness, 49. Automation bias, 58. Normality bias, 85. Unit bias, 102. Serial recall, 104. Primacy effect, 105. Serial-position effect + +**Answers:** + +- **Serial recall (102)**. The order of the components in the list affects the quality of the content perception. Each subsequent element of the list should be a logical continuation of the previous element. For example, if I placed this item in the middle of the list, it might be less comfortable to read. +- **Unit bias (85)**. A correctly selected number of items in a list increases the likelihood of reading/completing it. +- **Primacy effect (104)**. If the list consists of different events (e.g., a list of alerts), then when prioritizing them, we should consider the effect of primacy. +- **Automation bias (49)**. By adding features such as system prompts, we reduce users' attention while increasing their comfort in working with lists. We need to find the line where the system will support users, but at the same time, it will not lead them to entirely depend on this support (of course, if this is not our goal). +- **Von Restorff effect (15)**. Lists are especially sensitive to different object types that "fall out" of the standard. This can be used when we want to draw the user's attention to something specific. +- **Negativity bias (17)**. By setting a negative tone at the very beginning of the list, we significantly affect the user’s perception of it. This factor can be used in completely different ways, depending on the product's specifics and goals. +- **Distinction bias (21)**. Depending on the positioning and order of items in the list, we can control the user's level of attention and the number of differences noticed by them. +- **Functional fixedness (46)**, **Normality bias (58)**. When regularly working with lists, users quickly create small habits to keep the number of actions minimum. We should be aware of these habits and do not let our changes affect those. +- **Serial-position effect (105)**. We can underline the most important items in the list by placing them at the beginning or end. + +**See also:** Q24, Q51, Q38, Q39, Q60 + +## 57. How can we add extra value to a product at minimal cost? + +**Related biases:** 1. Availability heuristics, 3. Illusory truth effect, 16. Self-reference effect, 19. Conservatism (belief revision), 25. Confirmation bias, 27. Post-purchase rationalization, 47. Just-world fallacy, 62. Illusion of transparency, 63. Curse of knowledge, 73. Hard-easy effect, 75. Barnum effect, 80. Appeal to novelty, 86. Zero-risk bias, 93. Ambiguity effect + +**Answers:** + +- **Zero-risk bias (86)**. We can add to our offer various guarantees and notes about the complete absence of some risks. It should be understood that we are talking even about such things that may be obvious to most users. +- **Illusion of transparency (62)**. We can simplify product documentation and emphasize in our business proposal that we have the most accessible guides/documents on the market. It should be noted that it is not at all necessary for our product to have documentation. +- **Ambiguity effect (93)**. We can add a point to our business proposal that emphasizes the transparency of our product. In the same logic, we can indicate the absence of "surprises" when working with us. Example: "No hidden fees." +- **Availability heuristics (1)**, **Illusory truth effect (3)**. We can closely follow market trends and associate with them in our communication. It can be anything: support for some kind of technological movement, decisions of a public company, etc. If implemented correctly, such steps will help to significantly increase the value of the product and improve the image of our company. Note that we are not talking about the implementation of the functionality here. I'm only talking about our public communication, commenting, discussions. +- **Self-reference effect (16)**. By changing the texts in the product, we can achieve greater self-reference among users, which, in turn, will increase the value of the product in their eyes. Even the simplest change of the name of the link "Click here" to "If you are a veteran, click here" can benefit the product. +- **Conservatism (belief revision) (19)**, **Confirmation bias (25)**. If the specificity of the product and the market allow, we can emphasize the commitment of the product to protect the ideological, moral, and ethical values of users. +- **Post-purchase rationalization (27)**. We can add elements to make it easier to rationalize user choices. The simplest example: an alert in the form "97% of users were happy with this purchase!" We should note that here I am talking about choice in general, without a mandatory commercial component. +- **Appeal to novelty (80)**. We may modify our communication related to product releases. For example, from "planned updates" with a shortlist of innovations, we can move towards bright, catchy phrases that would emphasize the novelty of the functionality and the relevance of the release. +- **Barnum effect (75)**. We can modify our communication sent to users by adding information about their exclusivity. Weak example: "You are one of 25 unique users whom we selected to get their opinion on option A." +- **Just-world fallacy (47)**. If the specificity of the product allows, we can periodically emphasize our commitment to “universal justice”. +- **Hard-easy effect (73)**. The simplest categorization or rearrangement of existing elements on the interface can significantly increase the user's satisfaction and excitement. +- **Curse of knowledge (63)**. The most exciting methods of adding value come with a better understanding of our users. The more details we know about them, the easier it for us to implement tiny but charming value add-ons for our users. + +**See also:** Q34, Q42, Q40, Q46, Q54, Q32 + +## 58. How can we make sure users notice the information that matters most to us? + +**Related biases:** 11. Base rate fallacy, 14. Picture superiority effect, 15. Von Restorff effect, 21. Distinction bias, 36. Neglect of probability, 49. Automation bias, 61. The Magical Number 7±2, 63. Curse of knowledge, 70. Social desirability bias, 75. Barnum effect, 83. Loss aversion, 85. Unit bias, 87. Processing difficulty effect, 102. Serial recall, 103. List-length effect + +**Answers:** + +- **Processing difficulty effect (87)**. If we want the user just to read something, then we should use a minimum of text. If it is more important for us that the user remembers something, then we can use more notes/hints. +- **Loss aversion (83)**, **Base rate fallacy (11)**. We can draw users' attention to some object simply by describing possible user losses. Moreover, the probability of loss may be less than 1%. +- **Curse of knowledge (63)**. We need to ensure that our communication is tailored to the mindset of our users. The accents we use should be fully meaningful to them, not to us. +- **Serial recall (102)**. The more logical the sequence of workflow actions, the easier they will seem to the user, and the better he will remember them. +- **List-length effect (103)**. By increasing the size of the list (no matter which one), we reduce the user's attention, increasing the risk that he will miss something. +- **Picture superiority effect (14)**. If context allows, we can play with users' attention by using images instead of text. +- **Von Restorff effect (15)**. To focus users' attention, we can use cosmetic changes (color, font, font size, etc.). +- **Distinction bias (21)**. If we want to draw users' attention to the differences of some options, we should show them next to each other, on the same page. +- **The Magical Number 7±2 (61)**, **Automation bias (49)**. By playing with the number of interface elements, we can increase and decrease users' attention and interest. +- **Social desirability bias (70)**. We can get the user's attention by emphasizing social desirability and publicity (!) of the proposed action. It is important to emphasize that without publicity, the likelihood that users will ignore the proposed action will increase significantly. +- Other biases that will be useful to know and use situationally when working with attention: **Neglect of probability (36)**, **Barnum effect (75)**, **Unit bias (85)**. + +**See also:** Q11, Q51, Q13, Q39, Q24 + +## 59. What should we consider when referencing political, social, or economic events in our messages? + +**Related biases:** 16. Self-reference effect, 17. Negativity bias, 19. Conservatism (belief revision), 25. Confirmation bias, 28. Selective perception, 52. Out-group homogeneity, 53. In-group favoritism, 56. Not invented here, 59. Survival bias, 63. Curse of knowledge, 70. Social desirability bias, 72. Consensus bias, 90. System justification, 91. Reactance, 98. Implicit stereotypes, 100. Fading affect bias + +**Answers:** + +- **System justification (90)**. In the vast majority of cases, we should avoid referring to the world / national / state conjuncture events. The reason is that we have no control over these events, and we have no idea how users will interpret them in the future. For example, today, we can support some kind of civil movement for human rights. Perhaps in the short term, both potential and actual users will like it, but what if this civil movement entails the death of innocent people? Our competitors can easily use the discredited movement that we supported to mix us with the dirt effectively. That said, it doesn't matter how "right" or "not guilty" we are (**Curse of knowledge (63)**). +- **Self-reference effect (16)**. Referring to an event, we should choose wording to allow the user to see himself in it. +- **Negativity bias (17)**. By referring to negative public events, we make the product user much more prone to any negative emotions when using the product. +- **Conservatism (belief revision) (19)**. Almost any opinion that we express will certainly run counter to the ideological or socio-cultural values of some percentage of our audience. +- **Confirmation bias (25)**. Our statements should be presented so that users can agree with them easily. Any discrepancy in communication can cause a reactive reaction (**Reactance (91)**). +- **Selective perception (28)**. We should limit commenting on our posts where we mention public events. The reason is that we will not benefit from allowing it. So, seeing our users' comments, we may feel that we "know our audience." Such "knowledge" can entail actions aimed at strengthening our course in discussing a public event. However, since we will only rely on a small percentage of our audience (only those who comment), we mistakenly extrapolate our findings to the entire audience (**Survival bias (59)**). Dissenting but not commenting users may assume that "most people here think so" and refuse to use the project (**Consensus bias (72)**). +- **Not invented here (56)**. If we timed the release of some functionality to any public event, we run the risk of receiving distorted data on the use of this functionality. Many users can fundamentally refuse to use it, considering the reference to events as something inappropriate. +- **Fading affect bias (100)**. If we misused references to public events, we should apologize and let time "heal" the situation. We should never stop product development. Updates should be released as usual, according to the schedule. Communication should be the same as it was before mentioning public events. +- **Social desirability bias (70)**. The safest events that we can refer to are those in which we are talking about the unconditional good of all humanity. +- The purpose of references to public events is to evoke the emotional reaction of users. On the other hand, emotional reactions can be a big problem and often lead to the loss of a user base. Our association with events will often be interpreted depending on several biases associated with stereotypes: **Out-group homogeneity (52)**, **In-group favoritism (53)**, **Implicit stereotypes (98)**. + +**See also:** Q21, Q4, Q7, Q55, Q63 + +## 60. What should we do if users are struggling on the product or service selection page? + +**Related biases:** 15. Von Restorff effect, 16. Self-reference effect, 18. Anchoring effect, 21. Distinction bias, 50. Bandwagon effect, 51. Placebo, 73. Hard-easy effect, 92. Decoy effect, 93. Ambiguity effect + +**Answers:** + +- **Decoy effect (92)**. We can add an unfavorable option to simplify the selection. +- **Von Restorff effect (15)**. We can apply cosmetic changes by adding some kind of label (e.g., "New!") to the offerings. +- **Self-reference effect (16)**. We can change product descriptions to make it easier for people to "see themselves in them." This is an important point because often, in the descriptions of goods/services, companies write too primitive, generic texts. +- **Anchoring effect (18)**. We can play with the numbers on the page and see the impact. By numbers, I mean anything, for example, the price of a product/service, quantity, serial number of the product, etc. +- **Distinction bias (21)**. If users find it difficult to choose because product characteristics are listed next to each other, we can separate them. +- **Bandwagon effect (50)**. We can add labels to the products to highlight the choice of the majority (e.g., "Most popular service plan"). +- **Placebo (51)**. We can add dummy buttons, such as "Check availability," by clicking on which the system will show a two-second slider and return the result "In stock!" I described it as a placebo because our system can only show products in stock by default, making the button meaningless. The essence of the button is to add a new emotional component to the decision-making process. +- **Hard-easy effect (73)**. Perhaps the problem is the complexity of the interface or the purchase instructions. +- **Ambiguity effect (93)**. Perhaps the problem is in the extremely unlikely risks that users see in the product. We should understand these risks and add relevant notes. (Example in notes: "No card required. No hidden fees.") + +**See also:** Q18, Q46, Q20, Q29, Q32, Q42 + +## 61. What should we do if our team wastes too much time on minor details? + +**Related biases:** 22. Framing effect, 61. The Magical Number 7±2, 70. Social desirability bias, 72. Consensus bias, 74. Dunning-Kruger effect, 94. Information bias, 95. Law of triviality + +**Answers:** + +- **Consensus bias (72)**. We should check our position with our colleagues because perhaps we missed something. This is often the result of different levels of awareness among colleagues. To increase the effectiveness of meetings, we should describe a clear agenda for each meeting, and before discussing each topic, tell our colleagues everything we know. This will make sure that we are using the same information. +- **Dunning-Kruger effect (74)**. Often meetings are delayed, and important issues fade into the background due to the incompetence of our colleagues. Usually, we can solve such a problem by assigning someone more competent to draw up the agenda and take over the moderation of the meeting. +- **Social desirability bias (70)**. Colleagues want to avoid possible conflicts because of the increased severity of the issues that need to be resolved. +- **Information bias (94)**. Colleagues avoid responsibility for making difficult decisions. Consequently, the decisions are postponed as long as possible. +- **Law of triviality (95)**. Sometimes colleagues may simply not notice how much time is spent discussing details. This is especially true if these details are discussed by technical experts who are strongly attracted to thinking about "how exactly to implement this." In such cases, we can resolve the issue by appointing a moderator who will follow the agenda and limit the time to discuss issues. +- **Framing effect (22)**. Sometimes a problem can arise because of one word that is difficult to fit into the vocabulary of a colleague. I once spent more than two hours discussing the details of a large project just because the word "approval" was too heavy in the partner's world than in my diagram. We saved many hours by simply replacing that word with "pass." +- **The Magical Number 7±2 (61)**. Perhaps the problem is in the very structure of the agenda. For example, if the agenda consists of 40 items, colleagues will not take it seriously even before the meeting begins. Consequently, they will talk about issues as long as they want because "we still won't have time to discuss everything today." Therefore, we should limit the issues to be discussed on the agenda. If there are many questions, they should be categorized and discussed in a series of meetings. + +**See also:** Q50, Q24, Q32, Q55 + +## 62. What to consider when creating a Persona for a product? + +**Related biases:** 4. Mere-exposure effect, 16. Self-reference effect, 19. Conservatism (belief revision), 25. Confirmation bias, 27. Post-purchase rationalization, 30. Ostrich effect, 52. Out-group homogeneity, 53. In-group favoritism, 64. Spotlight effect, 70. Social desirability bias, 74. Dunning-Kruger effect, 98. Implicit stereotypes, 99. Prejudice + +**Answers:** + +- **Prejudice (99)**. We should write down all the prejudices that our users are prone to. If necessary, each Persona in our product can have its own "set" of prejudices. +- **Mere-exposure effect (4)**. We should write down objects familiar to our users that we could refer to in the future. +- **Self-reference effect (16)**. We should write down Ideas and objects the user wants to associate himself with. This includes everything from political and social views, continuing to professional achievements, and so on. +- **Conservatism (belief revision) (19)**. We should write down all the ideological and moral-ethical values that our users adhere to. Besides, we should also write down those values the user does not believe in but publicly agrees and supports (**Social desirability bias (70)**). This is especially true for a B2B product (not a mass product). +- **Post-purchase rationalization (27)**. We should write down the main arguments that our “Persona” uses to rationalize a certain action/purchase. We then use this information to support users’ points of view (**Confirmation bias (25)**). +- **Ostrich effect (30)**. We should write down all user concerns associated with a product category such as ours. Understanding what can cause the user emotional discomfort will allow us to build more comfortable communication (texts, calls, images). +- **Spotlight effect (64)**. We should understand how the user relates to the publicity of his actions. This understanding will allow us to create interesting options for the product and give us additional leverage to nudge the user to some action. +- **Dunning-Kruger effect (74)**. We need to understand and write down how our users assess their competence. Such item in "Persona" is not suitable for mass products, but it may be well suitable for the B2B sector. The narrower the niche of the product, the more relevant this item is. +- We should also write down all those stereotypes and prejudices our audience is prone to **Out-group homogeneity (52)**, **In-group favoritism (53)**, **Implicit stereotypes (98)**. + +**See also:** Q6, Q21, Q24, Q29, Q32 + +## 63. What to do if a significant mistake occurred in the latest release? + +**Related biases:** 3. Illusory truth effect, 7. Mood-congruent memory bias, 10. Omission bias, 11. Base rate fallacy, 16. Self-reference effect, 17. Negativity bias, 22. Framing effect, 51. Placebo, 66. Hindsight bias, 68. Pro-innovation bias, 72. Consensus bias, 83. Loss aversion, 100. Fading affect bias, 101. Peak-end rule + +**Answers:** + +- **Consensus bias (72)**. Because we view mistakes from a business perspective, we sometimes exaggerate their significance to users. Therefore, before we decide what to do, we need to understand the real significance of the mistake through the user's eyes. Often, the issue can be fixed without further mentioning it because of its insignificance for users. +- **Pro-innovation bias (68)**. Sometimes we exaggerate the significance of mistakes because of our very personal approach to business. Therefore, we should double-check our assumptions with the team. +- **Peak-end rule (101)**. We need to understand what emotions this mistake causes. To do this, we need to analyze the workflow in which the error occurs and determine its "painfulness." The intensity of negative feelings caused by mistakes will show us the form of communication that we will choose. +- **Loss aversion (83)**. The most critical errors are those related to data loss. In addition to an early apology, we should explain in detail to users that the situation is under control and show the steps that we will take to complete data recovery. If the losses are irrecoverable, then depending on the specifics of the product, we are obliged to offer some free bonuses and other preferences. +- **Illusory truth effect (3)**. Suppose we know that the mistake will be discussed for a while. In that case, we should develop a clear position, formulate it and repeat it systematically until people use it to rationalize what happened. This technique is widely used by politicians. +- **Mood-congruent memory bias (7)**. We can report an error on a day that is colored with positive associations. In doing so, we can mix the message with some good news. For example, in the next release, we can tell our users about six innovations, five fixed bugs, and one bug found in the last release. Simultaneously, if the error is very painful for users, we can write out a detailed plan to fix it so that users have a vision that we have everything under control. +- **Omission bias (10)**. We should check our ideas with teammates. Sometimes, doing nothing and ignoring the mistake can be the solution (many companies do this). However, in some cases, ignoring it can cause irreparable damage. +- **Framing effect (22)**. When publicly acknowledging the error, we should avoid wording in which users can "see themselves" (**Self-reference effect (16)**). Also, we should avoid using sentences about possible terrible consequences of our mistakes (**Base rate fallacy (11)**). +- **Placebo (51)**. Sometimes it can be helpful to give users some kind of button to provide them with emotional comfort. For example, you can add a button "Report a bug" on a page where we already know a bug. Such a move can be useful if we need a little time (24 hours?) to fix the error. +- **Hindsight bias (66)**. Depending on the public discussion that began after the publication of the mistake, there will certainly be "experts" who will say that "it was obvious," "only a matter of time," etc. We should not react to such attacks because it is useless. At the same time, we should suppress the same sentiments within our team. +- **Fading affect bias (100)**. Even big mistakes can be healed over time. We should never stop product development. Updates should be released normally. We should avoid situations where we inadvertently increase the significance of the problem so that the memory of it fades out much later (**Negativity bias (17)**). + +**See also:** Q43, Q8, Q5, Q7, Q55 diff --git a/.claude/skills/uxcore-style/SKILL.md b/.claude/skills/uxcore-style/SKILL.md new file mode 100644 index 0000000..c138367 --- /dev/null +++ b/.claude/skills/uxcore-style/SKILL.md @@ -0,0 +1,725 @@ +--- +name: UXCore Design System +description: Build UI components and pages that match the UXCore visual identity — covers typography, colors, spacing, components, motion, and do/don't rules for UXCore, UXCG, UXCP, and UXCat. +--- + +# Workflow + +When triggered, follow these steps: + +1. **Read this file fully** before generating any code. Internalize the design tokens, component specs, and do/don't rules. +2. **Identify which visual scope applies** — is this for the shared platform style (UXCore/UXCG/UXCP) or for UXCat? This determines accent colors, heading weights, and animation behavior (see Section 10b). +3. **Build the component or page** using the exact values from this spec — font sizes, colors, spacing, border-radius, shadows, and easing curves. Do not approximate or substitute. +4. **Check against Section 11 (Do / Don't Rules)** before finalizing. These rules override any instinct to add gradients, pill buttons, glassmorphism, or decorative elements. +5. **Reference `AGENTS.md`** at the repo root for code-structure rules (component pattern, file layout, prop typing, etc.) whenever you write or modify actual code files. + +# UXCore Visual Design System + +> A standalone design specification for building interfaces that match the UXCore visual identity (keepsimple.io). No codebase access needed — every value is resolved and every component described well enough to implement from scratch in any tech stack. +> +> **Two visual scopes:** +> +> - **Sections 1–10** describe the **shared platform style** used across UXCore (bias explorer), UXCG (UX Case Generator), and UXCP (UX Companion Personas). These three tools share the same typography, colors, layout, and component styles. +> - **Section 10b** describes **UXCat-specific styling** — the quiz/gamification tool that has its own distinct visual personality built on top of the shared foundation. +> +> Section 11 (Do / Don't Rules) and Tone left as `____` for manual completion. + +--- + +## Design Philosophy + +The platform has **two visual modes** that share a common foundation but serve different moods. + +**The core platform (UXCore, UXCG, UXCP)** is quiet, structured, and informational. It presents dense educational content — cognitive biases, UX questions, persona-driven analysis — without competing with that content for attention. The palette is desaturated and cool, anchored by a muted steel-blue and generous white space. Typography is deliberately lightweight for headings (thin Red Hat Display) and utilitarian for body text (Lato), letting the content hierarchy do the work rather than visual flair. Interactions are subtle: cards lift a few pixels on hover, borders shift color to confirm focus, and the navigation pill slides between tabs with a smooth, physical-feeling ease. The overall impression should be a well-organized reference tool — closer to a thoughtfully designed textbook than a marketing landing page. + +**UXCat (the quiz tool)** inherits the same layout grid, font stack, and color tokens, but layers on a warmer, more energetic personality. Orange replaces steel-blue as the accent for headings and CTAs. Content appears through staggered fade-in sequences. A progress-and-reward system adds gamification elements — achievement badges with gold glow effects, animated leaderboards, and a branded brain-spinner loading animation. UXCat feels like taking a well-designed exam in a serious but encouraging environment. + +--- + +## 1. Typography + +### Fonts + +- **Primary font (body text):** Lato (fallback: Arial, serif). A clean, humanist sans-serif used for all body copy, buttons, labels, and UI chrome across every tool. +- **Heading font (page and section titles):** Red Hat Display (fallback: sans-serif). Used at light weight for a refined, modern feel on page titles — shared by UXCore, UXCG, UXCP, and UXCat. +- **Monospace font (bias number labels, meta tags):** IBM Plex Mono (fallback: sans-serif). Used for small uppercase category labels on bias detail views — gives a technical, cataloging feel. +- **Font loading:** Self-hosted via `@font-face` with `font-display: swap` for Lato and `font-display: optional` for secondary fonts. Not loaded from Google Fonts CDN. +- **Special-purpose fonts:** + - Noto Sans Armenian (sans-serif fallback) — full locale override for Armenian language, applied globally when locale is `hy` + - Source Serif 4 (Regular/Bold/SemiBold) — article and long-form content layouts + - Cormorant Garamond (Regular/Medium) — article layouts, Russian locale variant + - Aboreto — article titles (decorative) + - See [Section 10b (UXCat)](#10b-uxcat-specific-styles) for additional fonts used only in the quiz/gamification context. + +### Type Scale + +| Role | Size | Weight | Line-height | Notes | +| ----------------------- | ------- | ----------- | ----------- | ------------------------------------------------------------------------------------------------------- | +| Page title (h1) | 36px | 300 (light) | default | Intentionally thin — lets the content breathe. Drops to 24px / weight 600 on mobile (≤800px). | +| Section heading (h2) | 24px | 600–800 | ~28.8px | Used for quiz questions and result titles. Weight 800 for maximum-emphasis question text. | +| Subsection heading (h3) | 18–20px | 400–700 | ~25.6px | 20px for mottos and API section headers; 18px for quiz sub-questions (weight 700). | +| Body text | 16px | 400 | 150% (24px) | Standard body copy. Some contexts use 140% line-height. Drops to 14px at ≤1440px on data-dense screens. | +| Small / caption text | 12px | 400–600 | default | Used for axis labels, search result hints, and small meta labels. Weight 600 for emphasized labels. | +| Label / tag text | 14px | 400 | ~17px | Buttons, filter controls, nav items, tooltip content, sidebar descriptors. | +| Navigation links | 14px | 400 | default | Always uppercase. | + +### Text Rules + +- **Letter spacing on headings:** -0.01em on bias detail modal titles (a very subtle tightening). +- **Uppercase (`text-transform: uppercase`)** is used on: navigation items, bias number labels in detail modals, section headers, view switcher controls, panel headers, and completion bar labels. It signals "system chrome" vs. content. +- **Max line width for readability:** Content containers are capped at 900px. This keeps body text to a comfortable ~75-character line length at 16px. + +--- + +## 2. Colors + +### Brand / Primary + +- **Primary brand color:** `#28587b` — a muted steel-blue. The dominant accent across UXCore, UXCG, and UXCP. Used for primary buttons, link text, page headings, active filter states, and interactive affordances. +- **Primary hover state:** `#28587b` (no lightening — primary buttons don't shift color on hover; the interaction feedback comes from border changes on outline variants). +- **Primary active/pressed:** `#28587b` (used as background on active filter buttons with white text). + +### Secondary Accent Colors + +- **Secondary blue:** `#5b88bd` — a lighter, softer blue. Used for active-state borders (selected answers, active product tabs), interactive link text in modals, active toggle controls, checkboxes, and radio-style selections. This is the "something is selected/active" color — shared across all tools. +- **Orange accent:** `#de915b` — warm terracotta orange. Used for call-to-action buttons (start actions, submit). In UXCat, this is the dominant accent for titles and primary CTAs (see Section 10b). +- **Orange hover:** `#cd7232` — deeper, toasted orange. Orange buttons darken on hover rather than lighten. +- **Purple accent:** `#a36aa4` — muted plum. Used sparingly for secondary feature tooltips, tab decorations, date stamps, and highlight actions. + +### Backgrounds + +- **Page background (global):** `linear-gradient(180deg, #f9fafb 0%, #e8e8e8 100%)` with fallback `#f9fafb` — a very subtle warm-to-cool gray gradient from top to bottom. The page never feels stark white. +- **Page background (tool pages):** `#fafafa` — a flat, near-white gray used as the canvas for all main tool interfaces across UXCore, UXCG, UXCP, and UXCat. +- **Card / content block background:** `#fff` — pure white. Cards sit on the `#fafafa` canvas, creating a very gentle lift even before shadows. +- **Card hover background:** No background change on hover — hover feedback is handled through shadow deepening and subtle vertical movement. +- **Modal / overlay backdrop:** `rgba(0, 0, 0, 0.35)` — a light dim, not a heavy blackout. Content behind the modal remains partially visible. +- **Spinner / loading overlay:** `rgba(0, 0, 0, 0.6)` — darker than modal backdrops to fully focus attention on the loading indicator. +- **Header background:** `#fff` (white, with a subtle bottom shadow to separate from content). +- **Hover highlight (UI chrome):** `#f1f1f1` — used for nav item hover states, dropdown item highlights, and user menu hover. A barely-there gray tint. + +### Text + +- **Primary text:** `#252626` — near-black with just enough warmth to avoid harshness. Some components also use pure `#000`. +- **Secondary / muted text:** `#9e9e9e` — medium gray for subtitles, mottos, short descriptions, and secondary labels. Also `rgba(0, 0, 0, 0.65)` (a 65% black) for slightly more prominent secondary text on sidebar labels. +- **Disabled text:** `#c4c4c4` — light gray signaling non-interactive or inactive elements. +- **Link color (default):** `#28587b` (primary blue, same as brand); some secondary links use `#5b88bd` (lighter blue). +- **Link color (hover):** An underline appears on hover (no color change). Underline-on-hover is the standard link interaction pattern. +- **Link color (visited):** Not styled — visited links look identical to unvisited links. + +### Borders & Dividers + +- **Default border:** `1px solid #d9d9d9` — a light, neutral gray. Used on buttons, separators, section dividers, and card outlines. +- **Divider / separator:** `#d9d9d9` is the primary separator color; `#c4c4c4` (slightly darker gray) appears on secondary dividers like header section separators. +- **Input border:** `1px solid #cbcbcb` — marginally darker than the general border color, giving form fields a bit more definition. +- **Input border on focus:** `#6d6d6d` — a medium-dark gray. Notably, focus does _not_ use the brand blue — it uses a neutral dark gray, keeping the field feeling calm rather than highlighted. + +### Status / Feedback + +- **Error / danger:** `red` (plain CSS red, used for form validation messages). +- **Success:** `#4caf50` (Material-style green for checkmarks); `#2db675` (progress bar fill); `#77a34b` / `#42c256` (glowing tooltip accents). +- **Warning:** Not used in the current design system. +- **Info:** Not used in the current design system. + +### UXCG Stage Colors + +Each UX Case Generator stage has a distinct color identity, used for icon strokes and category swatches: + +| Stage | Default stroke | Selected stroke | Swatch background | +| ------------- | ------------------------ | ----------------------- | ---------------------- | +| Team Assembly | `#6087ab` (steel blue) | `#6087ab` | `#bbe4f2` (light sky) | +| Development | `#186930` (forest green) | `#669e77` (sage) | `#c5eadd` (mint) | +| Marketing/BD | `#9e4579` (berry) | `#e5ccee` (lavender) | `#dbcad1` (dusty rose) | +| Released | `#c3a70c` (dark gold) | `#fff2ae` (pale yellow) | — | +| Monitoring | `#ff7300` (vivid orange) | `#ffd9b9` (peach) | — | + +### Bias Category Colors + +The four cognitive bias categories each have a background tint and border/accent color. Used across UXCore (bias explorer), UXCG (case connections), and UXCP (persona analysis): + +| Category | Background | Border/accent | Label text | +| ------------------------ | ----------------------- | ------------------------ | ------------------------ | +| Too much information | `#c7ebf8` (ice blue) | `#4c8cc1` (ocean blue) | `#4c8cc1` | +| Not enough meaning | `#c5eadd` (soft mint) | `#75b3b3` (teal) | `#75b3b3` | +| Need to act fast | `#e9dfe3` (blush gray) | `#80739b` (dusty purple) | `#573e48` (wine) | +| What should we remember? | `#e9e6ff` (pale violet) | `#8073ff` (indigo) | `#5c578d` (slate violet) | + +Note: These are intentionally pastel and desaturated — they color-code without screaming. + +### UXCP Priority Colors + +Priority levels (high/medium/low) are distinguished by icon shape, not by color. The active filter button uses the primary brand color (`#28587b` background, white text) regardless of which priority level is selected. + +--- + +## 3. Spacing + +### Base Unit + +No formal spacing token system. Values cluster around **multiples of 4px and 8px**, which is the effective base grid. This applies uniformly across UXCore, UXCG, UXCP, and UXCat. + +### Common Values + +| Token | Value | Typical use | +| ----- | ----- | ------------------------------------------------------------------- | +| XS | 4px | Tight gaps between inline elements, small margins | +| SM | 8px | Standard gaps in flex containers, icon spacing, small padding | +| MD | 16px | Mobile page padding, vertical section spacing, common inner padding | +| LG | 24px | Section vertical gaps, content area spacing | +| XL | 32px | Major section breaks, button group top margins | +| 2XL | 48px | Large section bottom margins, content-to-loader spacing | + +Intermediate values also appear: 10px (input inner padding), 14px (filter bar padding), 20px (modal body padding), 28px (modal side padding). + +### Page Layout + +- **Max content width:** 900px for all standard content pages across every tool (question lists, persona builders, quiz views, API docs, user profiles). The bias explorer (folder/tree view) in UXCore uses a wider 1360px max-width. +- **Page horizontal padding (desktop):** Content is centered via auto margins with `max-width: 100%`, so there is no fixed side padding — the 900px cap and centering handle it. +- **Page horizontal padding (mobile):** 16px on each side (≤800px). Some screens use 8px side margins or 20px padding at narrow widths. +- **Content top margin from header:** 94px on desktop (accounts for the 46px fixed header plus breathing room). Reduces to 28–35px on mobile where the header is no longer fixed. + +--- + +## 4. Breakpoints + +| Name | Value | Role | +| ------- | ----------------- | ---------------------------------------------------------------------- | +| Mobile | ≤800px | Primary mobile layout switch | +| Tablet | ≤1010px | Intermediate adjustments; desktop navigation collapses | +| Desktop | ≤1440px | Font-size scaling (16px → 14px on dense screens) | +| Wide | ≥2500px / ≥3500px | Large-display scaling (headings and body text grow via viewport units) | + +### What Changes at Each Breakpoint + +- **At mobile (≤800px):** Desktop horizontal navigation disappears, replaced by a tool-name dropdown (PageSwitcher). Content gets 16px side padding. Page titles shrink from 36px light to 24px semibold — the weight increase compensates for the smaller size to maintain hierarchy. Subtitles drop from 18px to 16px. Content stacks vertically. Search inputs lose their border-radius (become flat-edged to span full width). +- **At tablet (≤1010px):** Top content margin shrinks from 94px to ~28–35px. Multi-column layouts (like the bias folder view) collapse to single column. Navigation header simplifies. +- **At desktop (≤1440px):** A density pass — body text, labels, and controls scale from 16px to 14px in data-heavy components (inputs, filter bars, test results, API docs). This fits more content without scrolling on standard laptops. +- **At wide (≥2500px / ≥3500px):** The bias explorer and its labels scale up using viewport-relative units (e.g., headings grow to ~4vh, descriptions to ~1.5vh) so the interface doesn't feel tiny on ultrawide or 4K displays. + +--- + +## 5. Component Styles + +### Cards + +Cards are the primary content containers across all tools — used for bias detail boxes, UXCG case question wrappers, UXCP persona result sections, and general info panels. + +**At rest:** + +- Background: `#fff` (white, sitting on the `#fafafa` page canvas). +- Border radius: 8px for standalone content cards; 4px for inline interactive cards and smaller elements. +- Border: most cards rely on shadow alone (no visible border); some section cards use `1px solid #d9d9d9`. +- Shadow (resting): `0px 2px 8px rgba(0, 0, 0, 0.05)` — barely visible, just enough to lift the card off the background. +- Shadow (elevated/prominent): A multi-layered progressive shadow for high-importance cards: `0px 8px 17px rgba(0, 0, 0, 0.05), 0px 30px 30px rgba(0, 0, 0, 0.04), 0px 68px 41px rgba(0, 0, 0, 0.03), 0px 122px 49px rgba(0, 0, 0, 0.01), 0px 190px 53px rgba(0, 0, 0, 0)`. This creates a realistic, diffused paper-floating effect. +- Padding: 15px vertical, 20px horizontal (standard); 10px top/bottom, 16px left / 32px right (answer cards with action space). + +**On hover (interactive cards):** + +- Cards lift slightly — 8px upward shift with a smooth spring-like ease (`transform: translateY(-8px)`, `transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1)`). The cubic-bezier gives a slight overshoot that feels physical. +- No background color change on hover — the movement and shadow shift are the only feedback. + +**Selected state:** + +- Border becomes `2px solid #5b88bd` (secondary blue). +- A very faint blue wash appears: `rgba(147, 183, 255, 0.2)` background. + +**Grid spacing:** + +- Gaps between cards: 13px (category tag grids in UXCG); 3px (dense bias lists in UXCore explorer view). + +### Buttons + +Buttons come in several variants, all compact and understated — they don't shout. Shared across every tool. + +**Default (outline) button:** + +- Background: `#fff`. Text: `#000`. Border: `1px solid #d9d9d9`. Border-radius: 2px (very slightly rounded — nearly square). Padding: 6px 16px. Height: 32px. Font-size: 14px (inherited from label text scale). +- On hover: border shifts to `#28587b` and text shifts to `#28587b` — the button "activates" with the brand color. Transition: 200ms all properties. +- When disabled: `cursor: not-allowed`, no hover effect. + +**Primary (filled) button:** + +- Background: `#28587b` (brand blue). Text: `#fff`. Border: `1px solid #d9d9d9`. Border-radius: 2px. Same sizing as default. +- On hover: no visible change (already in its active color). The primary button is always "on." + +**Secondary (outline, softer) button:** + +- Background: `#fff`. Text: `rgba(0, 0, 0, 0.65)` (muted). Border: `1px solid #d9d9d9`. Border-radius: 4px (slightly more rounded than default). Padding: 8px 18px. + +**Orange (CTA) button:** + +- Background: `#de915b` (terracotta). Text: `#fff`. On hover: darkens to `#cd7232`. A warm, attention-drawing variant for start/submit actions. + +**Orange outline button:** + +- Background: `#fff`. Text/border: `#de915b`. On hover: fills to `#cd7232` background with white text — a smooth inversion. + +**Blue outline button:** + +- Background: `#fff`. Text/border: `#28587b`. On hover: fills to `#28587b` background with white text. + +**Big button variant:** + +- Height: 54px (45px on mobile). Used for major actions. + +**Disabled state:** + +- Background: `#d9d9d9`. Text: `#c4c4c4`. `cursor: not-allowed`. No hover effect. + +**Loading state:** + +- An inline spinner appears inside the button (CSS rotation: 360deg, 500ms, infinite, linear). + +**Transition:** All button properties animate at 200ms ease. + +### Input Fields + +Clean, minimal form inputs used across all tools. + +**At rest:** + +- Height: 32px minimum. Background: `#fff`. Border: `1px solid #cbcbcb`. Border-radius: 4px. Padding: 6px 10px. Font-size: 16px. +- Placeholder text: `#ababab` (light gray, clearly secondary). + +**On focus:** + +- Border darkens to `#6d6d6d` (a calm, neutral dark gray — not the brand blue). Outline removed. Any associated icon also shifts to `#6d6d6d`. +- This neutral focus state is deliberate: it confirms the field is active without creating a "selected" feeling that might conflict with validation states. + +**With icon:** + +- Right padding increases to 34px to make room for an inline icon (search, clear, etc.). + +**Error state:** + +- Error message appears below the field in `red`, 12px font, with a 200ms slide-in transition. + +**Responsive:** + +- Font-size drops to 14px at ≤1440px on dense screens. + +### Tags / Badges / Chips + +Small, pill-like labels used across tools — categorizing biases in UXCore, marking UXCG stages, and labeling UXCP relevance. + +- Border-radius: 2px (very subtly rounded — almost rectangular, not pill-shaped). +- Padding: 3px 17px (generous horizontal padding for readability). +- Font-size: 12px (default) or 14px (large variant, 32px height). +- Text color: `#fff` (always white — the background color carries the category meaning). +- Background: set per-category from the Bias Category Colors or UXCG Stage Colors tables (section 2). No default background — always determined by semantic context. +- Border: none. + +### Toggles / Switches + +A two-button segmented control (not a sliding iOS-style toggle). Used for binary choices like Yes/No in the UXCP persona builder. + +- Two buttons sit side by side, sharing a border. Left button has `border-radius: 4px 0 0 4px`, right has `0 4px 4px 0`. +- Each button: width 60px, font-size 14px. +- **Inactive:** white background, `#000` text, `1px solid #c4c4c4` border. +- **Active:** white background, `#5b88bd` text (secondary blue), border color shifts to `#5b88bd`. +- **Hover (inactive):** a whisper of blue tint appears: `rgba(53, 158, 255, 0.12)` background. + +### Navigation + +A minimal, horizontally tabbed header bar spanning the full viewport width. Shared across all four tools — the nav items are UXCore, UXCG, UXCP, and UXCat. + +**Desktop (>1010px):** + +- Height: 46px. Background: `#fff`. Box-shadow: `0px 2px 8px rgba(0, 0, 0, 0.05)` (the subtle "SM" shadow). +- Tabs are uppercase text, 14px, color `rgba(0, 0, 0, 0.85)`. +- **Active tab indicator:** A dark pill (`rgba(0, 0, 0, 0.85)` background, 4px border-radius, 33px height) that slides horizontally behind the active tab. Text turns to `#fafafa` (near-white) when active. The pill slides with `transition: transform 450ms cubic-bezier(0.22, 0.95, 0.35, 1)` — a fast-start, soft-landing ease that feels physical and satisfying. +- **Hover (inactive tabs):** `#f1f1f1` background tint with 4px border-radius. Subtle enough to not distract from the active indicator. + +**Mobile (≤1010px):** + +- The horizontal tab bar disappears entirely. It's replaced by a PageSwitcher — a single dropdown-style button showing the current tool name, 40px tall, `1px solid #c4c4c4` border, 4px border-radius, with 16px page padding. + +### Modals / Dialogs + +Clean, centered overlays used across all tools — for bias detail views (UXCore), case detail views (UXCG), persona confirmations (UXCP), and various settings. + +- **Backdrop:** `rgba(0, 0, 0, 0.35)` — a light dim that keeps the page context partially visible. +- **Modal panel:** `#fff` background. Border-radius: 4px. Border: `1px solid #cbcbcb`. Box-shadow: `0px 4px 16px rgba(0, 0, 0, 0.15)`. +- **Title:** 16px, color `#28587b` (brand blue). Alternate title styles: `#000` (strong), `#9e9e9e` (gray/subtle). +- **Body padding:** 16px top/bottom, 28px sides (generous horizontal space for reading). +- **Header area:** 13px top padding, 8px bottom padding, with a bottom border when present. +- **Close button:** Positioned 15px from the right edge. +- **Entry animation:** Modals appear immediately (no slide-in or scale animation). Some secondary modals use a slow 1s transition. +- **Z-index stacking:** Backdrop at z-45, modal content at z-80 (well above any dropdown or tooltip). + +### Tooltips + +Small, informational popovers that appear on hover for help icons and contextual hints. Shared across all tools. + +**Light variant (default):** + +- Background: `#fff`. Text: `#000`. Border: `1px solid #cbcbcb`. Border-radius: 4px. Box-shadow: `0px 4px 16px rgba(0, 0, 0, 0.15)`. Padding: 10px. Font-size: 14px. Max-width: 380px (preferred width 300px). +- Has a small CSS arrow (8px triangle) pointing toward the trigger element. + +**Dark variant:** + +- Background: `#000`. Text: `#fff`. Border-radius: 4px. Padding: 2px 6px. Font-size: 12px. Compact and label-like — used for quick, single-line hints. + +--- + +## 6. Icons & Images + +### Icon System + +- **No shared Icon wrapper component.** Icons are either inline SVG (React components) or static `.svg` files referenced by URL. This pattern is the same across all tools. +- **Common sizes:** 14–25px for UI icons. Typical: 20×20 (search), 25×25 (header nav), 16–18px (buttons and small actions), 13×17 (info/question marks). +- **Icon color:** Usually inherits text color via `fill: currentColor`, or is set explicitly (e.g., `#28587b` for brand-colored icons, `#5b88bd` for interactive states, `#fafafa` for icons on dark backgrounds). +- **Style:** Flat, outlined SVGs — not filled/solid. UXCG stage icons use stroke-based drawing on circles and paths. + +### Images + +- **Optimization:** Next.js `Image` component is the standard; however, many images set `unoptimized: true` for static SVGs and small assets. Remote image domains are whitelisted for user avatars (Google, Discord). +- **Illustration style:** SVG-based, flat/outlined. No photographic hero images. Background textures for UXCG category tags use small PNG cards (170×250px) with a neutral gray placeholder for unselected state. +- **Avatar shape:** Circular (`border-radius: 50%`). + +### Language Flags + +- Three flags for the language switcher: English (UK flag), Armenian, Russian — all SVGs. +- Main switcher size: 22×15px. Dropdown size: 16×13px. + +--- + +## 7. Motion & Transitions + +### Timing + +| Category | Duration | Use | +| ------------------------------ | ---------- | --------------------------------------------------------------------------- | +| Micro (hover, focus) | 150–250ms | Button color/border shifts, label opacity fades, input focus border changes | +| Component (expand, tab switch) | 300–320ms | Tooltip show/hide, search expand, card hover lift, dropdown open | +| Navigation (pill slide) | 450ms | Active tab indicator sliding between nav items | +| Page / section | 500–1000ms | Staggered content fade-ins (UXCat), slide-in panels, layout transitions | + +### Easing + +- **Default easing:** `ease-in-out` — used for most fade and slide animations across all tools. +- **Card hover lift:** `cubic-bezier(0.22, 1, 0.36, 1)` — a fast-start, overshoot-then-settle curve that feels springy and physical. +- **Nav pill slide:** `cubic-bezier(0.22, 0.95, 0.35, 1)` — similar springy feel but slightly more damped for a heavier, satisfying slide. +- **Loading spinner:** `cubic-bezier(0.5, 0, 0.5, 1)` — symmetrical ease for continuous rotation. +- **Dropdown open:** `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style standard easing. + +### Hover Effects + +- **Cards:** Lift upward by 8px with a springy ease (320ms). Shadow doesn't change explicitly — the movement itself creates the perception of increased depth. +- **Buttons:** Border and text color shift to brand blue (200ms). Orange buttons darken. Blue/orange outline buttons invert to filled on hover. +- **Links:** An underline appears (no color change, no fade — it's a binary appear/disappear). +- **Nav items:** A `#f1f1f1` background tint fades in with 4px border-radius. Associated icons go from 85% opacity to 100%. +- **Dropdown items / user menu:** `#f1f1f1` background highlight; user name text shifts to `#5b88bd`. + +### Loading States + +- **Primary loader (brain spinner):** A branded animation shared across the entire platform — three layered brain SVG images (brain outline, rotating circle, rotating gears) stacked at 50×50px, counter-rotating at 3s linear infinite. Displayed over a `rgba(0, 0, 0, 0.6)` overlay. This is the signature loading state. +- **Secondary loader (ring spinner):** A 32×32px CSS border-based spinner: `border: 4px solid #5b88bd`, animating at 1.2s with cubic-bezier easing. +- **Skeleton screens:** Used while content loads — flat `#ebebeb` rectangles with 4px border-radius that hold the space where content will appear. +- **Button loading:** An inline spinner rotates inside the button (500ms, linear, infinite). + +### Scroll Behavior + +- **Smooth scroll:** Used sparingly (only in specific selection views), not globally. +- **No scroll-triggered animations** — content is static once rendered. +- **Sticky elements:** Mobile view headers and folder-view sidebars use `position: sticky`. +- **Custom scrollbar:** Thin (6–8px), border-radius 5px, with a brand-tinted thumb (`rgba(40, 88, 123, 0.5)` — the primary blue at 50% opacity) on a transparent track. + +--- + +## 8. Shadows & Depth + +Shadows are always pure black at low opacity — never tinted. The system uses three tiers, shared across all tools: + +| Level | Value | Feel | Used for | +| ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------- | +| SM | `0px 2px 8px rgba(0, 0, 0, 0.05)` | Barely visible, just separates from background | Header bar, resting content cards, section headers | +| MD | `0px 4px 16px rgba(0, 0, 0, 0.15)` | Clearly floating, still subtle | Tooltips, dropdowns, user menus, modal panels, search popups | +| LG | `0px 8px 17px rgba(0, 0, 0, 0.05), 0px 30px 30px rgba(0, 0, 0, 0.04), 0px 68px 41px rgba(0, 0, 0, 0.03), 0px 122px 49px rgba(0, 0, 0, 0.01), 0px 190px 53px rgba(0, 0, 0, 0)` | Diffused, paper-floating-on-desk feel | Elevated content panels, answer cards, NPS survey, start-test cards | + +- **Shadow color:** Always pure black with opacity ranging from 0.01 to 0.15. No colored or tinted shadows. +- **Specialty:** Upward-facing shadow (`0px -4px 16px rgba(0, 0, 0, 0.15)`) for bottom-anchored action bars. See Section 10b for UXCat-specific achievement glow effects. + +--- + +## 9. Border Radius Scale + +| Token | Value | Used for | +| ----- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| None | 0px | Mobile search inputs (full-width, edge-to-edge) | +| SM | 2px | Buttons (default and primary), tags/badges, small inline elements. Nearly square — a signature detail. | +| MD | 4px | The dominant radius. Modals, tooltips, inputs, textareas, search fields, toggles, nav indicator pill, hover states, answer cards, filter buttons. | +| LG | 8px | Standalone content cards, result sections, statistics boxes. | +| XL | 15px | Achievement badge containers (UXCat-specific decorative element). | +| Full | 50% | Avatars, score indicators, loading spinners, circular decorative elements. | + +The design leans heavily on **4px** as the standard radius. The 2px radius on buttons is an intentional choice — it gives buttons a more precise, tool-like feel compared to the slightly softer 4px on containers. + +--- + +## 10. Z-Index Layers + +A simplified, recommended stacking order based on the patterns in the design: + +| Layer | Z-index | Elements | +| ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------ | +| Base content | 0 | Default stacking — page content, card interiors | +| Local lifts | 1–5 | Header chrome, input fields above their error messages, tooltip arrows, snackbar notifications | +| Dropdowns / tooltips | 10 | Tooltip popups, user dropdowns, modal overlays (bias detail, UXCG detail) | +| Fixed navigation | 44–50 | Dropdown menus, leaderboard overlays, language switcher, mobile nav arrows | +| Modal backdrop | 45 | Semi-transparent overlay behind modals | +| Modal content | 80 | Modal panels (above their own backdrop) | +| Special overlays | 100+ | Mobile user dropdowns, fullscreen achievement announcements | +| Full-screen spinner | 1000 | The brain-spinner loading overlay (must be above everything) | +| Achievement celebrations | 99999+ | Achievement badge pop-ups and gamification overlays (UXCat — intentionally sky-high to guarantee visibility) | + +Note: for new implementations, a tighter scale (e.g., 0/10/20/30/40/50/100/1000) following the same layer order would be more maintainable. + +--- + +## 10b. UXCat-Specific Styles + +UXCat is the quiz and gamification tool. It inherits the entire shared foundation above (fonts, colors, spacing, breakpoints, component styles, shadows, border-radius) but adds its own visual personality on top of it. + +### How UXCat Differs from the Platform Style + +| Aspect | Platform (UXCore/UXCG/UXCP) | UXCat | +| ---------------- | --------------------------- | ------------------------------------------------------------ | +| Dominant accent | Steel-blue `#28587b` | Orange `#de915b` for titles and CTAs | +| Heading weight | 300 (light) | Bold (for quiz titles and start-test headings) | +| Content entrance | Immediate (no animation) | Staggered fade-in sequence | +| Interactivity | Browse and explore | Select, answer, submit — quiz-flow interaction | +| Reward layer | None | Achievement badges, leaderboard, progress bars, certificates | +| Emotional tone | Calm, reference-like | Encouraging, slightly competitive | + +### Additional Fonts (UXCat only) + +- **Oswald** (bold, serif fallback) — used for achievement badge display names. A condensed, impactful typeface that signals "reward" and "accomplishment." +- **Dela Gothic One** (weight 400) — used for gamification ranking displays (leaderboard ranks, score labels). Thick and monumental — makes rank numbers feel important. +- **IBM Plex Sans** (Regular/SemiBold) and **Manrope ExtraLight** — used for certificate generation. These give certificates a formal, clean appearance distinct from the UI chrome. + +### Start Test Screen + +A full-viewport introduction screen shown before a quiz begins. Sets the mood for the UXCat experience. + +- **Layout:** Full-screen (100vw × 100vh) with a background illustration image covering the viewport. Content is centered in a white modal-like card floating over the image. +- **Title:** 36px, **bold** weight, color `#de915b` (orange accent), centered. This is the key visual difference — UXCat headings use orange and bold weight, not the thin steel-blue of other tools. +- **Description:** 16px, line-height 22px, centered, 25px side padding. +- **Duration badge:** Positioned top-center, 20px, `#c4c4c4` gray text. On mobile (≤901px), this repositions to a small pill in the top-right corner with `1px solid #c4c4c4` border, 4px border-radius, white background. +- **Card shadow:** Uses the LG multi-layered shadow for a prominent floating effect. +- **CTA button:** Orange button variant (`#de915b` → `#cd7232` on hover), centered below the description. + +### Quiz Flow (Ongoing Screen) + +The active quiz-taking interface. Content is broken into a question zone at the top and selectable answer cards below. + +**Question area:** + +- White card with SM shadow (`0px 2px 8px rgba(0, 0, 0, 0.05)`), minimum height 223px. +- Question text: 24px, weight 800 (the heaviest weight in the system), centered, `#000`. On mobile (≤800px), drops to 16px. +- Sub-question text: 18px, weight 700, centered. +- Bias title and description: 16px, line-height 25.6px, left-aligned, with bold weight for the title. +- Top padding: 80px on desktop (creates breathing room below the header). Removed on mobile. +- User selection is disabled (`user-select: none`) — the interface is interaction-only. + +**Answer cards:** + +- White cards with the LG multi-layered shadow, `2px solid #fafafa` border (nearly invisible at rest), 4px border-radius, minimum height 72px. +- Each card has a **prefix label** (e.g., "A", "B") in a dark pill: `#000000a6` background, `#fff` text, 2px border-radius, 0 8px padding. +- Answer text: 16px, `rgba(0, 0, 0, 0.65)` (slightly muted), centered. +- **Selected state:** Border becomes `2px solid #5b88bd`, background gets a faint blue wash `rgba(147, 183, 255, 0.2)`. A quick scale pulse plays (scale 1 → 0.99 → 1, 200ms) to give tactile feedback. +- **Skeleton state (loading):** Background `#ebebeb`, no text, same dimensions. On mobile, border changes to `1px solid #c4c4c4`. + +**Staggered entrance animation:** + +- When a new question loads, elements fade in sequentially: + - Question text: 500ms + - Bias title: 600ms + - Description: 700ms + - Sub-question: 800ms + - Answer cards: 900ms +- Each uses `opacity: 0 → 1`, `ease-in-out`. On exit, the same elements fade out in the same staggered order. +- Answers can also slide down from above (`translateY(-100%) → 0`, 400ms, `ease-in-out`) when new options appear. + +**Action buttons:** + +- Centered below answers, 32px top margin, 60px bottom padding, 17px gap between buttons. +- Fixed width: 205px per button (235px for Russian locale). + +### Calculating Results Screen + +A transitional screen shown while quiz results are being processed. + +- **Layout:** Full height (`100vh - 45px`), centered content, 125px top margin. +- **Ring spinner:** 32×32px, `border: 4px solid #5b88bd`, three staggered rings with `-0.45s`, `-0.3s`, `-0.15s` animation delays. Duration: 1.2s, `cubic-bezier(0.5, 0, 0.5, 1)`. +- **Title:** 24px, weight 600, line-height 28.8px. +- **Progress card:** White card with the LG multi-layered shadow, max-width 497px, 64px vertical padding. +- **Progress bars:** 2px height, `#e0e0e0` background track, `#2db675` (green) fill that animates from 0% to 100% width over 1 second. +- **Checkmark:** `#4caf50` green, 18px. + +### Test Results Screen + +Displays quiz results with score, reading recommendations, and next-test information. + +- **Header:** 396px tall white card with SM shadow, containing score visualization. +- **Body:** 900px max-width, 24px top margin, standard platform layout. +- **Result cards:** 8px border-radius, `1px solid #d9d9d9` border, MD shadow (`0 4px 16px rgba(0, 0, 0, 0.15)`), white background. +- **Reading list links:** 16px, `#000` text, 2px border-radius, ellipsis overflow at 380px max-width. Links stack with 8px gap. +- **Next test date:** `#a36aa4` (purple accent) text. +- **Action buttons:** 218px fixed width. Centered in the footer with 61px top margin. + +### Achievement Badges + +Pop-up reward notifications that appear when users unlock achievements during quizzes. These are the most visually distinctive elements in the entire platform — intentionally flashy compared to the understated core aesthetic. + +- **Container:** 420×140px, border-radius 15px, transparent background, z-index 99999 (above everything). +- **Inner wrapper:** 320×100px, border-radius 10px, gold background `rgb(177, 136, 56)` with asymmetric gold borders (top: `5px solid rgb(216, 188, 131)`, right: `5px solid rgb(168, 130, 53)`, bottom: `5px solid rgb(177, 134, 53)`). A metallic gradient fills the text area: `linear-gradient(-23deg, #9e7931, #cb9d4a 39%, #d1ad66 51%)`. +- **Badge name:** Oswald font, 24px (20px on mobile), `#fff` white text, uppercase. +- **Title label:** 15px (12px on mobile), `#fff` text, `rgb(151, 100, 0)` background, `2px solid rgb(166, 128, 53)` border, uppercase. +- **Glow effect:** Pulsing gold glow shadow: `0px 0px 4px rgb(252, 249, 218), 0px 0px 8px rgb(252, 249, 218), 0px 0px 16px rgb(252, 249, 218)`. On hover, glow intensifies (spreads to 8/12/20px). 4px border-radius on the glow elements. +- **Star decorations:** Rotating star images (5s ease-in infinite) with fade-in-and-out particles (2s linear infinite). +- **Entrance animations:** Slides in from the side (`translateX(100%) → 0`, 1s ease-in-out). Exits with `translateX(0) → translateX(100%)` + opacity fade, 500ms. +- **Mobile:** Container shrinks (reduced padding, smaller text — 12px title, 20px badge name, 75px wrapper height). + +### UXCat Page Layout + +The UXCat hub page (test selection, leaderboard) uses the same layout pattern as other tools: + +- Page title: 36px, weight 400, `#28587b` (brand blue — the hub page uses the platform color, not orange). +- Subtitle: 18px, `#9e9e9e`, 9px top padding. +- Description: 16px, line-height 19.6px. +- Content: 900px max-width, 86px top margin. +- **Accordion sections:** 32px bottom margin, 150% line-height. +- **Leaderboard:** 32px top margin, 62px bottom margin. +- On mobile (≤801px): title goes to 24px bold, subtitle to 16px, description hidden, accordion margin to 16px. + +### Achievement Banner (In-Quiz) + +A full-width gradient banner that appears during a quiz when an achievement is unlocked: + +- Background: `linear-gradient(261.09deg, rgba(195, 55, 100, 0.89) 0.45%, rgba(29, 38, 113, 0.89) 90.78%)` — a dramatic pink-to-navy gradient, the only gradient element in the entire UI. +- Padding: 14px vertical, 20px horizontal text. +- Text: 14px, white. +- Twinkling star emojis at corners, fading in and out (2–3s infinite). +- Z-index: 999999 (the absolute highest layer — must appear above quiz content and any existing badges). + +--- + +## 11. Do / Don't Rules + +# Section 11 — Do / Don't Rules (DRAFT) + +> Go through these. Keep the ones that match your vision, +> delete the ones that don't apply, reword anything that +> needs adjusting, and add your own. These are the rules +> that stop Claude from making "technically correct but +> visually wrong" output. + +## Always Do + +### Layout & Structure + +- Keep layouts flat and simple — content speaks, decoration doesn't +- Use generous whitespace between sections — let things breathe +- Maintain strict visual hierarchy: one clear focal point per section +- Align elements to a consistent grid — nothing should feel randomly placed +- Keep content containers at a predictable max-width — never let text stretch edge-to-edge + +### Typography + +- Use font weights exactly as specified — don't improvise with weights we don't use +- Keep headings lightweight (thin/light weight) — heavy headings feel wrong for UXCore/UXCG/UXCP (UXCat uses bold for quiz titles — that's the exception) +- Use uppercase only where the system specifies it (nav, labels, tags) — nowhere else +- Maintain consistent text sizes — don't introduce sizes between our scale steps + +### Color + +- Use color sparingly and with purpose — every colored element should mean something +- Keep the palette desaturated and cool — the platform is calm, not vibrant +- Use the steel-blue (#28587b) as the single dominant accent for UXCore/UXCG/UXCP — don't spread multiple accent colors +- For UXCat quiz screens, use orange (#de915b) as the dominant accent — but only on titles and CTAs, not everywhere +- Let white/near-white backgrounds do most of the work + +### Components + +- Cards should feel like paper — white, slightly lifted, clean edges +- Buttons should be small and compact — they don't shout +- Inputs should feel invisible until focused — minimal borders, no shadows at rest +- Tags/badges should be subtle color-coded labels, not attention-grabbing pills + +### Interactions + +- Keep hover effects subtle — a slight lift, a border color shift, nothing dramatic +- Use the exact easing curves specified — the springy cubic-bezier is part of the feel +- Transitions should be fast (150-300ms) — the UI should feel responsive, not animated + +## Never Do + +### The "AI Look" Killers (most important) + +- Never use gradient backgrounds on cards or sections — the platform uses flat white/gray only (the UXCat achievement banner is the sole exception) +- Never use colored shadows or glows (except the specific gold achievement glow in UXCat) +- Never use rounded pill buttons (large border-radius like 24px+) — our buttons are nearly square (2-4px radius) +- Never use hero sections with giant text and centered CTAs — the platform is a tool, not a landing page +- Never use decorative SVG blobs, waves, or organic shapes as backgrounds +- Never use glassmorphism, frosted glass, or backdrop-blur effects +- Never add decorative gradients to text +- Never use icon-heavy empty states with cute illustrations +- Never center-align body text — always left-align (except specific centered headings) + +### Typography + +- Never use font weights that aren't in our scale (no 900/black, no 100/hairline unless specified) +- Never use font sizes outside our type scale +- Never add text shadows +- Never use italic for emphasis — use weight or color instead + +### Color & Visual + +- Never use pure black (#000000) as a background — our darkest background is near-white gray +- Never introduce new accent colors — stay within the defined palette +- Never use high-saturation colors — everything in the platform is muted and desaturated +- Never use colored borders on cards — borders are always neutral gray or the specific selection blue +- Never use alternating row colors in lists/tables (zebra striping) unless it already exists in the design + +### Spacing & Layout + +- Never add more than 3 levels of visual nesting — keep the hierarchy shallow +- Never use full-bleed colored sections that span the viewport +- Never overlap elements for decorative effect — the layout is clean and grid-aligned +- Never use masonry layouts — our grids are uniform + +### Motion + +- Never add entrance animations to every element — staggered reveals are used only in UXCat quiz flow +- Never use bounce, elastic, or exaggerated easing — motion is subtle and physical +- Never animate color changes on hover — change happens instantly, only position/shadow animates +- Never add loading animations to elements that load instantly +- Never use parallax scrolling + +### Components + +- Never make buttons taller than specified — our buttons are compact (32px default, 54px max for big variant) +- Never add icons inside buttons unless the existing design does +- Never use floating action buttons (FABs) +- Never use toast notifications that slide in from corners (unless the project has them) +- Never add empty state illustrations — use simple text + +## Tone of the UI + +- *** + (Suggestion: "Quiet, structured, informational. A well-organized + reference tool — closer to a thoughtfully designed textbook than + a marketing page. The UI stays out of the way and lets dense + educational content be the focus. Nothing is flashy, playful, + or decorative without purpose. UXCat adds warmth and encouragement + to the quiz experience, but never crosses into playful or casual.") + +--- + +## Code Conventions + +This skill covers **visual design only** — colors, typography, spacing, component appearance, motion. + +For code conventions (component structure, file layout, prop typing, static data, locales, path aliases, testing, gotchas), see **`AGENTS.md`** at the repo root. That file is the authoritative source for how to write code in this repo. + +If a visual instruction here conflicts with a code convention in `AGENTS.md`, both apply — this skill governs how the UI _looks_, `AGENTS.md` governs how the code is _structured_. From 715f19b92f1bc1f96efe2b48ab63cf8b7081403b Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 20:25:43 +0400 Subject: [PATCH 03/21] fix(seo): align JSON-LD url with canonical and og:url MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit JSON-LD `url` was built from router.asPath, but and og:url already used the locale-prefixed originalUrl. They now match — search engines see one canonical URL across surfaces instead of two competing ones for the same page. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/SeoGenerator/SeoGenerator.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/SeoGenerator/SeoGenerator.tsx b/src/components/SeoGenerator/SeoGenerator.tsx index 7f5b467..e8257b9 100644 --- a/src/components/SeoGenerator/SeoGenerator.tsx +++ b/src/components/SeoGenerator/SeoGenerator.tsx @@ -190,11 +190,10 @@ const SeoGenerator: FC = ({ ? hrDescriptionRandom[0] : stripHTML(description); const favIcon = `${process.env.NEXT_PUBLIC_DOMAIN}${favIconPath}`; - const pageUrl = `${process.env.NEXT_PUBLIC_DOMAIN}${router.asPath}`; const schema = generateSchema( title, metaDescription, - pageUrl, + originalUrl, favIcon, createdDate, modifiedDate, From 2fb1b483a19c762b5fad881f01be78faaae1d346 Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 20:49:47 +0400 Subject: [PATCH 04/21] feat(qa): scaffold playwright e2e suite + scheduled CI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the Playwright test infrastructure that will replace Cypress once one clean weekly scheduled run lands on main (per QA_PLAN §5). Tests - 5 P0 specs: home renders, /uxcore /uxcg /uxcp loads, 404 invariants (HTTP status + page title — guards against the inline-404-at-200 regression). - 1 P2 spec: numeric-slug → canonical-slug redirect. - tests/p1/.gitkeep — placeholder; P1 tier still to write. Fixtures - analytics-blocker: 204s mixpanel / google-analytics / googletagmanager / analytics.ahrefs. - popup-silencer: stubs Strapi /api/setting with all-disabled flags so feedback/pleaseShare/helpToHelp popups never fire. Also exports an unused seedCalmCookies (test.ts inlines the equivalent). - cookie-banner-dismiss: pre-sets cookieBoxIsSeen=true to dismiss the consent banner. Originally written because the banner overlay blocked Playwright interactions and stuck test runs. The dismiss logic is now inlined into test.ts (alongside updateModalSeen), so this file is currently unused — kept as a reference for future P2 cookie-consent tests that need the banner visible. - test.ts: extends base with \`dismissCookieBanner\` option (default true); composes blockAnalytics + silencePopups on every page. Helpers - gotoSuccess / gotoNotFound — assert HTTP status AND page title. - axe.ts — placeholder; real AxeBuilder wrapper deferred to P2 #31. Global setup - Pre-warms next dev's per-route compile cache to avoid the ERR_ABORTED on cold dynamic-route hits described in tests/STATUS-2026-04-29.md §0. Config + CI - playwright.config.ts: 3 browsers, workers=1 locally (compile contention), webServer health-checks /uxcore (root 404s in dev). - .github/workflows/playwright-scheduled.yml: Mon 06:00 UTC + workflow_dispatch on main, against PLAYWRIGHT_STAGING_URL / PLAYWRIGHT_PRODUCTION_URL repo vars (Node 20). - eslint.config.mjs: disables react-hooks/rules-of-hooks under tests/ — Playwright fixtures use \`use()\` as a fixture-setup pattern (unrelated to the React hook). Docs: QA_PLAN.md, QA_RECON.md, AGENTS.md, LOCAL-DEV-NOTES.md, STATUS-2026-04-29.md, qa-config.yml. Cypress (cypress/, cypress-manual.yml) intentionally untouched — removal is gated on first clean Playwright run. Note: GitHub repo variables PLAYWRIGHT_STAGING_URL and PLAYWRIGHT_PRODUCTION_URL must be set at Settings → Secrets and variables → Actions → Variables before the workflow can run. Co-Authored-By: Claude Opus 4.7 (1M context) --- .github/workflows/playwright-scheduled.yml | 137 +++++++ AGENTS.md | 392 +++++++++++++++++++++ LOCAL-DEV-NOTES.md | 22 ++ eslint.config.mjs | 10 + package.json | 6 + playwright.config.ts | 60 ++++ qa-config.yml | 69 ++++ tests/STATUS-2026-04-29.md | 279 +++++++++++++++ tests/fixtures/analytics-blocker.ts | 20 ++ tests/fixtures/cookie-banner-dismiss.ts | 16 + tests/fixtures/popup-silencer.ts | 41 +++ tests/fixtures/test.ts | 38 ++ tests/global-setup.ts | 58 +++ tests/helpers/axe.ts | 13 + tests/helpers/goto.ts | 47 +++ tests/p0/home-renders.spec.ts | 39 ++ tests/p0/not-found.spec.ts | 24 ++ tests/p0/uxcg-loads.spec.ts | 23 ++ tests/p0/uxcore-loads.spec.ts | 29 ++ tests/p0/uxcp-loads.spec.ts | 17 + tests/p1/.gitkeep | 0 tests/p2/numeric-slug-redirect.spec.ts | 54 +++ 22 files changed, 1394 insertions(+) create mode 100644 .github/workflows/playwright-scheduled.yml create mode 100644 AGENTS.md create mode 100644 LOCAL-DEV-NOTES.md create mode 100644 playwright.config.ts create mode 100644 qa-config.yml create mode 100644 tests/STATUS-2026-04-29.md create mode 100644 tests/fixtures/analytics-blocker.ts create mode 100644 tests/fixtures/cookie-banner-dismiss.ts create mode 100644 tests/fixtures/popup-silencer.ts create mode 100644 tests/fixtures/test.ts create mode 100644 tests/global-setup.ts create mode 100644 tests/helpers/axe.ts create mode 100644 tests/helpers/goto.ts create mode 100644 tests/p0/home-renders.spec.ts create mode 100644 tests/p0/not-found.spec.ts create mode 100644 tests/p0/uxcg-loads.spec.ts create mode 100644 tests/p0/uxcore-loads.spec.ts create mode 100644 tests/p0/uxcp-loads.spec.ts create mode 100644 tests/p1/.gitkeep create mode 100644 tests/p2/numeric-slug-redirect.spec.ts diff --git a/.github/workflows/playwright-scheduled.yml b/.github/workflows/playwright-scheduled.yml new file mode 100644 index 0000000..f21895c --- /dev/null +++ b/.github/workflows/playwright-scheduled.yml @@ -0,0 +1,137 @@ +name: Playwright Tests (scheduled) + +# Weekly scheduled run on main + on-demand via workflow_dispatch. +# Does NOT run on PRs (by design — see QA_PLAN.md §7). +# +# TODO (Mary, one-time setup): configure these repo variables at +# Settings → Secrets and variables → Actions → Variables: +# - PLAYWRIGHT_STAGING_URL (e.g. https://staging.uxcore.io) +# - PLAYWRIGHT_PRODUCTION_URL (e.g. https://uxcore.io) +# Never hardcode URLs or credentials in this file. + +on: + schedule: + # Monday 06:00 UTC = 10:00 Yerevan (UTC+4) + - cron: '0 6 * * 1' + workflow_dispatch: + inputs: + environment: + description: Environment to test against + type: choice + required: true + default: staging + options: + - staging + - production + scope: + description: Which tier to run + type: choice + required: true + default: all + options: + - all + - P0 + - P1 + - P2 + spec_path: + description: 'Override: specific test path or grep pattern (leave blank to use scope)' + type: string + required: false + default: '' + browser: + description: Browser to use + type: choice + required: true + default: chromium + options: + - chromium + - firefox + - webkit + - all + +jobs: + playwright: + runs-on: ubuntu-latest + timeout-minutes: 30 + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + # Aligned with Dockerfile (node:20.19.0-alpine). README's 18.18.0 + # is stale; Node 20 is the canonical runtime for this repo. + node-version: 20 + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Resolve test path from scope + id: scope + shell: bash + run: | + spec_path="${{ inputs.spec_path }}" + scope="${{ inputs.scope || 'all' }}" + + if [ -n "$spec_path" ]; then + echo "path=$spec_path" >> "$GITHUB_OUTPUT" + else + case "$scope" in + P0) echo "path=tests/p0" >> "$GITHUB_OUTPUT" ;; + P1) echo "path=tests/p1" >> "$GITHUB_OUTPUT" ;; + P2) echo "path=tests/p2" >> "$GITHUB_OUTPUT" ;; + *) echo "path=tests" >> "$GITHUB_OUTPUT" ;; + esac + fi + + - name: Resolve browser flag + id: browser + shell: bash + run: | + browser="${{ inputs.browser || 'chromium' }}" + if [ "$browser" = "all" ]; then + # Empty flag → Playwright runs every project in config. + echo "flag=" >> "$GITHUB_OUTPUT" + echo "install=chromium firefox webkit" >> "$GITHUB_OUTPUT" + else + echo "flag=--project=$browser" >> "$GITHUB_OUTPUT" + echo "install=$browser" >> "$GITHUB_OUTPUT" + fi + + - name: Install Playwright browsers + run: yarn playwright install --with-deps ${{ steps.browser.outputs.install }} + + - name: Resolve base URL + id: url + shell: bash + run: | + env="${{ inputs.environment || 'staging' }}" + case "$env" in + production) echo "base=${{ vars.PLAYWRIGHT_PRODUCTION_URL }}" >> "$GITHUB_OUTPUT" ;; + *) echo "base=${{ vars.PLAYWRIGHT_STAGING_URL }}" >> "$GITHUB_OUTPUT" ;; + esac + + - name: Verify base URL is configured + shell: bash + run: | + if [ -z "${{ steps.url.outputs.base }}" ]; then + echo "::error::Base URL is empty. Configure PLAYWRIGHT_STAGING_URL / PLAYWRIGHT_PRODUCTION_URL as repo variables." >&2 + exit 1 + fi + + - name: Run Playwright tests + env: + PLAYWRIGHT_BASE_URL: ${{ steps.url.outputs.base }} + PLAYWRIGHT_NO_SERVER: '1' + CI: 'true' + run: yarn playwright test ${{ steps.scope.outputs.path }} ${{ steps.browser.outputs.flag }} + + - name: Upload Playwright HTML report + if: failure() + uses: actions/upload-artifact@v4 + with: + name: playwright-report + path: playwright-report/ + retention-days: 14 diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..cf11bbe --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,392 @@ +# AGENTS.md — UXCoreOSS + +How to work in this codebase. Read this before writing code. + +For visual / styling work, defer to the **uxcore-style skill** at `.claude/skills/uxcore-style/SKILL.md`. It auto-loads in Claude Code; in other agents (Cursor), open it manually whenever you write or modify styles. + +--- + +## Stack + +- **Next.js 15.0.5** — Pages Router (`src/pages/`), not App Router +- **React 19**, **TypeScript 5.2** (`strict: false`, `noImplicitAny: false`) +- **Sass + CSS Modules** (`*.module.scss`). No Tailwind, no CSS-in-JS, no styled-components. +- **yarn** is the package manager. Never use npm. +- **No state library** — global state lives in custom listener-based hooks (`useGlobals`, `useUXCoreGlobals`, `useUXCatGlobals`, `useUXCGGlobals`) and `GlobalContext`. +- **No data-fetching library** — plain `fetch` in `src/api/`. +- **Cypress 14** for E2E. No unit tests, no Jest, no Vitest. +- **i18n is custom** — Next.js built-in locales (`en`, `ru`, `hy`), no next-i18next or react-intl. +- **SVGs are written manually as `.tsx` components** in `src/assets/icons/`. No `@svgr/webpack`. + +--- + +## Folder structure + +``` +src/ +├── pages/ # Next.js routes (Pages Router) +├── components/ # PascalCase dirs, one component per dir +│ ├── _biases/ # bias-feature-only components +│ ├── _uxcp/ # UXCP-feature-only components +│ └── uxcg/ # UXCG-feature-only components +├── layouts/ # page-level layout wrappers (PascalCase dirs) +├── data/ # i18n static content (TS only, never JSON) +├── hooks/ # flat list of custom hooks (use*.ts) +├── lib/ # shared utilities by domain +├── utils/ # additional utilities (same conventions as lib/) +├── api/ # API clients (one file per domain) +├── constants/ # app-wide constants — NOTE: this folder may not exist; see "Path aliases" below +├── local-types/ # shared TS types +├── styles/ # globals.scss, _variables.scss, _animations.scss +└── assets/icons/ # SVG icon components written as .tsx +``` + +**Underscore / lowercase prefix:** Components used by only one feature go in `components/_biases/`, `components/_uxcp/`, or `components/uxcg/`. Shared components stay flat in `components/`. Convention, not lint-enforced — follow it anyway. + +--- + +## Component pattern + +Every component is its own folder with: + +``` +ComponentName/ +├── index.ts # barrel +├── ComponentName.tsx +└── ComponentName.module.scss +``` + +`index.ts` is always: + +```ts +import ComponentName from './ComponentName'; +export default ComponentName; +``` + +### Hard rules + +1. **Default export only.** Named exports break the barrel pattern. +2. **Props type is `ComponentNameProps` interface**, declared inline above the component. No `T`-prefix. No `.types.ts` file unless the type is large (10+ fields) or shared across files. +3. **Styles colocated** as `ComponentName.module.scss`, imported as `import styles from './ComponentName.module.scss'`. +4. **Use `cn` (classnames)** for conditional classes: `cn(styles.Button, { [styles.Primary]: variant === 'primary' })`. +5. **Sub-components nest** with the same structure: `Table/TableSearch/TableSearch.tsx`. +6. **Function components only.** No class components. +7. **`data-cy` attributes** on interactive elements for Cypress (`data-cy="open-close-accordion-button"`). + +### Skeleton + +```tsx +import cn from 'classnames'; + +import styles from './ComponentName.module.scss'; + +interface ComponentNameProps { + label: string; + variant?: 'primary' | 'secondary'; +} + +const ComponentName = ({ label, variant = 'primary' }: ComponentNameProps) => { + return ( +
+ {label} +
+ ); +}; + +export default ComponentName; +``` + +> The codebase has **35 components still using `T`-prefix** (`TButton`, `TInput`, `TTooltip`, etc.). That is legacy. New components and modifications use `ComponentNameProps` interface. + +--- + +## Layouts + +Layouts live in `src/layouts/` (PascalCase dirs, same structure as components). They receive data from a page and compose components. + +Existing layouts: `UXCoreLayout`, `UXCatLayout`, `UXCGLayout`, `UXCPLayout`, `CoreViewLayout`, `FolderViewLayout`, `OngoingLayout`, `StartTestLayout`, `TestResult`, `UserProfile`, `ApiLayout`, `CertificateLayout`, `CalculatingResults`, `Layout`. + +The root `Layout` at `src/layouts/Layout.tsx` wraps all pages (rendered in `_app.tsx`). It provides Header, cookie box, and app-wide chrome. Feature layouts nest inside it. + +Layouts use `ComponentName.types.ts` more often than components do, because their props tend to be large page-data shapes. + +--- + +## Static data (i18n content) + +All static content lives in `src/data/` as TypeScript. **Never JSON, never MDX.** + +``` +src/data/featureName/ +├── en.ts +├── ru.ts +├── hy.ts # optional — see locales below +└── index.ts +``` + +### Barrel + +```ts +import en from './en'; +import hy from './hy'; +import ru from './ru'; + +const locales = { en, ru, hy } as const satisfies { + en: typeof en; + ru: typeof ru; + hy: typeof hy; +}; + +export default locales; +``` + +### Consumption + +```ts +import biasesLocalization from '@data/biases'; +const { locale } = useRouter() as TRouter; +const { heading, mainTitle } = biasesLocalization[locale]; +``` + +--- + +## Locales + +Three locales: `en` (default), `ru`, `hy`. + +**Armenian (`hy`) is treated as an English fallback** at the application level. 12 of 44 data directories are missing `hy.ts` entirely (`completionBar`, `downloadButton`, `formPopup`, `fullscreenButton`, `genderModalData`, `imageModule`, `leaderboard`, `seo`, `startTest`, `statistics`, `uxcgQuestions`, `uxcoreApi`). + +**Don't require `hy.ts` in new data dirs** — if missing, the runtime falls back to `en`. If you do create `hy.ts`, copy from `en.ts` so the shape matches and add a `// TODO HY translation` comment. + +**Two cross-module shims exist** (`completionBar/index.ts` and `formPopup/index.ts` import `hy` from unrelated modules). Don't add new shims — just omit `hy.ts`. + +**Strapi-fetched data uses field-per-locale columns** (`titleEn`, `titleRu`, `titleHy`), not the locale-keyed object pattern. Don't mix the two models. + +--- + +## Path aliases + +Use these instead of relative imports past one level: + +| Alias | Path | +| ---------------- | -------------------- | +| `@components/*` | `src/components/*` | +| `@data/*` | `src/data/*` | +| `@hooks/*` | `src/hooks/*` | +| `@layouts/*` | `src/layouts/*` | +| `@lib/*` | `src/lib/*` | +| `@api/*` | `src/api/*` | +| `@styles/*` | `src/styles/*` | +| `@local-types/*` | `src/local-types/*` | +| `@icons/*` | `src/assets/icons/*` | + +> **Mismatch warning:** `@constants` appears in the ESLint import-sort config but is **not defined in `tsconfig.json`**. Do not use `@constants/*` imports. If you need a constants folder, define the alias in `tsconfig.json` first. `@utils` is in neither — also unavailable. + +**Import order is auto-fixed** by `eslint-plugin-simple-import-sort` on commit: + +side effects → node builtins → third-party → `@styles` → `@constants` → `@local-types` → `@hooks` → `@lib` → `@api` → `@data` → `@icons` → `@components` → `@layouts` → relative → `.scss` style imports. + +**Only 3 deep relative imports exist** in the codebase. Don't add more — always use aliases. + +--- + +## Pages & routing + +- **Pages Router only** (`src/pages/`). Never add App Router files (`app/`, `'use client'`, `next/navigation`). +- **Adding a page:** create `src/pages/{path}.tsx` or `src/pages/{path}/index.tsx`. The root `` from `_app.tsx` applies automatically. +- **Data fetching:** prefer `getStaticProps` with ISR (`revalidate: 5` or `revalidate: 10`). The site is statically generated. Don't introduce `getServerSideProps` unless data must be fresh per-request. +- **Dynamic routes:** `[slug].tsx` for biases/UXCG, `[userId]` for profiles, `[name]/[hash]/[isTeamMember]` for UXCP personas. Use `getStaticPaths` with `fallback: 'blocking'`. +- **SEO:** use the existing `SeoGenerator` component. Don't add `next-seo`. + +### SSR-safety + +Anything that touches `localStorage`, `sessionStorage`, or `window` at module top level will break SSR with hydration mismatches. Wrap with `dynamic(() => import('...'), { ssr: false })` or move into `useEffect`. + +The codebase uses `dynamic(..., { ssr: false })` extensively (18 instances across 10 files, mostly in `_app.tsx`, `UXCoreLayout.tsx`, `UXCPLayout.tsx`, and achievement components). Match those patterns. + +--- + +## Styling + +**Source of truth:** + +1. If the user gives explicit visual instructions (colors, spacing, sizes), follow them exactly. +2. If they don't, defer to the **uxcore-style skill** (`.claude/skills/uxcore-style/SKILL.md`) and read it before writing styles. +3. **Do not invent values. Do not copy hardcoded hex / px from neighboring components just because they exist.** + +The codebase has hardcoded colors, breakpoints, and spacing scattered across SCSS files. That is legacy, not a pattern to extend. New code aligns to the design skill; old code stays as-is until touched. + +### Code-side notes + +- CSS Modules + SCSS, colocated per component. +- `_variables.scss` contains only `@font-face` declarations — no color or spacing tokens. +- `_uxcore-labels.scss` is the only SCSS partial with reusable color variables (4 bias-category color pairs). +- Dark theme: toggled by adding `darkTheme` class to `document.body` via `useGlobals()`. Components apply `{ [styles.darkTheme]: isDarkTheme }`. +- Animations live in `_animations.scss` as utility classes (`.animate-fadeIn`, `.animate-slideDown`, etc.) and 13 keyframe animations. +- Responsive design: per-component media queries in each `.module.scss`. Not centralized. +- **SCSS class naming:** PascalCase (`.PreloaderContainer`, `.Accordion`, `.Title`). The codebase mixes PascalCase and camelCase — prefer PascalCase for new code. + +--- + +## State + +- No Redux, Zustand, Jotai, SWR, React Query. Don't add one. +- **Global state hooks:** `useGlobals` (dark theme, sidebar, fullscreen), `useUXCoreGlobals`, `useUXCatGlobals`, `useUXCGGlobals`. Each returns a `[actions, state]` tuple. +- **App-level state:** managed in `_app.tsx` via `useState`, passed through `GlobalContext` (from `src/components/Context/GlobalContext`). +- **Authentication:** `next-auth` `SessionProvider` wraps the app. + +--- + +## Testing + +- **Cypress E2E only.** Specs in `cypress/e2e/{feature}/`. +- Naming: `{feature}.cy.ts`, `{feature}-mobile.cy.ts`, `{feature}-{locale}.cy.ts`, special tests as `.spec.cy.ts`. +- **Use existing custom commands** from `cypress/support/commands.ts` before writing new ones: + +| Command | Purpose | +| ----------------------------- | ------------------------------------------------------- | +| `loginBySession` | Authenticates test user via POST, stores session cookie | +| `checkExternalLinks` | Validates external URL format and reachability | +| `checkAllLinks` | Validates all links across multiple routes | +| `checkSocialMediaLink` | Validates social link domain/href/target | +| `checkH1` | Asserts H1 contains expected text | +| `validateAllImages` | Validates images return successful status codes | +| `scrollToSection` | Scrolls via button click, verifies position | +| `uxcoreSearchBehavior` | Tests UX Core search input + results | +| `uxcgTestSearchBehavior` | Tests UXCG search with valid/invalid words | +| `uxcpSearchBehavior` | Tests UXCP search with valid/invalid words | +| `uxcpAddBiases` | Tests adding/removing biases in UXCP | +| `openLoginModalByButtonClick` | Opens login modal, closes by clicking outside | +| `showCopiedTooltip` | Tests copy button → "Copied!" tooltip | +| `showMoreAndLess` | Tests expand/collapse buttons | +| `playAudio` | Plays/pauses audio via pyramid play icon | +| `checkPyramidChange` | Tests pyramid color changes on click | +| `checkSwiperSlide` | Tests swiper navigation arrows | +| `clickArrowWhenReady` | Clicks nav arrows when enabled, verifies URL change | + +- **Don't add Jest, Vitest, or component tests.** Not wired up. +- CI only runs `tsc --noEmit` on PRs — Cypress is not gated. Run E2E locally before pushing. + +--- + +## Naming conventions + +- **Components / files / folders:** PascalCase (`Accordion`, `Modal`, `Spinner/Spinner.tsx`). +- **Feature groupings:** lowercase or underscore-prefixed (`uxcg/`, `_biases/`, `_uxcp/`). +- **Hooks:** `use*` prefix, one hook per file, `src/hooks/` flat. +- **Event handlers:** `handle*` prefix (`handleClick`, `handleMouseEnter`). +- **Boolean props:** `is*`, `has*`, `show*` (`isOpen`, `isDarkTheme`, `hasBorder`, `showLeftIcon`). +- **Props types:** `ComponentNameProps` interface (no `I` prefix, no `T` prefix for new code). +- **API files:** lowercase (`biases.ts`, `strapi.ts`). +- **Lib / utils files:** lowercase (`helpers.ts`, `cookies.ts`, `uxcat-helpers.ts`). + +--- + +## Generated files — do not edit by hand + +| File | Generated by | Trigger | +| ---------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------- | +| `public/uxcore_/llms.txt` | `scripts/generate-llms.ts` | `yarn generate:llms` | +| `public/uxcore_/llms-full.txt` | `scripts/generate-llms-full.ts` | `yarn generate:llms:full` | +| `public/uxcore_/llms-full-pages/**/*.md` (168 files) | `scripts/generate-llms-pages.ts` | `yarn generate:llms:pages`; CI: `.github/workflows/generate-llms.yml` (manual `workflow_dispatch`) | + +Edit the generator scripts, not the output. + +--- + +## Environment variables + +`.env.example` lists 16 variables with no documentation. Ask before assuming. + +**Client-side (`NEXT_PUBLIC_*`):** `NEXT_PUBLIC_ENV`, `NEXT_PUBLIC_INDEXING`, `NEXT_PUBLIC_MIXPANEL_TOKEN`, `NEXT_PUBLIC_DOMAIN`, `NEXT_PUBLIC_API_KEY`, `NEXT_PUBLIC_STRAPI`, `NEXT_PUBLIC_UXCAT_API`. + +**Server-only:** `NEXTAUTH_SECRET`, `NEXTAUTH_URL`, `STRAPI_URL`, `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET`, `LINKEDIN_CLIENT_ID`, `LINKEDIN_CLIENT_SECRET`, `DISCORD_CLIENT_ID`, `DISCORD_CLIENT_SECRET`. + +`NEXT_PUBLIC_INDEXING` toggles GA tracking. `NEXT_PUBLIC_ENV` is `local` / `staging` / `prod`. + +--- + +## next.config.js notes + +- **`assetPrefix`:** `''` in dev, `/uxcore_next` otherwise. Affects Next.js internal assets only — not files in `public/`. +- **Rewrites:** `/assets/*`, `/fonts/*`, `/audio/*`, `/static/*`, `/robots.txt`, `/llms.txt`, `/llms-full.txt`, `/llms-full-pages/*` all map to `/uxcore_/...`. Both paths work; canonical form is `/uxcore_/`. +- **`images.domains`:** `lh3.googleusercontent.com`, `cdn.discordapp.com`, `strapi.keepsimple.io`, `staging-strapi.keepsimple.io`. To allow new image hosts, add here. +- **i18n:** locales `['en', 'ru', 'hy']`, default `en`. +- **Production builds strip `console.*`** (except `console.error`) via `compiler.removeConsole`. Don't rely on logs in prod. + +--- + +## Things to never do + +- ❌ Use npm (use yarn) +- ❌ Add App Router files (`app/`, `'use client'`, `next/navigation`) +- ❌ Add a state library (Redux, Zustand, Jotai, SWR, React Query) +- ❌ Use named exports for components / layouts +- ❌ Use `T`-prefix for new prop types (use `ComponentNameProps` interface) +- ❌ Use JSON or MDX for static content (TS only) +- ❌ Use `@svgr/webpack` or `` — SVGs are hand-written `.tsx` components +- ❌ Use `@constants/*` or `@utils/*` aliases — not defined in `tsconfig.json` +- ❌ Copy hardcoded hex / px from neighboring components — defer to the uxcore-style skill +- ❌ Add Jest, Vitest, `next-i18next`, `next-seo` +- ❌ Read `localStorage` / `sessionStorage` / `window` at module top level +- ❌ Skip the `index.ts` barrel when creating a component +- ❌ Add cross-module `hy.ts` shims (`import hy from '@data/otherFeature/hy'`) — just omit `hy.ts` +- ❌ Edit `public/uxcore_/llms*.txt` or `llms-full-pages/*` by hand + +--- + +## Empty barrels (existing bugs — fix when touched) + +These barrels are 0 bytes or missing the default re-export. If you touch any of these components, add the proper barrel: + +- `src/components/_biases/BiasEnvironment/index.ts` (0 bytes) +- `src/components/CalculatingResults/index.ts` (0 bytes) +- `src/components/NewUpdateModal/index.ts` (0 bytes) +- `src/components/ContentGenerator/elements/index.ts` (no default export — re-exports multiple sub-components, intentional) +- `src/components/CustomModal/contentTypes/index.ts` (no default export — re-exports multiple sub-components, intentional) + +`src/hooks/` has no `index.ts` files at all — that's the pattern, hooks are imported by full path. + +--- + +## Known TODOs (don't accidentally "fix" these) + +These are tracked. Don't refactor them away as part of unrelated work: + +- `src/api/rating.ts:7` — keep data to avoid multiple requests +- `src/lib/helpers.ts:222` — passive VH functionality +- `src/layouts/FolderViewLayout/FolderViewLayout.tsx:121` — unnecessary state check +- `src/layouts/UXCatLayout/UXCatLayout.tsx:282` — Badge problem +- `src/layouts/TestResult/TestResultLayout.tsx:68` — incorrectAnswers type +- `src/layouts/UserProfile/UserProfile.types.ts:20` — add type +- `src/components/SelectImageModal/SelectImageModal.tsx:21` — handle images +- `src/components/UXCoreFeedbackModal/UXCoreFeedbackModal.tsx:38` — move to api page +- `src/components/Result/Result.tsx:93` — slug from backend +- `src/pages/user/[userId]/index.tsx:186` — stat error + +**HYTranslation TODOs** (10 total — Armenian translation gaps): `src/local-types/data.ts:8,74,132`; `src/lib/helpers.ts:70`; `src/pages/uxcg/index.tsx:81`; `src/components/SeoGenerator/SeoGenerator.tsx:98,144`; `src/components/UXCGModalMobile/UXCGModalMobile.tsx:42`; `src/components/FormPopup/FormPopup.tsx:20`; `src/components/_biases/ZoomBox/ZoomBox.tsx:59`. + +--- + +## Gotchas + +1. **`_app.tsx` is a multi-hundred-line monolith** — handles SessionProvider, GlobalContext, account/biases/questions/settings fetching, GA + Mixpanel init, route-change spinner (500ms debounce), modal timing for feedback / share / help-to-help / new-update / christmas popups, cookie consent, body class theme toggling, scroll style toggling for articles. Any new global concern goes here. Touch carefully. +2. **`GlobalContext` lives at `src/components/Context/GlobalContext`** — not in a top-level `context/` folder. It's imported directly (bypassing barrels) in 8 files; that's the established pattern for context. +3. **55 imports bypass component barrels** (importing `.tsx` directly through aliases). Worst offenders: `@components/Context/GlobalContext` (8x), `UXCPLayout.tsx` (12 such imports). Use barrels for new imports. +4. **`forceConsistentCasingInFileNames`** — match existing casing exactly; case mistakes work locally but break Linux CI. +5. **`strict: false`** + **`noImplicitAny: false`** + **`@typescript-eslint/no-explicit-any: off`** — type safety is loose. `any` is allowed but discouraged for new code. +6. **`@ts-ignore` is allowed**; ESLint warns on `@ts-expect-error`. +7. **Asset paths:** prefer `/uxcore_/...` form. Both `/assets/foo.png` and `/uxcore_/assets/foo.png` work via rewrites, but the canonical form is the latter. + +--- + +## When uncertain + +- Find the closest existing component or layout and match its structure. +- If a pattern in this file conflicts with what you see in the codebase, **this file wins** for new code. Old code stays as-is until touched. +- If a pattern isn't covered here at all, stop and ask before inventing one. diff --git a/LOCAL-DEV-NOTES.md b/LOCAL-DEV-NOTES.md new file mode 100644 index 0000000..8bcfc17 --- /dev/null +++ b/LOCAL-DEV-NOTES.md @@ -0,0 +1,22 @@ +> Scratch notes — canonical plan lives in [QA_PLAN.md §7 PHASE PLAN](QA_PLAN.md#7-phase-plan). + +## Local-dev environment quirks (from Phase 1 investigation) + +1. middleware.ts does not execute in local dev + (.next/server/middleware-manifest.json is empty). Legacy + numeric slug redirects still work because the same logic is + duplicated in getStaticProps inside src/pages/uxcore/[slug].tsx + and src/pages/uxcg/[slug].tsx. + + Worth investigating someday: is the duplication intentional + belt-and-suspenders, or did middleware silently stop working + and nobody noticed because the duplicate covered for it? If + middleware is truly broken everywhere, you have one active + implementation instead of two. + +2. / returns 404 in yarn dev because no pages/index.tsx exists + and middleware's / branch doesn't fire locally. Production + serves / via deployment infrastructure (reverse proxy or + similar). Not an app bug — but the local dev experience is + broken. Consider creating a minimal pages/index.tsx that + renders a home page so local dev mirrors production. diff --git a/eslint.config.mjs b/eslint.config.mjs index dd95727..616ab64 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -79,4 +79,14 @@ export default [ 'import/newline-after-import': 'error', }, }, + + // Playwright fixtures use a `use()` callback as a fixture-setup pattern + // (the eponymous React hook is unrelated). The lint plugin can't tell + // them apart, so disable the React-hooks rule under tests/. + { + files: ['tests/**/*.{ts,tsx}'], + rules: { + 'react-hooks/rules-of-hooks': 'off', + }, + }, ]; diff --git a/package.json b/package.json index 6a6a6e8..5ee7249 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,10 @@ "test:firefox": "cypress run --browser firefox", "test:edge": "cypress run --browser edge", "test:all": "npm run test:chrome && npm run test:firefox && npm run test:edge", + "test:e2e": "playwright test --project=chromium", + "test:e2e:ui": "playwright test --project=chromium --ui", + "test:e2e:p0": "playwright test --project=chromium tests/p0", + "test:e2e:report": "playwright show-report", "prepare": "husky install", "generate:llms": "cross-env LLMS_MODE=curated ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms.ts", "generate:llms:full": "ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms-full.ts", @@ -72,9 +76,11 @@ "victory": "36.3.0" }, "devDependencies": { + "@axe-core/playwright": "^4.11.2", "@babel/core": "7.19.3", "@cypress/react": "^9.0.1", "@cypress/vite-dev-server": "^6.0.3", + "@playwright/test": "^1.59.1", "@types/amplitude-js": "8.16.2", "@types/classnames": "2.2.11", "@types/lodash.debounce": "4.0.7", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..46f6c40 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,60 @@ +import { defineConfig, devices } from '@playwright/test'; + +// Local: `yarn dev` on port 3005. CI: hit a deployed URL via PLAYWRIGHT_BASE_URL. +const baseURL = process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:3005'; + +// CI sets PLAYWRIGHT_NO_SERVER=1 to skip the local webServer and target a deployed URL. +const skipWebServer = process.env.PLAYWRIGHT_NO_SERVER === '1'; + +export default defineConfig({ + testDir: './tests', + globalSetup: './tests/global-setup.ts', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 1 : 0, + // 1 worker locally: `next dev` compile-on-first-hit contention causes + // intermittent net::ERR_ABORTED flakes when multiple workers hammer the + // same uncompiled dynamic route at once. CI hits a prebuilt deployed URL + // so parallelism is fine there; but scheduled runs use 1 worker anyway + // to keep behavior consistent. + workers: 1, + reporter: [['html', { open: 'never' }], ['list']], + + use: { + baseURL, + testIdAttribute: 'data-testid', + trace: 'on-first-retry', + screenshot: 'only-on-failure', + video: 'retain-on-failure', + }, + + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + ], + + webServer: skipWebServer + ? undefined + : { + command: 'yarn dev', + // Health-check against a known-200 route. Root (/) currently returns + // 404 in dev (see QA_PLAN Phase 1 findings), so we can't use baseURL. + // English is served at the root (no /en prefix) — use the canonical + // path. + url: `${baseURL}/uxcore`, + reuseExistingServer: true, + timeout: 180_000, + stdout: 'ignore', + stderr: 'pipe', + }, +}); diff --git a/qa-config.yml b/qa-config.yml new file mode 100644 index 0000000..2551f25 --- /dev/null +++ b/qa-config.yml @@ -0,0 +1,69 @@ +# QA agent configuration +# Read by .claude/skills/keepsimple-qa/SKILL.md + +environment: + production: https://keepsimple.io + staging: # leave empty for now, fill in when we have one + +# Locales to test. hy falls back to en at runtime, so test it anyway. +locales: + - en + - ru + - hy + +# Viewports +viewports: + desktop: { width: 1440, height: 900 } + mobile: { width: 390, height: 844 } + +# Routes per tool. Routes are locale-prefixed at runtime +# (e.g., /en/uxcore, /ru/uxcore). The agent should prepend the locale. +tools: + uxcore: + routes: + - /uxcore + - /uxcore/96-conjunction-fallacy + - /uxcore/75-barnum-effect + uxcg: + routes: + - /uxcg + - /uxcg/what-causes-users-to-make-mistakes-when-using-our-product + - /uxcg/what-to-consider-when-adding-new-functionality-into-product + - /uxcg/how-to-involve-users-into-product-testing + - /uxcg/involving-users-in-product-development + - /uxcg/what-if-our-team-members-dont-share-their-opinion + uxcp: + routes: + - /uxcp + uxcat: + routes: + - /uxcat + - /uxcat/ongoing + - /uxcat/start-test + - /uxcat/test-result + uxcore-api: + routes: + - /uxcore-api + longevity-protocol: + routes: + - /tools/longevity-protocol/about-project + - /tools/longevity-protocol/environment + - /tools/longevity-protocol/habits/diet + - /tools/longevity-protocol/habits/lifestyle + - /tools/longevity-protocol/habits/sleep + - /tools/longevity-protocol/habits/study + - /tools/longevity-protocol/habits/supplements + - /tools/longevity-protocol/habits/workout + - /tools/longevity-protocol/results + site: + routes: + - / + - /tools + - /articles + - /contributors + - /company-management + - /auth + + +# Maximum wall-clock time per tool during exploratory pass +exploratory_budget_minutes: 10 \ No newline at end of file diff --git a/tests/STATUS-2026-04-29.md b/tests/STATUS-2026-04-29.md new file mode 100644 index 0000000..cdb3f2f --- /dev/null +++ b/tests/STATUS-2026-04-29.md @@ -0,0 +1,279 @@ +--- +title: Playwright + QA Status Report +date: 2026-04-29 +author: Claude (recon pass, no code changes) +scope: read-only audit of Playwright/QA scaffold against [QA_PLAN.md](../QA_PLAN.md) +--- + +# Playwright + QA Status Report — 2026-04-29 + +Read-only reconnaissance of the partial Playwright setup. No files were modified. One diagnostic was performed (the `npm run test:e2e` failure) — analysis below, no fix applied. + +--- + +## 0. Diagnostic — `ERR_ABORTED` on `/uxcore/this-slug-does-not-exist` + +### Reproduction context + +- Failure surface: [tests/p0/not-found.spec.ts:19](p0/not-found.spec.ts#L19) → [tests/helpers/goto.ts:39](helpers/goto.ts#L39) → `page.goto('/uxcore/this-slug-does-not-exist')` +- Error: `net::ERR_ABORTED at http://localhost:3005/uxcore/this-slug-does-not-exist` +- Test script: `test:e2e` → `playwright test --project=chromium` ([package.json:18](../package.json#L18)) + +### What the config says + +- [playwright.config.ts:48-61](../playwright.config.ts#L48-L61) **does** declare a `webServer` block: `command: 'yarn dev'`, `url: ${baseURL}/uxcore`, `reuseExistingServer: true`, `timeout: 180_000`. So Playwright auto-starts the dev server when run locally. +- [package.json:6](../package.json#L6) — `dev` runs on port **3005**: `cross-env NODE_ENV=development APP_ENV=local next dev -p 3005`. Aligned with `baseURL` default. **No port mismatch.** +- `lsof -i:3005` and `lsof -i:3006` show nothing listening right now, so no leftover server is in the way. +- `.env.local` exists at the repo root (size 769B) — env vars were intended to be present. + +### Why the first goto in the test passed and the second one failed + +The same test file does three navigations in sequence: + +| Line | Path | Outcome | +| ------ | -------------------------------------- | ------------------------------ | +| 17 | `/this-route-does-not-exist` | Succeeded (no error reported). | +| **19** | **`/uxcore/this-slug-does-not-exist`** | **`net::ERR_ABORTED`.** | +| 21 | `/uxcg/this-slug-does-not-exist` | Never reached. | + +The first path matches **no Next.js page** and **no dynamic route**, so Next.js serves the static 404 page directly with no `getStaticProps` work. Cheap. Returns clean 404. + +The second path **matches the dynamic route** [src/pages/uxcore/[slug].tsx:221-256](../src/pages/uxcore/[slug].tsx#L221-L256), with `getStaticPaths: fallback: 'blocking'` ([line 218](../src/pages/uxcore/[slug].tsx#L218)). For an unknown slug in dev, Next.js runs `getStaticProps`, which calls `getStrapiBiases()` ([line 239](../src/pages/uxcore/[slug].tsx#L239)) — a live HTTP fetch to the Strapi backend. Only after Strapi answers and the lookup returns no match does the function return `{ notFound: true }` and Next.js render the 404 page. + +### Most likely diagnosis + +**Strapi was unreachable (or slow enough to abort) from the local dev process when the test hit `/uxcore/`.** When `getStrapiBiases()` throws, Next.js dev aborts the in-flight HTML response, which Playwright surfaces as `net::ERR_ABORTED`. Two pieces of evidence: + +1. The `/uxcore` index health-check at [playwright.config.ts:56](../playwright.config.ts#L56) likely succeeded (otherwise tests would not have started — `webServer` blocks until the URL responds), but the index page may be served from the dev cache or with stale ISR data, while the dynamic `[slug]` route is compiled and SSR'd cold on first hit. +2. The QA_PLAN already flags this seam: `next dev` compile-on-first-hit + Strapi dependency + `fallback: 'blocking'` is exactly the path where local dev fails when Strapi credentials/values in `.env.local` are missing or the staging Strapi is unreachable. + +A second, weaker hypothesis: **`next dev` compile-on-first-hit ERR_ABORTED**. The config comment at [playwright.config.ts:14-18](../playwright.config.ts#L14-L18) acknowledges this is a known flake source. With `workers: 1` it should be rare, but the dynamic route's first compile under WSL2 can still abort. + +### What would need to change to fix it (do not do this yet) + +In rough order of likelihood: + +1. **Verify Strapi reachability from this WSL2 host.** Hit `${NEXT_PUBLIC_STRAPI}/api/biases?locale=en` from the shell (`curl`) and confirm a 200 with JSON. If it 4xx/5xx/times out, `.env.local` needs the right `NEXT_PUBLIC_STRAPI` / `STRAPI_URL` (the staging value `staging-strapi.keepsimple.io` per [QA_PLAN §1](../QA_PLAN.md#L74)). +2. **Run against a deployed URL instead of local dev.** Set `PLAYWRIGHT_BASE_URL=` and `PLAYWRIGHT_NO_SERVER=1` — bypasses the local `next dev` compile entirely. This is the CI strategy already encoded in [playwright-scheduled.yml](../.github/workflows/playwright-scheduled.yml). +3. **Pre-warm the dynamic routes in a Playwright `globalSetup`** (visit `/uxcore/` and `/uxcg/` once before the suite) so first-hit compile cost is paid before the not-found test runs. Mitigation, not root cause. +4. **`page.route()` mock** Strapi for the not-found test — keeps it deterministic regardless of backend availability. Reasonable longer-term move; aligns with QA_PLAN's "hybrid backend" stance. + +**Not concluded:** whether Strapi is currently down or whether `.env.local` has been mutated since Phase 1 ([TODO.md](../TODO.md) records that Phase 1 verified the legacy redirect worked locally, so Strapi _was_ reachable from this host during recon). + +--- + +## A. What's complete and working + +### Spec files (7 written) + +| Tier | File | QA_PLAN # | Coverage | +| ---- | ----------------------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- | +| P0 | [home-renders.spec.ts](p0/home-renders.spec.ts) | #1 | `/` returns 200, URL stays `/`, `

` visible. **Auto-skips on `localhost`** (per QA_PLAN — local dev 404s at `/`). | +| P0 | [not-found.spec.ts](p0/not-found.spec.ts) | #5 | Three paths: `/this-route-does-not-exist`, `/uxcore/`, `/uxcg/` — each must HTTP-404 and render the error page. | +| P0 | [uxcore-loads.spec.ts](p0/uxcore-loads.spec.ts) | #2 | H1 = "UX CORE" (case-insensitive), ≥1 `[data-cy="search-result-item"]`. | +| P0 | [uxcg-loads.spec.ts](p0/uxcg-loads.spec.ts) | #4 | H1 = "UX CORE GUIDE", ≥1 `[data-cy="open-question"]`. | +| P0 | [uxcp-loads.spec.ts](p0/uxcp-loads.spec.ts) | #3 | H1 = "UX CORE PERSONA", ≥1 `[data-cy="uxcp-bias-action-cell"]`. | +| P2 | [numeric-slug-redirect.spec.ts](p2/numeric-slug-redirect.spec.ts) | #32 | `/uxcore/1` and `/uxcg/1` redirect to canonical full slugs. | + +All 5 P0 tests from QA_PLAN are scaffolded. P1 has zero tests; P2 has 1 of 18. + +### `playwright.config.ts` — production-ready + +- ✅ `testDir: './tests'`, `fullyParallel: true`, `forbidOnly` on CI, `retries: 1` on CI. +- ✅ Three projects: `chromium`, `firefox`, `webkit` (matches QA_PLAN §1 browser matrix). +- ✅ Reporters: `html` (no auto-open) + `list`. +- ✅ `baseURL` from `PLAYWRIGHT_BASE_URL`, default `http://localhost:3005`. +- ✅ `testIdAttribute: 'data-testid'` (per QA_PLAN selector convention). +- ✅ Trace `on-first-retry`, screenshot `only-on-failure`, video `retain-on-failure` — sensible defaults. +- ✅ `webServer.url` health-checks `/uxcore` (not `/`, which 404s in dev), with `reuseExistingServer: true` and `PLAYWRIGHT_NO_SERVER=1` opt-out for CI. +- ✅ `workers: 1` locally (commented rationale: dev compile-on-first-hit contention). + +The only thing missing is documentation on which Node version is canonical (Dockerfile says 20, README says 18, CI workflow uses 18 — see §D). + +### Fixtures — coherent + +- [fixtures/test.ts](fixtures/test.ts) — extends `base` with a `dismissCookieBanner` option (default `true`). Composes `blockAnalytics` + `silencePopups` on every page, and pre-sets `cookieBoxIsSeen=true` + `updateModalSeen=true` cookies unless opted out. Imports re-exported as `{ test, expect }` so specs do `import { test, expect } from '../fixtures/test'`. Clean. +- [fixtures/analytics-blocker.ts](fixtures/analytics-blocker.ts) — intercepts URLs containing `mixpanel.com`, `google-analytics.com`, `googletagmanager.com`, `analytics.ahrefs.com` and 204s them. Matches QA_PLAN §1. +- [fixtures/popup-silencer.ts](fixtures/popup-silencer.ts) — intercepts `**/api/setting**` and returns the disabled flags shape (`{ data: { id, attributes: DISABLED_SETTINGS } }`). Wraps Strapi's `data.data.attributes` envelope correctly. Also exports an unused `seedCalmCookies` (cookies are pre-set in `test.ts`'s page fixture instead). +- [fixtures/cookie-banner-dismiss.ts](fixtures/cookie-banner-dismiss.ts) — exports `dismissCookieBanner(page)` that pre-sets `cookieBoxIsSeen=true`. **Currently unused** (the cookie pre-set is inlined into [fixtures/test.ts:20-32](fixtures/test.ts#L20-L32)). Either consolidate or delete this file in cleanup. + +### Helpers + +- [helpers/goto.ts](helpers/goto.ts) — `gotoSuccess(page, path)` and `gotoNotFound(page, path)`. Asserts both HTTP status AND the 404 page title (`Keepsimple | Error Page`) — belt-and-suspenders against the Next.js inline-404-at-200 regression that the QA_PLAN warns about. + +--- + +## B. What's stubbed, broken, or incomplete + +### Counts vs plan + +| Tier | Plan target | Written | Done % | +| --------- | ----------- | ------- | -------- | +| P0 | 5 | 5 | 100% | +| P1 | 9 | 0 | 0% | +| P2 | 18 | 1 | ~6% | +| **Total** | **32** | **6** | **~19%** | + +### Stubbed / placeholder + +- [tests/helpers/axe.ts](helpers/axe.ts) — **placeholder only**: a single `export const AXE_PLACEHOLDER = true;` line with a TODO comment block. No `AxeBuilder` wrapper, no client-side filtering by impact, no `exclude` selectors, no suppression list. Blocks P2 #30 (`

` invariant — could be standalone) and #31 (axe critical/serious). +- [tests/p1/.gitkeep](p1/.gitkeep) — empty directory placeholder. None of the 9 P1 tests written. + +### Untouched plan items (priority order) + +P1 (9 missing) — the headline value tier: + +- #6, #7, #8, #9 — UXCP add/remove/multi-add/URL-deep-link bias flow +- #10 — UXCP search filter +- #11 — Decision-table validation (no-name save) +- #12 — UXCore search (valid/invalid) +- #13 — UXCore bias modal open/close +- #14 — UXCG search (valid/invalid) + +P2 (17 missing): all of #15–#31 except #32 (redirect), incl. mobile (#19, #20), locale (#21–#25 across en/ru/hy), modal nav (#26), Product/HR switch (#27), copy-link tooltip (#28), audio play/pause (#29), `

` invariant (#30), axe critical/serious (#31), cookie-consent clean-context (#17, #18), Show All button (#16), zero-count (#15). + +### `TODO.md` — not a task list + +Worth flagging: [TODO.md](../TODO.md) at repo root is **not a TODO list**. It contains 18 lines of Phase 1 local-dev quirk findings (middleware not executing in `next dev`, `/` returning 404 locally). The actual task list lives in [QA_PLAN.md §7](../QA_PLAN.md#L412) (Phase Plan). The TODO.md filename is misleading and should probably be renamed (e.g. `LOCAL_DEV_QUIRKS.md`) or absorbed into [AGENTS.md](../AGENTS.md). + +### Suspected breakage beyond §0 + +- **None of the 6 written tests have been run successfully end-to-end against the local dev server**, given §0's diagnosis. The five P0 tests + numeric-slug spec all share the same Strapi-dependent dynamic-route surface, so the same `ERR_ABORTED` failure mode likely affects `uxcore-loads`, `uxcp-loads`, and the numeric-slug-redirect specs whenever Strapi is unreachable. +- **`fixtures/cookie-banner-dismiss.ts` is dead code** — currently nothing imports it. The behavior is in [fixtures/test.ts:20-32](fixtures/test.ts#L20-L32) instead. Not a bug, but cleanup needed. +- **No spec uses the `dismissCookieBanner: false` test option** yet — that opt-out only matters once the cookie-consent P2 tests (#17, #18) are written. +- **No selectors look stale based on this read**, but verifying that requires actually running tests against a working backend (deferred until §0 is fixed). + +--- + +## C. Cypress vs Playwright situation + +### Cypress is still installed and operational + +In [package.json](../package.json): + +- L42 `cypress: ^14.5.2` +- L43 `cypress-social-logins: ^1.14.2` +- L44 `cypress-v10-preserve-cookie: ^1.2.1` +- L86 `@cypress/react: ^9.0.1` +- L87 `@cypress/vite-dev-server: ^6.0.3` +- L109 `start-server-and-test: ^2.0.12` (only used by `test:e2e:staging`) + +Active scripts: `cypress:open`, `cypress:run`, `test:chrome`, `test:firefox`, `test:edge`, `test:all`, `test:e2e:staging`. + +### Cypress specs still exist + +[cypress/](../cypress/) directory contains 12 specs across `auth/`, `cross-browser/`, `uxat/`, `uxcg/`, `uxcore/`, `uxcore-api/`, `uxcp/`, plus full custom-commands library at [cypress/support/commands.ts](../cypress/support/commands.ts). + +### `cypress-manual.yml` — still triggered, manual-only + +[.github/workflows/cypress-manual.yml](../.github/workflows/cypress-manual.yml): + +- Trigger: `workflow_dispatch` only (no schedule, no PR). +- Steps: checkout → Node 20 → `yarn install` → `yarn build:staging` → `cypress-io/github-action@v6` with `start: yarn start:staging`, `wait-on: http://localhost:3005/uxcore`, `command: yarn cypress run`. +- Used: still runnable, but ad-hoc. Not gating any branch. + +### What the evidence suggests + +The plan in this repo **is** to delete Cypress, mirroring what KeepSimpleOSS did. Both [QA_PLAN.md §5 "Cypress Removal Plan"](../QA_PLAN.md#L326) and [QA_RECON.md Q15](../QA_RECON.md#L341) explicitly call out the migration. The trigger is "**after one clean weekly scheduled Playwright CI run on `main`**" — Cypress is the safety net until Playwright proves itself unattended. + +State today: Cypress is intact and operational; Playwright is scaffolded but unproven (§0 blocking). Removal is correctly gated. + +--- + +## D. CI workflow situation + +### `playwright-scheduled.yml` — untracked, almost ready to commit + +[.github/workflows/playwright-scheduled.yml](../.github/workflows/playwright-scheduled.yml) (untracked, 136 lines): + +- Triggers: `schedule: cron '0 6 * * 1'` (Mon 06:00 UTC) on `main` + `workflow_dispatch` with inputs `environment` (staging/production), `scope` (all/P0/P1/P2), `spec_path` (free-text override), `browser` (chromium/firefox/webkit/all). +- Resolves test path from scope; resolves browser flag and install list (`yarn playwright install --with-deps `); resolves base URL from `vars.PLAYWRIGHT_STAGING_URL` / `vars.PLAYWRIGHT_PRODUCTION_URL`. +- Verifies base URL is non-empty and fails the run with a clear error if not configured. +- Runs Playwright with `PLAYWRIGHT_NO_SERVER=1` so it hits the deployed URL, not a local server. +- Uploads `playwright-report/` as an artifact on failure. +- **No hardcoded URLs or secrets.** + +**Open items before commit:** + +1. **TODO comment at line 5-10** is correct — Mary still needs to set the GitHub repo variables `PLAYWRIGHT_STAGING_URL` and `PLAYWRIGHT_PRODUCTION_URL` (Settings → Secrets and variables → Actions → Variables). Without these, the workflow will fail at the "Verify base URL" step. +2. **Node version mismatch.** Workflow uses Node 18 ([line 64](../.github/workflows/playwright-scheduled.yml#L64)). [Dockerfile:1](../Dockerfile#L1) builds on Node 20.19.0. [QA_RECON.md Q14](../QA_RECON.md#L338) records Mary's preference: "lets use the docker one" → Node 20. Suggest aligning to 20 before commit. +3. **`yarn install --frozen-lockfile --ignore-engines`** ([line 67](../.github/workflows/playwright-scheduled.yml#L67)) — `--ignore-engines` is suspicious. Probably added because Node 18 < a dependency's `engines` floor. Switching to Node 20 would let you drop the flag. Worth a one-line cleanup. + +Otherwise: well-structured, ready to commit once those three items are addressed. + +### `pull-request-check.yml` — type-check only + +[.github/workflows/pull-request-check.yml](../.github/workflows/pull-request-check.yml) runs `yarn tsc --noEmit` only on PRs to `dev` or `main`. **No Cypress, no Playwright.** Intentional per QA_PLAN — Playwright is scheduled-only, not a PR gate (Phase 1 stopping criterion is one clean scheduled run, not green PRs). + +### `main.yml` — Docker build/push only + +[.github/workflows/main.yml](../.github/workflows/main.yml) builds and pushes the production/staging Docker image on push to `main`/`dev`. Unrelated to QA. No tests. + +### Sensible final state + +After Cypress removal (Phase 5): + +- Keep [playwright-scheduled.yml](../.github/workflows/playwright-scheduled.yml) as-is. +- Delete [cypress-manual.yml](../.github/workflows/cypress-manual.yml). +- Keep [pull-request-check.yml](../.github/workflows/pull-request-check.yml) at type-check only (one consideration: a P0-only Playwright smoke could be added on PR after stability proves out — but not now). +- [main.yml](../.github/workflows/main.yml) untouched. + +--- + +## E. Recommended sequence to finish + +Four stages. Each has a hard review gate before the next starts. + +### Stage 1 — Get the existing 6 tests green locally and in CI + +**Touches:** root `.env.local` (verify, do not commit), nothing else; possibly `playwright.config.ts` if a `globalSetup` pre-warm is added. + +**Work:** + +1. Diagnose §0 root cause: `curl -i ${NEXT_PUBLIC_STRAPI}/api/biases?locale=en` from this host. If staging Strapi unreachable → fix env or switch tests to `PLAYWRIGHT_BASE_URL=` + `PLAYWRIGHT_NO_SERVER=1`. +2. Run `yarn test:e2e` against whichever target works; confirm all 5 P0 + the 1 P2 spec pass on chromium. +3. Configure GitHub repo variables `PLAYWRIGHT_STAGING_URL` and `PLAYWRIGHT_PRODUCTION_URL`. +4. Commit [playwright-scheduled.yml](../.github/workflows/playwright-scheduled.yml) (after Node 18 → 20 swap and dropping `--ignore-engines`). +5. Trigger one `workflow_dispatch` run against staging to confirm green in CI. + +**Review gate:** all 6 written tests green on chromium, both locally and via one `workflow_dispatch` run on `main`. Document the chosen local-test strategy (Strapi env vs deployed URL) in [QA_PLAN.md](../QA_PLAN.md) or [AGENTS.md](../AGENTS.md). + +### Stage 2 — P1 tests (9 specs, the headline value tier) + +**Touches:** `tests/p1/*.spec.ts` (new); possibly minor `data-testid` additions to UXCP / UXCore / UXCG components on-touch only. + +**Work:** implement QA_PLAN tests #6–#14 in [tests/p1/](p1/) per the plan. Use existing `data-cy` selectors; no preemptive codemod. The `?biases=1,5,12` URL serialization seam (#9) lets later tests skip the click sequence. + +**Review gate:** 14 of 32 tests (P0 + P1) green in chromium locally and in scheduled CI. Cross-browser (firefox/webkit) exercised on-demand, not required. + +### Stage 3 — P2 tests (17 specs, breadth + edge + a11y) + +**Touches:** `tests/p2/*.spec.ts`; `tests/helpers/axe.ts` (real implementation); `data-testid="cookie-consent"` on [src/components/Box/Box.tsx](../src/components/Box/Box.tsx) (verify it's added on-touch only, no broader codemod). + +**Work:** + +- Implement #15–#31 (mobile, locale, modal nav, copy-link, audio, h1 invariant, axe). +- Replace `helpers/axe.ts` placeholder with `AxeBuilder` + client-side `serious|critical` filter + documented suppression list. Land #31 green by suppressing known violations with TODO comments — do not refactor the app for a11y in this work. +- Cookie-consent tests #17/#18 use `dismissCookieBanner: false` to opt out of the global pre-set. +- Note any `/hy/` page that falls back to English ([QA_RECON Q8](../QA_RECON.md#L325)) and relax that page's assertion accordingly. + +**Review gate:** 31 of 32 tests green in chromium locally + scheduled CI. ≤1 `test.fixme()` permitted with a filed issue. Cleanup: delete [fixtures/cookie-banner-dismiss.ts](fixtures/cookie-banner-dismiss.ts) if still unused after #17/#18 land. + +### Stage 4 — Commit hardening + Cypress removal (Phase 5) + +**Touches:** [package.json](../package.json), [tsconfig.json](../tsconfig.json), [eslint.config.mjs](../eslint.config.mjs), [.github/workflows/cypress-manual.yml](../.github/workflows/cypress-manual.yml) (delete), [README.md](../README.md), [AGENTS.md](../AGENTS.md), [.gitignore](../.gitignore), the entire [cypress/](../cypress/) tree (delete), [cypress.config.ts](../cypress.config.ts) (delete). + +**Trigger:** one clean weekly scheduled Playwright run on `main` ([QA_PLAN §5](../QA_PLAN.md#L326)). + +**Work:** follow the order of operations in QA_PLAN §5 verbatim. Drop Cypress deps, scripts, types, configs, and workflow. Update docs. `grep -ri cypress` to catch stragglers ([tsconfig.json:3](../tsconfig.json#L3) and `:37-40` are flagged in the plan). + +**Review gate:** `yarn install` clean, `yarn tsc --noEmit` passes, Playwright suite green, no `cypress` references in repo (except git history). + +### Out of scope for this sequence + +- **Phase 4 — Auth.** Deferred per QA_PLAN. Not blocked by Phases 1–3. +- **Visual regression.** Dropped per QA_PLAN. Note that QA_RECON Q11 has Mary saying "yes we test EVERYTHING" — that decision was reversed in QA_PLAN §1. Worth re-confirming with Mary before Stage 3. + +--- + +_End of report. No code changed, no commits made, no existing files touched._ diff --git a/tests/fixtures/analytics-blocker.ts b/tests/fixtures/analytics-blocker.ts new file mode 100644 index 0000000..d65b14e --- /dev/null +++ b/tests/fixtures/analytics-blocker.ts @@ -0,0 +1,20 @@ +import type { Page } from '@playwright/test'; + +// Matches any URL containing these substrings. Returns 204 so client-side code +// sees a successful response and doesn't retry. +const ANALYTICS_HOSTS = [ + 'mixpanel.com', + 'google-analytics.com', + 'googletagmanager.com', + 'analytics.ahrefs.com', +]; + +export async function blockAnalytics(page: Page): Promise { + await page.route('**/*', route => { + const url = route.request().url(); + if (ANALYTICS_HOSTS.some(host => url.includes(host))) { + return route.fulfill({ status: 204, body: '' }); + } + return route.continue(); + }); +} diff --git a/tests/fixtures/cookie-banner-dismiss.ts b/tests/fixtures/cookie-banner-dismiss.ts new file mode 100644 index 0000000..296b550 --- /dev/null +++ b/tests/fixtures/cookie-banner-dismiss.ts @@ -0,0 +1,16 @@ +import type { Page } from '@playwright/test'; + +// The cookie banner (src/components/Box) lacks a stable selector today — that +// is scheduled to be added on-touch during Phase 3. Until then, this helper +// pre-sets the cookie that gates the banner's visibility so it never renders. +// Dedicated cookie-consent tests (P2 #17, #18) use a clean context and skip +// this helper. +export async function dismissCookieBanner(page: Page): Promise { + await page.context().addCookies([ + { + name: 'cookieBoxIsSeen', + value: 'true', + url: page.url() || 'http://localhost:3005', + }, + ]); +} diff --git a/tests/fixtures/popup-silencer.ts b/tests/fixtures/popup-silencer.ts new file mode 100644 index 0000000..96e8857 --- /dev/null +++ b/tests/fixtures/popup-silencer.ts @@ -0,0 +1,41 @@ +import type { Page } from '@playwright/test'; + +// Timer-driven popups (feedback / pleaseShare / helpToHelp) pull their enabled +// flags from Strapi's /api/setting. Intercept that call and return all flags +// disabled + zero-second timers so no popup ever fires during a test run. +// +// Shape: getSettings() in src/api/strapi.ts:23 reads `data.data.attributes`, +// so the Strapi response is wrapped. Inner flags match `defaultSettings` in +// src/pages/_app.tsx:48-55. +const DISABLED_SETTINGS = { + feedback: false, + helpToHelp: false, + pleaseShare: false, + feedbackSeconds: 0, + helpToHelpSeconds: 0, + pleaseShareSeconds: 0, +}; + +export async function silencePopups(page: Page): Promise { + await page.route('**/api/setting**', route => + route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify({ + data: { id: 1, attributes: DISABLED_SETTINGS }, + }), + }), + ); +} + +// Pre-set cookies that calm the UI: NewUpdateModal gates on `updateModalSeen`; +// the cookie consent banner hides when `cookieBoxIsSeen=true`. The +// cookie-consent tests in P2 use a clean context and skip this helper. +export async function seedCalmCookies(page: Page): Promise { + const url = new URL(page.url() || 'http://localhost'); + const domain = url.hostname; + await page.context().addCookies([ + { name: 'cookieBoxIsSeen', value: 'true', domain, path: '/' }, + { name: 'updateModalSeen', value: 'true', domain, path: '/' }, + ]); +} diff --git a/tests/fixtures/test.ts b/tests/fixtures/test.ts new file mode 100644 index 0000000..d59bf8b --- /dev/null +++ b/tests/fixtures/test.ts @@ -0,0 +1,38 @@ +import { expect,test as base } from '@playwright/test'; + +import { blockAnalytics } from './analytics-blocker'; +import { silencePopups } from './popup-silencer'; + +type TestOptions = { + // Set to false on tests that need to see the real cookie banner + // (P2 cookie-consent tests). Default true for everything else. + dismissCookieBanner: boolean; +}; + +export const test = base.extend({ + dismissCookieBanner: [true, { option: true }], + + page: async ({ page, baseURL, dismissCookieBanner }, use) => { + await blockAnalytics(page); + await silencePopups(page); + + if (dismissCookieBanner && baseURL) { + await page.context().addCookies([ + { + name: 'cookieBoxIsSeen', + value: 'true', + url: baseURL, + }, + { + name: 'updateModalSeen', + value: 'true', + url: baseURL, + }, + ]); + } + + await use(page); + }, +}); + +export { expect }; diff --git a/tests/global-setup.ts b/tests/global-setup.ts new file mode 100644 index 0000000..67e5d93 --- /dev/null +++ b/tests/global-setup.ts @@ -0,0 +1,58 @@ +import type { FullConfig } from '@playwright/test'; + +// Pre-warm Next.js dev's per-route compile cache before the suite runs. +// +// `next dev` compiles dynamic routes on first hit. With Strapi-backed +// `getStaticProps` + `fallback: 'blocking'`, the first request to +// `/uxcore/[slug]` or `/uxcg/[slug]` can take 15-25s, which is close to +// Playwright's 30s navigation default. When a single test issues two cold +// gotos in sequence (see tests/p0/not-found.spec.ts), the second goto can +// be aborted by the runner before the response arrives, surfacing as a +// `null` Response. +// +// This setup hits each dynamic route once with a long client-side timeout, +// so by the time the test suite starts, both routes are warm. CI hits a +// prebuilt deployed URL where this isn't an issue, so we skip the warm-up +// when PLAYWRIGHT_NO_SERVER=1 is set. +async function globalSetup(config: FullConfig): Promise { + if (process.env.PLAYWRIGHT_NO_SERVER === '1') return; + + const baseURL = config.projects[0]?.use?.baseURL || 'http://localhost:3005'; + + // Each path compiles a route module in dev that the suite later visits: + // - /uxcore/ → compiles /uxcore/[slug] (warms not-found.spec.ts) + // - /uxcg/ → compiles /uxcg/[slug] (warms not-found.spec.ts) + // - /uxcp → compiles /uxcp index (warms uxcp-loads.spec.ts) + // - /uxcg/why-... → compiles a real /uxcg/[slug] page including its + // subresource chunks; this is the redirect destination + // in numeric-slug-redirect.spec.ts and was the spec + // hanging at context teardown when cold. + const paths = [ + '/uxcore/this-slug-does-not-exist', + '/uxcg/this-slug-does-not-exist', + '/uxcp', + '/uxcg/why-our-company-is-having-reputation-issue', + ]; + + for (const path of paths) { + const url = `${baseURL}${path}`; + const started = Date.now(); + try { + const res = await fetch(url, { + signal: AbortSignal.timeout(60_000), + redirect: 'manual', + }); + const elapsed = ((Date.now() - started) / 1000).toFixed(1); + + console.log(` pre-warm ${path} → ${res.status} (${elapsed}s)`); + } catch (err) { + const elapsed = ((Date.now() - started) / 1000).toFixed(1); + // Don't fail the suite — log and let the actual tests surface a real + // error. Dev server might still be starting up; tests will retry. + + console.warn(` pre-warm ${path} failed after ${elapsed}s:`, err); + } + } +} + +export default globalSetup; diff --git a/tests/helpers/axe.ts b/tests/helpers/axe.ts new file mode 100644 index 0000000..e0de307 --- /dev/null +++ b/tests/helpers/axe.ts @@ -0,0 +1,13 @@ +// Placeholder for Phase 3 (P2 test #31). +// +// When Phase 3 lands the a11y test, implement: +// - AxeBuilder wrapper configured for WCAG 2 A/AA tags +// - Client-side filtering of violations by impact (serious | critical only) +// — do NOT use `builder.disableRules()`, it's unreliable in @axe-core/playwright 4.11 +// - `exclude` selectors for third-party widgets (OAuth buttons, analytics iframes) +// - A documented block of known-suppressed rule IDs so the test lands green +// and suppressions can be removed one by one as the app is fixed +// +// See QA_PLAN.md §2 P2 test #31 for the scope. + +export const AXE_PLACEHOLDER = true; diff --git a/tests/helpers/goto.ts b/tests/helpers/goto.ts new file mode 100644 index 0000000..7ab9c18 --- /dev/null +++ b/tests/helpers/goto.ts @@ -0,0 +1,47 @@ +import { expect, type Page, type Response } from '@playwright/test'; + +// Empirical finding on this repo (Next.js 15.0.5 dev server, April 2026): +// /uxcore/ → HTTP 404 + 404 page rendered +// /uxcg/ → HTTP 404 + 404 page rendered +// / → HTTP 404 +// Clean HTTP 404 — no 200-with-inline-404-content pattern seen on the sister +// project. So asserting status alone is reliable here. +// +// The 404 page sets `Keepsimple | Error Page` +// (src/pages/404.tsx:25), which is the tripwire for any future regression +// where a dynamic route starts rendering 404 content at HTTP 200. +export const NOT_FOUND_TITLE = 'Keepsimple | Error Page'; + +// Visit `path` and assert the response was a successful (non-404) page: +// - HTTP status is 2xx (not 3xx/4xx/5xx) +// - is not the 404 page title +// Returns the navigation Response so callers can do further assertions. +// +// `waitUntil: 'domcontentloaded'` — we assert on rendered DOM (SSR'd content +// from getStaticProps), not on subresources finishing. In `next dev`, JS/CSS +// chunks compile on demand and the `load` event can fire many seconds after +// the page is interactable enough to assert on. Against a deployed build this +// behaves the same — DOMContentLoaded comes a few ms before load — so CI is +// unaffected. Auto-waiting Playwright assertions still catch render races. +export async function gotoSuccess(page: Page, path: string): Promise<Response> { + const response = await page.goto(path, { waitUntil: 'domcontentloaded' }); + expect(response, `no response for ${path}`).not.toBeNull(); + const status = response!.status(); + expect( + status, + `expected 2xx for ${path}, got ${status}`, + ).toBeGreaterThanOrEqual(200); + expect(status, `expected 2xx for ${path}, got ${status}`).toBeLessThan(300); + await expect(page).not.toHaveTitle(NOT_FOUND_TITLE); + return response!; +} + +// Visit `path` and assert the app returned a 404 (status AND the 404 page +// title — belt-and-suspenders guard against a Next.js regression where +// dynamic routes return 200 with 404 content rendered inline). +export async function gotoNotFound(page: Page, path: string): Promise<void> { + const response = await page.goto(path); + expect(response, `no response for ${path}`).not.toBeNull(); + expect(response!.status(), `expected 404 for ${path}`).toBe(404); + await expect(page).toHaveTitle(NOT_FOUND_TITLE); +} diff --git a/tests/p0/home-renders.spec.ts b/tests/p0/home-renders.spec.ts new file mode 100644 index 0000000..36ac3ae --- /dev/null +++ b/tests/p0/home-renders.spec.ts @@ -0,0 +1,39 @@ +import { expect,test } from '../fixtures/test'; +import { NOT_FOUND_TITLE } from '../helpers/goto'; + +// QA_PLAN §2 P0 #1 — home page renders at /. +// +// Intended production behavior: GET / returns HTTP 200 and renders the home +// page directly (no locale prefix injected into the URL). English is the +// default locale and is served at the root — `/uxcore`, `/uxcg`, `/uxcp` +// are the canonical English paths; `/en` is not a canonical path. An earlier +// version of this test incorrectly claimed `/` redirects to `/en`; it does +// not — production keeps the URL at `/` and serves home content. +// +// Local-dev skip: on `yarn dev` the local instance currently returns 404 at +// `/`. That's a narrow local-environment issue (tracked separately), not a +// production bug. When PLAYWRIGHT_BASE_URL points at localhost we skip this +// test so the suite stays green locally; against staging/production URLs the +// test runs and asserts real behavior. +test('@P0 @smoke home page renders at /', async ({ page, baseURL }) => { + test.skip( + !!baseURL && /localhost/.test(baseURL), + 'local dev currently 404s at / — this test asserts staging/production behavior', + ); + + const response = await page.goto('/'); + expect(response, 'no response for /').not.toBeNull(); + + const status = response!.status(); + expect(status, `expected 2xx for /, got ${status}`).toBeGreaterThanOrEqual( + 200, + ); + expect(status, `expected 2xx for /, got ${status}`).toBeLessThan(300); + + // URL must stay at the bare root (no locale redirect injected). + await expect(page).toHaveURL(/\/$/); + + // Structural landmark: home page content (not the 404 page). + await expect(page).not.toHaveTitle(NOT_FOUND_TITLE); + await expect(page.locator('h1').first()).toBeVisible(); +}); diff --git a/tests/p0/not-found.spec.ts b/tests/p0/not-found.spec.ts new file mode 100644 index 0000000..61ce577 --- /dev/null +++ b/tests/p0/not-found.spec.ts @@ -0,0 +1,24 @@ +import { test } from '../fixtures/test'; +import { gotoNotFound } from '../helpers/goto'; + +// QA_PLAN §2 P0 #5 — unknown URLs render the 404 page with HTTP 404. +// +// Phase 1 empirical check on dev (Next.js 15.0.5, this repo, 2026-04-24): +// /this-route-does-not-exist → HTTP 404 + "Keepsimple | Error Page" +// /uxcore/this-slug-does-not-exist → HTTP 404 + "Keepsimple | Error Page" +// /uxcg/this-slug-does-not-exist → HTTP 404 + "Keepsimple | Error Page" +// Clean HTTP 404s — the nested-dynamic-200-inline-404 regression seen on the +// sister project did NOT appear here. We still assert status AND title so any +// future regression toward that pattern trips the test. +// Helper: tests/helpers/goto.ts + +test('@P0 @smoke unknown paths return HTTP 404 with the error page', async ({ + page, +}) => { + // Top-level unknown path + await gotoNotFound(page, '/this-route-does-not-exist'); + // Dynamic /uxcore/[slug] with a slug that has no bias + await gotoNotFound(page, '/uxcore/this-slug-does-not-exist'); + // Dynamic /uxcg/[slug] with a slug that has no question + await gotoNotFound(page, '/uxcg/this-slug-does-not-exist'); +}); diff --git a/tests/p0/uxcg-loads.spec.ts b/tests/p0/uxcg-loads.spec.ts new file mode 100644 index 0000000..e5214ec --- /dev/null +++ b/tests/p0/uxcg-loads.spec.ts @@ -0,0 +1,23 @@ +import { expect,test } from '../fixtures/test'; +import { gotoSuccess } from '../helpers/goto'; + +// QA_PLAN §2 P0 #4 — /uxcg loads, H1 = "UX CORE GUIDE", at least one question is rendered. +// H1 from src/layouts/UXCGLayout/UXCGLayout.tsx:284. +// Questions are rendered by the Table component, each row carrying +// `data-cy="open-question"` (src/components/Table/Table.tsx:287). The plan's +// reference to `open-close-accordion-button` was incorrect — Accordion is not +// used on the UXCG landing page; the Table renders question rows directly. +test('@P0 @smoke /uxcg renders with H1 and at least one question', async ({ + page, +}) => { + await gotoSuccess(page, '/uxcg'); + + await expect(page.locator('h1')).toHaveText('UX CORE GUIDE'); + + // Question rows carry `data-cy="open-question"` but the initial render hides + // most of them (class `Table_Hidden`) until the user selects a stage tag. + // Count-based structural assertion proves Strapi data loaded and the table + // mounted, without depending on which rows are visually revealed. + const questions = page.locator('[data-cy="open-question"]'); + expect(await questions.count()).toBeGreaterThan(0); +}); diff --git a/tests/p0/uxcore-loads.spec.ts b/tests/p0/uxcore-loads.spec.ts new file mode 100644 index 0000000..1d106fa --- /dev/null +++ b/tests/p0/uxcore-loads.spec.ts @@ -0,0 +1,29 @@ +import { expect,test } from '../fixtures/test'; +import { gotoSuccess } from '../helpers/goto'; + +// QA_PLAN §2 P0 #2 — /uxcore loads, shows the 105-bias catalog, H1 reads "UX CORE". +// The default landing view is CoreViewLayout (src/layouts/CoreViewLayout/CoreViewLayout.tsx:133) +// whose H1 is "UX Core"; MobileView (src/components/_biases/MobileView/MobileView.tsx:281) +// also renders an H1 "UX CORE" that is hidden on desktop via CSS. Asserting against +// either text in a case-insensitive visible H1 is the structural invariant. +// Bias catalog is represented by ≥1 `[data-cy="search-result-item"]` on BiasLabel +// (src/components/_biases/BiasLabel/BiasLabel.tsx:94) — rendered in the default CoreView. +// `[data-cy="uxcore-folder-item"]` exists but is only shown in FolderView (alt layout). +test('@P0 @smoke /uxcore renders with H1 and the bias catalog', async ({ + page, +}) => { + await gotoSuccess(page, '/uxcore'); + + const h1 = page + .locator('h1') + .filter({ hasText: /^UX CORE$/i }) + .first(); + await expect(h1).toBeVisible(); + + // Biases are rendered immediately (data-cy="search-result-item") but the + // individual labels start with `data-state="faded"` and are revealed via + // animation / hover. Count-based structural assertion is enough to prove + // Strapi data loaded and the catalog mounted. + const biasLabels = page.locator('[data-cy="search-result-item"]'); + expect(await biasLabels.count()).toBeGreaterThan(0); +}); diff --git a/tests/p0/uxcp-loads.spec.ts b/tests/p0/uxcp-loads.spec.ts new file mode 100644 index 0000000..bd3d394 --- /dev/null +++ b/tests/p0/uxcp-loads.spec.ts @@ -0,0 +1,17 @@ +import { expect,test } from '../fixtures/test'; +import { gotoSuccess } from '../helpers/goto'; + +// QA_PLAN §2 P0 #3 — /uxcp loads, H1 = "UX CORE PERSONA", bias source table mounts. +// Selectors verified in src/layouts/UXCPLayout/UXCPLayout.tsx:445 (H1) +// and src/components/_uxcp/BiasActionCell/BiasActionCell.tsx:67 (row). +test('@P0 @smoke /uxcp renders with H1 and the bias source table', async ({ + page, +}) => { + await gotoSuccess(page, '/uxcp'); + + await expect(page.locator('h1')).toHaveText('UX CORE PERSONA'); + + const biasRows = page.locator('[data-cy="uxcp-bias-action-cell"]'); + await expect(biasRows.first()).toBeVisible(); + expect(await biasRows.count()).toBeGreaterThan(0); +}); diff --git a/tests/p1/.gitkeep b/tests/p1/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/p2/numeric-slug-redirect.spec.ts b/tests/p2/numeric-slug-redirect.spec.ts new file mode 100644 index 0000000..79ef7b9 --- /dev/null +++ b/tests/p2/numeric-slug-redirect.spec.ts @@ -0,0 +1,54 @@ +import { expect,test } from '../fixtures/test'; + +// QA_PLAN §2 P2 #32 — legacy numeric-slug redirect. +// +// This is a real user-facing feature: old URLs like /uxcore/1 and /uxcg/1 +// must permanent-redirect to the current full-slug URL. The feature is +// implemented twice in the repo (middleware.ts:48 + getStaticProps +// duplicates in [slug].tsx), so either path satisfies the user's request. +// +// Canary numbers: #1 is stable in Strapi for both sections. The full slugs +// match the Cypress suite's long-standing canaries: +// - /uxcore/1 → /uxcore/1-availability-heuristics +// (cypress/e2e/uxcore/bias-modal.cy.ts:4) +// - /uxcg/1 → /uxcg/why-our-company-is-having-reputation-issue +// (cypress/e2e/uxcg/uxcg-modal.cy.ts:5) +// +// Playwright follows redirects by default. We don't assert the exact +// HTTP status on the redirect hop (middleware codes 301, getStaticProps +// yields 308 — both are "permanent"); we assert the final landed URL and +// that the page rendered content, not the 404. + +test('@P2 /uxcore/<number> redirects to the full bias slug', async ({ + page, +}) => { + const response = await page.goto('/uxcore/1'); + expect(response, 'no response for /uxcore/1').not.toBeNull(); + + await expect(page).toHaveURL(/\/uxcore\/1-availability-heuristics\/?$/); + expect(response!.status()).toBeGreaterThanOrEqual(200); + expect(response!.status()).toBeLessThan(300); + + // Structural: the destination page rendered an H1 (the slug page's title). + // Don't require `toBeVisible` — these pages open in a modal/overlay context + // where the H1 can be in the DOM but visually offscreen until scroll. + expect(await page.locator('h1').count()).toBeGreaterThan(0); +}); + +test('@P2 /uxcg/<number> redirects to the full question slug', async ({ + page, +}) => { + const response = await page.goto('/uxcg/1'); + expect(response, 'no response for /uxcg/1').not.toBeNull(); + + await expect(page).toHaveURL( + /\/uxcg\/why-our-company-is-having-reputation-issue\/?$/, + ); + expect(response!.status()).toBeGreaterThanOrEqual(200); + expect(response!.status()).toBeLessThan(300); + + // Structural: the destination page rendered an H1 (the slug page's title). + // Don't require `toBeVisible` — these pages open in a modal/overlay context + // where the H1 can be in the DOM but visually offscreen until scroll. + expect(await page.locator('h1').count()).toBeGreaterThan(0); +}); From 918b4aae32465ba95dee726cb73cc8c986a929e4 Mon Sep 17 00:00:00 2001 From: MaryWylde <marykhachatryan13@gmail.com> Date: Fri, 1 May 2026 20:52:29 +0400 Subject: [PATCH 05/21] chore(qa): add linkinator-based link checker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wraps linkinator's programmatic API so JSON output flushes incrementally — survives the upstream Node-20 abort-DOMException crash that wipes the CLI's report on partial runs. - linkinator.config.json: recurse, retry, skip social URLs. - scripts/run-linkinator.mjs: incremental-flush wrapper around LinkChecker; writes reports/links-YYYY-MM-DD.json after each link. - render-links-report.js: turns the JSON into a readable HTML report at reports/links-YYYY-MM-DD.html. - reports/.gitkeep: keeps the output directory present after clone (actual outputs are gitignored). - yarn check-links / yarn render-links scripts in package.json. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --- linkinator.config.json | 18 + package.json | 6 +- render-links-report.js | 702 +++++++++++++++++++++++++++++++++++++ reports/.gitkeep | 0 scripts/run-linkinator.mjs | 121 +++++++ 5 files changed, 846 insertions(+), 1 deletion(-) create mode 100644 linkinator.config.json create mode 100755 render-links-report.js create mode 100644 reports/.gitkeep create mode 100755 scripts/run-linkinator.mjs diff --git a/linkinator.config.json b/linkinator.config.json new file mode 100644 index 0000000..8611b22 --- /dev/null +++ b/linkinator.config.json @@ -0,0 +1,18 @@ +{ + "recurse": true, + "concurrency": 10, + "timeout": 15000, + "retry": true, + "retryErrors": true, + "retryErrorsCount": 3, + "skip": [ + "linkedin.com", + "twitter.com", + "x.com", + "facebook.com", + "instagram.com", + "discord.com", + "discord.gg" + ], + "verbosity": "INFO" +} diff --git a/package.json b/package.json index 5ee7249..3fb0720 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,10 @@ "prepare": "husky install", "generate:llms": "cross-env LLMS_MODE=curated ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms.ts", "generate:llms:full": "ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms-full.ts", - "generate:llms:pages": "ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms-pages.ts" + "generate:llms:pages": "ts-node --compiler-options '{\"module\":\"commonjs\",\"target\":\"es2020\"}' scripts/generate-llms-pages.ts", + "check-links": "node scripts/run-linkinator.mjs https://keepsimple.io", + "check-links:summary": "node scripts/run-linkinator.mjs https://keepsimple.io --no-write", + "render-links": "node render-links-report.js" }, "lint-staged": { "**/*.{ts,tsx}": [ @@ -95,6 +98,7 @@ "eslint": "^9.32.0", "eslint-config-next": "^15.4.5", "husky": "^9.1.7", + "linkinator": "^7.6.1", "sass-loader": "13.1.0", "start-server-and-test": "^2.0.12", "ts-node": "^10.9.2", diff --git a/render-links-report.js b/render-links-report.js new file mode 100755 index 0000000..78744ae --- /dev/null +++ b/render-links-report.js @@ -0,0 +1,702 @@ +#!/usr/bin/env node +/* eslint-disable @typescript-eslint/no-require-imports */ +const fs = require('fs'); +const path = require('path'); + +const TEXTURE_PATH = path.resolve( + __dirname, + 'public/uxcore_/assets/landing-bg.png', +); +const REPORTS_DIR = path.resolve(__dirname, 'reports'); + +function escapeHtml(s) { + return String(s) + .replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); +} + +function loadTextureDataUri() { + try { + const buf = fs.readFileSync(TEXTURE_PATH); + return `data:image/png;base64,${buf.toString('base64')}`; + } catch { + return null; + } +} + +function findLatestLinksReport() { + if (!fs.existsSync(REPORTS_DIR)) return null; + const files = fs + .readdirSync(REPORTS_DIR) + .filter(f => /^links-\d{4}-\d{2}-\d{2}.*\.json$/.test(f)) + .sort(); + return files.length ? path.join(REPORTS_DIR, files[files.length - 1]) : null; +} + +function severityForStatus(status, state) { + if (state === 'SKIPPED') return 'low'; + if (state === 'OK' || (status >= 200 && status < 400)) return 'ok'; + if (status >= 500) return 'critical'; + if (status === 404 || status === 410) return 'high'; + if (status >= 400) return 'medium'; + return 'low'; +} + +function statusLabel(link) { + if (link.state === 'SKIPPED') return 'skipped'; + if (link.state === 'OK') return String(link.status || 200); + if (link.status === 0 || link.status == null) return 'error'; + return String(link.status); +} + +function groupBy(arr, keyFn) { + const out = new Map(); + for (const item of arr) { + const key = keyFn(item); + if (!out.has(key)) out.set(key, []); + out.get(key).push(item); + } + return out; +} + +function renderLinkCard(link) { + const sev = severityForStatus(link.status, link.state); + const label = statusLabel(link); + const failureDetail = + Array.isArray(link.failureDetails) && link.failureDetails.length + ? link.failureDetails + .map(d => { + if (typeof d === 'string') return d; + if (d && d.message) return d.message; + if (d && d.headers && d.responseUrl) + return `responseUrl: ${d.responseUrl}`; + try { + return JSON.stringify(d); + } catch { + return String(d); + } + }) + .join('\n') + : ''; + const parentList = Array.isArray(link.parent) + ? link.parent + : link.parent + ? [link.parent] + : []; + + return ` +<article class="finding finding--${escapeHtml(sev)}"> + <header class="finding__head"> + <span class="badge badge--${escapeHtml(sev)}">${escapeHtml(label)}</span> + <span class="finding__cat">${escapeHtml(link.state || '')}</span> + </header> + <h3 class="finding__summary"><a href="${escapeHtml(link.url)}" rel="noopener noreferrer" target="_blank">${escapeHtml(link.url)}</a></h3> + <dl class="finding__meta"> + <dt>Status</dt><dd>${escapeHtml(label)}</dd> + <dt>State</dt><dd>${escapeHtml(link.state || '')}</dd> + ${parentList.length ? `<dt>Found on</dt><dd>${parentList.map(p => `<code>${escapeHtml(p)}</code>`).join('<br>')}</dd>` : ''} + </dl> + ${failureDetail ? `<details class="finding__details" open><summary>Failure detail</summary><pre class="finding__body">${escapeHtml(failureDetail)}</pre></details>` : ''} +</article>`; +} + +function renderSummaryTable(stats) { + const rows = [ + ['ok', stats.ok], + ['broken (4xx)', stats.broken4xx], + ['broken (5xx)', stats.broken5xx], + ['error / network', stats.error], + ['skipped', stats.skipped], + ['total', stats.total], + ]; + return ` +<div class="table-wrap"> +<table> + <thead><tr><th>Bucket</th><th>Count</th></tr></thead> + <tbody> + ${rows + .map(([label, count]) => { + const cls = + label === 'ok' + ? 'badge--ok' + : label.startsWith('broken (5') + ? 'badge--critical' + : label.startsWith('broken (4') + ? 'badge--high' + : label.startsWith('error') + ? 'badge--medium' + : label === 'skipped' + ? 'badge--low' + : ''; + const cell = cls + ? `<span class="badge ${cls}">${escapeHtml(label)}</span>` + : escapeHtml(label); + return `<tr><td>${cell}</td><td class="count">${escapeHtml(String(count))}</td></tr>`; + }) + .join('')} + </tbody> +</table> +</div>`; +} + +function renderStatusBreakdown(byStatus) { + if (!byStatus.size) return ''; + const sorted = Array.from(byStatus.entries()).sort( + (a, b) => Number(b[0]) - Number(a[0]), + ); + return ` +<div class="table-wrap"> +<table> + <thead><tr><th>Status</th><th>Count</th></tr></thead> + <tbody> + ${sorted + .map( + ([status, links]) => + `<tr><td><code>${escapeHtml(String(status))}</code></td><td class="count">${links.length}</td></tr>`, + ) + .join('')} + </tbody> +</table> +</div>`; +} + +function renderParentBreakdown(byParent, brokenSet) { + if (!byParent.size) return ''; + const rows = Array.from(byParent.entries()) + .map(([parent, links]) => { + const brokenHere = links.filter(l => brokenSet.has(l)).length; + return { parent, total: links.length, broken: brokenHere }; + }) + .filter(r => r.broken > 0) + .sort((a, b) => b.broken - a.broken); + + if (!rows.length) return '<p>No pages contained broken links.</p>'; + + return ` +<div class="table-wrap"> +<table> + <thead><tr><th>Page</th><th>Broken links</th><th>Total links checked</th></tr></thead> + <tbody> + ${rows.map(r => `<tr><td><code>${escapeHtml(r.parent || '(root)')}</code></td><td class="count">${r.broken}</td><td class="count">${r.total}</td></tr>`).join('')} + </tbody> +</table> +</div>`; +} + +function renderHtml({ data, sourceName, textureUri, generated }) { + const links = Array.isArray(data.links) ? data.links : []; + const broken = links.filter(l => l.state === 'BROKEN'); + const skipped = links.filter(l => l.state === 'SKIPPED'); + const ok = links.filter(l => l.state === 'OK'); + + const stats = { + total: links.length, + ok: ok.length, + skipped: skipped.length, + broken4xx: broken.filter(l => l.status >= 400 && l.status < 500).length, + broken5xx: broken.filter(l => l.status >= 500).length, + error: broken.filter(l => !l.status || l.status < 400).length, + broken: broken.length, + }; + + const byStatus = groupBy( + broken.filter(l => l.status), + l => l.status, + ); + const byParent = groupBy( + links, + l => (Array.isArray(l.parent) ? l.parent[0] : l.parent) || '(root)', + ); + const brokenSet = new Set(broken); + + const passed = data.passed === true; + const overallSev = passed + ? 'ok' + : stats.broken5xx + ? 'critical' + : stats.broken4xx + ? 'high' + : 'medium'; + const overallLabel = passed + ? 'all links ok' + : `${stats.broken} broken link${stats.broken === 1 ? '' : 's'}`; + + const cardsHtml = broken.length + ? broken + .sort((a, b) => (b.status || 0) - (a.status || 0)) + .map(renderLinkCard) + .join('\n') + : '<p>No broken links — all reachable URLs returned 2xx/3xx.</p>'; + + const skippedHtml = skipped.length + ? ` +<div class="table-wrap"> +<table> + <thead><tr><th>Skipped URL</th></tr></thead> + <tbody> + ${skipped + .slice(0, 200) + .map(l => `<tr><td><code>${escapeHtml(l.url)}</code></td></tr>`) + .join('')} + </tbody> +</table> +</div> +${skipped.length > 200 ? `<p class="muted">Showing first 200 of ${skipped.length} skipped URLs.</p>` : ''}` + : '<p>No URLs were skipped by the configured patterns.</p>'; + + const pageTextureCss = textureUri + ? `body::before { + content: ''; + position: fixed; + inset: 0; + background-image: url('${textureUri}'); + background-repeat: repeat; + background-size: 400px auto; + pointer-events: none; + z-index: 1; + }` + : ''; + + const cardTextureCss = textureUri + ? `.finding::after, .summary-panel::after { + content: ''; + position: absolute; + inset: 0; + background-image: url('${textureUri}'); + background-repeat: repeat; + background-size: 400px auto; + pointer-events: none; + z-index: 0; + opacity: 0.75; + }` + : ''; + + return `<!doctype html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width,initial-scale=1"> +<title>Link Check Report + + + +
+
+ +

Link Check Report

+ +
+

linkinator · keepsimple.io

+
+
Source
${escapeHtml(sourceName)}
+
Generated
${escapeHtml(generated)}
+
Overall
${escapeHtml(overallLabel)}
+
Total links
${stats.total}
+
+ +

Summary

+ ${renderSummaryTable(stats)} + +

Status code breakdown (broken)

+ ${byStatus.size ? renderStatusBreakdown(byStatus) : '

No broken links recorded.

'} + +

Pages with broken links

+ ${renderParentBreakdown(byParent, brokenSet)} + +

Broken links

+ ${cardsHtml} + +

Skipped URLs

+ ${skippedHtml} + +
+ Source · ${escapeHtml(sourceName)} + Rendered ${escapeHtml(generated)} +
+
+ + +`; +} + +function main() { + const inputPath = process.argv[2] || findLatestLinksReport(); + if (!inputPath) { + console.error( + 'Usage: node render-links-report.js [path/to/links-YYYY-MM-DD.json]', + ); + console.error('No path supplied and no reports/links-*.json found.'); + process.exit(1); + } + const absPath = path.resolve(inputPath); + if (!fs.existsSync(absPath)) { + console.error(`File not found: ${absPath}`); + process.exit(1); + } + + let data; + try { + data = JSON.parse(fs.readFileSync(absPath, 'utf8')); + } catch (err) { + console.error(`Could not parse JSON: ${err.message}`); + process.exit(1); + } + + const textureUri = loadTextureDataUri(); + const generated = new Date().toISOString(); + const sourceName = path.basename(absPath); + + const html = renderHtml({ data, sourceName, textureUri, generated }); + + const outPath = absPath.replace(/\.json$/i, '.html'); + fs.writeFileSync(outPath, html); + + const links = Array.isArray(data.links) ? data.links : []; + const broken = links.filter(l => l.state === 'BROKEN').length; + const skipped = links.filter(l => l.state === 'SKIPPED').length; + const ok = links.filter(l => l.state === 'OK').length; + + console.log(`Rendered: ${outPath}`); + console.log( + `Links parsed: ${links.length} (ok:${ok}, broken:${broken}, skipped:${skipped})`, + ); + console.log( + `Texture: ${textureUri ? 'embedded (data URI)' : 'not found — solid background only'}`, + ); +} + +main(); diff --git a/reports/.gitkeep b/reports/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/scripts/run-linkinator.mjs b/scripts/run-linkinator.mjs new file mode 100755 index 0000000..2c05986 --- /dev/null +++ b/scripts/run-linkinator.mjs @@ -0,0 +1,121 @@ +#!/usr/bin/env node +// Linkinator wrapper: drives linkinator's programmatic API so we can flush +// the JSON report incrementally and survive the Node 20 + linkinator 7.6.1 +// unhandled DOMException ("This operation was aborted") that crashes the +// CLI when a fetch hits its abort timeout. The CLI loses everything on +// that crash — this wrapper writes after every link so partial results +// remain on disk. + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { LinkChecker } from 'linkinator'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const ROOT = path.resolve(__dirname, '..'); + +const args = process.argv.slice(2); +const url = args.find(a => !a.startsWith('--')) || 'https://keepsimple.io'; +const outArg = args.find(a => a.startsWith('--out=')); +const configArg = args.find(a => a.startsWith('--config=')) || `--config=${path.join(ROOT, 'linkinator.config.json')}`; +const noWrite = args.includes('--no-write'); + +const today = new Date().toISOString().slice(0, 10); +const reportsDir = path.join(ROOT, 'reports'); +if (!noWrite && !fs.existsSync(reportsDir)) fs.mkdirSync(reportsDir, { recursive: true }); +const outPath = outArg ? outArg.slice(6) : path.join(reportsDir, `links-${today}.json`); +const configPath = configArg.slice(9); + +const config = JSON.parse(fs.readFileSync(configPath, 'utf8')); + +const links = []; +let lastFlush = 0; +let flushPending = false; + +function snapshot(passed) { + return JSON.stringify({ passed: passed ?? null, links }, null, 2); +} + +function flush(passed) { + if (noWrite) { + flushPending = false; + return; + } + try { + fs.writeFileSync(outPath, snapshot(passed)); + lastFlush = Date.now(); + flushPending = false; + } catch (err) { + process.stderr.write(`flush failed: ${err.message}\n`); + } +} + +function scheduleFlush() { + if (flushPending) return; + if (Date.now() - lastFlush > 500) { + flush(); + return; + } + flushPending = true; + setTimeout(() => { if (flushPending) flush(); }, 500); +} + +const checker = new LinkChecker(); + +checker.on('link', link => { + links.push(link); + const status = link.state === 'OK' ? 'ok' : link.state === 'SKIPPED' ? 'skip' : `BROKEN ${link.status ?? 'err'}`; + process.stdout.write(`[${status}] ${link.url}\n`); + scheduleFlush(); +}); + +function bail(reason, err) { + process.stderr.write(`\n${reason}: ${err?.message || err}\n`); + if (err?.stack) process.stderr.write(`${err.stack}\n`); + flush(false); + process.stderr.write(noWrite + ? `\nAborted after ${links.length} links (no JSON written, --no-write).\n` + : `\nPartial results written to ${outPath} (${links.length} links).\n`); + process.exit(2); +} + +// Node 20 + linkinator 7.6.1: undici's AbortController surfaces as an +// unhandled TimeoutError/AbortError/DOMException emitted on a Readable +// stream when a request times out, killing the whole process. The link +// is already counted as BROKEN by linkinator's retry path, so swallow it. +const SWALLOW_NAMES = new Set(['AbortError', 'DOMException', 'TimeoutError']); + +function maybeSwallow(label, err) { + if (err && SWALLOW_NAMES.has(err.name)) { + process.stderr.write(`(swallowed ${err.name} via ${label}: ${err.message})\n`); + scheduleFlush(); + return true; + } + return false; +} + +process.on('unhandledRejection', err => { + if (maybeSwallow('unhandledRejection', err)) return; + bail('unhandledRejection', err); +}); + +process.on('uncaughtException', err => { + if (maybeSwallow('uncaughtException', err)) return; + bail('uncaughtException', err); +}); + +process.on('SIGINT', () => bail('SIGINT', new Error('interrupted'))); +process.on('SIGTERM', () => bail('SIGTERM', new Error('terminated'))); + +try { + const result = await checker.check({ path: url, ...config }); + flush(result.passed); + const broken = links.filter(l => l.state === 'BROKEN').length; + const skipped = links.filter(l => l.state === 'SKIPPED').length; + const ok = links.filter(l => l.state === 'OK').length; + process.stdout.write(`\nDone. ${links.length} links checked (ok:${ok}, broken:${broken}, skipped:${skipped}).${noWrite ? '' : ` Report: ${outPath}`}\n`); + process.exit(result.passed ? 0 : 1); +} catch (err) { + bail('checker.check failed', err); +} From 7ed4617f9cd10869d0c3612d3bfacc6f7d4d151f Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 20:53:33 +0400 Subject: [PATCH 06/21] feat(uxcp): add country bias map above UXCP body MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Lets users browse cognitive biases by country via a TopoJSON world map (110m resolution, ~108KB). Selecting a country populates the existing UXCP \`selectedBiases\` state so the rest of the layout (decision table, search, etc.) reacts to the choice. - src/components/_uxcp/CountryBiasMap/: component tree (CountryBiasMap, CountryMap, CountryList, BiasPanel, FlagImage). Uses d3-geo for projection + topojson-client for mesh decoding. - src/data/countryBias/: per-locale country→bias mapping (en, ru, hy) with type definitions and region colors. - public/uxcore_/data/countries-110m.json: TopoJSON world map. - src/styles/countryBias.scss: globals imported via _app.tsx. - src/layouts/UXCPLayout/UXCPLayout.tsx: renders the map above MobileDisclimer; onUseBiases() maps selected country's bias numbers back to bias objects and calls setSelectedBiases. Co-Authored-By: Claude Opus 4.7 (1M context) --- package.json | 6 + public/uxcore_/data/countries-110m.json | 10767 ++++++++++++++++ .../BiasPanel/BiasPanel.module.scss | 270 + .../CountryBiasMap/BiasPanel/BiasPanel.tsx | 236 + .../_uxcp/CountryBiasMap/BiasPanel/index.ts | 3 + .../CountryBiasMap/CountryBiasMap.module.scss | 120 + .../_uxcp/CountryBiasMap/CountryBiasMap.tsx | 154 + .../CountryList/CountryList.module.scss | 177 + .../CountryList/CountryList.tsx | 160 + .../_uxcp/CountryBiasMap/CountryList/index.ts | 3 + .../CountryMap/CountryMap.module.scss | 120 + .../CountryBiasMap/CountryMap/CountryMap.tsx | 453 + .../_uxcp/CountryBiasMap/CountryMap/index.ts | 3 + .../FlagImage/FlagImage.module.scss | 6 + .../CountryBiasMap/FlagImage/FlagImage.tsx | 36 + .../_uxcp/CountryBiasMap/FlagImage/index.ts | 3 + src/components/_uxcp/CountryBiasMap/index.ts | 3 + src/data/countryBias/en.ts | 744 ++ src/data/countryBias/hy.ts | 682 + src/data/countryBias/index.ts | 18 + src/data/countryBias/regionColors.ts | 8 + src/data/countryBias/ru.ts | 682 + src/data/countryBias/types.ts | 54 + src/layouts/UXCPLayout/UXCPLayout.tsx | 10 + src/pages/_app.tsx | 1 + src/styles/countryBias.scss | 52 + 26 files changed, 14771 insertions(+) create mode 100644 public/uxcore_/data/countries-110m.json create mode 100644 src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.module.scss create mode 100644 src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.tsx create mode 100644 src/components/_uxcp/CountryBiasMap/BiasPanel/index.ts create mode 100644 src/components/_uxcp/CountryBiasMap/CountryBiasMap.module.scss create mode 100644 src/components/_uxcp/CountryBiasMap/CountryBiasMap.tsx create mode 100644 src/components/_uxcp/CountryBiasMap/CountryList/CountryList.module.scss create mode 100644 src/components/_uxcp/CountryBiasMap/CountryList/CountryList.tsx create mode 100644 src/components/_uxcp/CountryBiasMap/CountryList/index.ts create mode 100644 src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.module.scss create mode 100644 src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.tsx create mode 100644 src/components/_uxcp/CountryBiasMap/CountryMap/index.ts create mode 100644 src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.module.scss create mode 100644 src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.tsx create mode 100644 src/components/_uxcp/CountryBiasMap/FlagImage/index.ts create mode 100644 src/components/_uxcp/CountryBiasMap/index.ts create mode 100644 src/data/countryBias/en.ts create mode 100644 src/data/countryBias/hy.ts create mode 100644 src/data/countryBias/index.ts create mode 100644 src/data/countryBias/regionColors.ts create mode 100644 src/data/countryBias/ru.ts create mode 100644 src/data/countryBias/types.ts create mode 100644 src/styles/countryBias.scss diff --git a/package.json b/package.json index 3fb0720..ecafdf6 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "cypress": "^14.5.2", "cypress-social-logins": "^1.14.2", "cypress-v10-preserve-cookie": "^1.2.1", + "d3-geo": "^3.1.1", "date-fns": "2.30.0", "dotenv": "^16.4.5", "eslint-plugin-simple-import-sort": "^12.1.1", @@ -75,6 +76,7 @@ "remark-breaks": "3.0.2", "sass": "1.32.8", "slick-carousel": "1.8.1", + "topojson-client": "^3.1.0", "uuid": "8.3.2", "victory": "36.3.0" }, @@ -86,6 +88,8 @@ "@playwright/test": "^1.59.1", "@types/amplitude-js": "8.16.2", "@types/classnames": "2.2.11", + "@types/d3-geo": "^3.1.0", + "@types/geojson": "^7946.0.16", "@types/lodash.debounce": "4.0.7", "@types/lodash.unescape": "4.0.7", "@types/node": "14.14.37", @@ -93,6 +97,8 @@ "@types/react-dom": "18.2.14", "@types/react-slick": "0.23.10", "@types/swiper": "6.0.0", + "@types/topojson-client": "^3.1.5", + "@types/topojson-specification": "^1.0.5", "@types/uuid": "8.3.1", "babel-loader": "8.2.5", "eslint": "^9.32.0", diff --git a/public/uxcore_/data/countries-110m.json b/public/uxcore_/data/countries-110m.json new file mode 100644 index 0000000..5361652 --- /dev/null +++ b/public/uxcore_/data/countries-110m.json @@ -0,0 +1,10767 @@ +{ + "type": "Topology", + "objects": { + "countries": { + "type": "GeometryCollection", + "geometries": [ + { + "type": "MultiPolygon", + "arcs": [[[0]], [[1]]], + "id": "242", + "properties": { "name": "Fiji" } + }, + { + "type": "Polygon", + "arcs": [[2, 3, 4, 5, 6, 7, 8, 9, 10]], + "id": "834", + "properties": { "name": "Tanzania" } + }, + { + "type": "Polygon", + "arcs": [[11, 12, 13, 14]], + "id": "732", + "properties": { "name": "W. Sahara" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[15, 16, 17, 18]], + [[19]], + [[20]], + [[21]], + [[22]], + [[23]], + [[24]], + [[25]], + [[26]], + [[27]], + [[28]], + [[29]], + [[30]], + [[31]], + [[32]], + [[33]], + [[34]], + [[35]], + [[36]], + [[37]], + [[38]], + [[39]], + [[40]], + [[41]], + [[42]], + [[43]], + [[44]], + [[45]], + [[46]], + [[47]] + ], + "id": "124", + "properties": { "name": "Canada" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[-19, 48, 49, 50]], + [[51]], + [[52]], + [[53]], + [[54]], + [[55]], + [[56]], + [[57]], + [[-17, 58]], + [[59]] + ], + "id": "840", + "properties": { "name": "United States of America" } + }, + { + "type": "Polygon", + "arcs": [[60, 61, 62, 63, 64, 65]], + "id": "398", + "properties": { "name": "Kazakhstan" } + }, + { + "type": "Polygon", + "arcs": [[-63, 66, 67, 68, 69]], + "id": "860", + "properties": { "name": "Uzbekistan" } + }, + { + "type": "MultiPolygon", + "arcs": [[[70, 71]], [[72]], [[73]], [[74]]], + "id": "598", + "properties": { "name": "Papua New Guinea" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[-72, 75]], + [[76, 77]], + [[78]], + [[79, 80]], + [[81]], + [[82]], + [[83]], + [[84]], + [[85]], + [[86]], + [[87]], + [[88]], + [[89]] + ], + "id": "360", + "properties": { "name": "Indonesia" } + }, + { + "type": "MultiPolygon", + "arcs": [[[90, 91]], [[92, 93, 94, 95, 96, 97]]], + "id": "032", + "properties": { "name": "Argentina" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-92, 98]], [[99, -95, 100, 101]]], + "id": "152", + "properties": { "name": "Chile" } + }, + { + "type": "Polygon", + "arcs": [[-8, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111]], + "id": "180", + "properties": { "name": "Dem. Rep. Congo" } + }, + { + "type": "Polygon", + "arcs": [[112, 113, 114, 115]], + "id": "706", + "properties": { "name": "Somalia" } + }, + { + "type": "Polygon", + "arcs": [[-3, 116, 117, 118, -113, 119]], + "id": "404", + "properties": { "name": "Kenya" } + }, + { + "type": "Polygon", + "arcs": [[120, 121, 122, 123, 124, 125, 126, 127]], + "id": "729", + "properties": { "name": "Sudan" } + }, + { + "type": "Polygon", + "arcs": [[-122, 128, 129, 130, 131]], + "id": "148", + "properties": { "name": "Chad" } + }, + { + "type": "Polygon", + "arcs": [[132, 133]], + "id": "332", + "properties": { "name": "Haiti" } + }, + { + "type": "Polygon", + "arcs": [[-133, 134]], + "id": "214", + "properties": { "name": "Dominican Rep." } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[135]], + [[136]], + [[137]], + [[138]], + [[139]], + [[140]], + [[141, 142, 143]], + [[144]], + [[145]], + [ + [ + 146, 147, 148, 149, -66, 150, 151, 152, 153, 154, 155, 156, 157, + 158, 159, 160, 161 + ] + ], + [[162]], + [[163, 164]] + ], + "id": "643", + "properties": { "name": "Russia" } + }, + { + "type": "MultiPolygon", + "arcs": [[[165]], [[166]], [[167]]], + "id": "044", + "properties": { "name": "Bahamas" } + }, + { + "type": "Polygon", + "arcs": [[168]], + "id": "238", + "properties": { "name": "Falkland Is." } + }, + { + "type": "MultiPolygon", + "arcs": [[[169]], [[-161, 170, 171, 172]], [[173]], [[174]]], + "id": "578", + "properties": { "name": "Norway" } + }, + { + "type": "Polygon", + "arcs": [[175]], + "id": "304", + "properties": { "name": "Greenland" } + }, + { + "type": "Polygon", + "arcs": [[176]], + "id": "260", + "properties": { "name": "Fr. S. Antarctic Lands" } + }, + { + "type": "Polygon", + "arcs": [[177, -77]], + "id": "626", + "properties": { "name": "Timor-Leste" } + }, + { + "type": "Polygon", + "arcs": [[178, 179, 180, 181, 182, 183, 184], [185]], + "id": "710", + "properties": { "name": "South Africa" } + }, + { + "type": "Polygon", + "arcs": [[-186]], + "id": "426", + "properties": { "name": "Lesotho" } + }, + { + "type": "Polygon", + "arcs": [[-50, 186, 187, 188, 189]], + "id": "484", + "properties": { "name": "Mexico" } + }, + { + "type": "Polygon", + "arcs": [[190, 191, -93]], + "id": "858", + "properties": { "name": "Uruguay" } + }, + { + "type": "Polygon", + "arcs": [[-191, -98, 192, 193, 194, 195, 196, 197, 198, 199, 200]], + "id": "076", + "properties": { "name": "Brazil" } + }, + { + "type": "Polygon", + "arcs": [[-194, 201, -96, -100, 202]], + "id": "068", + "properties": { "name": "Bolivia" } + }, + { + "type": "Polygon", + "arcs": [[-195, -203, -102, 203, 204, 205]], + "id": "604", + "properties": { "name": "Peru" } + }, + { + "type": "Polygon", + "arcs": [[-196, -206, 206, 207, 208, 209, 210]], + "id": "170", + "properties": { "name": "Colombia" } + }, + { + "type": "Polygon", + "arcs": [[-209, 211, 212, 213]], + "id": "591", + "properties": { "name": "Panama" } + }, + { + "type": "Polygon", + "arcs": [[-213, 214, 215, 216]], + "id": "188", + "properties": { "name": "Costa Rica" } + }, + { + "type": "Polygon", + "arcs": [[-216, 217, 218, 219]], + "id": "558", + "properties": { "name": "Nicaragua" } + }, + { + "type": "Polygon", + "arcs": [[-219, 220, 221, 222, 223]], + "id": "340", + "properties": { "name": "Honduras" } + }, + { + "type": "Polygon", + "arcs": [[-222, 224, 225]], + "id": "222", + "properties": { "name": "El Salvador" } + }, + { + "type": "Polygon", + "arcs": [[-189, 226, 227, -223, -226, 228]], + "id": "320", + "properties": { "name": "Guatemala" } + }, + { + "type": "Polygon", + "arcs": [[-188, 229, -227]], + "id": "084", + "properties": { "name": "Belize" } + }, + { + "type": "Polygon", + "arcs": [[-197, -211, 230, 231]], + "id": "862", + "properties": { "name": "Venezuela" } + }, + { + "type": "Polygon", + "arcs": [[-198, -232, 232, 233]], + "id": "328", + "properties": { "name": "Guyana" } + }, + { + "type": "Polygon", + "arcs": [[-199, -234, 234, 235]], + "id": "740", + "properties": { "name": "Suriname" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[-200, -236, 236]], + [[237, 238, 239, 240, 241, 242, 243, 244]], + [[245]] + ], + "id": "250", + "properties": { "name": "France" } + }, + { + "type": "Polygon", + "arcs": [[-205, 246, -207]], + "id": "218", + "properties": { "name": "Ecuador" } + }, + { + "type": "Polygon", + "arcs": [[247]], + "id": "630", + "properties": { "name": "Puerto Rico" } + }, + { + "type": "Polygon", + "arcs": [[248]], + "id": "388", + "properties": { "name": "Jamaica" } + }, + { + "type": "Polygon", + "arcs": [[249]], + "id": "192", + "properties": { "name": "Cuba" } + }, + { + "type": "Polygon", + "arcs": [[-181, 250, 251, 252]], + "id": "716", + "properties": { "name": "Zimbabwe" } + }, + { + "type": "Polygon", + "arcs": [[-180, 253, 254, -251]], + "id": "072", + "properties": { "name": "Botswana" } + }, + { + "type": "Polygon", + "arcs": [[-179, 255, 256, 257, -254]], + "id": "516", + "properties": { "name": "Namibia" } + }, + { + "type": "Polygon", + "arcs": [[258, 259, 260, 261, 262, 263, 264]], + "id": "686", + "properties": { "name": "Senegal" } + }, + { + "type": "Polygon", + "arcs": [[-261, 265, 266, 267, 268, 269, 270]], + "id": "466", + "properties": { "name": "Mali" } + }, + { + "type": "Polygon", + "arcs": [[-13, 271, -266, -260, 272]], + "id": "478", + "properties": { "name": "Mauritania" } + }, + { + "type": "Polygon", + "arcs": [[273, 274, 275, 276, 277]], + "id": "204", + "properties": { "name": "Benin" } + }, + { + "type": "Polygon", + "arcs": [[-131, 278, 279, -277, 280, -268, 281, 282]], + "id": "562", + "properties": { "name": "Niger" } + }, + { + "type": "Polygon", + "arcs": [[-278, -280, 283, 284]], + "id": "566", + "properties": { "name": "Nigeria" } + }, + { + "type": "Polygon", + "arcs": [[-130, 285, 286, 287, 288, 289, -284, -279]], + "id": "120", + "properties": { "name": "Cameroon" } + }, + { + "type": "Polygon", + "arcs": [[-275, 290, 291, 292]], + "id": "768", + "properties": { "name": "Togo" } + }, + { + "type": "Polygon", + "arcs": [[-292, 293, 294, 295]], + "id": "288", + "properties": { "name": "Ghana" } + }, + { + "type": "Polygon", + "arcs": [[-270, 296, -295, 297, 298, 299]], + "id": "384", + "properties": { "name": "Côte d'Ivoire" } + }, + { + "type": "Polygon", + "arcs": [[-262, -271, -300, 300, 301, 302, 303]], + "id": "324", + "properties": { "name": "Guinea" } + }, + { + "type": "Polygon", + "arcs": [[-263, -304, 304]], + "id": "624", + "properties": { "name": "Guinea-Bissau" } + }, + { + "type": "Polygon", + "arcs": [[-299, 305, 306, -301]], + "id": "430", + "properties": { "name": "Liberia" } + }, + { + "type": "Polygon", + "arcs": [[-302, -307, 307]], + "id": "694", + "properties": { "name": "Sierra Leone" } + }, + { + "type": "Polygon", + "arcs": [[-269, -281, -276, -293, -296, -297]], + "id": "854", + "properties": { "name": "Burkina Faso" } + }, + { + "type": "Polygon", + "arcs": [[-108, 308, -286, -129, -121, 309]], + "id": "140", + "properties": { "name": "Central African Rep." } + }, + { + "type": "Polygon", + "arcs": [[-107, 310, 311, 312, -287, -309]], + "id": "178", + "properties": { "name": "Congo" } + }, + { + "type": "Polygon", + "arcs": [[-288, -313, 313, 314]], + "id": "266", + "properties": { "name": "Gabon" } + }, + { + "type": "Polygon", + "arcs": [[-289, -315, 315]], + "id": "226", + "properties": { "name": "Eq. Guinea" } + }, + { + "type": "Polygon", + "arcs": [[-7, 316, 317, -252, -255, -258, 318, -103]], + "id": "894", + "properties": { "name": "Zambia" } + }, + { + "type": "Polygon", + "arcs": [[-6, 319, -317]], + "id": "454", + "properties": { "name": "Malawi" } + }, + { + "type": "Polygon", + "arcs": [[-5, 320, -184, 321, -182, -253, -318, -320]], + "id": "508", + "properties": { "name": "Mozambique" } + }, + { + "type": "Polygon", + "arcs": [[-183, -322]], + "id": "748", + "properties": { "name": "eSwatini" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-106, 322, -311]], [[-104, -319, -257, 323]]], + "id": "024", + "properties": { "name": "Angola" } + }, + { + "type": "Polygon", + "arcs": [[-9, -112, 324]], + "id": "108", + "properties": { "name": "Burundi" } + }, + { + "type": "Polygon", + "arcs": [[325, 326, 327, 328, 329, 330, 331]], + "id": "376", + "properties": { "name": "Israel" } + }, + { + "type": "Polygon", + "arcs": [[-331, 332, 333]], + "id": "422", + "properties": { "name": "Lebanon" } + }, + { + "type": "Polygon", + "arcs": [[334]], + "id": "450", + "properties": { "name": "Madagascar" } + }, + { + "type": "Polygon", + "arcs": [[-327, 335]], + "id": "275", + "properties": { "name": "Palestine" } + }, + { + "type": "Polygon", + "arcs": [[-265, 336]], + "id": "270", + "properties": { "name": "Gambia" } + }, + { + "type": "Polygon", + "arcs": [[337, 338, 339]], + "id": "788", + "properties": { "name": "Tunisia" } + }, + { + "type": "Polygon", + "arcs": [[-12, 340, 341, -338, 342, -282, -267, -272]], + "id": "012", + "properties": { "name": "Algeria" } + }, + { + "type": "Polygon", + "arcs": [[-326, 343, 344, 345, 346, -328, -336]], + "id": "400", + "properties": { "name": "Jordan" } + }, + { + "type": "Polygon", + "arcs": [[347, 348, 349, 350, 351]], + "id": "784", + "properties": { "name": "United Arab Emirates" } + }, + { + "type": "Polygon", + "arcs": [[352, 353]], + "id": "634", + "properties": { "name": "Qatar" } + }, + { + "type": "Polygon", + "arcs": [[354, 355, 356]], + "id": "414", + "properties": { "name": "Kuwait" } + }, + { + "type": "Polygon", + "arcs": [[-345, 357, 358, 359, 360, -357, 361]], + "id": "368", + "properties": { "name": "Iraq" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-351, 362, 363, 364]], [[-349, 365]]], + "id": "512", + "properties": { "name": "Oman" } + }, + { + "type": "MultiPolygon", + "arcs": [[[366]], [[367]]], + "id": "548", + "properties": { "name": "Vanuatu" } + }, + { + "type": "Polygon", + "arcs": [[368, 369, 370, 371]], + "id": "116", + "properties": { "name": "Cambodia" } + }, + { + "type": "Polygon", + "arcs": [[-369, 372, 373, 374, 375, 376]], + "id": "764", + "properties": { "name": "Thailand" } + }, + { + "type": "Polygon", + "arcs": [[-370, -377, 377, 378, 379]], + "id": "418", + "properties": { "name": "Laos" } + }, + { + "type": "Polygon", + "arcs": [[-376, 380, 381, 382, 383, -378]], + "id": "104", + "properties": { "name": "Myanmar" } + }, + { + "type": "Polygon", + "arcs": [[-371, -380, 384, 385]], + "id": "704", + "properties": { "name": "Vietnam" } + }, + { + "type": "MultiPolygon", + "arcs": [[[386, 386, 386]], [[-147, 387, 388, 389, 390]]], + "id": "408", + "properties": { "name": "North Korea" } + }, + { + "type": "Polygon", + "arcs": [[-389, 391]], + "id": "410", + "properties": { "name": "South Korea" } + }, + { + "type": "Polygon", + "arcs": [[-149, 392]], + "id": "496", + "properties": { "name": "Mongolia" } + }, + { + "type": "Polygon", + "arcs": [[-383, 393, 394, 395, 396, 397, 398, 399, 400]], + "id": "356", + "properties": { "name": "India" } + }, + { + "type": "Polygon", + "arcs": [[-382, 401, -394]], + "id": "050", + "properties": { "name": "Bangladesh" } + }, + { + "type": "Polygon", + "arcs": [[-400, 402]], + "id": "064", + "properties": { "name": "Bhutan" } + }, + { + "type": "Polygon", + "arcs": [[-398, 403]], + "id": "524", + "properties": { "name": "Nepal" } + }, + { + "type": "Polygon", + "arcs": [[-396, 404, 405, 406, 407]], + "id": "586", + "properties": { "name": "Pakistan" } + }, + { + "type": "Polygon", + "arcs": [[-69, 408, 409, -407, 410, 411]], + "id": "004", + "properties": { "name": "Afghanistan" } + }, + { + "type": "Polygon", + "arcs": [[-68, 412, 413, -409]], + "id": "762", + "properties": { "name": "Tajikistan" } + }, + { + "type": "Polygon", + "arcs": [[-62, 414, -413, -67]], + "id": "417", + "properties": { "name": "Kyrgyzstan" } + }, + { + "type": "Polygon", + "arcs": [[-64, -70, -412, 415, 416]], + "id": "795", + "properties": { "name": "Turkmenistan" } + }, + { + "type": "Polygon", + "arcs": [[-360, 417, 418, 419, 420, 421, -416, -411, -406, 422]], + "id": "364", + "properties": { "name": "Iran" } + }, + { + "type": "Polygon", + "arcs": [[-332, -334, 423, 424, -358, -344]], + "id": "760", + "properties": { "name": "Syria" } + }, + { + "type": "Polygon", + "arcs": [[-420, 425, 426, 427, 428]], + "id": "051", + "properties": { "name": "Armenia" } + }, + { + "type": "Polygon", + "arcs": [[-172, 429, 430]], + "id": "752", + "properties": { "name": "Sweden" } + }, + { + "type": "Polygon", + "arcs": [[-156, 431, 432, 433, 434]], + "id": "112", + "properties": { "name": "Belarus" } + }, + { + "type": "Polygon", + "arcs": [[-155, 435, -164, 436, 437, 438, 439, 440, 441, 442, -432]], + "id": "804", + "properties": { "name": "Ukraine" } + }, + { + "type": "Polygon", + "arcs": [[-433, -443, 443, 444, 445, 446, -142, 447]], + "id": "616", + "properties": { "name": "Poland" } + }, + { + "type": "Polygon", + "arcs": [[448, 449, 450, 451, 452, 453, 454]], + "id": "040", + "properties": { "name": "Austria" } + }, + { + "type": "Polygon", + "arcs": [[-441, 455, 456, 457, 458, -449, 459]], + "id": "348", + "properties": { "name": "Hungary" } + }, + { + "type": "Polygon", + "arcs": [[-439, 460]], + "id": "498", + "properties": { "name": "Moldova" } + }, + { + "type": "Polygon", + "arcs": [[-438, 461, 462, 463, -456, -440, -461]], + "id": "642", + "properties": { "name": "Romania" } + }, + { + "type": "Polygon", + "arcs": [[-434, -448, -144, 464, 465]], + "id": "440", + "properties": { "name": "Lithuania" } + }, + { + "type": "Polygon", + "arcs": [[-157, -435, -466, 466, 467]], + "id": "428", + "properties": { "name": "Latvia" } + }, + { + "type": "Polygon", + "arcs": [[-158, -468, 468]], + "id": "233", + "properties": { "name": "Estonia" } + }, + { + "type": "Polygon", + "arcs": [[-446, 469, -453, 470, -238, 471, 472, 473, 474, 475, 476]], + "id": "276", + "properties": { "name": "Germany" } + }, + { + "type": "Polygon", + "arcs": [[-463, 477, 478, 479, 480, 481]], + "id": "100", + "properties": { "name": "Bulgaria" } + }, + { + "type": "MultiPolygon", + "arcs": [[[482]], [[-480, 483, 484, 485, 486]]], + "id": "300", + "properties": { "name": "Greece" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-359, -425, 487, 488, -427, -418]], [[-479, 489, -484]]], + "id": "792", + "properties": { "name": "Turkey" } + }, + { + "type": "Polygon", + "arcs": [[-486, 490, 491, 492, 493]], + "id": "008", + "properties": { "name": "Albania" } + }, + { + "type": "Polygon", + "arcs": [[-458, 494, 495, 496, 497, 498]], + "id": "191", + "properties": { "name": "Croatia" } + }, + { + "type": "Polygon", + "arcs": [[-452, 499, -239, -471]], + "id": "756", + "properties": { "name": "Switzerland" } + }, + { + "type": "Polygon", + "arcs": [[-472, -245, 500]], + "id": "442", + "properties": { "name": "Luxembourg" } + }, + { + "type": "Polygon", + "arcs": [[-473, -501, -244, 501, 502]], + "id": "056", + "properties": { "name": "Belgium" } + }, + { + "type": "Polygon", + "arcs": [[-474, -503, 503]], + "id": "528", + "properties": { "name": "Netherlands" } + }, + { + "type": "Polygon", + "arcs": [[504, 505]], + "id": "620", + "properties": { "name": "Portugal" } + }, + { + "type": "Polygon", + "arcs": [[-505, 506, -242, 507]], + "id": "724", + "properties": { "name": "Spain" } + }, + { + "type": "Polygon", + "arcs": [[508, 509]], + "id": "372", + "properties": { "name": "Ireland" } + }, + { + "type": "Polygon", + "arcs": [[510]], + "id": "540", + "properties": { "name": "New Caledonia" } + }, + { + "type": "MultiPolygon", + "arcs": [[[511]], [[512]], [[513]], [[514]], [[515]]], + "id": "090", + "properties": { "name": "Solomon Is." } + }, + { + "type": "MultiPolygon", + "arcs": [[[516]], [[517]]], + "id": "554", + "properties": { "name": "New Zealand" } + }, + { + "type": "MultiPolygon", + "arcs": [[[518]], [[519]]], + "id": "036", + "properties": { "name": "Australia" } + }, + { + "type": "Polygon", + "arcs": [[520]], + "id": "144", + "properties": { "name": "Sri Lanka" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[521]], + [ + [ + -61, -150, -393, -148, -391, 522, -385, -379, -384, -401, -403, + -399, -404, -397, -408, -410, -414, -415 + ] + ] + ], + "id": "156", + "properties": { "name": "China" } + }, + { + "type": "Polygon", + "arcs": [[523]], + "id": "158", + "properties": { "name": "Taiwan" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-451, 524, 525, -240, -500]], [[526]], [[527]]], + "id": "380", + "properties": { "name": "Italy" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-476, 528]], [[529]]], + "id": "208", + "properties": { "name": "Denmark" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-510, 530]], [[531]]], + "id": "826", + "properties": { "name": "United Kingdom" } + }, + { + "type": "Polygon", + "arcs": [[532]], + "id": "352", + "properties": { "name": "Iceland" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-152, 533, -421, -429, 534]], [[-419, -426]]], + "id": "031", + "properties": { "name": "Azerbaijan" } + }, + { + "type": "Polygon", + "arcs": [[-153, -535, -428, -489, 535]], + "id": "268", + "properties": { "name": "Georgia" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[536]], + [[537]], + [[538]], + [[539]], + [[540]], + [[541]], + [[542]] + ], + "id": "608", + "properties": { "name": "Philippines" } + }, + { + "type": "MultiPolygon", + "arcs": [[[-374, 543]], [[-81, 544, 545, 546]]], + "id": "458", + "properties": { "name": "Malaysia" } + }, + { + "type": "Polygon", + "arcs": [[-546, 547]], + "id": "096", + "properties": { "name": "Brunei" } + }, + { + "type": "Polygon", + "arcs": [[-450, -459, -499, 548, -525]], + "id": "705", + "properties": { "name": "Slovenia" } + }, + { + "type": "Polygon", + "arcs": [[-160, 549, -430, -171]], + "id": "246", + "properties": { "name": "Finland" } + }, + { + "type": "Polygon", + "arcs": [[-442, -460, -455, 550, -444]], + "id": "703", + "properties": { "name": "Slovakia" } + }, + { + "type": "Polygon", + "arcs": [[-445, -551, -454, -470]], + "id": "203", + "properties": { "name": "Czechia" } + }, + { + "type": "Polygon", + "arcs": [[-126, 551, 552, 553]], + "id": "232", + "properties": { "name": "Eritrea" } + }, + { + "type": "MultiPolygon", + "arcs": [[[554]], [[555]], [[556]]], + "id": "392", + "properties": { "name": "Japan" } + }, + { + "type": "Polygon", + "arcs": [[-193, -97, -202]], + "id": "600", + "properties": { "name": "Paraguay" } + }, + { + "type": "Polygon", + "arcs": [[-364, 557, 558]], + "id": "887", + "properties": { "name": "Yemen" } + }, + { + "type": "Polygon", + "arcs": [[-346, -362, -356, 559, -354, 560, -352, -365, -559, 561]], + "id": "682", + "properties": { "name": "Saudi Arabia" } + }, + { + "type": "MultiPolygon", + "arcs": [ + [[562]], + [[563]], + [[564]], + [[565]], + [[566]], + [[567]], + [[568]], + [[569]] + ], + "id": "010", + "properties": { "name": "Antarctica" } + }, + { + "type": "Polygon", + "arcs": [[570, 571]], + "properties": { "name": "N. Cyprus" } + }, + { + "type": "Polygon", + "arcs": [[-572, 572]], + "id": "196", + "properties": { "name": "Cyprus" } + }, + { + "type": "Polygon", + "arcs": [[-341, -15, 573]], + "id": "504", + "properties": { "name": "Morocco" } + }, + { + "type": "Polygon", + "arcs": [[-124, 574, 575, -329, 576]], + "id": "818", + "properties": { "name": "Egypt" } + }, + { + "type": "Polygon", + "arcs": [[-123, -132, -283, -343, -340, 577, -575]], + "id": "434", + "properties": { "name": "Libya" } + }, + { + "type": "Polygon", + "arcs": [[-114, -119, 578, -127, -554, 579, 580]], + "id": "231", + "properties": { "name": "Ethiopia" } + }, + { + "type": "Polygon", + "arcs": [[-553, 581, 582, -580]], + "id": "262", + "properties": { "name": "Djibouti" } + }, + { + "type": "Polygon", + "arcs": [[-115, -581, -583, 583]], + "properties": { "name": "Somaliland" } + }, + { + "type": "Polygon", + "arcs": [[-11, 584, -110, 585, -117]], + "id": "800", + "properties": { "name": "Uganda" } + }, + { + "type": "Polygon", + "arcs": [[-10, -325, -111, -585]], + "id": "646", + "properties": { "name": "Rwanda" } + }, + { + "type": "Polygon", + "arcs": [[-496, 586, 587]], + "id": "070", + "properties": { "name": "Bosnia and Herz." } + }, + { + "type": "Polygon", + "arcs": [[-481, -487, -494, 588, 589]], + "id": "807", + "properties": { "name": "Macedonia" } + }, + { + "type": "Polygon", + "arcs": [[-457, -464, -482, -590, 590, 591, -587, -495]], + "id": "688", + "properties": { "name": "Serbia" } + }, + { + "type": "Polygon", + "arcs": [[-492, 592, -497, -588, -592, 593]], + "id": "499", + "properties": { "name": "Montenegro" } + }, + { + "type": "Polygon", + "arcs": [[-493, -594, -591, -589]], + "properties": { "name": "Kosovo" } + }, + { + "type": "Polygon", + "arcs": [[594]], + "id": "780", + "properties": { "name": "Trinidad and Tobago" } + }, + { + "type": "Polygon", + "arcs": [[-109, -310, -128, -579, -118, -586]], + "id": "728", + "properties": { "name": "S. Sudan" } + } + ] + }, + "land": { + "type": "GeometryCollection", + "geometries": [ + { + "type": "MultiPolygon", + "arcs": [ + [[0]], + [[1]], + [ + [ + 3, 320, 184, 255, 323, 104, 322, 311, 313, 315, 289, 284, 273, + 290, 293, 297, 305, 307, 302, 304, 263, 336, 258, 272, 13, 573, + 341, 338, 577, 575, 329, 332, 423, 487, 535, 153, 435, 164, 436, + 461, 477, 489, 484, 490, 592, 497, 548, 525, 240, 507, 505, 506, + 242, 501, 503, 474, 528, 476, 446, 142, 464, 466, 468, 158, 549, + 430, 172, 161, 387, 391, 389, 522, 385, 371, 372, 543, 374, 380, + 401, 394, 404, 422, 360, 354, 559, 352, 560, 347, 365, 349, 362, + 557, 561, 346, 576, 124, 551, 581, 583, 115, 119 + ], + [421, 416, 64, 150, 533] + ], + [ + [ + 17, 48, 186, 229, 227, 223, 219, 216, 213, 209, 230, 232, 234, + 236, 200, 191, 93, 100, 203, 246, 207, 211, 214, 217, 220, 224, + 228, 189, 50, 15, 58 + ] + ], + [[19]], + [[20]], + [[21]], + [[22]], + [[23]], + [[24]], + [[25]], + [[26]], + [[27]], + [[28]], + [[29]], + [[30]], + [[31]], + [[32]], + [[33]], + [[34]], + [[35]], + [[36]], + [[37]], + [[38]], + [[39]], + [[40]], + [[41]], + [[42]], + [[43]], + [[44]], + [[45]], + [[46]], + [[47]], + [[51]], + [[52]], + [[53]], + [[54]], + [[55]], + [[56]], + [[57]], + [[59]], + [[70, 75]], + [[72]], + [[73]], + [[74]], + [[77, 177]], + [[78]], + [[546, 79, 544, 547]], + [[81]], + [[82]], + [[83]], + [[84]], + [[85]], + [[86]], + [[87]], + [[88]], + [[89]], + [[90, 98]], + [[133, 134]], + [[135]], + [[136]], + [[137]], + [[138]], + [[139]], + [[140]], + [[144]], + [[145]], + [[162]], + [[165]], + [[166]], + [[167]], + [[168]], + [[169]], + [[173]], + [[174]], + [[175]], + [[176]], + [[245]], + [[247]], + [[248]], + [[249]], + [[334]], + [[366]], + [[367]], + [[482]], + [[508, 530]], + [[510]], + [[511]], + [[512]], + [[513]], + [[514]], + [[515]], + [[516]], + [[517]], + [[518]], + [[519]], + [[520]], + [[521]], + [[523]], + [[526]], + [[527]], + [[529]], + [[531]], + [[532]], + [[536]], + [[537]], + [[538]], + [[539]], + [[540]], + [[541]], + [[542]], + [[554]], + [[555]], + [[556]], + [[562]], + [[563]], + [[564]], + [[565]], + [[566]], + [[567]], + [[568]], + [[569]], + [[570, 572]], + [[594]] + ] + } + ] + } + }, + "arcs": [ + [ + [99478, 40237], + [69, 98], + [96, -171], + [-46, -308], + [-172, -81], + [-153, 73], + [-27, 260], + [107, 203], + [126, -74] + ], + [ + [0, 41087], + [57, 27], + [-34, -284], + [-23, -32], + [99822, -145], + [-177, -124], + [-36, 220], + [139, 121], + [88, 33], + [163, 184], + [-99999, 0] + ], + [ + [59417, 50018], + [47, -65], + [1007, -1203], + [19, -343], + [399, -590] + ], + [ + [60889, 47817], + [-128, -728], + [16, -335], + [178, -216], + [8, -153], + [-76, -357], + [16, -180], + [-18, -282], + [97, -370], + [115, -583], + [101, -129] + ], + [ + [61198, 44484], + [-221, -342], + [-303, -230], + [-167, 10], + [-99, -177], + [-193, -16], + [-73, -74], + [-334, 166], + [-209, -48] + ], + [ + [59599, 43773], + [-77, 804], + [-95, 275], + [-55, 164], + [-273, 110] + ], + [ + [59099, 45126], + [-157, 177], + [-177, 100], + [-111, 99], + [-116, 150] + ], + [ + [58538, 45652], + [-150, 745], + [-161, 330], + [-55, 343], + [27, 307], + [-50, 544] + ], + [ + [58149, 47921], + [115, 28], + [101, 214], + [108, 308], + [69, 124], + [-3, 192], + [-60, 134], + [-16, 233] + ], + [ + [58463, 49154], + [80, 74], + [16, 348], + [-110, 333] + ], + [ + [58449, 49909], + [98, 71], + [304, -7], + [566, 45] + ], + [ + [47592, 66920], + [1, -40], + [-6, -114] + ], + [ + [47587, 66766], + [-1, -895], + [-911, 31], + [9, -1512], + [-261, -53], + [-68, -304], + [53, -853], + [-1088, 4], + [-60, -197] + ], + [ + [45260, 62987], + [12, 249] + ], + [ + [45272, 63236], + [5, -1], + [625, 48], + [33, 213], + [114, 265], + [92, 816], + [386, 637], + [131, 745], + [86, 44], + [91, 460], + [234, 63], + [100, -76], + [126, 0], + [90, 134], + [172, 19], + [-7, 317], + [42, 0] + ], + [ + [15878, 79530], + [-38, 1], + [-537, 581], + [-199, 255], + [-503, 244], + [-155, 523], + [40, 363], + [-356, 252], + [-48, 476], + [-336, 429], + [-6, 304] + ], + [ + [13740, 82958], + [154, 285], + [-7, 373], + [-473, 376], + [-284, 674], + [-173, 424], + [-255, 266], + [-187, 242], + [-147, 306], + [-279, -192], + [-270, -330], + [-247, 388], + [-194, 259], + [-271, 164], + [-273, 17], + [1, 3364], + [2, 2193] + ], + [ + [10837, 91767], + [518, -142], + [438, -285], + [289, -54], + [244, 247], + [336, 184], + [413, -72], + [416, 259], + [455, 148], + [191, -245], + [207, 138], + [62, 278], + [192, -63], + [470, -530], + [369, 401], + [38, -449], + [341, 97], + [105, 173], + [337, -34], + [424, -248], + [650, -217], + [383, -100], + [272, 38], + [374, -300], + [-390, -293], + [502, -127], + [750, 70], + [236, 103], + [296, -354], + [302, 299], + [-283, 251], + [179, 202], + [338, 27], + [223, 59], + [224, -141], + [279, -321], + [310, 47], + [491, -266], + [431, 94], + [405, -14], + [-32, 367], + [247, 103], + [431, -200], + [-2, -559], + [177, 471], + [223, -16], + [126, 594], + [-298, 364], + [-324, 239], + [22, 653], + [329, 429], + [366, -95], + [281, -261], + [378, -666], + [-247, -290], + [517, -120], + [-1, -604], + [371, 463], + [332, -380], + [-83, -438], + [269, -399], + [290, 427], + [202, 510], + [16, 649], + [394, -46], + [411, -87], + [373, -293], + [17, -293], + [-207, -315], + [196, -316], + [-36, -288], + [-544, -413], + [-386, -91], + [-287, 178], + [-83, -297], + [-268, -498], + [-81, -259], + [-322, -399], + [-397, -39], + [-220, -250], + [-18, -384], + [-323, -74], + [-340, -479], + [-301, -665], + [-108, -466], + [-16, -686], + [409, -99], + [125, -553], + [130, -448], + [388, 117], + [517, -256], + [277, -225], + [199, -279], + [348, -163], + [294, -248], + [459, -34], + [302, -58], + [-45, -511], + [86, -594], + [201, -661], + [414, -561], + [214, 192], + [150, 607], + [-145, 934], + [-196, 311], + [445, 276], + [314, 415], + [154, 411], + [-23, 395], + [-188, 502], + [-338, 445], + [328, 619], + [-121, 535], + [-93, 922], + [194, 137], + [476, -161], + [286, -57], + [230, 155], + [258, -200], + [342, -343], + [85, -229], + [495, -45], + [-8, -496], + [92, -747], + [254, -92], + [201, -348], + [402, 328], + [266, 652], + [184, 274], + [216, -527], + [362, -754], + [307, -709], + [-112, -371], + [370, -333], + [250, -338], + [442, -152], + [179, -189], + [110, -500], + [216, -78], + [112, -223], + [20, -664], + [-202, -222], + [-199, -207], + [-458, -210], + [-349, -486], + [-470, -96], + [-594, 125], + [-417, 4], + [-287, -41], + [-233, -424], + [-354, -262], + [-401, -782], + [-320, -545], + [236, 97], + [446, 776], + [583, 493], + [415, 58], + [246, -289], + [-262, -397], + [88, -637], + [91, -446], + [361, -295], + [459, 86], + [278, 664], + [19, -429], + [180, -214], + [-344, -387], + [-615, -351], + [-276, -239], + [-310, -426], + [-211, 44], + [-11, 500], + [483, 488], + [-445, -19], + [-309, -72] + ], + [ + [31350, 77248], + [-181, 334], + [0, 805], + [-123, 171], + [-187, -100], + [-92, 155], + [-212, -446], + [-84, -460], + [-99, -269], + [-118, -91], + [-89, -30], + [-28, -146], + [-512, 0], + [-422, -4], + [-125, -109], + [-294, -425], + [-34, -46], + [-89, -231], + [-255, 1], + [-273, -3], + [-125, -93], + [44, -116], + [25, -181], + [-5, -60], + [-363, -293], + [-286, -93], + [-323, -316], + [-70, 0], + [-94, 93], + [-31, 85], + [6, 61], + [61, 207], + [131, 325], + [81, 349], + [-56, 514], + [-59, 536], + [-290, 277], + [35, 105], + [-41, 73], + [-76, 0], + [-56, 93], + [-14, 140], + [-54, -61], + [-75, 18], + [17, 59], + [-65, 58], + [-27, 155], + [-216, 189], + [-224, 197], + [-272, 229], + [-261, 214], + [-248, -167], + [-91, -6], + [-342, 154], + [-225, -77], + [-269, 183], + [-284, 94], + [-194, 36], + [-86, 100], + [-49, 325], + [-94, -3], + [-1, -227], + [-575, 0], + [-951, 0], + [-944, 0], + [-833, 0], + [-834, 0], + [-819, 0], + [-847, 0], + [-273, 0], + [-824, 0], + [-789, 0] + ], + [ + [26668, 87478], + [207, 273], + [381, -6], + [-6, -114], + [-325, -326], + [-196, 13], + [-61, 160] + ], + [ + [27840, 93593], + [-306, 313], + [12, 213], + [133, 39], + [636, -63], + [479, -325], + [25, -163], + [-296, 17], + [-299, 13], + [-304, -80], + [-80, 36] + ], + [ + [27690, 87261], + [107, 177], + [114, -13], + [70, -121], + [-108, -310], + [-123, 50], + [-73, 176], + [13, 41] + ], + [ + [23996, 94879], + [-151, -229], + [-403, 44], + [-337, 155], + [148, 266], + [399, 159], + [243, -208], + [101, -187] + ], + [ + [23933, 96380], + [-126, -17], + [-521, 38], + [-74, 165], + [559, -9], + [195, -109], + [-33, -68] + ], + [ + [23124, 97116], + [332, -205], + [-76, -214], + [-411, -122], + [-226, 138], + [-119, 221], + [-22, 245], + [360, -24], + [162, -39] + ], + [ + [25514, 94532], + [-449, 73], + [-738, 190], + [-96, 325], + [-34, 293], + [-279, 258], + [-574, 72], + [-322, 183], + [104, 242], + [573, -37], + [308, -190], + [547, 1], + [240, -194], + [-64, -222], + [319, -134], + [177, -140], + [374, -26], + [406, -50], + [441, 128], + [566, 51], + [451, -42], + [298, -223], + [62, -244], + [-174, -157], + [-414, -127], + [-355, 72], + [-797, -91], + [-570, -11] + ], + [ + [19093, 96754], + [392, -92], + [-93, -177], + [-518, -170], + [-411, 191], + [224, 188], + [406, 60] + ], + [ + [19177, 97139], + [361, -120], + [-339, -115], + [-461, 1], + [5, 84], + [285, 177], + [149, -27] + ], + [ + [34555, 80899], + [-148, -372], + [-184, -517], + [181, 199], + [187, -126], + [-98, -206], + [247, -162], + [128, 144], + [277, -182], + [-86, -433], + [194, 101], + [36, -313], + [86, -367], + [-117, -520], + [-125, -22], + [-183, 111], + [60, 484], + [-77, 75], + [-322, -513], + [-166, 21], + [196, 277], + [-267, 144], + [-298, -35], + [-539, 18], + [-43, 175], + [173, 208], + [-121, 160], + [234, 356], + [287, 941], + [172, 336], + [241, 204], + [129, -26], + [-54, -160] + ], + [ + [26699, 89048], + [304, -203], + [318, -184], + [25, -281], + [204, 46], + [199, -196], + [-247, -186], + [-432, 142], + [-156, 266], + [-275, -314], + [-396, -306], + [-95, 346], + [-377, -57], + [242, 292], + [35, 465], + [95, 542], + [201, -49], + [51, -259], + [143, 91], + [161, -155] + ], + [ + [28119, 93327], + [263, 235], + [616, -299], + [383, -282], + [36, -258], + [515, 134], + [290, -376], + [670, -234], + [242, -238], + [263, -553], + [-510, -275], + [654, -386], + [441, -130], + [400, -543], + [437, -39], + [-87, -414], + [-487, -687], + [-342, 253], + [-437, 568], + [-359, -74], + [-35, -338], + [292, -344], + [377, -272], + [114, -157], + [181, -584], + [-96, -425], + [-350, 160], + [-697, 473], + [393, -509], + [289, -357], + [45, -206], + [-753, 236], + [-596, 343], + [-337, 287], + [97, 167], + [-414, 304], + [-405, 286], + [5, -171], + [-803, -94], + [-235, 203], + [183, 435], + [522, 10], + [571, 76], + [-92, 211], + [96, 294], + [360, 576], + [-77, 261], + [-107, 203], + [-425, 286], + [-563, 201], + [178, 150], + [-294, 367], + [-245, 34], + [-219, 201], + [-149, -175], + [-503, -76], + [-1011, 132], + [-588, 174], + [-450, 89], + [-231, 207], + [290, 270], + [-394, 2], + [-88, 599], + [213, 528], + [286, 241], + [717, 158], + [-204, -382], + [219, -369], + [256, 477], + [704, 242], + [477, -611], + [-42, -387], + [550, 172] + ], + [ + [23749, 94380], + [579, -20], + [530, -144], + [-415, -526], + [-331, -115], + [-298, -442], + [-317, 22], + [-173, 519], + [4, 294], + [145, 251], + [276, 161] + ], + [ + [15873, 95551], + [472, 442], + [570, 383], + [426, -9], + [381, 87], + [-38, -454], + [-214, -205], + [-259, -29], + [-517, -252], + [-444, -91], + [-377, 128] + ], + [ + [13136, 82508], + [267, 47], + [-84, -671], + [242, -475], + [-111, 1], + [-167, 270], + [-103, 272], + [-140, 184], + [-51, 260], + [16, 188], + [131, -76] + ], + [ + [20696, 97433], + [546, -81], + [751, -215], + [212, -281], + [108, -247], + [-453, 66], + [-457, 192], + [-619, 21], + [268, 176], + [-335, 142], + [-21, 227] + ], + [ + [15692, 79240], + [-140, -82], + [-456, 269], + [-84, 209], + [-248, 207], + [-50, 168], + [-286, 107], + [-107, 321], + [24, 137], + [291, -129], + [171, -89], + [261, -63], + [94, -204], + [138, -280], + [277, -244], + [115, -327] + ], + [ + [16239, 94566], + [397, -123], + [709, -33], + [270, -171], + [298, -249], + [-349, -149], + [-681, -415], + [-344, -414], + [0, -257], + [-731, -285], + [-147, 259], + [-641, 312], + [119, 250], + [192, 432], + [241, 388], + [-272, 362], + [939, 93] + ], + [ + [20050, 95391], + [247, 99], + [291, -26], + [49, -289], + [-169, -281], + [-940, -91], + [-701, -256], + [-423, -14], + [-35, 193], + [577, 261], + [-1255, -70], + [-389, 106], + [379, 577], + [262, 165], + [782, -199], + [493, -350], + [485, -45], + [-397, 565], + [255, 215], + [286, -68], + [94, -282], + [109, -210] + ], + [ + [20410, 93755], + [311, -239], + [175, -575], + [86, -417], + [466, -293], + [502, -279], + [-31, -260], + [-456, -48], + [178, -227], + [-94, -217], + [-503, 93], + [-478, 160], + [-322, -36], + [-522, -201], + [-704, -88], + [-494, -56], + [-151, 279], + [-379, 161], + [-246, -66], + [-343, 468], + [185, 62], + [429, 101], + [392, -26], + [362, 103], + [-537, 138], + [-594, -47], + [-394, 12], + [-146, 217], + [644, 237], + [-428, -9], + [-485, 156], + [233, 443], + [193, 235], + [744, 359], + [284, -114], + [-139, -277], + [618, 179], + [386, -298], + [314, 302], + [254, -194], + [227, -580], + [140, 244], + [-197, 606], + [244, 86], + [276, -94] + ], + [ + [22100, 93536], + [-306, 386], + [329, 286], + [331, -124], + [496, 75], + [72, -172], + [-259, -283], + [420, -254], + [-50, -532], + [-455, -229], + [-268, 50], + [-192, 225], + [-690, 456], + [5, 189], + [567, -73] + ], + [ + [20389, 94064], + [372, 24], + [211, -130], + [-244, -390], + [-434, 413], + [95, 83] + ], + [ + [22639, 95907], + [212, -273], + [9, -303], + [-127, -440], + [-458, -60], + [-298, 94], + [5, 345], + [-455, -46], + [-18, 457], + [299, -18], + [419, 201], + [390, -34], + [22, 77] + ], + [ + [23329, 98201], + [192, 180], + [285, 42], + [-122, 135], + [646, 30], + [355, -315], + [468, -127], + [455, -112], + [220, -390], + [334, -190], + [-381, -176], + [-513, -445], + [-492, -42], + [-575, 76], + [-299, 240], + [4, 215], + [220, 157], + [-508, -4], + [-306, 196], + [-176, 268], + [193, 262] + ], + [ + [24559, 98965], + [413, 112], + [324, 19], + [545, 96], + [409, 220], + [344, -30], + [300, -166], + [211, 319], + [367, 95], + [498, 65], + [849, 24], + [148, -63], + [802, 100], + [601, -38], + [602, -37], + [742, -47], + [597, -75], + [508, -161], + [-12, -157], + [-678, -257], + [-672, -119], + [-251, -133], + [605, 3], + [-656, -358], + [-452, -167], + [-476, -483], + [-573, -98], + [-177, -120], + [-841, -64], + [383, -74], + [-192, -105], + [230, -292], + [-264, -202], + [-429, -167], + [-132, -232], + [-388, -176], + [39, -134], + [475, 23], + [6, -144], + [-742, -355], + [-726, 163], + [-816, -91], + [-414, 71], + [-525, 31], + [-35, 284], + [514, 133], + [-137, 427], + [170, 41], + [742, -255], + [-379, 379], + [-450, 113], + [225, 229], + [492, 141], + [79, 206], + [-392, 231], + [-118, 304], + [759, -26], + [220, -64], + [433, 216], + [-625, 68], + [-972, -38], + [-491, 201], + [-232, 239], + [-324, 173], + [-61, 202] + ], + [ + [29106, 90427], + [-180, -174], + [-312, -30], + [-69, 289], + [118, 331], + [255, 82], + [217, -163], + [3, -253], + [-32, -82] + ], + [ + [23262, 91636], + [169, -226], + [-173, -207], + [-374, 179], + [-226, -65], + [-380, 266], + [245, 183], + [194, 256], + [295, -168], + [166, -106], + [84, -112] + ], + [ + [32078, 80046], + [96, 49], + [365, -148], + [284, -247], + [8, -108], + [-135, -11], + [-360, 186], + [-258, 279] + ], + [ + [32218, 78370], + [97, -288], + [202, -79], + [257, 16], + [-137, -242], + [-102, -38], + [-353, 250], + [-69, 198], + [105, 183] + ], + [ + [31350, 77248], + [48, -194], + [-296, -286], + [-286, -204], + [-293, -175], + [-147, -351], + [-47, -133], + [-3, -313], + [92, -313], + [115, -15], + [-29, 216], + [83, -131], + [-22, -169], + [-188, -96], + [-133, 11], + [-205, -103], + [-121, -29], + [-162, -29], + [-231, -171], + [408, 111], + [82, -112], + [-389, -177], + [-177, -1], + [8, 72], + [-84, -164], + [82, -27], + [-60, -424], + [-203, -455], + [-20, 152], + [-61, 30], + [-91, 148], + [57, -318], + [69, -105], + [5, -223], + [-89, -230], + [-157, -472], + [-25, 24], + [86, 402], + [-142, 225], + [-33, 491], + [-53, -255], + [59, -375], + [-183, 93], + [191, -191], + [12, -562], + [79, -41], + [29, -204], + [39, -591], + [-176, -439], + [-288, -175], + [-182, -346], + [-139, -38], + [-141, -217], + [-39, -199], + [-305, -383], + [-157, -281], + [-131, -351], + [-43, -419], + [50, -411], + [92, -505], + [124, -418], + [1, -256], + [132, -685], + [-9, -398], + [-12, -230], + [-69, -361], + [-83, -75], + [-137, 72], + [-44, 259], + [-105, 136], + [-148, 508], + [-129, 452], + [-42, 231], + [57, 393], + [-77, 325], + [-217, 494], + [-108, 90], + [-281, -268], + [-49, 30], + [-135, 275], + [-174, 147], + [-314, -75], + [-247, 66], + [-212, -41], + [-114, -92], + [50, -157], + [-5, -240], + [59, -117], + [-53, -77], + [-103, 87], + [-104, -112], + [-202, 18], + [-207, 312], + [-242, -73], + [-202, 137], + [-173, -42], + [-234, -138], + [-253, -438], + [-276, -255], + [-152, -282], + [-63, -266], + [-3, -407], + [14, -284], + [52, -201] + ], + [ + [23016, 65864], + [-108, -18], + [-197, 130], + [-217, 184], + [-78, 277], + [-61, 414], + [-164, 337], + [-96, 346], + [-139, 404], + [-196, 236], + [-227, -11], + [-175, -467], + [-230, 177], + [-144, 178], + [-69, 325], + [-92, 309], + [-165, 260], + [-142, 186], + [-102, 210], + [-481, 0], + [0, -244], + [-221, 0], + [-552, -4], + [-634, 416], + [-419, 287], + [26, 116], + [-353, -64], + [-316, -46] + ], + [ + [17464, 69802], + [-46, 302], + [-180, 340], + [-130, 71], + [-30, 169], + [-156, 30], + [-100, 159], + [-258, 59], + [-71, 95], + [-33, 324], + [-270, 594], + [-231, 821], + [10, 137], + [-123, 195], + [-215, 495], + [-38, 482], + [-148, 323], + [61, 489], + [-10, 507], + [-89, 453], + [109, 557], + [34, 536], + [33, 536], + [-50, 792], + [-88, 506], + [-80, 274], + [33, 115], + [402, -200], + [148, -558], + [69, 156], + [-45, 484], + [-94, 485] + ], + [ + [6833, 62443], + [49, -51], + [45, -79], + [71, -207], + [-7, -33], + [-108, -126], + [-89, -92], + [-41, -99], + [-69, 84], + [8, 165], + [-46, 216], + [14, 65], + [48, 97], + [-19, 116], + [16, 55], + [21, -11], + [107, -100] + ], + [ + [6668, 62848], + [-23, -71], + [-94, -43], + [-47, 125], + [-32, 48], + [-3, 37], + [27, 50], + [99, -56], + [73, -90] + ], + [ + [6456, 63091], + [-9, -63], + [-149, 17], + [21, 72], + [137, -26] + ], + [ + [6104, 63411], + [23, -38], + [80, -196], + [-15, -34], + [-19, 8], + [-97, 21], + [-35, 133], + [-11, 24], + [74, 82] + ], + [ + [5732, 63705], + [5, -138], + [-33, -58], + [-93, 107], + [14, 43], + [43, 58], + [64, -12] + ], + [ + [3759, 86256], + [220, -54], + [27, -226], + [-171, -92], + [-182, 110], + [-168, 161], + [274, 101] + ], + [ + [7436, 84829], + [185, -40], + [117, -183], + [-240, -281], + [-277, -225], + [-142, 152], + [-43, 277], + [252, 210], + [148, 90] + ], + [ + [13740, 82958], + [-153, 223], + [-245, 188], + [-78, 515], + [-358, 478], + [-150, 558], + [-267, 38], + [-441, 15], + [-326, 170], + [-574, 613], + [-266, 112], + [-486, 211], + [-385, -51], + [-546, 272], + [-330, 252], + [-309, -125], + [58, -411], + [-154, -38], + [-321, -123], + [-245, -199], + [-308, -126], + [-39, 348], + [125, 580], + [295, 182], + [-76, 148], + [-354, -329], + [-190, -394], + [-400, -420], + [203, -287], + [-262, -424], + [-299, -248], + [-278, -180], + [-69, -261], + [-434, -305], + [-87, -278], + [-325, -252], + [-191, 45], + [-259, -165], + [-282, -201], + [-231, -197], + [-477, -169], + [-43, 99], + [304, 276], + [271, 182], + [296, 324], + [345, 66], + [137, 243], + [385, 353], + [62, 119], + [205, 208], + [48, 448], + [141, 349], + [-320, -179], + [-90, 102], + [-150, -215], + [-181, 300], + [-75, -212], + [-104, 294], + [-278, -236], + [-170, 0], + [-24, 352], + [50, 216], + [-179, 211], + [-361, -113], + [-235, 277], + [-190, 142], + [-1, 334], + [-214, 252], + [108, 340], + [226, 330], + [99, 303], + [225, 43], + [191, -94], + [224, 285], + [201, -51], + [212, 183], + [-52, 270], + [-155, 106], + [205, 228], + [-170, -7], + [-295, -128], + [-85, -131], + [-219, 131], + [-392, -67], + [-407, 142], + [-117, 238], + [-351, 343], + [390, 247], + [620, 289], + [228, 0], + [-38, -296], + [586, 23], + [-225, 366], + [-342, 225], + [-197, 296], + [-267, 252], + [-381, 187], + [155, 309], + [493, 19], + [350, 270], + [66, 287], + [284, 281], + [271, 68], + [526, 262], + [256, -40], + [427, 315], + [421, -124], + [201, -266], + [123, 114], + [469, -35], + [-16, -136], + [425, -101], + [283, 59], + [585, -186], + [534, -56], + [214, -77], + [370, 96], + [421, -177], + [302, -83] + ], + [ + [2297, 88264], + [171, -113], + [173, 61], + [225, -156], + [276, -79], + [-23, -64], + [-211, -125], + [-211, 128], + [-106, 107], + [-245, -34], + [-66, 52], + [17, 223] + ], + [ + [74266, 79657], + [-212, -393], + [-230, -56], + [-13, -592], + [-155, -267], + [-551, 194], + [-200, -1058], + [-143, -131], + [-550, -236], + [250, -1026], + [-190, -154], + [22, -337] + ], + [ + [72294, 75601], + [-171, 87], + [-140, 212], + [-412, 62], + [-461, 16], + [-100, -65], + [-396, 248], + [-158, -122], + [-43, -349], + [-457, 204], + [-183, -84], + [-62, -259] + ], + [ + [69711, 75551], + [-159, -109], + [-367, -412], + [-121, -422], + [-104, -4], + [-76, 280], + [-353, 19], + [-57, 484], + [-135, 4], + [21, 593], + [-333, 431], + [-476, -46], + [-326, -86], + [-265, 533], + [-227, 223], + [-431, 423], + [-52, 51], + [-715, -349], + [11, -2178] + ], + [ + [65546, 74986], + [-142, -29], + [-195, 463], + [-188, 166], + [-315, -123], + [-123, -197] + ], + [ + [64583, 75266], + [-15, 144], + [68, 246], + [-53, 206], + [-322, 202], + [-125, 530], + [-154, 150], + [-9, 192], + [270, -56], + [11, 432], + [236, 96], + [243, -88], + [50, 576], + [-50, 365], + [-278, -28], + [-236, 144], + [-321, -260], + [-259, -124] + ], + [ + [63639, 77993], + [-142, 96], + [29, 304], + [-177, 395], + [-207, -17], + [-235, 401], + [160, 448], + [-81, 120], + [222, 649], + [285, -342], + [35, 431], + [573, 643], + [434, 15], + [612, -409], + [329, -239], + [295, 249], + [440, 12], + [356, -306], + [80, 175], + [391, -25], + [69, 280], + [-450, 406], + [267, 288], + [-52, 161], + [266, 153], + [-200, 405], + [127, 202], + [1039, 205], + [136, 146], + [695, 218], + [250, 245], + [499, -127], + [88, -612], + [290, 144], + [356, -202], + [-23, -322], + [267, 33], + [696, 558], + [-102, -185], + [355, -457], + [620, -1500], + [148, 309], + [383, -340], + [399, 151], + [154, -106], + [133, -341], + [194, -115], + [119, -251], + [358, 79], + [147, -361] + ], + [ + [69711, 75551], + [83, -58], + [-234, -382], + [205, -223], + [198, 147], + [329, -311], + [-355, -425], + [-212, 58] + ], + [ + [69725, 74357], + [-114, -15], + [-40, 164], + [58, 274], + [-371, -137], + [-89, -380], + [-132, -326], + [-232, 28], + [-72, -261], + [204, -140], + [60, -440], + [-156, -598] + ], + [ + [68841, 72526], + [-210, 124], + [-154, 4] + ], + [ + [68477, 72654], + [7, 362], + [-369, 253], + [-291, 289], + [-181, 278], + [-317, 408], + [-137, 609], + [-93, 108], + [-301, -27], + [-106, 121], + [-30, 471], + [-374, 312], + [-234, -343], + [-237, -204], + [45, -297], + [-313, -8] + ], + [ + [89166, 49043], + [482, -407], + [513, -338], + [192, -302], + [154, -297], + [43, -349], + [462, -365], + [68, -313], + [-256, -64], + [62, -393], + [248, -388], + [180, -627], + [159, 20], + [-11, -262], + [215, -100], + [-84, -111], + [295, -249], + [-30, -171], + [-184, -41], + [-69, 153], + [-238, 66], + [-281, 89], + [-216, 377], + [-158, 325], + [-144, 517], + [-362, 259], + [-235, -169], + [-170, -195], + [35, -436], + [-218, -203], + [-155, 99], + [-288, 25] + ], + [ + [89175, 45193], + [-4, 1925], + [-5, 1925] + ], + [ + [92399, 48417], + [106, -189], + [33, -307], + [-87, -157], + [-52, 348], + [-65, 229], + [-126, 193], + [-158, 252], + [-200, 174], + [77, 143], + [150, -166], + [94, -130], + [117, -142], + [111, -248] + ], + [ + [92027, 47129], + [-152, -144], + [-142, -138], + [-148, 1], + [-228, 171], + [-158, 165], + [23, 183], + [249, -86], + [152, 46], + [42, 283], + [40, 15], + [27, -314], + [158, 45], + [78, 202], + [155, 211], + [-30, 348], + [166, 11], + [56, -97], + [-5, -327], + [-93, -361], + [-146, -48], + [-44, -166] + ], + [ + [92988, 47425], + [84, -134], + [135, -375], + [131, -200], + [-39, -166], + [-78, -59], + [-120, 227], + [-122, 375], + [-59, 450], + [38, 57], + [30, -175] + ], + [ + [89175, 45193], + [-247, 485], + [-282, 118], + [-69, -168], + [-352, -18], + [118, 481], + [175, 164], + [-72, 642], + [-134, 496], + [-538, 500], + [-229, 50], + [-417, 546], + [-82, -287], + [-107, -52], + [-63, 216], + [-1, 257], + [-212, 290], + [299, 213], + [198, -11], + [-23, 156], + [-407, 1], + [-110, 352], + [-248, 109], + [-117, 293], + [374, 143], + [142, 192], + [446, -242], + [44, -220], + [78, -955], + [287, -354], + [232, 627], + [319, 356], + [247, 1], + [238, -206], + [206, -212], + [298, -113] + ], + [ + [84713, 45326], + [28, -117], + [5, -179] + ], + [ + [84746, 45030], + [-181, -441], + [-238, -130], + [-33, 71], + [25, 201], + [119, 360], + [275, 235] + ], + [ + [87280, 46506], + [-27, 445], + [49, 212], + [58, 200], + [63, -173], + [0, -282], + [-143, -402] + ], + [ + [82744, 53024], + [-158, -533], + [204, -560], + [-48, -272], + [312, -546], + [-329, -70], + [-93, -403], + [12, -535], + [-267, -404], + [-7, -589], + [-107, -903], + [-41, 210], + [-316, -266], + [-110, 361], + [-198, 34], + [-139, 189], + [-330, -212], + [-101, 285], + [-182, -32], + [-229, 68], + [-43, 793], + [-138, 164], + [-134, 505], + [-38, 517], + [32, 548], + [165, 392] + ], + [ + [80461, 51765], + [47, -395], + [190, -334], + [179, 121], + [177, -43], + [162, 299], + [133, 52], + [263, -166], + [226, 126], + [143, 822], + [107, 205], + [96, 672], + [319, 0], + [241, -100] + ], + [ + [85936, 48924], + [305, -172], + [101, -452], + [-234, 244], + [-232, 49], + [-157, -39], + [-192, 21], + [65, 325], + [344, 24] + ], + [ + [85242, 48340], + [-192, 108], + [-54, 254], + [281, 29], + [69, -195], + [-104, -196] + ], + [ + [85536, 51864], + [20, -322], + [164, -52], + [26, -241], + [-15, -517], + [-143, 58], + [-42, -359], + [114, -312], + [-78, -71], + [-112, 374], + [-82, 755], + [56, 472], + [92, 215] + ], + [ + [84146, 51097], + [319, 25], + [275, 429], + [48, -132], + [-223, -587], + [-209, -113], + [-267, 115], + [-463, -29], + [-243, -85], + [-39, -447], + [248, -526], + [150, 268], + [518, 201], + [-22, -272], + [-121, 86], + [-121, -347], + [-245, -229], + [263, -757], + [-50, -203], + [249, -682], + [-2, -388], + [-148, -173], + [-109, 207], + [134, 484], + [-273, -229], + [-69, 164], + [36, 228], + [-200, 346], + [21, 576], + [-186, -179], + [24, -689], + [11, -846], + [-176, -85], + [-119, 173], + [79, 544], + [-43, 570], + [-117, 4], + [-86, 405], + [115, 387], + [40, 469], + [139, 891], + [58, 243], + [237, 439], + [217, -174], + [350, -82] + ], + [ + [83414, 44519], + [-368, 414], + [259, 116], + [146, -180], + [97, -180], + [-17, -159], + [-117, -11] + ], + [ + [83705, 45536], + [185, 45], + [249, 216], + [-41, -328], + [-417, -168], + [-370, 73], + [0, 216], + [220, 123], + [174, -177] + ], + [ + [82849, 45639], + [172, 48], + [69, -251], + [-321, -119], + [-193, -79], + [-149, 5], + [95, 340], + [153, 5], + [74, 209], + [100, -158] + ], + [ + [80134, 46785], + [38, -210], + [533, -59], + [61, 244], + [515, -284], + [101, -383], + [417, -108], + [341, -351], + [-317, -225], + [-306, 238], + [-251, -16], + [-288, 44], + [-260, 106], + [-322, 225], + [-204, 59], + [-116, -74], + [-506, 243], + [-48, 254], + [-255, 44], + [191, 564], + [337, -35], + [224, -231], + [115, -45] + ], + [ + [78991, 49939], + [47, -412], + [97, -330], + [204, -52], + [135, -374], + [-70, -735], + [-11, -914], + [-308, -12], + [-234, 494], + [-356, 482], + [-119, 358], + [-210, 481], + [-138, 443], + [-212, 827], + [-244, 493], + [-81, 508], + [-103, 461], + [-250, 372], + [-145, 506], + [-209, 330], + [-290, 652], + [-24, 300], + [178, -24], + [430, -114], + [246, -577], + [215, -401], + [153, -246], + [263, -635], + [283, -9], + [233, -405], + [161, -495], + [211, -270], + [-111, -482], + [159, -205], + [100, -15] + ], + [ + [30935, 19481], + [106, -274], + [139, -443], + [361, -355], + [389, -147], + [-125, -296], + [-264, -29], + [-141, 208] + ], + [ + [31400, 18145], + [-168, 16], + [-297, 1], + [0, 1319] + ], + [ + [33993, 32727], + [-70, -473], + [-74, -607], + [3, -588], + [-61, -132], + [-21, -382] + ], + [ + [33770, 30545], + [-19, -308], + [353, -506], + [-38, -408], + [173, -257], + [-14, -289], + [-267, -757], + [-412, -317], + [-557, -123], + [-305, 59], + [59, -352], + [-57, -442], + [51, -298], + [-167, -208], + [-284, -82], + [-267, 216], + [-108, -155], + [39, -587], + [188, -178], + [152, 186], + [82, -307], + [-255, -183], + [-223, -367], + [-41, -595], + [-66, -316], + [-262, -2], + [-218, -302], + [-80, -443], + [273, -433], + [266, -119], + [-96, -531], + [-328, -333], + [-180, -692], + [-254, -234], + [-113, -276], + [89, -614], + [185, -342], + [-117, 30] + ], + [ + [30952, 19680], + [-257, 93], + [-672, 79], + [-115, 344], + [6, 443], + [-185, -38], + [-98, 214], + [-24, 626], + [213, 260], + [88, 375], + [-33, 299], + [148, 504], + [101, 782], + [-30, 347], + [122, 112], + [-30, 223], + [-129, 118], + [92, 248], + [-126, 224], + [-65, 682], + [112, 120], + [-47, 720], + [65, 605], + [75, 527], + [166, 215], + [-84, 576], + [-1, 543], + [210, 386], + [-7, 494], + [159, 576], + [1, 544], + [-72, 108], + [-128, 1020], + [171, 607], + [-27, 572], + [100, 537], + [182, 555], + [196, 367], + [-83, 232], + [58, 190], + [-9, 985], + [302, 291], + [96, 614], + [-34, 148] + ], + [ + [31359, 37147], + [231, 534], + [364, -144], + [163, -427], + [109, 475], + [316, -24], + [45, -127] + ], + [ + [32587, 37434], + [511, -964], + [227, -89], + [339, -437], + [286, -231], + [40, -261], + [-273, -898], + [280, -160], + [312, -91], + [220, 95], + [252, 453], + [45, 521] + ], + [ + [34826, 35372], + [138, 114], + [139, -341], + [-6, -472], + [-234, -326], + [-186, -241], + [-314, -573], + [-370, -806] + ], + [ + [31400, 18145], + [-92, -239], + [-238, -183], + [-137, 19], + [-164, 48], + [-202, 177], + [-291, 86], + [-350, 330], + [-283, 317], + [-383, 662], + [229, -124], + [390, -395], + [369, -212], + [143, 271], + [90, 405], + [256, 244], + [198, -70] + ], + [ + [30669, 40193], + [136, -402], + [37, -426], + [146, -250], + [-88, -572], + [150, -663], + [109, -814], + [200, 81] + ], + [ + [30952, 19680], + [-247, 4], + [-134, -145], + [-250, -213], + [-45, -552], + [-118, -14], + [-313, 192], + [-318, 412], + [-346, 338], + [-87, 374], + [79, 346], + [-140, 393], + [-36, 1007], + [119, 568], + [293, 457], + [-422, 172], + [265, 522], + [94, 982], + [309, -208], + [145, 1224], + [-186, 157], + [-87, -738], + [-175, 83], + [87, 845], + [95, 1095], + [127, 404], + [-80, 576], + [-22, 666], + [117, 19], + [170, 954], + [192, 945], + [118, 881], + [-64, 885], + [83, 487], + [-34, 730], + [163, 721], + [50, 1143], + [89, 1227], + [87, 1321], + [-20, 967], + [-58, 832] + ], + [ + [30452, 39739], + [143, 151], + [74, 303] + ], + [ + [58538, 45652], + [-109, 60], + [-373, -99], + [-75, -71], + [-79, -377], + [62, -261], + [-49, -699], + [-34, -593], + [75, -105], + [194, -230], + [76, 107], + [23, -637], + [-212, 5], + [-114, 325], + [-103, 252], + [-213, 82], + [-62, 310], + [-170, -187], + [-222, 83], + [-93, 268], + [-176, 55], + [-131, -15], + [-15, 184], + [-96, 15] + ], + [ + [56642, 44124], + [-127, 35], + [-172, -89], + [-121, 15], + [-68, -54], + [15, 703], + [-93, 219], + [-21, 363], + [41, 356], + [-56, 228], + [-5, 372], + [-337, -5], + [24, 213], + [-142, -2], + [-15, -103], + [-172, -23], + [-69, -344], + [-42, -148], + [-154, 83], + [-91, -83], + [-184, -47], + [-106, 309], + [-64, 191], + [-80, 354], + [-68, 440], + [-820, 8], + [-98, -71], + [-80, 11], + [-115, -79] + ], + [ + [53422, 46976], + [-39, 183] + ], + [ + [53383, 47159], + [71, 62], + [9, 258], + [45, 152], + [101, 124] + ], + [ + [53609, 47755], + [73, -60], + [95, 226], + [152, -6], + [17, -167], + [104, -105], + [164, 370], + [161, 289], + [71, 189], + [-10, 486], + [121, 574], + [127, 304], + [183, 285], + [32, 189], + [7, 216], + [45, 205], + [-14, 335], + [34, 524], + [55, 368], + [83, 316], + [16, 357] + ], + [ + [55125, 52650], + [25, 412], + [108, 300], + [149, 190], + [229, -200], + [177, -218], + [203, -59], + [207, -115], + [83, 357], + [38, 46], + [127, -60], + [309, 295], + [110, -125], + [90, 18], + [41, 143], + [104, 51], + [209, -62], + [178, -14], + [91, 63] + ], + [ + [57603, 53672], + [169, -488], + [124, -71], + [75, 99], + [128, -39], + [155, 125], + [66, -252], + [244, -393] + ], + [ + [58564, 52653], + [-16, -691], + [111, -80], + [-89, -210], + [-107, -157], + [-106, -308], + [-59, -274], + [-15, -475], + [-65, -225], + [-2, -446] + ], + [ + [58216, 49787], + [-80, -165], + [-10, -351], + [-38, -46], + [-26, -323] + ], + [ + [58062, 48902], + [70, -268], + [17, -713] + ], + [ + [61551, 49585], + [-165, 488], + [-3, 2152], + [243, 670] + ], + [ + [61626, 52895], + [76, 186], + [178, 11], + [247, 417], + [362, 26], + [785, 1773] + ], + [ + [63274, 55308], + [194, 493], + [125, 363], + [0, 308], + [0, 596], + [1, 244], + [2, 9] + ], + [ + [63596, 57321], + [89, 12], + [128, 88], + [147, 59], + [132, 202], + [105, 2], + [6, -163], + [-25, -344], + [1, -310], + [-59, -214], + [-78, -639], + [-134, -659], + [-172, -755], + [-238, -866], + [-237, -661], + [-327, -806], + [-278, -479], + [-415, -586], + [-259, -450], + [-304, -715], + [-64, -312], + [-63, -140] + ], + [ + [59417, 50018], + [-3, 627], + [80, 239], + [137, 391], + [101, 431], + [-123, 678], + [-32, 296], + [-132, 411] + ], + [ + [59445, 53091], + [171, 352], + [188, 390] + ], + [ + [59804, 53833], + [145, -99], + [0, -332], + [95, -194], + [193, 0], + [352, -502], + [87, -6], + [65, 16], + [62, -68], + [185, -47], + [82, 247], + [254, 247], + [112, -200], + [190, 0] + ], + [ + [61551, 49585], + [-195, -236], + [-68, -246], + [-104, -44], + [-40, -416], + [-89, -238], + [-54, -393], + [-112, -195] + ], + [ + [56824, 55442], + [-212, 258], + [-96, 170], + [-18, 184], + [45, 246], + [-1, 241], + [-160, 369], + [-31, 253] + ], + [ + [56351, 57163], + [3, 143], + [-102, 174], + [-3, 343], + [-58, 228], + [-98, -34], + [28, 217], + [72, 246], + [-32, 245], + [92, 181], + [-58, 138], + [73, 365], + [127, 435], + [240, -41], + [-14, 2345] + ], + [ + [56621, 62148], + [3, 248], + [320, 2], + [0, 1180] + ], + [ + [56944, 63578], + [1117, 0], + [1077, 0], + [1102, 0] + ], + [ + [60240, 63578], + [90, -580], + [-61, -107], + [40, -608], + [102, -706], + [106, -145], + [152, -219] + ], + [ + [60669, 61213], + [-141, -337], + [-204, -97], + [-88, -181], + [-27, -393], + [-120, -868], + [30, -236] + ], + [ + [60119, 59101], + [-45, -508], + [-112, -582], + [-168, -293], + [-119, -451], + [-28, -241], + [-132, -166], + [-82, -618], + [4, -531] + ], + [ + [59437, 55711], + [-3, 460], + [-39, 12], + [5, 294], + [-33, 203], + [-143, 233], + [-34, 426], + [34, 436], + [-129, 41], + [-19, -132], + [-167, -30], + [67, -173], + [23, -355], + [-152, -324], + [-138, -426], + [-144, -61], + [-233, 345], + [-105, -122], + [-29, -172], + [-143, -112], + [-9, -122], + [-277, 0], + [-38, 122], + [-200, 20], + [-100, -101], + [-77, 51], + [-143, 344], + [-48, 163], + [-200, -81], + [-76, -274], + [-72, -528], + [-95, -111], + [-85, -65], + [189, -230] + ], + [ + [56351, 57163], + [-176, -101], + [-141, -239], + [-201, -645], + [-261, -273], + [-269, 36], + [-78, -54], + [28, -208], + [-145, -207], + [-118, -230], + [-350, -226], + [-69, 134], + [-46, 11], + [-52, -152], + [-229, -44] + ], + [ + [54244, 54965], + [43, 160], + [-87, 407], + [-39, 245], + [-121, 100], + [-164, 345], + [60, 279], + [127, -60], + [78, 42], + [155, -6], + [-151, 537], + [10, 393], + [-18, 392], + [-111, 378] + ], + [ + [54026, 58177], + [28, 279], + [-178, 13], + [0, 380], + [-115, 219], + [120, 778], + [354, 557], + [15, 769], + [107, 1199], + [60, 254], + [-116, 203], + [-4, 188], + [-104, 153], + [-68, 919] + ], + [ + [54125, 64088], + [280, 323], + [1108, -1132], + [1108, -1131] + ], + [ + [30080, 62227], + [24, -321], + [-21, -228], + [-68, -99], + [71, -177], + [-5, -161] + ], + [ + [30081, 61241], + [-185, 100], + [-131, -41], + [-169, 43], + [-130, -110], + [-149, 184], + [24, 190], + [256, -82], + [210, -47], + [100, 131], + [-127, 256], + [2, 226], + [-175, 92], + [62, 163], + [170, -26], + [241, -93] + ], + [ + [30080, 62227], + [34, 101], + [217, -3], + [165, -152], + [73, 15], + [50, -209], + [152, 11], + [-9, -176], + [124, -21], + [136, -217], + [-103, -240], + [-132, 128], + [-127, -25], + [-92, 28], + [-50, -107], + [-106, -37], + [-43, 144], + [-92, -85], + [-111, -405], + [-71, 94], + [-14, 170] + ], + [ + [76049, 98451], + [600, 133], + [540, -297], + [640, -572], + [-69, -531], + [-606, -73], + [-773, 170], + [-462, 226], + [-213, 423], + [-379, 117], + [722, 404] + ], + [ + [78565, 97421], + [704, -336], + [-82, -240], + [-1566, -228], + [507, 776], + [229, 66], + [208, -38] + ], + [ + [88563, 95563], + [734, -26], + [1004, -313], + [-219, -439], + [-1023, 16], + [-461, -139], + [-550, 384], + [149, 406], + [366, 111] + ], + [ + [91172, 95096], + [697, -155], + [-321, -234], + [-444, 53], + [-516, 233], + [66, 192], + [518, -89] + ], + [ + [88850, 93928], + [263, 234], + [348, 54], + [394, -226], + [34, -155], + [-421, -4], + [-569, 66], + [-49, 31] + ], + [ + [62457, 98194], + [542, 107], + [422, 8], + [57, -160], + [159, 142], + [262, 97], + [412, -129], + [-107, -90], + [-373, -78], + [-250, -45], + [-39, -97], + [-324, -98], + [-301, 140], + [158, 185], + [-618, 18] + ], + [ + [56314, 82678], + [-511, -9], + [-342, 67] + ], + [ + [55461, 82736], + [63, 260], + [383, 191] + ], + [ + [55907, 83187], + [291, -103], + [123, -94], + [-30, -162], + [23, -150] + ], + [ + [64863, 94153], + [665, 518], + [-75, 268], + [621, 312], + [917, 380], + [925, 110], + [475, 220], + [541, 76], + [193, -233], + [-187, -184], + [-984, -293], + [-848, -282], + [-863, -562], + [-414, -577], + [-435, -568], + [56, -491], + [531, -484], + [-164, -52], + [-907, 77], + [-74, 262], + [-503, 158], + [-40, 320], + [284, 126], + [-10, 323], + [551, 503], + [-255, 73] + ], + [ + [89698, 82309], + [96, -569], + [-7, -581], + [114, -597], + [280, -1046], + [-411, 195], + [-171, -854], + [271, -605], + [-8, -413], + [-211, 356], + [-182, -457], + [-51, 496], + [31, 575], + [-32, 638], + [64, 446], + [13, 790], + [-163, 581], + [24, 808], + [257, 271], + [-110, 274], + [123, 83], + [73, -391] + ], + [ + [86327, 75524], + [-39, 104] + ], + [ + [86288, 75628], + [-2, 300], + [142, 16], + [40, 698], + [-73, 506], + [238, 208], + [338, -104], + [186, 575], + [96, 647], + [107, 216], + [146, 532], + [-459, -175], + [-240, -233], + [-423, 1], + [-112, 555], + [-329, 420], + [-483, 189], + [-103, 579], + [-97, 363], + [-104, 254], + [-172, 596], + [-244, 217], + [-415, 176], + [-369, -16], + [-345, -106], + [-229, -294], + [152, -141], + [4, -326], + [-155, -189], + [-251, -627], + [3, -260], + [-392, -373], + [-333, 223] + ], + [ + [82410, 80055], + [-331, -49], + [-146, 198], + [-166, 63], + [-407, -416], + [-366, -98], + [-255, -146], + [-350, 96], + [-258, -6], + [-168, 302], + [-272, 284], + [-279, 78], + [-351, -78], + [-263, -109], + [-394, 248], + [-53, 443], + [-327, 152], + [-252, 69], + [-311, 244], + [-288, -612], + [113, -348], + [-270, -411], + [-402, 148], + [-277, 22], + [-186, 276], + [-289, 8], + [-242, 182], + [-423, -278], + [-530, -509], + [-292, -102] + ], + [ + [74375, 79706], + [-109, -49] + ], + [ + [63639, 77993], + [-127, -350], + [-269, -97], + [-276, -610], + [252, -561], + [-27, -398], + [303, -696] + ], + [ + [63495, 75281], + [-166, -238], + [-48, -150], + [-122, 40], + [-191, 359], + [-78, 20] + ], + [ + [62890, 75312], + [-175, 137], + [-85, 242], + [-259, 124], + [-169, -93], + [-48, 110], + [-378, 283], + [-409, 96], + [-235, 101], + [-34, -70] + ], + [ + [61098, 76242], + [-354, 499], + [-317, 223], + [-240, 347], + [202, 95], + [231, 494], + [-156, 234], + [410, 241], + [-8, 129], + [-249, -95] + ], + [ + [60617, 78409], + [9, 262], + [143, 165], + [269, 43], + [44, 197], + [-62, 326], + [113, 310], + [-3, 173], + [-410, 192], + [-162, -6], + [-172, 277], + [-213, -94], + [-352, 208], + [6, 116], + [-99, 256], + [-222, 29], + [-23, 183], + [70, 120], + [-178, 334], + [-288, -57], + [-84, 30], + [-70, -134], + [-104, 23] + ], + [ + [58829, 81362], + [-68, 379], + [-66, 196], + [54, 55], + [224, -20], + [108, 129], + [-80, 157], + [-187, 104], + [16, 107], + [-113, 108], + [-174, 387], + [60, 159], + [-27, 277], + [-272, 141], + [-146, -70], + [-39, 146], + [-293, 149] + ], + [ + [57826, 83766], + [-89, 348], + [-24, 287], + [-134, 136] + ], + [ + [57579, 84537], + [120, 187], + [-83, 551], + [198, 341], + [-42, 103] + ], + [ + [57772, 85719], + [316, 327], + [-291, 280] + ], + [ + [57797, 86326], + [594, 755], + [258, 341], + [105, 301], + [-411, 405], + [113, 385], + [-250, 440], + [187, 506], + [-323, 673], + [256, 445], + [-425, 394], + [41, 414] + ], + [ + [57942, 91385], + [224, 54], + [473, 237] + ], + [ + [58639, 91676], + [286, 206], + [456, -358], + [761, -140], + [1050, -668], + [213, -281], + [18, -393], + [-308, -311], + [-454, -157], + [-1240, 449], + [-204, -75], + [453, -433], + [18, -274], + [18, -604], + [358, -180], + [217, -153], + [36, 286], + [-168, 254], + [177, 224], + [672, -368], + [233, 144], + [-186, 433], + [647, 578], + [256, -34], + [260, -206], + [161, 406], + [-231, 352], + [136, 353], + [-204, 367], + [777, -190], + [158, -331], + [-351, -73], + [1, -328], + [219, -203], + [429, 128], + [68, 377], + [580, 282], + [970, 507], + [209, -29], + [-273, -359], + [344, -61], + [199, 202], + [521, 16], + [412, 245], + [317, -356], + [315, 391], + [-291, 343], + [145, 195], + [820, -179], + [385, -185], + [1006, -675], + [186, 309], + [-282, 313], + [-8, 125], + [-335, 58], + [92, 280], + [-149, 461], + [-8, 189], + [512, 535], + [183, 537], + [206, 116], + [736, -156], + [57, -328], + [-263, -479], + [173, -189], + [89, -413], + [-63, -809], + [307, -362], + [-120, -395], + [-544, -839], + [318, -87], + [110, 213], + [306, 151], + [74, 293], + [240, 281], + [-162, 336], + [130, 390], + [-304, 49], + [-67, 328], + [222, 593], + [-361, 482], + [497, 398], + [-64, 421], + [139, 13], + [145, -328], + [-109, -570], + [297, -108], + [-127, 426], + [465, 233], + [577, 31], + [513, -337], + [-247, 492], + [-28, 630], + [483, 119], + [669, -26], + [602, 77], + [-226, 309], + [321, 388], + [319, 16], + [540, 293], + [734, 79], + [93, 162], + [729, 55], + [227, -133], + [624, 314], + [510, -10], + [77, 255], + [265, 252], + [656, 242], + [476, -191], + [-378, -146], + [629, -90], + [75, -292], + [254, 143], + [812, -7], + [626, -289], + [223, -221], + [-69, -307], + [-307, -175], + [-730, -328], + [-209, -175], + [345, -83], + [410, -149], + [251, 112], + [141, -379], + [122, 153], + [444, 93], + [892, -97], + [67, -276], + [1162, -88], + [15, 451], + [590, -104], + [443, 4], + [449, -312], + [128, -378], + [-165, -247], + [349, -465], + [437, -240], + [268, 620], + [446, -266], + [473, 159], + [538, -182], + [204, 166], + [455, -83], + [-201, 549], + [367, 256], + [2509, -384], + [236, -351], + [727, -451], + [1122, 112], + [553, -98], + [231, -244], + [-33, -432], + [342, -168], + [372, 121], + [492, 15], + [525, -116], + [526, 66], + [484, -526], + [344, 189], + [-224, 378], + [123, 262], + [886, -165], + [578, 36], + [799, -282], + [-99610, -258], + [681, -451], + [728, -588], + [-24, -367], + [187, -147], + [-64, 429], + [754, -88], + [544, -553], + [-276, -257], + [-455, -61], + [-7, -578], + [-111, -122], + [-260, 17], + [-212, 206], + [-369, 172], + [-62, 257], + [-283, 96], + [-315, -76], + [-151, 207], + [60, 219], + [-333, -140], + [126, -278], + [-158, -251], + [99997, -3], + [-357, -260], + [-360, 44], + [250, -315], + [166, -487], + [128, -159], + [32, -244], + [-71, -157], + [-518, 129], + [-777, -445], + [-247, -69], + [-425, -415], + [-403, -362], + [-102, -269], + [-397, 409], + [-724, -464], + [-126, 219], + [-268, -253], + [-371, 81], + [-90, -388], + [-333, -572], + [10, -239], + [316, -132], + [-37, -860], + [-258, -22], + [-119, -494], + [116, -255], + [-486, -302], + [-96, -674], + [-415, -144], + [-83, -600], + [-400, -551], + [-103, 407], + [-119, 862], + [-155, 1313], + [134, 819], + [234, 353], + [14, 276], + [432, 132], + [496, 744], + [479, 608], + [499, 471], + [223, 833], + [-337, -50], + [-167, -487], + [-705, -649], + [-227, 727], + [-717, -201], + [-696, -990], + [230, -362], + [-620, -154], + [-430, -61], + [20, 427], + [-431, 90], + [-344, -291], + [-850, 102], + [-914, -175], + [-899, -1153], + [-1065, -1394], + [438, -74], + [136, -370], + [270, -132], + [178, 295], + [305, -38], + [401, -650], + [9, -503], + [-217, -590], + [-23, -705], + [-126, -945], + [-418, -855], + [-94, -409], + [-377, -688], + [-374, -682], + [-179, -349], + [-370, -346], + [-175, -8], + [-175, 287], + [-373, -432], + [-43, -197] + ], + [ + [0, 92833], + [36, 24], + [235, -1], + [402, -169], + [-24, -81], + [-286, -141], + [-363, -36], + [99694, -30], + [-49, 187], + [-99645, 247] + ], + [ + [59287, 77741], + [73, 146], + [198, -127], + [89, -23], + [36, -117], + [42, -18] + ], + [ + [59725, 77602], + [2, -51], + [136, -142], + [284, 35], + [-55, -210], + [-304, -103], + [-377, -342], + [-154, 121], + [61, 277], + [-304, 173], + [50, 113], + [265, 197], + [-42, 71] + ], + [ + [28061, 66408], + [130, 47], + [184, -18], + [8, -153], + [-303, -95], + [-19, 219] + ], + [ + [28391, 66555], + [220, -265], + [-48, -420], + [-51, 75], + [4, 309], + [-124, 234], + [-1, 67] + ], + [ + [28280, 65474], + [84, -23], + [97, -491], + [1, -343], + [-68, -29], + [-70, 340], + [-104, 171], + [60, 375] + ], + [ + [33000, 19946], + [333, 354], + [236, -148], + [167, 237], + [222, -266], + [-83, -207], + [-375, -177], + [-125, 207], + [-236, -266], + [-139, 266] + ], + [ + [54206, 97653], + [105, 202], + [408, 20], + [350, -206], + [915, -440], + [-699, -233], + [-155, -435], + [-243, -111], + [-132, -490], + [-335, -23], + [-598, 361], + [252, 210], + [-416, 170], + [-541, 499], + [-216, 463], + [757, 212], + [152, -207], + [396, 8] + ], + [ + [57942, 91385], + [117, 414], + [-356, 235], + [-431, -200], + [-137, -433], + [-265, -262], + [-298, 143], + [-362, -29], + [-309, 312], + [-167, -156] + ], + [ + [55734, 91409], + [-172, -24], + [-41, -389], + [-523, 95], + [-74, -329], + [-267, 2], + [-183, -421], + [-278, -655], + [-431, -831], + [101, -202], + [-97, -234], + [-275, 10], + [-180, -554], + [17, -784], + [177, -300], + [-92, -694], + [-231, -405], + [-122, -341] + ], + [ + [53063, 85353], + [-187, 363], + [-548, -684], + [-371, -138], + [-384, 301], + [-99, 635], + [-88, 1363], + [256, 381], + [733, 496], + [549, 609], + [508, 824], + [668, 1141], + [465, 444], + [763, 741], + [610, 259], + [457, -31], + [423, 489], + [506, -26], + [499, 118], + [869, -433], + [-358, -158], + [305, -371] + ], + [ + [57613, 97879], + [-412, -318], + [-806, -70], + [-819, 98], + [-50, 163], + [-398, 11], + [-304, 271], + [858, 165], + [403, -142], + [281, 177], + [702, -148], + [545, -207] + ], + [ + [56867, 96577], + [-620, -241], + [-490, 137], + [191, 152], + [-167, 189], + [575, 119], + [110, -222], + [401, -134] + ], + [ + [37010, 99398], + [932, 353], + [975, -27], + [354, 218], + [982, 57], + [2219, -74], + [1737, -469], + [-513, -227], + [-1062, -26], + [-1496, -58], + [140, -105], + [984, 65], + [836, -204], + [540, 181], + [231, -212], + [-305, -344], + [707, 220], + [1348, 229], + [833, -114], + [156, -253], + [-1132, -420], + [-157, -136], + [-888, -102], + [643, -28], + [-324, -431], + [-224, -383], + [9, -658], + [333, -386], + [-434, -24], + [-457, -187], + [513, -313], + [65, -502], + [-297, -55], + [360, -508], + [-617, -42], + [322, -241], + [-91, -208], + [-391, -91], + [-388, -2], + [348, -400], + [4, -263], + [-549, 244], + [-143, -158], + [375, -148], + [364, -361], + [105, -476], + [-495, -114], + [-214, 228], + [-344, 340], + [95, -401], + [-322, -311], + [732, -25], + [383, -32], + [-745, -515], + [-755, -466], + [-813, -204], + [-306, -2], + [-288, -228], + [-386, -624], + [-597, -414], + [-192, -24], + [-370, -145], + [-399, -138], + [-238, -365], + [-4, -415], + [-141, -388], + [-453, -472], + [112, -462], + [-125, -488], + [-142, -577], + [-391, -36], + [-410, 482], + [-556, 3], + [-269, 324], + [-186, 577], + [-481, 735], + [-141, 385], + [-38, 530], + [-384, 546], + [100, 435], + [-186, 208], + [275, 691], + [418, 220], + [110, 247], + [58, 461], + [-318, -209], + [-151, -88], + [-249, -84], + [-341, 193], + [-19, 401], + [109, 314], + [258, 9], + [567, -157], + [-478, 375], + [-249, 202], + [-276, -83], + [-232, 147], + [310, 550], + [-169, 220], + [-220, 409], + [-335, 626], + [-353, 230], + [3, 247], + [-745, 346], + [-590, 43], + [-743, -24], + [-677, -44], + [-323, 188], + [-482, 372], + [729, 186], + [559, 31], + [-1188, 154], + [-627, 241], + [39, 229], + [1051, 285], + [1018, 284], + [107, 214], + [-750, 213], + [243, 235], + [961, 413], + [404, 63], + [-115, 265], + [658, 156], + [854, 93], + [853, 5], + [303, -184], + [737, 325], + [663, -221], + [390, -46], + [577, -192], + [-660, 318], + [38, 253] + ], + [ + [69148, 21851], + [179, -186], + [263, -74], + [9, -112], + [-77, -269], + [-427, -38], + [-7, 314], + [41, 244], + [19, 121] + ], + [ + [84713, 45326], + [32, 139], + [239, 133], + [194, 20], + [87, 74], + [105, -74], + [-102, -160], + [-289, -258], + [-233, -170] + ], + [ + [54540, 33696], + [133, 292], + [109, -162], + [47, -252], + [125, -43], + [175, -112], + [149, 43], + [248, 302], + [0, 2182] + ], + [ + [55526, 35946], + [75, -88], + [165, -562], + [-26, -360], + [62, -207], + [199, 60], + [139, 264], + [132, 177], + [68, 283], + [135, 137], + [117, -71], + [133, -166], + [226, -29], + [178, 138], + [28, 184], + [48, 283], + [152, 47], + [83, 222], + [93, 393], + [249, 442], + [393, 435] + ], + [ + [58175, 37528], + [113, -7], + [134, -100], + [94, 71], + [148, -59] + ], + [ + [58664, 37433], + [133, -832], + [72, -419], + [-49, -659], + [23, -212] + ], + [ + [58843, 35311], + [-140, 108], + [-80, -42], + [-26, -172], + [-76, -222], + [2, -204], + [166, -320], + [163, 63], + [56, 263] + ], + [ + [58908, 34785], + [211, -5] + ], + [ + [59119, 34780], + [-70, -430], + [-32, -491], + [-72, -267], + [-190, -298], + [-54, -86], + [-118, -300], + [-77, -303], + [-158, -424], + [-314, -609], + [-196, -355], + [-210, -269], + [-290, -229], + [-141, -31], + [-36, -164], + [-169, 88], + [-138, -113], + [-301, 114], + [-168, -72], + [-115, 31], + [-286, -233], + [-238, -94], + [-171, -223], + [-127, -14], + [-117, 210], + [-94, 11], + [-120, 264], + [-13, -82], + [-37, 159], + [2, 346], + [-90, 396], + [89, 108], + [-7, 453], + [-182, 553], + [-139, 501], + [-1, 1], + [-199, 768] + ], + [ + [58049, 33472], + [-121, 182], + [-130, -120], + [-151, -232], + [-148, -374], + [209, -454], + [99, 59], + [51, 188], + [155, 93], + [47, 192], + [85, 288], + [-96, 178] + ], + [ + [23016, 65864], + [-107, -518], + [-49, -426], + [-20, -791], + [-27, -289], + [48, -322], + [86, -288], + [56, -458], + [184, -440], + [65, -337], + [109, -291], + [295, -157], + [114, -247], + [244, 165], + [212, 60], + [208, 106], + [175, 101], + [176, 241], + [67, 345], + [22, 496], + [48, 173], + [188, 155], + [294, 137], + [246, -21], + [169, 50], + [66, -125], + [-9, -285], + [-149, -351], + [-66, -360], + [51, -103], + [-42, -255], + [-69, -461], + [-71, 152], + [-58, -10] + ], + [ + [25472, 61510], + [-53, -8], + [-99, -357], + [-51, 70], + [-33, -27], + [2, -87] + ], + [ + [25238, 61101], + [-257, 7], + [-259, -1], + [-1, -333], + [-125, -1], + [103, -198], + [103, -136], + [31, -128], + [45, -36], + [-7, -201], + [-357, -2], + [-133, -481], + [39, -111], + [-32, -138], + [-7, -172] + ], + [ + [24381, 59170], + [-314, 636], + [-144, 191], + [-226, 155], + [-156, -43], + [-223, -223], + [-140, -58], + [-196, 156], + [-208, 112], + [-260, 271], + [-208, 83], + [-314, 275], + [-233, 282], + [-70, 158], + [-155, 35], + [-284, 187], + [-116, 270], + [-299, 335], + [-139, 373], + [-66, 288], + [93, 57], + [-29, 169], + [64, 153], + [1, 204], + [-93, 266], + [-25, 235], + [-94, 298], + [-244, 587], + [-280, 462], + [-135, 368], + [-238, 241], + [-51, 145], + [42, 365], + [-142, 138], + [-164, 287], + [-69, 412], + [-149, 48], + [-162, 311], + [-130, 288], + [-12, 184], + [-149, 446], + [-99, 452], + [5, 227], + [-201, 234], + [-93, -25], + [-159, 163], + [-44, -240], + [46, -284], + [27, -444], + [95, -243], + [206, -407], + [46, -139], + [42, -42], + [37, -203], + [49, 8], + [56, -381], + [85, -150], + [59, -210], + [174, -300], + [92, -550], + [83, -259], + [77, -277], + [15, -311], + [134, -20], + [112, -268], + [100, -264], + [-6, -106], + [-117, -217], + [-49, 3], + [-74, 359], + [-181, 337], + [-201, 286], + [-142, 150], + [9, 432], + [-42, 320], + [-132, 183], + [-191, 264], + [-37, -76], + [-70, 154], + [-171, 143], + [-164, 343], + [20, 44], + [115, -33], + [103, 221], + [10, 266], + [-214, 422], + [-163, 163], + [-102, 369], + [-103, 388], + [-129, 472], + [-113, 531] + ], + [ + [33993, 32727], + [180, 63], + [279, -457], + [103, 18], + [286, -379], + [218, -327], + [160, -402], + [-122, -280], + [77, -334] + ], + [ + [35174, 30629], + [-121, -372], + [-313, -328], + [-205, 118], + [-151, -63], + [-256, 253], + [-189, -19], + [-169, 327] + ], + [ + [34826, 35372], + [54, 341], + [38, 350], + [0, 325], + [-100, 107], + [-104, -96], + [-103, 26], + [-33, 228], + [-26, 541], + [-52, 177], + [-187, 160], + [-114, -116], + [-293, 113], + [18, 802], + [-82, 329] + ], + [ + [33842, 38659], + [87, 122], + [-27, 337], + [77, 259], + [49, 465], + [-66, 367], + [-151, 166], + [-30, 233], + [41, 342], + [-533, 24], + [-107, 688], + [81, 10], + [-3, 255], + [-55, 172], + [-12, 342], + [-161, 175], + [-175, -6], + [-115, 172], + [-188, 117], + [-109, 220], + [-311, 98], + [-302, 529], + [23, 396], + [-34, 227], + [29, 443], + [-363, -100], + [-147, -222], + [-243, -239], + [-62, -179], + [-143, -13], + [-206, 50] + ], + [ + [30686, 44109], + [-157, -102], + [-126, 68], + [18, 898], + [-228, -348], + [-245, 15], + [-105, 315], + [-184, 34], + [59, 254], + [-155, 359], + [-115, 532], + [73, 108], + [0, 250], + [168, 171], + [-28, 319], + [71, 206], + [20, 275], + [318, 402], + [227, 114], + [37, 89], + [251, -28] + ], + [ + [30585, 48040], + [125, 1620], + [6, 256], + [-43, 339], + [-123, 215], + [1, 430], + [156, 97], + [56, -61], + [9, 226], + [-162, 61], + [-4, 370], + [541, -13], + [92, 203], + [77, -187], + [55, -349], + [52, 73] + ], + [ + [31423, 51320], + [153, -312], + [216, 38], + [54, 181], + [206, 138], + [115, 97], + [32, 250], + [198, 168], + [-15, 124], + [-235, 51], + [-39, 372], + [12, 396], + [-125, 153], + [52, 55], + [206, -76], + [221, -148], + [80, 140], + [200, 92], + [310, 221], + [102, 225], + [-37, 167] + ], + [ + [33129, 53652], + [145, 26], + [64, -136], + [-36, -259], + [96, -90], + [63, -274], + [-77, -209], + [-44, -502], + [71, -299], + [20, -274], + [171, -277], + [137, -29], + [30, 116], + [88, 25], + [126, 104], + [90, 157], + [154, -50], + [67, 21] + ], + [ + [34294, 51702], + [151, -48], + [25, 120], + [-46, 118], + [28, 171], + [112, -53], + [131, 61], + [159, -125] + ], + [ + [34854, 51946], + [121, -122], + [86, 160], + [62, -25], + [38, -166], + [133, 42], + [107, 224], + [85, 436], + [164, 540] + ], + [ + [35650, 53035], + [95, 28], + [69, -327], + [155, -1033], + [149, -97], + [7, -408], + [-208, -487], + [86, -178], + [491, -92], + [10, -593], + [211, 388], + [349, -212], + [462, -361], + [135, -346], + [-45, -327], + [323, 182], + [540, -313], + [415, 23], + [411, -489], + [355, -662], + [214, -170], + [237, -24], + [101, -186], + [94, -752], + [46, -358], + [-110, -977], + [-142, -385], + [-391, -822], + [-177, -668], + [-206, -513], + [-69, -11], + [-78, -435], + [20, -1107], + [-77, -910], + [-30, -390], + [-88, -233], + [-49, -790], + [-282, -771], + [-47, -610], + [-225, -256], + [-65, -355], + [-302, 2], + [-437, -227], + [-195, -263], + [-311, -173], + [-327, -470], + [-235, -586], + [-41, -441], + [46, -326], + [-51, -597], + [-63, -289], + [-195, -325], + [-308, -1040], + [-244, -468], + [-189, -277], + [-127, -562], + [-183, -337] + ], + [ + [33842, 38659], + [-4, 182], + [-259, 302], + [-258, 9], + [-484, -172], + [-133, -520], + [-7, -318], + [-110, -708] + ], + [ + [30669, 40193], + [175, 638], + [-119, 496], + [63, 199], + [-49, 219], + [108, 295], + [6, 503], + [13, 415], + [60, 200], + [-240, 951] + ], + [ + [30452, 39739], + [-279, 340], + [-24, 242], + [-551, 593], + [-498, 646], + [-214, 365], + [-115, 488], + [46, 170], + [-236, 775], + [-274, 1090], + [-262, 1177], + [-114, 269], + [-87, 435], + [-216, 386], + [-198, 239], + [90, 264], + [-134, 563], + [86, 414], + [221, 373] + ], + [ + [27693, 48568], + [33, -246], + [-79, -141], + [8, -216], + [114, 47], + [113, -64], + [116, -298], + [157, 243], + [53, 398], + [170, 514], + [334, 233], + [303, 619], + [86, 384], + [-38, 449] + ], + [ + [29063, 50490], + [74, 56], + [184, -280], + [89, -279], + [129, -152], + [163, -620], + [207, -74], + [153, 157], + [101, -103], + [166, 51], + [213, -276], + [-179, -602], + [83, -14], + [139, -314] + ], + [ + [29063, 50490], + [-119, 140], + [-137, 195], + [-79, -94], + [-235, 82], + [-68, 255], + [-52, -10], + [-278, 338] + ], + [ + [28095, 51396], + [-37, 183], + [103, 44], + [-12, 296], + [65, 214], + [138, 40], + [117, 371], + [106, 310], + [-102, 141], + [52, 343], + [-62, 540], + [59, 155], + [-44, 500], + [-112, 315] + ], + [ + [28366, 54848], + [36, 287], + [89, -43], + [52, 176], + [-64, 348], + [34, 86] + ], + [ + [28513, 55702], + [143, -18], + [209, 412], + [114, 63], + [3, 195], + [51, 500], + [159, 274], + [175, 11], + [22, 123], + [218, -49], + [218, 298], + [109, 132], + [134, 285], + [98, -36], + [73, -156], + [-54, -199] + ], + [ + [30185, 57537], + [-178, -99], + [-71, -295], + [-107, -169], + [-81, -220], + [-34, -422], + [-77, -345], + [144, -40], + [35, -271], + [62, -130], + [21, -238], + [-33, -219], + [10, -123], + [69, -49], + [66, -207], + [357, 57], + [161, -75], + [196, -508], + [112, 63], + [200, -32], + [158, 68], + [99, -102], + [-50, -318], + [-62, -199], + [-22, -423], + [56, -393], + [79, -175], + [9, -133], + [-140, -294], + [100, -130], + [74, -207], + [85, -589] + ], + [ + [28366, 54848], + [-93, 170], + [-59, 319], + [68, 158], + [-70, 40], + [-52, 196], + [-138, 164], + [-122, -38], + [-56, -205], + [-112, -149], + [-61, -20], + [-27, -123], + [132, -321], + [-75, -76], + [-40, -87], + [-130, -30], + [-48, 353], + [-36, -101], + [-92, 35], + [-56, 238], + [-114, 39], + [-72, 69], + [-119, -1], + [-8, -128], + [-32, 89] + ], + [ + [26954, 55439], + [14, 117], + [23, 120], + [-10, 107], + [41, 70], + [-58, 88], + [-1, 238], + [107, 53] + ], + [ + [27070, 56232], + [100, -212], + [-6, -126], + [111, -26], + [26, 48], + [77, -145], + [136, 42], + [119, 150], + [168, 119], + [95, 176], + [153, -34], + [-10, -58], + [155, -21], + [124, -102], + [90, -177], + [105, -164] + ], + [ + [26954, 55439], + [-151, 131], + [-56, 124], + [32, 103], + [-11, 130], + [-77, 142], + [-109, 116], + [-95, 76], + [-19, 173], + [-73, 105], + [18, -172], + [-55, -141], + [-64, 164], + [-89, 58], + [-38, 120], + [2, 179], + [36, 187], + [-78, 83], + [64, 114] + ], + [ + [26191, 57131], + [42, 76], + [183, -156], + [63, 77], + [89, -50], + [46, -121], + [82, -40], + [66, 126] + ], + [ + [26762, 57043], + [70, -321], + [108, -238], + [130, -252] + ], + [ + [26191, 57131], + [-96, 186], + [-130, 238], + [-61, 200], + [-117, 185], + [-140, 267], + [31, 91], + [46, -88], + [21, 41] + ], + [ + [25745, 58251], + [86, 25], + [35, 135], + [41, 5], + [-6, 290], + [65, 14], + [58, -4], + [60, 158], + [82, -120], + [29, 74], + [51, 70], + [97, 163], + [4, 121], + [27, -5], + [36, 141], + [29, 17], + [47, -90], + [56, -27], + [61, 76], + [70, 0], + [97, 77], + [38, 81], + [95, -12] + ], + [ + [26903, 59440], + [-24, -57], + [-14, -132], + [29, -216], + [-64, -202], + [-30, -237], + [-9, -261], + [15, -152], + [7, -266], + [-43, -58], + [-26, -253], + [19, -156], + [-56, -151], + [12, -159], + [43, -97] + ], + [ + [25745, 58251], + [-48, 185], + [-84, 51] + ], + [ + [25613, 58487], + [19, 237], + [-38, 64], + [-57, 42], + [-122, -70], + [-10, 79], + [-84, 95], + [-60, 118], + [-82, 50] + ], + [ + [25179, 59102], + [58, 150], + [-22, 116], + [20, 113], + [131, 166], + [127, 225] + ], + [ + [25493, 59872], + [29, -23], + [61, 104], + [79, 8], + [26, -48], + [43, 29], + [129, -53], + [128, 15], + [90, 66], + [32, 66], + [89, -31], + [66, -40], + [73, 14], + [55, 51], + [127, -82], + [44, -13], + [85, -110], + [80, -132], + [101, -91], + [73, -162] + ], + [ + [25613, 58487], + [-31, -139], + [-161, 9], + [-100, 57], + [-115, 117], + [-154, 37], + [-79, 127] + ], + [ + [24973, 58695], + [9, 86], + [95, 149], + [52, 66], + [-15, 69], + [65, 37] + ], + [ + [25238, 61101], + [-2, -468], + [-22, -667], + [83, 0] + ], + [ + [25297, 59966], + [90, -107], + [24, 88], + [82, -75] + ], + [ + [24973, 58695], + [-142, 103], + [-174, 11], + [-127, 117], + [-149, 244] + ], + [ + [25472, 61510], + [1, -87], + [53, -3], + [-5, -160], + [-45, -256], + [24, -91], + [-29, -212], + [18, -56], + [-32, -299], + [-55, -156], + [-50, -19], + [-55, -205] + ], + [ + [30185, 57537], + [-8, -139], + [-163, -69], + [91, -268], + [-3, -309], + [-123, -344], + [105, -468], + [120, 38], + [62, 427], + [-86, 208], + [-14, 447], + [346, 241], + [-38, 278], + [97, 186], + [100, -415], + [195, -9], + [180, -330], + [11, -195], + [249, -6], + [297, 61], + [159, -264], + [213, -74], + [155, 185], + [4, 149], + [344, 35], + [333, 9], + [-236, -175], + [95, -279], + [222, -44], + [210, -291], + [45, -473], + [144, 13], + [109, -139] + ], + [ + [33400, 55523], + [-220, -347], + [-24, -215], + [95, -220], + [-69, -110], + [-171, -95], + [5, -273], + [-75, -163], + [188, -448] + ], + [ + [33400, 55523], + [183, -217], + [171, -385], + [8, -304], + [105, -14], + [149, -289], + [109, -205] + ], + [ + [34125, 54109], + [-44, -532], + [-169, -154], + [15, -139], + [-51, -305], + [123, -429], + [89, -1], + [37, -333], + [169, -514] + ], + [ + [34125, 54109], + [333, -119], + [30, 107], + [225, 43], + [298, -159] + ], + [ + [35011, 53981], + [-144, -508], + [22, -404], + [109, -351], + [-49, -254], + [-24, -270], + [-71, -248] + ], + [ + [35011, 53981], + [95, -65], + [204, -140], + [294, -499], + [46, -242] + ], + [ + [51718, 79804], + [131, -155], + [400, -109], + [-140, -404], + [-35, -421] + ], + [ + [52074, 78715], + [-77, -101], + [-126, 54], + [9, -150], + [-203, -332], + [-5, -267], + [133, 92], + [95, -259] + ], + [ + [51900, 77752], + [-11, -167], + [82, -222], + [-97, -180], + [72, -457], + [151, -75], + [-32, -256] + ], + [ + [52065, 76395], + [-252, -334], + [-548, 160], + [-404, -192], + [-32, -355] + ], + [ + [50829, 75674], + [-322, -77], + [-313, 267], + [-101, -127], + [-511, 268], + [-111, 230] + ], + [ + [49471, 76235], + [144, 354], + [53, 1177], + [-287, 620], + [-205, 299], + [-424, 227], + [-28, 431], + [360, 129], + [466, -152], + [-88, 669], + [263, -254], + [646, 461], + [84, 484], + [243, 119] + ], + [ + [50698, 80799], + [40, -207], + [129, -10], + [129, -237], + [194, -279], + [143, 46], + [243, -269] + ], + [ + [51576, 79843], + [62, -52], + [80, 13] + ], + [ + [52429, 75765], + [179, 226], + [47, -507], + [-92, -456], + [-126, 120], + [-64, 398], + [56, 219] + ], + [ + [27693, 48568], + [148, 442], + [-60, 258], + [-106, -275], + [-166, 259], + [56, 167], + [-47, 536], + [97, 89], + [52, 368], + [105, 381], + [-20, 241], + [153, 126], + [190, 236] + ], + [ + [31588, 61519], + [142, -52], + [50, -118], + [-71, -149], + [-209, 4], + [-163, -21], + [-16, 253], + [40, 86], + [227, -3] + ], + [ + [28453, 61504], + [187, -53], + [147, -142], + [46, -161], + [-195, -11], + [-84, -99], + [-156, 95], + [-159, 215], + [34, 135], + [116, 41], + [64, -20] + ], + [ + [27147, 64280], + [240, -42], + [219, -7], + [261, -201], + [110, -216], + [260, 66], + [98, -138], + [235, -366], + [173, -267], + [92, 8], + [165, -120], + [-20, -167], + [205, -24], + [210, -242], + [-33, -138], + [-185, -75], + [-187, -29], + [-191, 46], + [-398, -57], + [186, 329], + [-113, 154], + [-179, 39], + [-96, 171], + [-66, 336], + [-157, -23], + [-259, 159], + [-83, 124], + [-362, 91], + [-97, 115], + [104, 148], + [-273, 30], + [-199, -307], + [-115, -8], + [-40, -144], + [-138, -65], + [-118, 56], + [146, 183], + [60, 213], + [126, 131], + [142, 116], + [210, 56], + [67, 65] + ], + [ + [58175, 37528], + [-177, 267], + [-215, 90], + [-82, 375], + [0, 208], + [-119, 64], + [-315, 649], + [-87, 342], + [-56, 105], + [-107, 473] + ], + [ + [57017, 40101], + [311, -65], + [90, -68], + [94, 13], + [154, 383], + [241, 486], + [100, 46], + [33, 205], + [159, 235], + [210, 81] + ], + [ + [58409, 41417], + [18, -220], + [232, 12], + [128, -125], + [60, -146], + [132, -43], + [145, -190], + [0, -748], + [-54, -409], + [-12, -442], + [45, -175], + [-31, -348], + [-42, -53], + [-74, -426], + [-292, -671] + ], + [ + [55526, 35946], + [0, 1725], + [274, 20], + [8, 2105], + [207, 19], + [428, 207], + [106, -243], + [177, 231], + [85, 2], + [156, 133] + ], + [ + [56967, 40145], + [50, -44] + ], + [ + [54540, 33696], + [-207, 446], + [-108, 432], + [-62, 575], + [-68, 428], + [-93, 910], + [-7, 707], + [-35, 322], + [-108, 243], + [-144, 489], + [-146, 708], + [-60, 371], + [-226, 577], + [-17, 453] + ], + [ + [53259, 40357], + [134, 113], + [166, 100], + [180, -17], + [166, -267], + [42, 41], + [1126, 26], + [192, -284], + [673, -83], + [510, 241] + ], + [ + [56448, 40227], + [228, 134], + [180, -34], + [109, -133], + [2, -49] + ], + [ + [45357, 58612], + [-115, 460], + [-138, 210], + [122, 112], + [134, 415], + [66, 304] + ], + [ + [45426, 60113], + [96, 189], + [138, -51], + [135, 129], + [155, 6], + [133, -173], + [184, -157], + [168, -435], + [184, -405] + ], + [ + [46619, 59216], + [13, -368], + [54, -338], + [104, -166], + [24, -229], + [-13, -184] + ], + [ + [46801, 57931], + [-40, -33], + [-151, 47], + [-21, -66], + [-61, -13], + [-200, 144], + [-134, 6] + ], + [ + [46194, 58016], + [-513, 25], + [-75, -67], + [-92, 19], + [-147, -96] + ], + [ + [45367, 57897], + [-46, 453] + ], + [ + [45321, 58350], + [253, -13], + [67, 83], + [50, 5], + [103, 136], + [119, -124], + [121, -11], + [120, 133], + [-56, 170], + [-92, -99], + [-86, 3], + [-110, 145], + [-88, -9], + [-63, -140], + [-302, -17] + ], + [ + [46619, 59216], + [93, 107], + [47, 348], + [88, 14], + [194, -165], + [157, 117], + [107, -39], + [42, 131], + [1114, 9], + [62, 414], + [-48, 73], + [-134, 2550], + [-134, 2550], + [425, 10] + ], + [ + [48632, 65335], + [937, -1289], + [937, -1289], + [66, -277], + [173, -169], + [129, -96], + [3, -376], + [308, 58] + ], + [ + [51185, 61897], + [1, -1361], + [-152, -394], + [-24, -364], + [-247, -94], + [-379, -51], + [-102, -210], + [-178, -23] + ], + [ + [50104, 59400], + [-178, -3], + [-70, 114], + [-153, -84], + [-259, -246], + [-53, -184], + [-216, -265], + [-38, -152], + [-116, -120], + [-134, 79], + [-76, -144], + [-41, -405], + [-221, -490], + [7, -200], + [-76, -250], + [18, -343] + ], + [ + [48498, 56707], + [-114, -88], + [-65, -74], + [-43, 253], + [-80, -67], + [-48, 11], + [-51, -172], + [-215, 5], + [-77, 89], + [-36, -54] + ], + [ + [47769, 56610], + [-85, 170], + [15, 176], + [-35, 69], + [-59, -58], + [11, 192], + [57, 152], + [-114, 248], + [-33, 163], + [-62, 130], + [-55, 15], + [-67, -83], + [-90, -79], + [-76, -128], + [-119, 48], + [-77, 150], + [-46, 19], + [-73, -78], + [-44, -1], + [-16, 216] + ], + [ + [47587, 66766], + [1045, -1431] + ], + [ + [45426, 60113], + [-24, 318], + [78, 291], + [34, 557], + [-30, 583], + [-34, 294], + [28, 295], + [-72, 281], + [-146, 255] + ], + [ + [50747, 54278], + [-229, -69] + ], + [ + [50518, 54209], + [-69, 407], + [13, 1357], + [-56, 122], + [-11, 290], + [-96, 207], + [-85, 174], + [35, 311] + ], + [ + [50249, 57077], + [96, 67], + [56, 258], + [136, 56], + [61, 176] + ], + [ + [50598, 57634], + [93, 173], + [100, 2], + [212, -340] + ], + [ + [51003, 57469], + [-11, -197], + [62, -350], + [-54, -238], + [29, -159], + [-135, -366], + [-86, -181], + [-52, -372], + [7, -376], + [-16, -952] + ], + [ + [54026, 58177], + [-78, -34], + [-9, -188] + ], + [ + [53939, 57955], + [-52, -13], + [-188, 647], + [-65, 24], + [-217, -331], + [-215, 173], + [-150, 34], + [-80, -83], + [-163, 18], + [-164, -252], + [-141, -14], + [-337, 305], + [-131, -145], + [-142, 10], + [-104, 223], + [-279, 221], + [-298, -70], + [-72, -128], + [-39, -340], + [-80, -238], + [-19, -527] + ], + [ + [50598, 57634], + [6, 405], + [-320, 134], + [-9, 286], + [-156, 386], + [-37, 269], + [22, 286] + ], + [ + [51185, 61897], + [392, 263], + [804, 1161], + [952, 1126] + ], + [ + [53333, 64447], + [439, -255], + [156, -324], + [197, 220] + ], + [ + [53939, 57955], + [110, -235], + [-31, -107], + [-14, -196], + [-234, -457], + [-74, -377], + [-39, -307], + [-59, -132], + [-56, -414], + [-148, -243], + [-43, -299], + [-63, -238], + [-26, -246], + [-191, -199], + [-156, 243], + [-105, -10], + [-165, -345], + [-81, -6], + [-132, -570], + [-71, -418] + ], + [ + [52361, 53399], + [-289, -213], + [-105, 31], + [-107, -132], + [-222, 13], + [-149, 370], + [-91, 427], + [-197, 389], + [-209, -7], + [-245, 1] + ], + [ + [54244, 54965], + [-140, -599], + [-67, -107], + [-21, -458], + [28, -249], + [-23, -176], + [132, -309], + [23, -212], + [103, -305], + [127, -190], + [12, -269], + [29, -172] + ], + [ + [54447, 51919], + [-20, -319], + [-220, 140], + [-225, 156], + [-350, 23] + ], + [ + [53632, 51919], + [-35, 32], + [-164, -76], + [-169, 79], + [-132, -38] + ], + [ + [53132, 51916], + [-452, 13] + ], + [ + [52680, 51929], + [40, 466], + [-108, 391], + [-127, 100], + [-56, 265], + [-72, 85], + [4, 163] + ], + [ + [50518, 54209], + [-224, -126] + ], + [ + [50294, 54083], + [-62, 207], + [-74, 375], + [-22, 294], + [61, 532], + [-69, 215], + [-27, 466], + [1, 429], + [-116, 305], + [20, 184] + ], + [ + [50006, 57090], + [243, -13] + ], + [ + [50294, 54083], + [-436, -346], + [-154, -203], + [-250, -171], + [-248, 168] + ], + [ + [49206, 53531], + [13, 233], + [-121, 509], + [73, 667], + [117, 496], + [-74, 841] + ], + [ + [49214, 56277], + [-38, 444], + [7, 336], + [482, 27], + [123, -43], + [90, 96], + [128, -47] + ], + [ + [48498, 56707], + [125, -129], + [49, -195], + [125, -125], + [97, 149], + [130, 22], + [190, -152] + ], + [ + [49206, 53531], + [-126, -7], + [-194, 116], + [-178, -7], + [-329, -103], + [-193, -170], + [-275, -217], + [-54, 15] + ], + [ + [47857, 53158], + [22, 487], + [26, 74], + [-8, 233], + [-118, 247], + [-88, 40], + [-81, 162], + [60, 262], + [-28, 286], + [13, 172] + ], + [ + [47655, 55121], + [44, 0], + [17, 258], + [-22, 114], + [27, 82], + [103, 71], + [-69, 473], + [-64, 245], + [23, 200], + [55, 46] + ], + [ + [47655, 55121], + [-78, 15], + [-57, -238], + [-78, 3], + [-55, 126], + [19, 237], + [-116, 362], + [-73, -67], + [-59, -13] + ], + [ + [47158, 55546], + [-77, -34], + [3, 217], + [-44, 155], + [9, 171], + [-60, 249], + [-78, 211], + [-222, 1], + [-65, -112], + [-76, -13], + [-48, -128], + [-32, -163], + [-148, -260] + ], + [ + [46320, 55840], + [-122, 349], + [-108, 232], + [-71, 76], + [-69, 118], + [-32, 261], + [-41, 130], + [-80, 97] + ], + [ + [45797, 57103], + [123, 288], + [84, -11], + [73, 99], + [61, 1], + [44, 78], + [-24, 196], + [31, 62], + [5, 200] + ], + [ + [45797, 57103], + [-149, 247], + [-117, 39], + [-63, 166], + [1, 90], + [-84, 125], + [-18, 127] + ], + [ + [47857, 53158], + [-73, -5], + [-286, 282], + [-252, 449], + [-237, 324], + [-187, 381] + ], + [ + [46822, 54589], + [66, 189], + [15, 172], + [126, 320], + [129, 276] + ], + [ + [46822, 54589], + [-75, 44], + [-200, 238], + [-144, 316], + [-49, 216], + [-34, 437] + ], + [ + [55125, 52650], + [-178, 33], + [-188, 99], + [-166, -313], + [-146, -550] + ], + [ + [56824, 55442], + [152, -239], + [2, -192], + [187, -308], + [116, -255], + [70, -355], + [208, -234], + [44, -187] + ], + [ + [53609, 47755], + [-104, 203], + [-84, -100], + [-112, -255] + ], + [ + [53309, 47603], + [-228, 626] + ], + [ + [53081, 48229], + [212, 326], + [-105, 391], + [95, 148], + [187, 73], + [23, 261], + [148, -283], + [245, -25], + [85, 279], + [36, 393], + [-31, 461], + [-131, 350], + [120, 684], + [-69, 117], + [-207, -48], + [-78, 305], + [21, 258] + ], + [ + [53081, 48229], + [-285, 596], + [-184, 488], + [-169, 610], + [9, 196], + [61, 189], + [67, 430], + [56, 438] + ], + [ + [52636, 51176], + [94, 35], + [404, -6], + [-2, 711] + ], + [ + [52636, 51176], + [-52, 90], + [96, 663] + ], + [ + [59099, 45126], + [131, -264], + [71, -501], + [-47, -160], + [-56, -479], + [53, -490], + [-87, -205], + [-85, -549], + [147, -153] + ], + [ + [59226, 42325], + [-843, -487], + [26, -421] + ], + [ + [56448, 40227], + [-181, 369], + [-188, 483], + [13, 1880], + [579, -7], + [-24, 203], + [41, 222], + [-49, 277], + [32, 286], + [-29, 184] + ], + [ + [59599, 43773], + [-77, -449], + [77, -768], + [97, 9], + [100, -191], + [116, -427], + [24, -760], + [-120, -124], + [-85, -410], + [-181, 365], + [-21, 417], + [59, 274], + [-16, 237], + [-110, 149], + [-77, -54], + [-159, 284] + ], + [ + [61198, 44484], + [45, -265], + [-11, -588], + [34, -519], + [11, -923], + [49, -290], + [-83, -422], + [-108, -410], + [-177, -366], + [-254, -225], + [-313, -287], + [-313, -634], + [-107, -108], + [-194, -420], + [-115, -136], + [-23, -421], + [132, -448], + [54, -346], + [4, -177], + [49, 29], + [-8, -579], + [-45, -275], + [65, -101], + [-41, -245], + [-116, -211], + [-229, -199], + [-334, -320], + [-122, -219], + [24, -248], + [71, -40], + [-24, -311] + ], + [ + [58908, 34785], + [-24, 261], + [-41, 265] + ], + [ + [53383, 47159], + [-74, 444] + ], + [ + [53259, 40357], + [-26, 372], + [38, 519], + [96, 541], + [15, 254], + [90, 532], + [66, 243], + [159, 386], + [90, 263], + [29, 438], + [-15, 335], + [-83, 211], + [-74, 358], + [-68, 355], + [15, 122], + [85, 235], + [-84, 570], + [-57, 396], + [-139, 374], + [26, 115] + ], + [ + [58062, 48902], + [169, -46], + [85, 336], + [147, -38] + ], + [ + [59922, 69905], + [-49, -186] + ], + [ + [59873, 69719], + [-100, 82], + [-58, -394], + [69, -66], + [-71, -81], + [-12, -156], + [131, 80] + ], + [ + [59832, 69184], + [7, -230], + [-139, -944] + ], + [ + [59700, 68010], + [-27, 153], + [-155, 862] + ], + [ + [59518, 69025], + [80, 194], + [-19, 34], + [74, 276], + [56, 446], + [40, 149], + [8, 6] + ], + [ + [59757, 70130], + [93, -1], + [25, 104], + [75, 8] + ], + [ + [59950, 70241], + [4, -242], + [-38, -90], + [6, -4] + ], + [ + [59757, 70130], + [99, 482], + [138, 416], + [5, 21] + ], + [ + [59999, 71049], + [125, -31], + [45, -231], + [-151, -223], + [-68, -323] + ], + [ + [63761, 43212], + [74, -251], + [69, -390], + [45, -711], + [72, -276], + [-28, -284], + [-49, -174], + [-94, 347], + [-53, -175], + [53, -438], + [-24, -250], + [-77, -137], + [-18, -500], + [-109, -689], + [-137, -814], + [-172, -1120], + [-106, -821], + [-125, -685], + [-226, -140], + [-243, -250], + [-160, 151], + [-220, 211], + [-77, 312], + [-18, 524], + [-98, 471], + [-26, 425], + [50, 426], + [128, 102], + [1, 197], + [133, 447], + [25, 377], + [-65, 280], + [-52, 372], + [-23, 544], + [97, 331], + [38, 375], + [138, 22], + [155, 121], + [103, 107], + [122, 7], + [158, 337], + [229, 364], + [83, 297], + [-38, 253], + [118, -71], + [153, 410], + [6, 356], + [92, 264], + [96, -254] + ], + [ + [59873, 69719], + [0, -362], + [-41, -173] + ], + [ + [45321, 58350], + [36, 262] + ], + [ + [52633, 68486], + [-118, 1061], + [-171, 238], + [-3, 143], + [-227, 352], + [-24, 445], + [171, 330], + [65, 487], + [-44, 563], + [57, 303] + ], + [ + [52339, 72408], + [302, 239], + [195, -71], + [-9, -299], + [236, 217], + [20, -113], + [-139, -290], + [-2, -273], + [96, -147], + [-36, -511], + [-183, -297], + [53, -322], + [143, -10], + [70, -281], + [106, -92] + ], + [ + [53191, 70158], + [-16, -454], + [-135, -170], + [-86, -189], + [-191, -228], + [30, -244], + [-24, -250], + [-136, -137] + ], + [ + [47592, 66920], + [-2, 700], + [449, 436], + [277, 90], + [227, 159], + [107, 295], + [324, 234], + [12, 438], + [161, 51], + [126, 219], + [363, 99], + [51, 230], + [-73, 125], + [-96, 624], + [-17, 359], + [-104, 379] + ], + [ + [49397, 71358], + [267, 323], + [300, 102], + [175, 244], + [268, 180], + [471, 105], + [459, 48], + [140, -87], + [262, 232], + [297, 5], + [113, -137], + [190, 35] + ], + [ + [52633, 68486], + [90, -522], + [15, -274], + [-49, -482], + [21, -270], + [-36, -323], + [24, -371], + [-110, -247], + [164, -431], + [11, -253], + [99, -330], + [130, 109], + [219, -275], + [122, -370] + ], + [ + [59922, 69905], + [309, -234], + [544, 630] + ], + [ + [60775, 70301], + [112, -720] + ], + [ + [60887, 69581], + [-53, -89], + [-556, -296], + [277, -591], + [-92, -101], + [-46, -197], + [-212, -82], + [-66, -213], + [-120, -182], + [-310, 94] + ], + [ + [59709, 67924], + [-9, 86] + ], + [ + [64327, 64904], + [49, 29], + [11, -162], + [217, 93], + [230, -15], + [168, -18], + [190, 400], + [207, 379], + [176, 364] + ], + [ + [65575, 65974], + [52, -202] + ], + [ + [65627, 65772], + [38, -466] + ], + [ + [65665, 65306], + [-142, -3], + [-23, -384], + [50, -82], + [-126, -117], + [-1, -241], + [-81, -245], + [-7, -238] + ], + [ + [65335, 63996], + [-56, -125], + [-835, 298], + [-106, 599], + [-11, 136] + ], + [ + [64113, 65205], + [-18, 430], + [75, 310], + [76, 64], + [84, -185], + [5, -346], + [-61, -348] + ], + [ + [64274, 65130], + [-77, -42], + [-84, 117] + ], + [ + [63326, 68290], + [58, -261], + [-25, -135], + [89, -445] + ], + [ + [63448, 67449], + [-196, -16], + [-69, 282], + [-248, 57] + ], + [ + [62935, 67772], + [204, 567], + [187, -49] + ], + [ + [60775, 70301], + [615, 614], + [105, 715], + [-26, 431], + [152, 146], + [142, 369] + ], + [ + [61763, 72576], + [119, 92], + [324, -77], + [97, -150], + [133, 100] + ], + [ + [62436, 72541], + [180, -705], + [182, -177], + [21, -345], + [-139, -204], + [-65, -461], + [193, -562], + [340, -324], + [143, -449], + [-46, -428], + [89, 0], + [3, -314], + [153, -311] + ], + [ + [63490, 68261], + [-164, 29] + ], + [ + [62935, 67772], + [-516, 47], + [-784, 1188], + [-413, 414], + [-335, 160] + ], + [ + [65665, 65306], + [125, -404], + [155, -214], + [203, -78], + [165, -107], + [125, -339], + [75, -196], + [100, -75], + [-1, -132], + [-101, -352], + [-44, -166], + [-117, -189], + [-104, -404], + [-126, 31], + [-58, -141], + [-44, -300], + [34, -395], + [-26, -72], + [-128, 2], + [-174, -221], + [-27, -288], + [-63, -125], + [-173, 5], + [-109, -149], + [1, -238], + [-134, -165], + [-153, 56], + [-186, -199], + [-128, -34] + ], + [ + [64752, 60417], + [-91, 413], + [-217, 975] + ], + [ + [64444, 61805], + [833, 591], + [185, 1182], + [-127, 418] + ], + [ + [65575, 65974], + [80, 201], + [35, -51], + [-26, -244], + [-37, -108] + ], + [ + [96448, 41190], + [175, -339], + [-92, -78], + [-93, 259], + [10, 158] + ], + [ + [96330, 41322], + [-39, 163], + [-6, 453], + [133, -182], + [45, -476], + [-75, 74], + [-58, -32] + ], + [ + [78495, 57780], + [-66, 713], + [178, 492], + [359, 112], + [261, -84] + ], + [ + [79227, 59013], + [229, -232], + [126, 407], + [246, -217] + ], + [ + [79828, 58971], + [64, -394], + [-34, -708], + [-467, -455], + [122, -358], + [-292, -43], + [-240, -238] + ], + [ + [78981, 56775], + [-233, 87], + [-112, 307], + [-141, 611] + ], + [ + [78495, 57780], + [-249, 271], + [-238, -11], + [41, 464], + [-245, -3], + [-22, -650], + [-150, -863], + [-90, -522], + [19, -428], + [181, -18], + [113, -539], + [50, -512], + [155, -338], + [168, -69], + [144, -306] + ], + [ + [78372, 54256], + [-91, -243], + [-183, -71], + [-22, 304], + [-227, 258], + [-48, -105] + ], + [ + [77801, 54399], + [-110, 227], + [-47, 292], + [-148, 334], + [-135, 280], + [-45, -347], + [-53, 328], + [30, 369], + [82, 566] + ], + [ + [77375, 56448], + [135, 607], + [152, 551], + [-108, 539], + [4, 274], + [-32, 330], + [-185, 470], + [-66, 296], + [96, 109], + [101, 514], + [-113, 390], + [-177, 431], + [-134, 519], + [117, 107], + [127, 639], + [196, 26], + [162, 256], + [159, 137] + ], + [ + [77809, 62643], + [120, -182], + [16, -355], + [188, -27], + [-68, -623], + [6, -530], + [293, 353], + [83, -104], + [163, 17], + [56, 205], + [210, -40], + [211, -480], + [18, -583], + [224, -515], + [-12, -500], + [-90, -266] + ], + [ + [77809, 62643], + [59, 218], + [237, 384] + ], + [ + [78105, 63245], + [25, -139], + [148, -16], + [-42, 676], + [144, 86] + ], + [ + [78380, 63852], + [162, -466], + [125, -537], + [342, -5], + [108, -515], + [-178, -155], + [-80, -212], + [333, -353], + [231, -699], + [175, -520], + [210, -411], + [70, -418], + [-50, -590] + ], + [ + [77375, 56448], + [-27, 439], + [86, 452], + [-94, 350], + [23, 644], + [-113, 306], + [-90, 707], + [-50, 746], + [-121, 490], + [-183, -297], + [-315, -421], + [-156, 53], + [-172, 138], + [96, 732], + [-58, 554], + [-218, 681], + [34, 213], + [-163, 76], + [-197, 481] + ], + [ + [75657, 62792], + [-18, 476], + [97, -90], + [6, 424] + ], + [ + [75742, 63602], + [137, 140], + [-30, 251], + [63, 201], + [11, 612], + [217, -135], + [124, 487], + [14, 288], + [153, 496], + [-8, 338], + [359, 408], + [199, -107], + [-23, 364], + [97, 108], + [-20, 224] + ], + [ + [77035, 67277], + [162, 44], + [93, -348], + [121, -141], + [8, -452], + [-11, -487], + [-263, -493], + [-33, -701], + [293, 98], + [66, -544], + [176, -115], + [-81, -490], + [206, -222], + [121, -109], + [203, 172], + [9, -244] + ], + [ + [78380, 63852], + [149, 145], + [221, -3], + [271, 68], + [236, 315], + [134, -222], + [254, -108], + [-44, -340], + [132, -240], + [280, -154] + ], + [ + [80013, 63313], + [-371, -505], + [-231, -558], + [-61, -410], + [212, -623], + [260, -772], + [252, -365], + [169, -475], + [127, -1093], + [-37, -1039], + [-232, -389], + [-318, -381], + [-227, -492], + [-346, -550], + [-101, 378], + [78, 401], + [-206, 335] + ], + [ + [86327, 75524], + [0, 0] + ], + [ + [86327, 75524], + [-106, 36], + [-120, -200], + [-83, -202], + [10, -424], + [-143, -130], + [-50, -105], + [-104, -174], + [-185, -97], + [-121, -159], + [-9, -256], + [-32, -65], + [111, -96], + [157, -259] + ], + [ + [85652, 73393], + [-40, -143], + [-118, -39], + [-197, -29], + [-108, -266], + [-124, 21], + [-17, -54] + ], + [ + [85048, 72883], + [-135, 112], + [-34, -111], + [-81, -49], + [-10, 112], + [-72, 54], + [-75, 94], + [76, 260], + [66, 69], + [-25, 108], + [71, 319], + [-18, 96], + [-163, 65], + [-131, 158] + ], + [ + [84517, 74170], + [227, 379], + [306, 318], + [191, 419], + [131, -185], + [241, -22], + [-44, 312], + [429, 254], + [111, 331], + [179, -348] + ], + [ + [85652, 73393], + [240, -697], + [68, -383], + [3, -681], + [-105, -325], + [-252, -113], + [-222, -245], + [-250, -51], + [-31, 322], + [51, 443], + [-122, 615], + [206, 99], + [-190, 506] + ], + [ + [82410, 80055], + [-135, -446], + [-197, -590], + [72, -241], + [157, 74], + [274, -92], + [214, 219], + [223, -189], + [251, -413], + [-30, -210], + [-219, 66], + [-404, -78], + [-195, -168], + [-204, -391], + [-423, -229], + [-277, -313], + [-286, 120], + [-156, 53], + [-146, -381], + [89, -227], + [45, -195], + [-194, -199], + [-200, -316], + [-324, -208], + [-417, -22], + [-448, -205], + [-324, -318], + [-123, 184], + [-336, -1], + [-411, 359], + [-274, 88], + [-369, -82], + [-574, 133], + [-306, -14], + [-163, 351], + [-127, 544], + [-171, 66], + [-336, 368], + [-374, 83], + [-330, 101], + [-100, 256], + [107, 690], + [-192, 476], + [-396, 222], + [-233, 313], + [-73, 413] + ], + [ + [75742, 63602], + [-147, 937], + [-76, -2], + [-46, -377], + [-152, 306], + [86, 336], + [124, 34], + [128, 500], + [-160, 101], + [-257, -8], + [-265, 81], + [-24, 410], + [-133, 30], + [-220, 255], + [-98, -401], + [200, -313], + [-173, -220], + [-62, -215], + [171, -159], + [-47, -356], + [96, -444], + [43, -486] + ], + [ + [74730, 63611], + [-39, -216], + [-189, 7], + [-343, -122], + [16, -445], + [-148, -349], + [-400, -398], + [-311, -695], + [-209, -373], + [-276, -387], + [-1, -271], + [-138, -146], + [-251, -212], + [-129, -31], + [-84, -450], + [58, -769], + [15, -490], + [-118, -561], + [-1, -1004], + [-144, -29], + [-126, -450], + [84, -195], + [-253, -168], + [-93, -401], + [-112, -170], + [-263, 552], + [-128, 827], + [-107, 596], + [-97, 279], + [-148, 568], + [-69, 739], + [-48, 369], + [-253, 811], + [-115, 1145], + [-83, 756], + [1, 716], + [-54, 553], + [-404, -353], + [-196, 70], + [-362, 716], + [133, 214], + [-82, 232], + [-326, 501] + ], + [ + [68937, 64577], + [185, 395], + [612, -2], + [-56, 507], + [-156, 300], + [-31, 455], + [-182, 265], + [306, 619], + [323, -45], + [290, 620], + [174, 599], + [270, 593], + [-4, 421], + [236, 342], + [-224, 292], + [-96, 400], + [-99, 517], + [137, 255], + [421, -144], + [310, 88], + [268, 496] + ], + [ + [71621, 71550], + [298, -692], + [-28, -482], + [111, -303], + [-9, -301], + [-200, 79], + [78, -651], + [273, -374], + [386, -413] + ], + [ + [72530, 68413], + [-176, -268], + [-108, -553], + [269, -224], + [262, -289], + [362, -332], + [381, -76], + [160, -301], + [215, -56], + [334, -138], + [231, 10], + [32, 234], + [-36, 375], + [21, 255] + ], + [ + [74477, 67050], + [170, 124], + [23, -465] + ], + [ + [74670, 66709], + [6, -119], + [252, -224], + [175, 92], + [234, -39], + [227, 17], + [20, 363], + [-113, 189] + ], + [ + [75471, 66988], + [224, 74], + [252, 439], + [321, 376], + [233, -145], + [198, 249], + [130, -367], + [-94, -248], + [300, -89] + ], + [ + [75657, 62792], + [-79, 308], + [-16, 301], + [-53, 285], + [-116, 344], + [-256, 23], + [25, -243], + [-87, -329], + [-118, 120], + [-41, -108], + [-78, 65], + [-108, 53] + ], + [ + [74670, 66709], + [184, 439], + [150, 150], + [198, -137], + [147, -14], + [122, -159] + ], + [ + [72530, 68413], + [115, 141], + [223, -182], + [280, -385], + [157, -84], + [93, -284], + [216, -117], + [225, -259], + [314, -136], + [324, -57] + ], + [ + [68937, 64577], + [-203, 150], + [-83, 424], + [-215, 450], + [-512, -111], + [-451, -11], + [-391, -83] + ], + [ + [67082, 65396], + [105, 687], + [400, 305], + [-23, 272], + [-133, 96], + [-7, 520], + [-266, 260], + [-112, 357], + [-137, 310] + ], + [ + [66909, 68203], + [465, -301], + [278, 88], + [166, -75], + [56, 129], + [194, -52], + [361, 246], + [10, 503], + [154, 334], + [207, -1], + [31, 166], + [212, 77], + [103, -55], + [108, 166], + [-15, 355], + [118, 356], + [177, 150], + [-110, 390], + [265, -18], + [76, 213], + [-12, 227], + [139, 248], + [-32, 294], + [-66, 250], + [163, 258], + [298, 124], + [319, 68], + [141, 109], + [162, 67] + ], + [ + [70877, 72519], + [205, -276], + [82, -454], + [457, -239] + ], + [ + [68841, 72526], + [85, -72], + [201, 189], + [93, -114], + [90, 271], + [166, -12], + [43, 86], + [29, 239], + [120, 205], + [150, -134], + [-30, -181], + [84, -28], + [-26, -496], + [110, -194], + [97, 125], + [123, 58], + [173, 265], + [192, -44], + [286, -1] + ], + [ + [70827, 72688], + [50, -169] + ], + [ + [66909, 68203], + [252, 536], + [-23, 380], + [-210, 100], + [-22, 375], + [-91, 472], + [119, 323], + [-121, 87], + [76, 430], + [113, 736] + ], + [ + [67002, 71642], + [284, -224], + [209, 79], + [58, 268], + [219, 89], + [157, 180], + [55, 472], + [234, 114], + [44, 211], + [131, -158], + [84, -19] + ], + [ + [69725, 74357], + [-101, -182], + [-303, 98], + [-26, -340], + [301, 46], + [343, -192], + [526, 89] + ], + [ + [70465, 73876], + [70, -546], + [91, 59], + [169, -134], + [-10, -230], + [42, -337] + ], + [ + [72294, 75601], + [-39, -134], + [-438, -320], + [-99, -234], + [-356, -70], + [-105, -378], + [-294, 80], + [-192, -116], + [-266, -279], + [39, -138], + [-79, -136] + ], + [ + [67002, 71642], + [-24, 498], + [-207, 21], + [-318, 523], + [-221, 65], + [-308, 299], + [-197, 55], + [-122, -110], + [-186, 17], + [-197, -338], + [-244, -114] + ], + [ + [64978, 72558], + [-52, 417], + [40, 618], + [-216, 200], + [71, 405], + [-184, 34], + [61, 498], + [262, -145], + [244, 189], + [-202, 355], + [-80, 338], + [-224, -151], + [-28, -433], + [-87, 383] + ], + [ + [62436, 72541], + [-152, 473], + [55, 183], + [-87, 678], + [190, 168] + ], + [ + [62442, 74043], + [44, -223], + [141, -273], + [190, -78] + ], + [ + [62817, 73469], + [101, 17] + ], + [ + [62918, 73486], + [327, 436], + [104, 44], + [82, -174], + [-95, -292], + [173, -309], + [69, 29] + ], + [ + [63578, 73220], + [88, -436], + [263, -123], + [193, -296], + [395, -102], + [434, 156], + [27, 139] + ], + [ + [67082, 65396], + [-523, 179], + [-303, 136], + [-313, 76], + [-118, 725], + [-133, 105], + [-214, -106], + [-280, -286], + [-339, 196], + [-281, 454], + [-267, 168], + [-186, 561], + [-205, 788], + [-149, -96], + [-177, 196], + [-104, -231] + ], + [ + [59999, 71049], + [-26, 452], + [68, 243] + ], + [ + [60041, 71744], + [74, 129], + [75, 130], + [15, 329], + [91, -115], + [306, 165], + [147, -112], + [229, 2], + [320, 222], + [149, -10], + [316, 92] + ], + [ + [62817, 73469], + [-113, 342], + [1, 91], + [-123, -2], + [-82, 159], + [-58, -16] + ], + [ + [62442, 74043], + [-109, 172], + [-207, 147], + [27, 288], + [-47, 208] + ], + [ + [62106, 74858], + [386, 92] + ], + [ + [62492, 74950], + [57, -155], + [106, -103], + [-56, -148], + [148, -202], + [-78, -189], + [118, -160], + [124, -97], + [7, -410] + ], + [ + [55734, 91409], + [371, -289], + [433, -402], + [8, -910], + [93, -230] + ], + [ + [56639, 89578], + [-478, -167], + [-269, -413], + [43, -361], + [-441, -475], + [-537, -509], + [-202, -832], + [198, -416], + [265, -328], + [-255, -666], + [-289, -138], + [-106, -992], + [-157, -554], + [-337, 57], + [-158, -468], + [-321, -27], + [-89, 558], + [-232, 671], + [-211, 835] + ], + [ + [58829, 81362], + [-239, -35], + [-85, -129], + [-18, -298], + [-111, 57], + [-250, -28], + [-73, 138], + [-104, -103], + [-105, 86], + [-218, 12], + [-310, 141], + [-281, 47], + [-215, -14], + [-152, -160], + [-133, -23] + ], + [ + [56535, 81053], + [-6, 263], + [-85, 274], + [166, 121], + [2, 235], + [-77, 225], + [-12, 261] + ], + [ + [56523, 82432], + [268, -4], + [302, 223], + [64, 333], + [228, 190], + [-26, 264] + ], + [ + [57359, 83438], + [169, 100], + [298, 228] + ], + [ + [60617, 78409], + [-222, -48], + [-185, -191], + [-260, -31], + [-239, -220], + [14, -317] + ], + [ + [59287, 77741], + [-38, 64], + [-432, 149], + [-19, 221], + [-257, -73], + [-103, -325], + [-215, -437] + ], + [ + [58223, 77340], + [-126, 101], + [-131, -95], + [-124, 109] + ], + [ + [57842, 77455], + [70, 64], + [49, 203], + [76, 188], + [-20, 106], + [58, 47], + [27, -81], + [164, -18], + [74, 44], + [-52, 60], + [19, 88], + [-97, 150], + [-40, 247], + [-101, 97], + [20, 200], + [-125, 159], + [-115, 22], + [-204, 184], + [-185, -58], + [-66, -87] + ], + [ + [57394, 79070], + [-118, 0], + [-69, -139], + [-205, -56], + [-95, -91], + [-129, 144], + [-178, 3], + [-172, 65], + [-120, -127] + ], + [ + [56308, 78869], + [-19, 159], + [-155, 161] + ], + [ + [56134, 79189], + [55, 238], + [77, 154] + ], + [ + [56266, 79581], + [60, -35], + [-71, 266], + [252, 491], + [138, 69], + [29, 166], + [-139, 515] + ], + [ + [56266, 79581], + [-264, 227], + [-200, -84], + [-131, 61], + [-165, -127], + [-140, 210], + [-114, -81], + [-16, 36] + ], + [ + [55236, 79823], + [-127, 291], + [-207, 36], + [-26, 185], + [-191, 66], + [-41, -153], + [-151, 122], + [17, 163], + [-207, 51], + [-132, 191] + ], + [ + [54171, 80775], + [-114, 377], + [22, 204], + [-69, 316], + [-101, 210], + [77, 158], + [-64, 300] + ], + [ + [53922, 82340], + [189, 174], + [434, 273], + [350, 200], + [277, -100], + [21, -144], + [268, -7] + ], + [ + [56314, 82678], + [142, -64], + [67, -182] + ], + [ + [54716, 79012], + [-21, -241], + [-156, -2], + [53, -128], + [-92, -380] + ], + [ + [54500, 78261], + [-53, -100], + [-243, -14], + [-140, -134], + [-229, 45] + ], + [ + [53835, 78058], + [-398, 153], + [-62, 205], + [-274, -102], + [-32, -113], + [-169, 84] + ], + [ + [52900, 78285], + [-142, 16], + [-125, 108], + [42, 145], + [-10, 104] + ], + [ + [52665, 78658], + [83, 33], + [141, -164], + [39, 156], + [245, -25], + [199, 106], + [133, -18], + [87, -121], + [26, 100], + [-40, 385], + [100, 75], + [98, 272] + ], + [ + [53776, 79457], + [206, -190], + [157, 242], + [98, 44], + [215, -180], + [131, 30], + [128, -111] + ], + [ + [54711, 79292], + [-23, -75], + [28, -205] + ], + [ + [56308, 78869], + [-170, -123], + [-131, -401], + [-168, -401], + [-223, -111] + ], + [ + [55616, 77833], + [-173, 26], + [-213, -155] + ], + [ + [55230, 77704], + [-104, -89], + [-229, 114], + [-208, 253], + [-88, 73] + ], + [ + [54601, 78055], + [-54, 200], + [-47, 6] + ], + [ + [54716, 79012], + [141, -151], + [103, -65], + [233, 73], + [22, 118], + [111, 18], + [135, 92], + [30, -38], + [130, 74], + [66, 139], + [91, 36], + [297, -180], + [59, 61] + ], + [ + [57842, 77455], + [-50, 270], + [30, 252], + [-9, 259], + [-160, 352], + [-89, 249], + [-86, 175], + [-84, 58] + ], + [ + [58223, 77340], + [6, -152], + [-135, -128], + [-84, 56], + [-78, -713] + ], + [ + [57932, 76403], + [-163, 62], + [-202, 215], + [-327, -138], + [-138, -150], + [-408, 31], + [-213, 92], + [-108, -43], + [-80, 243] + ], + [ + [56293, 76715], + [-51, 103], + [65, 99], + [-69, 74], + [-87, -133], + [-162, 172], + [-22, 244], + [-169, 139], + [-31, 188], + [-151, 232] + ], + [ + [55907, 83187], + [-59, 497] + ], + [ + [55848, 83684], + [318, 181], + [466, -38], + [273, 59], + [39, -123], + [148, -38], + [267, -287] + ], + [ + [55848, 83684], + [10, 445], + [136, 371], + [262, 202], + [221, -442], + [223, 12], + [53, 453] + ], + [ + [56753, 84725], + [237, 105], + [121, -73], + [239, -219], + [229, -1] + ], + [ + [56753, 84725], + [32, 349], + [-102, -75], + [-176, 210], + [-24, 340], + [351, 164], + [350, 86], + [301, -97], + [287, 17] + ], + [ + [54171, 80775], + [-124, -62], + [-73, 68], + [-70, -113], + [-200, -114], + [-103, -147], + [-202, -129], + [49, -176], + [30, -249], + [141, -142], + [157, -254] + ], + [ + [52665, 78658], + [-298, 181], + [-57, -128], + [-236, 4] + ], + [ + [51718, 79804], + [16, 259], + [-56, 133] + ], + [ + [51678, 80196], + [32, 400] + ], + [ + [51710, 80596], + [-47, 619], + [167, 0], + [70, 222], + [69, 541], + [-51, 200] + ], + [ + [51918, 82178], + [54, 125], + [232, 32], + [52, -130], + [188, 291], + [-63, 222], + [-13, 335] + ], + [ + [52368, 83053], + [210, -78], + [178, 90] + ], + [ + [52756, 83065], + [4, -228], + [281, -138], + [-3, -210], + [283, 111], + [156, 162], + [313, -233], + [132, -189] + ], + [ + [57932, 76403], + [-144, -245], + [-101, -422], + [89, -337] + ], + [ + [57776, 75399], + [-239, 79], + [-283, -186] + ], + [ + [57254, 75292], + [-3, -294], + [-252, -56], + [-196, 206], + [-222, -162], + [-206, 17] + ], + [ + [56375, 75003], + [-20, 391], + [-139, 189] + ], + [ + [56216, 75583], + [46, 84], + [-30, 70], + [47, 188], + [105, 185], + [-135, 255], + [-24, 216], + [68, 134] + ], + [ + [57302, 71436], + [-35, -175], + [-400, -50], + [3, 98], + [-339, 115], + [52, 251], + [152, -199], + [216, 34], + [207, -42], + [-7, -103], + [151, 71] + ], + [ + [57254, 75292], + [135, -157], + [-86, -369], + [-66, -67] + ], + [ + [57237, 74699], + [-169, 17], + [-145, 56], + [-336, -154], + [192, -332], + [-141, -96], + [-154, -1], + [-147, 305], + [-52, -130], + [62, -353], + [139, -277], + [-105, -129], + [155, -273], + [137, -171], + [4, -334], + [-257, 157], + [82, -302], + [-176, -62], + [105, -521], + [-184, -8], + [-228, 257], + [-104, 473], + [-49, 393], + [-108, 272], + [-143, 337], + [-18, 168] + ], + [ + [55597, 73991], + [129, 287], + [16, 192], + [91, 85], + [5, 155] + ], + [ + [55838, 74710], + [182, 53], + [106, 129], + [150, -12], + [46, 103], + [53, 20] + ], + [ + [60041, 71744], + [-102, 268], + [105, 222], + [-169, -51], + [-233, 136], + [-191, -340], + [-421, -66], + [-225, 317], + [-300, 20], + [-64, -245], + [-192, -70], + [-268, 314], + [-303, -11], + [-165, 588], + [-203, 328], + [135, 459], + [-176, 283], + [308, 565], + [428, 23], + [117, 449], + [529, -78], + [334, 383], + [324, 167], + [459, 13], + [485, -417], + [399, -228], + [323, 91], + [239, -53], + [328, 309] + ], + [ + [61542, 75120], + [296, 28], + [268, -290] + ], + [ + [57776, 75399], + [33, -228], + [243, -190], + [-51, -145], + [-330, -33], + [-118, -182], + [-232, -319], + [-87, 276], + [3, 121] + ], + [ + [55597, 73991], + [-48, 41], + [-5, 130], + [-154, 199], + [-24, 281], + [23, 403], + [38, 184], + [-47, 93] + ], + [ + [55380, 75322], + [-18, 188], + [120, 291], + [18, -111], + [75, 52] + ], + [ + [55575, 75742], + [59, -159], + [66, -60], + [19, -214] + ], + [ + [55719, 75309], + [-35, -201], + [39, -254], + [115, -144] + ], + [ + [55230, 77704], + [67, -229], + [89, -169], + [-107, -222] + ], + [ + [55279, 77084], + [-126, 131], + [-192, -8], + [-239, 98], + [-130, -13], + [-60, -123], + [-99, 136], + [-59, -245], + [136, -277], + [61, -183], + [127, -221], + [106, -130], + [105, -247], + [246, -224] + ], + [ + [55155, 75778], + [-31, -100] + ], + [ + [55124, 75678], + [-261, 218], + [-161, 213], + [-254, 176], + [-233, 434], + [56, 45], + [-127, 248], + [-5, 200], + [-179, 93], + [-85, -255], + [-82, 198], + [6, 205], + [10, 9] + ], + [ + [53809, 77462], + [194, -20], + [51, 100], + [94, -97], + [109, -11], + [-1, 165], + [97, 60], + [27, 239], + [221, 157] + ], + [ + [52900, 78285], + [-22, -242], + [-122, -100], + [-206, 75], + [-60, -239], + [-132, -19], + [-48, 94], + [-156, -200], + [-134, -28], + [-120, 126] + ], + [ + [51576, 79843], + [30, 331], + [72, 22] + ], + [ + [50698, 80799], + [222, 117] + ], + [ + [50920, 80916], + [204, -47], + [257, 123], + [176, -258], + [153, -138] + ], + [ + [50920, 80916], + [143, 162], + [244, 869], + [380, 248], + [231, -17] + ], + [ + [47490, 75324], + [101, 150], + [113, 86], + [70, -289], + [164, 0], + [47, 75], + [162, -21], + [78, -296], + [-129, -160], + [-3, -461], + [-45, -86], + [-11, -280], + [-120, -48], + [111, -355], + [-77, -388], + [96, -175], + [-38, -161], + [-103, -222], + [23, -195] + ], + [ + [47929, 72498], + [-112, -153], + [-146, 83], + [-143, -65], + [42, 462], + [-26, 363], + [-124, 55], + [-67, 224], + [22, 386], + [111, 215], + [20, 239], + [58, 355], + [-6, 250], + [-56, 212], + [-12, 200] + ], + [ + [47490, 75324], + [14, 420], + [-114, 257], + [393, 426], + [340, -106], + [373, 3], + [296, -101], + [230, 31], + [449, -19] + ], + [ + [50829, 75674], + [15, -344], + [-263, -393], + [-356, -125], + [-25, -199], + [-171, -327], + [-107, -481], + [108, -338], + [-160, -263], + [-60, -384], + [-210, -118], + [-197, -454], + [-352, -9], + [-265, 11], + [-174, -209], + [-106, -223], + [-136, 49], + [-103, 199], + [-79, 340], + [-259, 92] + ], + [ + [48278, 82406], + [46, -422], + [-210, -528], + [-493, -349], + [-393, 89], + [225, 617], + [-145, 601], + [378, 463], + [210, 276] + ], + [ + [47896, 83153], + [57, -317], + [-57, -317], + [172, 9], + [210, -122] + ], + [ + [96049, 38125], + [228, -366], + [144, -272], + [-105, -142], + [-153, 160], + [-199, 266], + [-179, 313], + [-184, 416], + [-38, 201], + [119, -9], + [156, -201], + [122, -200], + [89, -166] + ], + [ + [95032, 44386], + [78, -203], + [-194, 4], + [-106, 363], + [166, -142], + [56, -22] + ], + [ + [94910, 44908], + [-42, -109], + [-206, 512], + [-57, 353], + [94, 0], + [100, -473], + [111, -283] + ], + [ + [94680, 44747], + [-108, -14], + [-170, 60], + [-58, 91], + [17, 235], + [183, -93], + [91, -124], + [45, -155] + ], + [ + [94344, 45841], + [65, -187], + [12, -119], + [-218, 251], + [-152, 212], + [-104, 197], + [41, 60], + [128, -142], + [228, -272] + ], + [ + [93649, 46431], + [111, -193], + [-56, -33], + [-121, 134], + [-114, 243], + [14, 99], + [166, -250] + ], + [ + [99134, 26908], + [-105, -319], + [-138, -404], + [-214, -236], + [-48, 155], + [-116, 85], + [160, 486], + [-91, 326], + [-299, 236], + [8, 214], + [201, 206], + [47, 455], + [-13, 382], + [-113, 396], + [8, 104], + [-133, 244], + [-218, 523], + [-117, 418], + [104, 46], + [151, -328], + [216, -153], + [78, -526], + [202, -622], + [5, 403], + [126, -161], + [41, -447], + [224, -192], + [188, -48], + [158, 226], + [141, -69], + [-67, -524], + [-85, -345], + [-212, 12], + [-74, -179], + [26, -254], + [-41, -110] + ], + [ + [97129, 24846], + [238, 310], + [167, 306], + [123, 441], + [106, 149], + [41, 330], + [195, 273], + [61, -251], + [63, -244], + [198, 239], + [80, -249], + [0, -249], + [-103, -274], + [-182, -435], + [-142, -238], + [103, -284], + [-214, -7], + [-238, -223], + [-75, -387], + [-157, -597], + [-219, -264], + [-138, -169], + [-256, 13], + [-180, 194], + [-302, 42], + [-46, 217], + [149, 438], + [349, 583], + [179, 111], + [200, 225] + ], + [ + [91024, 26469], + [166, -39], + [20, -702], + [-95, -203], + [-29, -476], + [-97, 162], + [-193, -412], + [-57, 32], + [-171, 19], + [-171, 505], + [-38, 390], + [-160, 515], + [7, 271], + [181, -52], + [269, -204], + [151, 81], + [217, 113] + ], + [ + [85040, 31546], + [-294, -303], + [-241, -137], + [-53, -309], + [-103, -240], + [-236, -15], + [-174, -52], + [-246, 107], + [-199, -64], + [-191, -27], + [-165, -315], + [-81, 26], + [-140, -167], + [-133, -187], + [-203, 23], + [-186, 0], + [-295, 377], + [-149, 113], + [6, 338], + [138, 81], + [47, 134], + [-10, 212], + [34, 411], + [-31, 350], + [-147, 598], + [-45, 337], + [12, 336], + [-111, 385], + [-7, 174], + [-123, 235], + [-35, 463], + [-158, 467], + [-39, 252], + [122, -255], + [-93, 548], + [137, -171], + [83, -229], + [-5, 303], + [-138, 465], + [-26, 186], + [-65, 177], + [31, 341], + [56, 146], + [38, 295], + [-29, 346], + [114, 425], + [21, -450], + [118, 406], + [225, 198], + [136, 252], + [212, 217], + [126, 46], + [77, -73], + [219, 220], + [168, 66], + [42, 129], + [74, 54], + [153, -14], + [292, 173], + [151, 262], + [71, 316], + [163, 300], + [13, 236], + [7, 321], + [194, 502], + [117, -510], + [119, 118], + [-99, 279], + [87, 287], + [122, -128], + [34, 449], + [152, 291], + [67, 233], + [140, 101], + [4, 165], + [122, -69], + [5, 148], + [122, 85], + [134, 80], + [205, -271], + [155, -350], + [173, -4], + [177, -56], + [-59, 325], + [133, 473], + [126, 155], + [-44, 147], + [121, 338], + [168, 208], + [142, -70], + [234, 111], + [-5, 302], + [-204, 195], + [148, 86], + [184, -147], + [148, -242], + [234, -151], + [79, 60], + [172, -182], + [162, 169], + [105, -51], + [65, 113], + [127, -292], + [-74, -316], + [-105, -239], + [-96, -20], + [32, -236], + [-81, -295], + [-99, -291], + [20, -166], + [221, -327], + [214, -189], + [143, -204], + [201, -350], + [78, 1], + [145, -151], + [43, -183], + [265, -200], + [183, 202], + [55, 317], + [56, 262], + [34, 324], + [85, 470], + [-39, 286], + [20, 171], + [-32, 339], + [37, 445], + [53, 120], + [-43, 197], + [67, 313], + [52, 325], + [7, 168], + [104, 222], + [78, -289], + [19, -371], + [70, -71], + [11, -249], + [101, -300], + [21, -335], + [-10, -214], + [100, -464], + [179, 223], + [92, -250], + [133, -231], + [-29, -262], + [60, -506], + [42, -295], + [70, -72], + [75, -505], + [-27, -307], + [90, -400], + [301, -309], + [197, -281], + [186, -257], + [-37, -143], + [159, -371], + [108, -639], + [111, 130], + [113, -256], + [68, 91], + [48, -626], + [197, -363], + [129, -226], + [217, -478], + [78, -475], + [7, -337], + [-19, -365], + [132, -502], + [-16, -523], + [-48, -274], + [-75, -527], + [6, -339], + [-55, -423], + [-123, -538], + [-205, -290], + [-102, -458], + [-93, -292], + [-82, -510], + [-107, -294], + [-70, -442], + [-36, -407], + [14, -187], + [-159, -205], + [-311, -22], + [-257, -242], + [-127, -229], + [-168, -254], + [-230, 262], + [-170, 104], + [43, 308], + [-152, -112], + [-243, -428], + [-240, 160], + [-158, 94], + [-159, 42], + [-269, 171], + [-179, 364], + [-52, 449], + [-64, 298], + [-137, 240], + [-267, 71], + [91, 287], + [-67, 438], + [-136, -408], + [-247, -109], + [146, 327], + [42, 341], + [107, 289], + [-22, 438], + [-226, -504], + [-174, -202], + [-106, -470], + [-217, 243], + [9, 313], + [-174, 429], + [-147, 221], + [52, 137], + [-356, 358], + [-195, 17], + [-267, 287], + [-498, -56], + [-359, -211], + [-317, -197], + [-265, 39] + ], + [ + [72718, 55024], + [-42, -615], + [-116, -168], + [-242, -135], + [-132, 470], + [-49, 849], + [126, 959], + [192, -328], + [129, -416], + [134, -616] + ], + [ + [80409, 61331], + [-228, 183], + [-8, 509], + [137, 267], + [304, 166], + [159, -14], + [62, -226], + [-122, -260], + [-64, -341], + [-240, -284] + ], + [ + [84517, 74170], + [-388, -171], + [-204, -277], + [-300, -161], + [148, 274], + [-58, 230], + [220, 397], + [-147, 310], + [-242, -209], + [-314, -411], + [-171, -381], + [-272, -29], + [-142, -275], + [147, -400], + [227, -97], + [9, -265], + [220, -173], + [311, 422], + [247, -230], + [179, -15], + [45, -310], + [-393, -165], + [-130, -319], + [-270, -296], + [-142, -414], + [299, -325], + [109, -581], + [169, -541], + [189, -454], + [-5, -439], + [-174, -161], + [66, -315], + [164, -184], + [-43, -481], + [-71, -468], + [-155, -53], + [-203, -640], + [-225, -775], + [-258, -705], + [-382, -545], + [-386, -498], + [-313, -68], + [-170, -262], + [-96, 192], + [-157, -294], + [-388, -296], + [-294, -90], + [-95, -624], + [-154, -35], + [-73, 429], + [66, 228], + [-373, 189], + [-131, -96] + ], + [ + [83826, 64992], + [-167, -947], + [-119, -485], + [-146, 499], + [-32, 438], + [163, 581], + [223, 447], + [127, -176], + [-49, -357] + ], + [ + [53835, 78058], + [-31, -291], + [67, -251] + ], + [ + [53871, 77516], + [-221, 86], + [-226, -210], + [15, -293], + [-34, -168], + [91, -301], + [261, -298], + [140, -488], + [309, -476], + [217, 3], + [68, -130], + [-78, -118], + [249, -214], + [204, -178], + [238, -308], + [29, -111], + [-52, -211], + [-154, 276], + [-242, 97], + [-116, -382], + [200, -219], + [-33, -309], + [-116, -35], + [-148, -506], + [-116, -46], + [1, 181], + [57, 317], + [60, 126], + [-108, 342], + [-85, 298], + [-115, 74], + [-82, 255], + [-179, 107], + [-120, 238], + [-206, 38], + [-217, 267], + [-254, 384], + [-189, 340], + [-86, 585], + [-138, 68], + [-226, 195], + [-128, -80], + [-161, -274], + [-115, -43] + ], + [ + [54100, 73116], + [211, 51], + [-100, -465], + [41, -183], + [-58, -303], + [-213, 222], + [-141, 64], + [-387, 300], + [38, 304], + [325, -54], + [284, 64] + ], + [ + [52419, 74744], + [139, 183], + [166, -419], + [-39, -782], + [-126, 38], + [-113, -197], + [-105, 156], + [-11, 713], + [-64, 338], + [153, -30] + ], + [ + [52368, 83053], + [-113, 328], + [-8, 604], + [46, 159], + [80, 177], + [244, 37], + [98, 163], + [223, 167], + [-9, -304], + [-82, -192], + [33, -166], + [151, -89], + [-68, -223], + [-83, 64], + [-200, -425], + [76, -288] + ], + [ + [53436, 83731], + [88, -296], + [-166, -478], + [-291, 333], + [-39, 246], + [408, 195] + ], + [ + [47896, 83153], + [233, 24], + [298, -365], + [-149, -406] + ], + [ + [49140, 82132], + [1, 0], + [40, 343], + [-186, 364], + [-4, 8], + [-337, 104], + [-66, 160], + [101, 264], + [-92, 163], + [-149, -279], + [-17, 569], + [-140, 301], + [101, 611], + [216, 480], + [222, -47], + [335, 49], + [-297, -639], + [283, 81], + [304, -3], + [-72, -481], + [-250, -530], + [287, -38], + [22, -62], + [248, -697], + [190, -95], + [171, -673], + [79, -233], + [337, -113], + [-34, -378], + [-142, -173], + [111, -305], + [-250, -310], + [-371, 6], + [-473, -163], + [-130, 116], + [-183, -276], + [-257, 67], + [-195, -226], + [-148, 118], + [407, 621], + [249, 127], + [-2, 1], + [-434, 98], + [-79, 235], + [291, 183], + [-152, 319], + [52, 387], + [413, -54] + ], + [ + [45969, 89843], + [-64, -382], + [314, -403], + [-361, -451], + [-801, -405], + [-240, -107], + [-365, 87], + [-775, 187], + [273, 261], + [-605, 289], + [492, 114], + [-12, 174], + [-583, 137], + [188, 385], + [421, 87], + [433, -400], + [422, 321], + [349, -167], + [453, 315], + [461, -42] + ], + [ + [63495, 75281], + [146, -311], + [141, -419], + [130, -28], + [85, -159], + [-228, -47], + [-49, -459], + [-48, -207], + [-101, -138], + [7, -293] + ], + [ + [62492, 74950], + [68, 96], + [207, -169], + [149, -36], + [38, 70], + [-136, 319], + [72, 82] + ], + [ + [61542, 75120], + [42, 252], + [-70, 403], + [-160, 218], + [-154, 68], + [-102, 181] + ], + [ + [83564, 58086], + [-142, 450], + [238, -22], + [97, -213], + [-74, -510], + [-119, 295] + ], + [ + [84051, 56477], + [70, 165], + [30, 367], + [153, 35], + [-44, -398], + [205, 570], + [-26, -563], + [-100, -195], + [-87, -373], + [-87, -175], + [-171, 409], + [57, 158] + ], + [ + [85104, 55551], + [28, -392], + [16, -332], + [-94, -540], + [-102, 602], + [-130, -300], + [89, -435], + [-79, -277], + [-327, 343], + [-78, 428], + [84, 280], + [-176, 280], + [-87, -245], + [-131, 23], + [-205, -330], + [-46, 173], + [109, 498], + [175, 166], + [151, 223], + [98, -268], + [212, 162], + [45, 264], + [196, 15], + [-16, 457], + [225, -280], + [23, -297], + [20, -218] + ], + [ + [82917, 56084], + [-369, -561], + [136, 414], + [200, 364], + [167, 409], + [146, 587], + [49, -482], + [-183, -325], + [-146, -406] + ], + [ + [83982, 61347], + [-46, -245], + [95, -423], + [-73, -491], + [-164, -196], + [-43, -476], + [62, -471], + [147, -65], + [123, 70], + [347, -328], + [-27, -321], + [91, -142], + [-29, -272], + [-216, 290], + [-103, 310], + [-71, -217], + [-177, 354], + [-253, -87], + [-138, 130], + [14, 244], + [87, 151], + [-83, 136], + [-36, -213], + [-137, 340], + [-41, 257], + [-11, 566], + [112, -195], + [29, 925], + [90, 535], + [169, -1], + [171, -168], + [85, 153], + [26, -150] + ], + [ + [83899, 57324], + [-43, 282], + [166, -183], + [177, 1], + [-5, -247], + [-129, -251], + [-176, -178], + [-10, 275], + [20, 301] + ], + [ + [84861, 57766], + [78, -660], + [-214, 157], + [5, -199], + [68, -364], + [-132, -133], + [-11, 416], + [-84, 31], + [-43, 357], + [163, -47], + [-4, 224], + [-169, 451], + [266, -13], + [77, -220] + ], + [ + [78372, 54256], + [64, -56], + [164, -356], + [116, -396], + [16, -398], + [-29, -269], + [27, -203], + [20, -349], + [98, -163], + [109, -523], + [-5, -199], + [-197, -40], + [-263, 438], + [-329, 469], + [-32, 301], + [-161, 395], + [-38, 489], + [-100, 322], + [30, 431], + [-61, 250] + ], + [ + [80461, 51765], + [204, -202], + [214, 110], + [56, 500], + [119, 112], + [333, 128], + [199, 467], + [137, 374] + ], + [ + [81723, 53254], + [126, -307], + [58, 202], + [133, -19], + [16, 377], + [13, 291] + ], + [ + [82069, 53798], + [214, 411], + [140, 462], + [112, 2], + [143, -299], + [13, -257], + [183, -165], + [231, -177], + [-20, -232], + [-186, -29], + [50, -289], + [-205, -201] + ], + [ + [81723, 53254], + [110, 221], + [236, 323] + ], + [ + [53809, 77462], + [62, 54] + ], + [ + [57797, 86326], + [-504, -47], + [-489, -216], + [-452, -125], + [-161, 323], + [-269, 193], + [62, 582], + [-135, 533], + [133, 345], + [252, 371], + [635, 640], + [185, 124], + [-28, 250], + [-387, 279] + ], + [ + [54711, 79292], + [39, 130], + [123, -10], + [95, 61], + [7, 55], + [54, 28], + [18, 134], + [64, 26], + [43, 106], + [82, 1] + ], + [ + [60669, 61213], + [161, -684], + [77, -542], + [152, -288], + [379, -558], + [154, -336], + [151, -341], + [87, -203], + [136, -178] + ], + [ + [61966, 58083], + [-83, -144], + [-119, 51] + ], + [ + [61764, 57990], + [-95, 191], + [-114, 346], + [-124, 190], + [-71, 204], + [-242, 237], + [-191, 7], + [-67, 124], + [-163, -139], + [-168, 268], + [-87, -441], + [-323, 124] + ], + [ + [89411, 73729], + [-256, -595], + [4, -610], + [-104, -472], + [48, -296], + [-145, -416], + [-355, -278], + [-488, -36], + [-396, -675], + [-186, 227], + [-12, 442], + [-483, -130], + [-329, -279], + [-325, -11], + [282, -435], + [-186, -1004], + [-179, -248], + [-135, 229], + [69, 533], + [-176, 172], + [-113, 405], + [263, 182], + [145, 371], + [280, 306], + [203, 403], + [553, 177], + [297, -121], + [291, 1050], + [185, -282], + [408, 591], + [158, 229], + [174, 723], + [-47, 664], + [117, 374], + [295, 108], + [152, -819], + [-9, -479] + ], + [ + [90169, 76553], + [197, 250], + [62, -663], + [-412, -162], + [-244, -587], + [-436, 404], + [-152, -646], + [-308, -9], + [-39, 587], + [138, 455], + [296, 33], + [81, 817], + [83, 460], + [326, -615], + [213, -198], + [195, -126] + ], + [ + [86769, 70351], + [154, 352], + [158, -68], + [114, 248], + [204, -127], + [35, -203], + [-156, -357], + [-114, 189], + [-143, -137], + [-73, -346], + [-181, 168], + [2, 281] + ], + [ + [64752, 60417], + [-201, -158], + [-54, -263], + [-6, -201], + [-277, -249], + [-444, -276], + [-249, -417], + [-122, -33], + [-83, 35], + [-163, -245], + [-177, -114], + [-233, -30], + [-70, -34], + [-61, -156], + [-73, -43], + [-43, -150], + [-137, 13], + [-89, -80], + [-192, 30], + [-72, 345], + [8, 323], + [-46, 174], + [-54, 437], + [-80, 243], + [56, 29], + [-29, 270], + [34, 114], + [-12, 257] + ], + [ + [61883, 60238], + [121, 189], + [-28, 249], + [74, 290], + [114, -153], + [75, 53], + [321, 14], + [50, -59], + [269, -60], + [106, 30], + [70, -197], + [130, 99], + [199, 620], + [259, 266], + [801, 226] + ], + [ + [63448, 67449], + [109, -510], + [137, -135], + [47, -207], + [190, -249], + [16, -243], + [-27, -197], + [35, -199], + [80, -165], + [37, -194], + [41, -145] + ], + [ + [64274, 65130], + [53, -226] + ], + [ + [61883, 60238], + [-37, 252], + [-83, 178], + [-22, 236], + [-143, 212], + [-148, 495], + [-79, 482], + [-192, 406], + [-124, 97], + [-184, 563], + [-32, 411], + [12, 350], + [-159, 655], + [-130, 231], + [-150, 122], + [-92, 339], + [15, 133], + [-77, 306], + [-81, 132], + [-108, 440], + [-170, 476], + [-141, 406], + [-139, -3], + [44, 325], + [12, 206], + [34, 236] + ], + [ + [36483, 4468], + [141, 0], + [414, 127], + [419, -127], + [342, -255], + [120, -359], + [33, -254], + [11, -301], + [-430, -186], + [-452, -150], + [-522, -139], + [-582, -116], + [-658, 35], + [-365, 197], + [49, 243], + [593, 162], + [239, 197], + [174, 254], + [126, 220], + [168, 209], + [180, 243] + ], + [ + [31586, 3163], + [625, -23], + [599, -58], + [207, 243], + [147, 208], + [288, -243], + [-82, -301], + [-81, -266], + [-582, 81], + [-621, -35], + [-348, 197], + [0, 23], + [-152, 174] + ], + [ + [29468, 8472], + [190, 70], + [321, -23], + [82, 301], + [16, 219], + [-6, 475], + [158, 278], + [256, 93], + [147, -220], + [65, -220], + [120, -267], + [92, -254], + [76, -267], + [33, -266], + [-49, -231], + [-76, -220], + [-326, -81], + [-311, -116], + [-364, 11], + [136, 232], + [-327, -81], + [-310, -81], + [-212, 174], + [-16, 243], + [305, 231] + ], + [ + [21575, 8103], + [174, 104], + [353, -81], + [403, -46], + [305, -81], + [304, 69], + [163, -335], + [-217, 46], + [-337, -23], + [-343, 23], + [-376, -35], + [-283, 116], + [-146, 243] + ], + [ + [15938, 7061], + [60, 197], + [332, -104], + [359, -93], + [332, 104], + [-158, -208], + [-261, -151], + [-386, 47], + [-278, 208] + ], + [ + [14643, 7177], + [202, 127], + [277, -139], + [425, -231], + [-164, 23], + [-359, 58], + [-381, 162] + ], + [ + [4524, 4144], + [169, 220], + [517, -93], + [277, -185], + [212, -209], + [76, -266], + [-533, -81], + [-364, 208], + [-163, 209], + [-11, 35], + [-180, 162] + ], + [ + [0, 529], + [16, -5], + [245, 344], + [501, -185], + [32, 21], + [294, 188], + [38, -7], + [32, -4], + [402, -246], + [352, 246], + [63, 34], + [816, 104], + [265, -138], + [130, -71], + [419, -196], + [789, -151], + [625, -185], + [1072, -139], + [800, 162], + [1181, -116], + [669, -185], + [734, 174], + [773, 162], + [60, 278], + [-1094, 23], + [-898, 139], + [-234, 231], + [-745, 128], + [49, 266], + [103, 243], + [104, 220], + [-55, 243], + [-462, 162], + [-212, 209], + [-430, 185], + [675, -35], + [642, 93], + [402, -197], + [495, 173], + [457, 220], + [223, 197], + [-98, 243], + [-359, 162], + [-408, 174], + [-571, 35], + [-500, 81], + [-539, 58], + [-180, 220], + [-359, 185], + [-217, 208], + [-87, 672], + [136, -58], + [250, -185], + [457, 58], + [441, 81], + [228, -255], + [441, 58], + [370, 127], + [348, 162], + [315, 197], + [419, 58], + [-11, 220], + [-97, 220], + [81, 208], + [359, 104], + [163, -196], + [425, 115], + [321, 151], + [397, 12], + [375, 57], + [376, 139], + [299, 128], + [337, 127], + [218, -35], + [190, -46], + [414, 81], + [370, -104], + [381, 11], + [364, 81], + [375, -57], + [414, -58], + [386, 23], + [403, -12], + [413, -11], + [381, 23], + [283, 174], + [337, 92], + [349, -127], + [331, 104], + [300, 208], + [179, -185], + [98, -208], + [180, -197], + [288, 174], + [332, -220], + [375, -70], + [321, -162], + [392, 35], + [354, 104], + [418, -23], + [376, -81], + [381, -104], + [147, 254], + [-180, 197], + [-136, 209], + [-359, 46], + [-158, 220], + [-60, 220], + [-98, 440], + [213, -81], + [364, -35], + [359, 35], + [327, -93], + [283, -174], + [119, -208], + [376, -35], + [359, 81], + [381, 116], + [342, 70], + [283, -139], + [370, 46], + [239, 451], + [224, -266], + [321, -104], + [348, 58], + [228, -232], + [365, -23], + [337, -69], + [332, -128], + [218, 220], + [108, 209], + [278, -232], + [381, 58], + [283, -127], + [190, -197], + [370, 58], + [288, 127], + [283, 151], + [337, 81], + [392, 69], + [354, 81], + [272, 127], + [163, 186], + [65, 254], + [-32, 244], + [-87, 231], + [-98, 232], + [-87, 231], + [-71, 209], + [-16, 231], + [27, 232], + [130, 220], + [109, 243], + [44, 231], + [-55, 255], + [-32, 232], + [136, 266], + [152, 173], + [180, 220], + [190, 186], + [223, 173], + [109, 255], + [152, 162], + [174, 151], + [267, 34], + [174, 186], + [196, 115], + [228, 70], + [202, 150], + [157, 186], + [218, 69], + [163, -151], + [-103, -196], + [-283, -174], + [-120, -127], + [-206, 92], + [-229, -58], + [-190, -139], + [-202, -150], + [-136, -174], + [-38, -231], + [17, -220], + [130, -197], + [-190, -139], + [-261, -46], + [-153, -197], + [-163, -185], + [-174, -255], + [-44, -220], + [98, -243], + [147, -185], + [229, -139], + [212, -185], + [114, -232], + [60, -220], + [82, -232], + [130, -196], + [82, -220], + [38, -544], + [81, -220], + [22, -232], + [87, -231], + [-38, -313], + [-152, -243], + [-163, -197], + [-370, -81], + [-125, -208], + [-169, -197], + [-419, -220], + [-370, -93], + [-348, -127], + [-376, -128], + [-223, -243], + [-446, -23], + [-489, 23], + [-441, -46], + [-468, 0], + [87, -232], + [424, -104], + [311, -162], + [174, -208], + [-310, -185], + [-479, 58], + [-397, -151], + [-17, -243], + [-11, -232], + [327, -196], + [60, -220], + [353, -220], + [588, -93], + [500, -162], + [398, -185], + [506, -186], + [690, -92], + [681, -162], + [473, -174], + [517, -197], + [272, -278], + [136, -220], + [337, 209], + [457, 173], + [484, 186], + [577, 150], + [495, 162], + [691, 12], + [680, -81], + [560, -139], + [180, 255], + [386, 173], + [702, 12], + [550, 127], + [522, 128], + [577, 81], + [614, 104], + [430, 150], + [-196, 209], + [-119, 208], + [0, 220], + [-539, -23], + [-571, -93], + [-544, 0], + [-77, 220], + [39, 440], + [125, 128], + [397, 138], + [468, 139], + [337, 174], + [337, 174], + [251, 231], + [380, 104], + [376, 81], + [190, 47], + [430, 23], + [408, 81], + [343, 116], + [337, 139], + [305, 139], + [386, 185], + [245, 197], + [261, 173], + [82, 232], + [-294, 139], + [98, 243], + [185, 185], + [288, 116], + [305, 139], + [283, 185], + [217, 232], + [136, 277], + [202, 163], + [331, -35], + [136, -197], + [332, -23], + [11, 220], + [142, 231], + [299, -58], + [71, -220], + [331, -34], + [360, 104], + [348, 69], + [315, -34], + [120, -243], + [305, 196], + [283, 105], + [315, 81], + [310, 81], + [283, 139], + [310, 92], + [240, 128], + [168, 208], + [207, -151], + [288, 81], + [202, -277], + [157, -209], + [316, 116], + [125, 232], + [283, 162], + [365, -35], + [108, -220], + [229, 220], + [299, 69], + [326, 23], + [294, -11], + [310, -70], + [300, -34], + [130, -197], + [180, -174], + [304, 104], + [327, 24], + [315, 0], + [310, 11], + [278, 81], + [294, 70], + [245, 162], + [261, 104], + [283, 58], + [212, 162], + [152, 324], + [158, 197], + [288, -93], + [109, -208], + [239, -139], + [289, 46], + [196, -208], + [206, -151], + [283, 139], + [98, 255], + [250, 104], + [289, 197], + [272, 81], + [326, 116], + [218, 127], + [228, 139], + [218, 127], + [261, -69], + [250, 208], + [180, 162], + [261, -11], + [229, 139], + [54, 208], + [234, 162], + [228, 116], + [278, 93], + [256, 46], + [244, -35], + [262, -58], + [223, -162], + [27, -254], + [245, -197], + [168, -162], + [332, -70], + [185, -162], + [229, -162], + [266, -35], + [223, 116], + [240, 243], + [261, -127], + [272, -70], + [261, -69], + [272, -46], + [277, 0], + [229, -614], + [-11, -150], + [-33, -267], + [-266, -150], + [-218, -220], + [38, -232], + [310, 12], + [-38, -232], + [-141, -220], + [-131, -243], + [212, -185], + [321, -58], + [321, 104], + [153, 232], + [92, 220], + [153, 185], + [174, 174], + [70, 208], + [147, 289], + [174, 58], + [316, 24], + [277, 69], + [283, 93], + [136, 231], + [82, 220], + [190, 220], + [272, 151], + [234, 115], + [153, 197], + [157, 104], + [202, 93], + [277, -58], + [250, 58], + [272, 69], + [305, -34], + [201, 162], + [142, 393], + [103, -162], + [131, -278], + [234, -115], + [266, -47], + [267, 70], + [283, -46], + [261, -12], + [174, 58], + [234, -35], + [212, -127], + [250, 81], + [300, 0], + [255, 81], + [289, -81], + [185, 197], + [141, 196], + [191, 163], + [348, 439], + [179, -81], + [212, -162], + [185, -208], + [354, -359], + [272, -12], + [256, 0], + [299, 70], + [299, 81], + [229, 162], + [190, 174], + [310, 23], + [207, 127], + [218, -116], + [141, -185], + [196, -185], + [305, 23], + [190, -150], + [332, -151], + [348, -58], + [288, 47], + [218, 185], + [185, 185], + [250, 46], + [251, -81], + [288, -58], + [261, 93], + [250, 0], + [245, -58], + [256, -58], + [250, 104], + [299, 93], + [283, 23], + [316, 0], + [255, 58], + [251, 46], + [76, 290], + [11, 243], + [174, -162], + [49, -266], + [92, -244], + [115, -196], + [234, -105], + [315, 35], + [365, 12], + [250, 35], + [364, 0], + [262, 11], + [364, -23], + [310, -46], + [196, -186], + [-54, -220], + [179, -173], + [299, -139], + [310, -151], + [360, -104], + [375, -92], + [283, -93], + [315, -12], + [180, 197], + [245, -162], + [212, -185], + [245, -139], + [337, -58], + [321, -69], + [136, -232], + [316, -139], + [212, -208], + [310, -93], + [321, 12], + [299, -35], + [332, 12], + [332, -47], + [310, -81], + [288, -139], + [289, -116], + [195, -173], + [-32, -232], + [-147, -208], + [-125, -266], + [-98, -209], + [-131, -243], + [-364, -93], + [-163, -208], + [-360, -127], + [-125, -232], + [-190, -220], + [-201, -185], + [-115, -243], + [-70, -220], + [-28, -266], + [6, -220], + [158, -232], + [60, -220], + [130, -208], + [517, -81], + [109, -255], + [-501, -93], + [-424, -127], + [-528, -23], + [-234, -336], + [-49, -278], + [-119, -220], + [-147, -220], + [370, -196], + [141, -244], + [239, -219], + [338, -197], + [386, -186], + [419, -185], + [636, -185], + [142, -289], + [800, -128], + [53, -45], + [208, -175], + [767, 151], + [636, -186], + [479, -142], + [-99999, 0] + ], + [ + [59092, 71341], + [19, 3], + [40, 143], + [200, -8], + [253, 176], + [-188, -251], + [21, -111] + ], + [ + [59437, 71293], + [-30, 21], + [-53, -45], + [-42, 12], + [-14, -22], + [-5, 59], + [-20, 37], + [-54, 6], + [-75, -51], + [-52, 31] + ], + [ + [59437, 71293], + [8, -48], + [-285, -240], + [-136, 77], + [-64, 237], + [132, 22] + ], + [ + [45272, 63236], + [13, 274], + [106, 161], + [91, 308], + [-18, 200], + [96, 417], + [155, 376], + [93, 95], + [74, 344], + [6, 315], + [100, 365], + [185, 216], + [177, 603], + [5, 8], + [139, 227], + [259, 65], + [218, 404], + [140, 158], + [232, 493], + [-70, 735], + [106, 508], + [37, 312], + [179, 399], + [278, 270], + [206, 244], + [186, 612], + [87, 362], + [205, -2], + [167, -251], + [264, 41], + [288, -131], + [121, -6] + ], + [ + [56944, 63578], + [0, 2175], + [0, 2101], + [-83, 476], + [71, 365], + [-43, 253], + [101, 283] + ], + [ + [56990, 69231], + [369, 10], + [268, -156], + [275, -175], + [129, -92], + [214, 188], + [114, 169], + [245, 49], + [198, -75], + [75, -293], + [65, 193], + [222, -140], + [217, -33], + [137, 149] + ], + [ + [59700, 68010], + [-78, -238], + [-60, -446], + [-75, -308], + [-65, -103], + [-93, 191], + [-125, 263], + [-198, 847], + [-29, -53], + [115, -624], + [171, -594], + [210, -920], + [102, -321], + [90, -334], + [249, -654], + [-55, -103], + [9, -384], + [323, -530], + [49, -121] + ], + [ + [53191, 70158], + [326, -204], + [117, 51], + [232, -98], + [368, -264], + [130, -526], + [250, -114], + [391, -248], + [296, -293], + [136, 153], + [133, 272], + [-65, 452], + [87, 288], + [200, 277], + [192, 80], + [375, -121], + [95, -264], + [104, -2], + [88, -101], + [276, -70], + [68, -195] + ], + [ + [59804, 53833], + [-164, 643], + [-127, 137], + [-48, 236], + [-141, 288], + [-171, 42], + [95, 337], + [147, 14], + [42, 181] + ], + [ + [61764, 57990], + [-98, -261], + [-94, -277], + [22, -163], + [4, -180], + [155, -10], + [67, 42], + [62, -106] + ], + [ + [61882, 57035], + [-61, -209], + [103, -325], + [102, -285], + [106, -210], + [909, -702], + [233, 4] + ], + [ + [61966, 58083], + [66, -183], + [-9, -245], + [-158, -142], + [119, -161] + ], + [ + [61984, 57352], + [-102, -317] + ], + [ + [61984, 57352], + [91, -109], + [54, -245], + [125, -247], + [138, -2], + [262, 151], + [302, 70], + [245, 184], + [138, 39], + [99, 108], + [158, 20] + ], + [ + [58449, 49909], + [-166, -182], + [-67, 60] + ], + [ + [58564, 52653], + [115, 161], + [176, -132], + [224, 138], + [195, -1], + [171, 272] + ], + [ + [55279, 77084], + [100, 2], + [-69, -260], + [134, -227], + [-41, -278], + [-65, -27] + ], + [ + [55338, 76294], + [-52, -53], + [-90, -138], + [-41, -325] + ], + [ + [55719, 75309], + [35, -5], + [13, 121], + [164, 91], + [62, 23] + ], + [ + [55993, 75539], + [95, 35], + [128, 9] + ], + [ + [55993, 75539], + [-9, 44], + [33, 71], + [31, 144], + [-39, -4], + [-54, 110], + [-46, 28], + [-36, 94], + [-52, 36], + [-40, 84], + [-50, -33], + [-38, -196], + [-66, -43] + ], + [ + [55627, 75874], + [22, 51], + [-106, 123], + [-91, 63], + [-40, 82], + [-74, 101] + ], + [ + [55380, 75322], + [-58, 46], + [-78, 192], + [-120, 118] + ], + [ + [55627, 75874], + [-52, -132] + ], + [ + [32866, 56937], + [160, 77], + [58, -21], + [-11, -440], + [-232, -65], + [-50, 53], + [81, 163], + [-6, 233] + ] + ], + "bbox": [-180, -85.60903777459771, 180, 83.64513000000001], + "transform": { + "scale": [0.0036000360003600037, 0.0016925586033320105], + "translate": [-180, -85.60903777459771] + } +} diff --git a/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.module.scss b/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.module.scss new file mode 100644 index 0000000..0a41324 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.module.scss @@ -0,0 +1,270 @@ +.EmptyState { + max-width: 900px; + margin-left: auto; + margin-right: auto; + padding: 48px 16px; + text-align: center; +} + +.Globe { + display: inline-block; + cursor: default; + user-select: none; + margin-bottom: 16px; + font-size: 48px; + line-height: 1; +} + +.EmptyText { + font-size: 15px; + color: #94a3b8; +} + +.UnderlineWrap { + position: relative; + display: inline-block; +} + +.EmptyHint { + margin-top: 8px; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #337ab7; +} + +.Root { + max-width: 900px; + margin-left: auto; + margin-right: auto; + padding: 0 16px 64px; +} + +.Card { + overflow: hidden; + border-radius: 16px; + border: 1px solid #e2e8f0; + background: #ffffff; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.Header { + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 16px; + border-bottom: 1px solid #f1f5f9; + padding: 24px 28px; +} + +.HeaderFlag { + margin-top: 4px; + border-radius: 4px; +} + +.HeaderBody { + min-width: 0; + flex: 1; +} + +.TitleRow { + display: flex; + align-items: center; + gap: 12px; +} + +.Title { + margin: 0; + font-size: 24px; + font-weight: 700; + color: #1a1a2e; +} + +.ConfidenceWrap { + position: relative; +} + +.ConfidenceBadge { + flex-shrink: 0; + cursor: default; + border-radius: 9999px; + padding: 2px 10px; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 11px; + font-weight: 600; + transition: opacity 0.2s; + + &:hover { + opacity: 0.8; + } +} + +.HelpPopover { + position: absolute; + top: 32px; + left: 50%; + z-index: 50; + width: 340px; + max-width: 90vw; + transform: translateX(-50%); + border-radius: 12px; + border: 1px solid #e2e8f0; + background: #ffffff; + padding: 16px; + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 8px 10px -6px rgba(0, 0, 0, 0.1); + + @media (min-width: 640px) { + width: 400px; + } +} + +.HelpLabel { + margin: 0 0 6px; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #337ab7; +} + +.HelpText { + margin: 0 0 8px; + font-size: 13px; + line-height: 1.6; + color: #475569; +} + +.HelpFootnote { + margin-top: 8px; + border-top: 1px solid #f1f5f9; + padding-top: 8px; + + p { + margin: 0; + font-size: 11px; + color: #94a3b8; + } +} + +.Rationale { + margin: 4px 0 0; + max-width: 500px; + font-size: 13px; + line-height: 1.6; + color: #64748b; +} + +.RegionTag { + flex-shrink: 0; + border-radius: 9999px; + padding: 4px 14px; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 12px; + font-weight: 500; + letter-spacing: 0.025em; +} + +.BiasGrid { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 10px; + padding: 24px; + + @media (min-width: 640px) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +.BiasChip { + display: flex; + flex-direction: column; + gap: 4px; + border-radius: 12px; + border: 1px solid #e2e8f0; + background: #fafbfc; + padding: 14px 16px; + text-decoration: none; + transition: all 0.2s; + + &:hover { + transform: translateY(-2px); + border-color: #337ab7; + background: rgba(51, 122, 183, 0.05); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + } +} + +.BiasNumber { + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 11px; + letter-spacing: 0.025em; + color: #337ab7; +} + +.BiasName { + font-size: 14px; + font-weight: 600; + color: #1a1a2e; +} + +.BiasShort { + font-size: 12px; + line-height: 1.6; + color: #64748b; + + p { + margin: 0; + + & + p { + margin-top: 6px; + } + } + + span { + background-color: transparent !important; + color: inherit !important; + } +} + +.Footer { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 12px; + border-top: 1px solid #f1f5f9; + padding: 16px 28px; +} + +.FooterMeta { + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 12px; + color: #94a3b8; +} + +.UseButton { + display: inline-block; + border: none; + border-radius: 8px; + background: #337ab7; + padding: 10px 20px; + font-size: 13px; + font-weight: 600; + color: #ffffff; + cursor: pointer; + transition: all 0.2s; + + &:hover { + transform: translateY(-2px); + background: #2868a3; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + } +} diff --git a/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.tsx b/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.tsx new file mode 100644 index 0000000..9901181 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/BiasPanel/BiasPanel.tsx @@ -0,0 +1,236 @@ +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { + type FC, + forwardRef, + type Ref, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; + +import type { StrapiBiasType } from '@local-types/data'; +import type { TRouter } from '@local-types/global'; + +import { countryBiasByLocale, REGION_COLORS } from '@data/countryBias'; + +import FlagImage from '../FlagImage'; + +import styles from './BiasPanel.module.scss'; + +const SpinningGlobe: FC = () => { + const [hovering, setHovering] = useState(false); + const [rotation, setRotation] = useState(0); + + useEffect(() => { + if (!hovering) return; + let raf: number; + let start: number | null = null; + const baseRotation = rotation; + + const animate = (ts: number) => { + if (!start) start = ts; + const elapsed = ts - start; + setRotation(baseRotation + (elapsed / 1000) * 18); + raf = requestAnimationFrame(animate); + }; + + raf = requestAnimationFrame(animate); + return () => cancelAnimationFrame(raf); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [hovering]); + + return ( +
setHovering(true)} + onMouseLeave={() => setHovering(false)} + title="Give me a spin!" + > + 🌍 +
+ ); +}; + +interface BiasPanelProps { + selectedId: string | null; + biases: StrapiBiasType[]; + onUseBiases: (biasNumbers: number[]) => void; +} + +const BiasPanel = forwardRef( + ({ selectedId, biases, onUseBiases }, ref) => { + const { locale } = useRouter() as TRouter; + const { countries, ui, regions } = countryBiasByLocale[locale]; + + const country = countries.find(c => c.id === selectedId) ?? null; + const [showHelp, setShowHelp] = useState(false); + const helpTimeoutRef = useRef | null>(null); + + const biasByNumber = useMemo(() => { + const map = new Map(); + for (const b of biases) map.set(b.number, b); + return map; + }, [biases]); + + if (!country) { + return ( +
+ +

+ {ui.emptyStateLead} + + + {ui.emptyStateLink} + + + +

+

{ui.emptyStateHint}

+
+ ); + } + + const baseRegionColor = REGION_COLORS[country.region] || '#337AB7'; + const confidencePct = Math.round(country.confidence * 100); + const regionLabel = regions[country.region] ?? country.region; + + const badgeBg = + confidencePct >= 85 + ? '#DCFCE7' + : confidencePct >= 75 + ? '#FEF3C7' + : '#FEE2E2'; + const badgeColor = + confidencePct >= 85 + ? '#166534' + : confidencePct >= 75 + ? '#92400E' + : '#991B1B'; + + const handleUse = () => { + onUseBiases(country.biases); + }; + + return ( +
}> +
+
+ +
+
+

{country.name}

+
+ { + if (helpTimeoutRef.current) + clearTimeout(helpTimeoutRef.current); + setShowHelp(true); + }} + onMouseLeave={() => { + helpTimeoutRef.current = setTimeout( + () => setShowHelp(false), + 120, + ); + }} + > + {confidencePct} + {ui.matchSuffix} + + {showHelp && ( +
{ + if (helpTimeoutRef.current) + clearTimeout(helpTimeoutRef.current); + }} + onMouseLeave={() => { + helpTimeoutRef.current = setTimeout( + () => setShowHelp(false), + 120, + ); + }} + > +

{ui.whyTheseBiases}

+

{ui.whyApproxNote}

+

{country.biasRationale}

+
+

{ui.hofstedeNote}

+
+
+ )} +
+
+

{country.rationale}

+
+ + {regionLabel} + +
+ +
+ {country.biases.map(bId => { + const bias = biasByNumber.get(bId); + if (!bias) return null; + return ( + + #{bId} + {bias.title} +
+ + ); + })} +
+ +
+ + {country.biases.length} {ui.footerBiases} · {regionLabel}{' '} + · {confidencePct}% {ui.footerConfidence} + + +
+
+
+ ); + }, +); + +BiasPanel.displayName = 'BiasPanel'; + +export default BiasPanel; diff --git a/src/components/_uxcp/CountryBiasMap/BiasPanel/index.ts b/src/components/_uxcp/CountryBiasMap/BiasPanel/index.ts new file mode 100644 index 0000000..ce211e5 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/BiasPanel/index.ts @@ -0,0 +1,3 @@ +import BiasPanel from './BiasPanel'; + +export default BiasPanel; diff --git a/src/components/_uxcp/CountryBiasMap/CountryBiasMap.module.scss b/src/components/_uxcp/CountryBiasMap/CountryBiasMap.module.scss new file mode 100644 index 0000000..b2094fe --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryBiasMap.module.scss @@ -0,0 +1,120 @@ +.Root { + background: #ffffff; +} + +.Header { + padding: 48px 24px 24px; + text-align: center; +} + +.Eyebrow { + margin: 0 0 4px; + font-size: 32px; + font-weight: 700; + color: #1a1a2e; + + @media (min-width: 640px) { + font-size: 38px; + } +} + +.SubtitleSlot { + margin: 0 0 16px; + font-size: 28px; + + @media (min-width: 640px) { + font-size: 34px; + } +} + +.CyclingWord { + display: inline-block; + transition: all 0.3s; +} + +.Tagline { + max-width: 600px; + margin: 0 auto; + font-size: 16px; + line-height: 1.6; + color: #64748b; +} + +.SubTagline { + max-width: 560px; + margin: 16px auto 0; + font-size: 14px; + line-height: 1.6; + color: #94a3b8; +} + +.SubTaglineLead { + color: #1a1a2e; +} + +.Stats { + display: flex; + flex-wrap: wrap; + gap: 16px; + max-width: 900px; + margin: 0 auto; + padding: 0 16px 24px; +} + +.StatBox { + flex: 1; + min-width: 240px; + border: 1px solid #e2e8f0; + border-radius: 12px; + background: #fafbfc; + padding: 16px 24px; + text-align: center; +} + +.StatNumber { + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 24px; + font-weight: 700; + color: #337ab7; +} + +.StatLabel { + margin-top: 4px; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: #475569; +} + +.CalloutBox { + flex: 1; + min-width: 240px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(51, 122, 183, 0.2); + border-radius: 12px; + background: rgba(51, 122, 183, 0.05); + padding: 16px 24px; + text-align: center; +} + +.CalloutText { + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.025em; + color: #337ab7; +} + +.Divider { + max-width: 900px; + margin: 0 auto; + padding: 8px 16px; + + hr { + border: 0; + border-top: 1px solid #f1f5f9; + } +} diff --git a/src/components/_uxcp/CountryBiasMap/CountryBiasMap.tsx b/src/components/_uxcp/CountryBiasMap/CountryBiasMap.tsx new file mode 100644 index 0000000..d1d0a8b --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryBiasMap.tsx @@ -0,0 +1,154 @@ +import { useRouter } from 'next/router'; +import { type FC, useEffect, useRef, useState } from 'react'; + +import type { StrapiBiasType } from '@local-types/data'; +import type { TRouter } from '@local-types/global'; + +import { countryBiasByLocale } from '@data/countryBias'; + +import BiasPanel from './BiasPanel'; +import CountryList from './CountryList'; +import CountryMap from './CountryMap'; + +import styles from './CountryBiasMap.module.scss'; + +const TITLE_INTERVAL = 3000; + +interface CyclingSubtitleWordProps { + words: string[]; + interval: number; + boldWord?: string; +} + +const CyclingSubtitleWord: FC = ({ + words, + interval, + boldWord, +}) => { + const [index, setIndex] = useState(0); + const [phase, setPhase] = useState<'visible' | 'fading' | 'entering'>( + 'visible', + ); + + useEffect(() => { + setIndex(0); + }, [words]); + + useEffect(() => { + const timer = setInterval(() => { + setPhase('fading'); + setTimeout(() => { + setIndex(prev => (prev + 1) % words.length); + setPhase('entering'); + setTimeout(() => setPhase('visible'), 50); + }, 350); + }, interval); + return () => clearInterval(timer); + }, [words, interval]); + + const word = words[index]; + const isBold = boldWord && word === boldWord; + + return ( + + {word} + + ); +}; + +interface CountryBiasMapProps { + biases: StrapiBiasType[]; + onUseBiases: (biasNumbers: number[]) => void; +} + +const CountryBiasMap: FC = ({ biases, onUseBiases }) => { + const { locale } = useRouter() as TRouter; + const { countries, ui } = countryBiasByLocale[locale]; + + const [selected, setSelected] = useState(null); + const [hoveredCountry, setHoveredCountry] = useState(null); + const [searchQuery, setSearchQuery] = useState(''); + const [filterRegion, setFilterRegion] = useState('All'); + const biasPanelRef = useRef(null); + + const handleSelect = (id: string) => { + setSelected(prev => (prev === id ? null : id)); + }; + + const handleUseBiases = (biasNumbers: number[]) => { + onUseBiases(biasNumbers); + }; + + return ( +
+
+

{ui.chooseYour}

+
+ +
+

{ui.tagline}

+

+ {ui.subTaglineLead} + {ui.subTagline} +

+
+ +
+
+
{countries.length}
+
{ui.statTemplates}
+
+
+
{ui.statReady}
+
+
+ + + + + +
+
+
+ + +
+ ); +}; + +export default CountryBiasMap; diff --git a/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.module.scss b/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.module.scss new file mode 100644 index 0000000..a7ea67f --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.module.scss @@ -0,0 +1,177 @@ +.Root { + max-width: 900px; + margin-left: auto; + margin-right: auto; + padding: 0 16px; +} + +.Controls { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px; + padding-bottom: 16px; +} + +.SearchInput { + min-width: 200px; + flex: 1; + border: 1px solid #e2e8f0; + border-radius: 12px; + background: #ffffff; + padding: 10px 16px; + font-size: 14px; + color: #1a1a2e; + outline: none; + transition: + border-color 0.2s, + box-shadow 0.2s; + + &::placeholder { + color: #94a3b8; + } + + &:focus { + border-color: #337ab7; + box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.2); + } +} + +.Pills { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.Pill { + cursor: pointer; + white-space: nowrap; + border-radius: 9999px; + border: 1px solid transparent; + padding: 6px 14px; + font-size: 12px; + font-weight: 500; + transition: all 0.2s; +} + +.Grid { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 8px; + + @media (min-width: 640px) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +.Card { + display: flex; + cursor: pointer; + align-items: center; + gap: 12px; + border-radius: 12px; + border: 1px solid #e2e8f0; + background: #ffffff; + padding: 12px 16px; + text-align: left; + transition: all 0.2s; + + &:hover { + transform: translateY(-2px); + border-color: #cbd5e1; + background: #f8fafc; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + } +} + +.CardSelected { + border-color: #337ab7; + background: rgba(51, 122, 183, 0.05); + box-shadow: + 0 0 0 1px #337ab7, + 0 4px 20px rgba(51, 122, 183, 0.1); + + &:hover { + transform: none; + border-color: #337ab7; + background: rgba(51, 122, 183, 0.05); + box-shadow: + 0 0 0 1px #337ab7, + 0 4px 20px rgba(51, 122, 183, 0.1); + } +} + +.CardName { + min-width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 14px; + font-weight: 500; + color: #1a1a2e; +} + +.CardConfidence { + margin-left: auto; + flex-shrink: 0; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 10px; + color: #337ab7; +} + +.MoreRow { + display: flex; + justify-content: center; + padding-top: 12px; + padding-bottom: 24px; +} + +.MoreButton { + cursor: pointer; + border-radius: 9999px; + border: 1px solid #e2e8f0; + background: #ffffff; + padding: 10px 24px; + font-size: 14px; + font-weight: 500; + color: #337ab7; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + transition: all 0.2s; + + &:hover { + transform: translateY(-2px); + border-color: #337ab7; + background: rgba(51, 122, 183, 0.05); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + } +} + +.LessButton { + cursor: pointer; + border-radius: 9999px; + border: 1px solid #e2e8f0; + background: #ffffff; + padding: 10px 24px; + font-size: 14px; + font-weight: 500; + color: #64748b; + transition: all 0.2s; + + &:hover { + border-color: #cbd5e1; + background: #f8fafc; + } +} + +.Spacer { + padding-bottom: 24px; +} diff --git a/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.tsx b/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.tsx new file mode 100644 index 0000000..c3c0568 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryList/CountryList.tsx @@ -0,0 +1,160 @@ +import cn from 'classnames'; +import { useRouter } from 'next/router'; +import { type ChangeEvent, type FC, useMemo, useState } from 'react'; + +import type { TRouter } from '@local-types/global'; + +import { countryBiasByLocale, REGION_COLORS } from '@data/countryBias'; + +import FlagImage from '../FlagImage'; + +import styles from './CountryList.module.scss'; + +const INITIAL_VISIBLE = 15; + +interface CountryListProps { + selected: string | null; + searchQuery: string; + filterRegion: string; + onSelect: (id: string) => void; + onSearchChange: (query: string) => void; + onRegionChange: (region: string) => void; +} + +const CountryList: FC = ({ + selected, + searchQuery, + filterRegion, + onSelect, + onSearchChange, + onRegionChange, +}) => { + const { locale } = useRouter() as TRouter; + const { countries, ui, regions: regionLabels } = countryBiasByLocale[locale]; + + const [expanded, setExpanded] = useState(false); + + const regionKeys = useMemo(() => { + const unique: string[] = []; + for (const c of countries) { + if (!unique.includes(c.region)) unique.push(c.region); + } + return ['All', ...unique]; + }, [countries]); + + const filteredCountries = useMemo(() => { + const q = searchQuery.toLowerCase().trim(); + return countries.filter(c => { + const matchSearch = + !q || + c.name.toLowerCase().includes(q) || + c.id.toLowerCase().includes(q) || + c.aliases.some(a => a.toLowerCase().includes(q)); + const matchRegion = filterRegion === 'All' || c.region === filterRegion; + return matchSearch && matchRegion; + }); + }, [countries, searchQuery, filterRegion]); + + const isFiltering = searchQuery.trim() !== '' || filterRegion !== 'All'; + const shouldCollapse = !expanded && !isFiltering; + const visibleCountries = shouldCollapse + ? filteredCountries.slice(0, INITIAL_VISIBLE) + : filteredCountries; + const hiddenCount = filteredCountries.length - visibleCountries.length; + + const handleSearchChange = (e: ChangeEvent) => { + onSearchChange(e.target.value); + setExpanded(false); + }; + + return ( +
+
+ +
+ {regionKeys.map(r => { + const isActive = filterRegion === r; + const color = REGION_COLORS[r] || '#337AB7'; + const label = regionLabels[r as keyof typeof regionLabels] ?? r; + return ( + + ); + })} +
+
+ +
+ {visibleCountries.map(c => { + const isSelected = selected === c.id; + return ( + + ); + })} +
+ + {hiddenCount > 0 && ( +
+ +
+ )} + {expanded && !isFiltering && ( +
+ +
+ )} + {hiddenCount <= 0 && !expanded &&
} +
+ ); +}; + +export default CountryList; diff --git a/src/components/_uxcp/CountryBiasMap/CountryList/index.ts b/src/components/_uxcp/CountryBiasMap/CountryList/index.ts new file mode 100644 index 0000000..2b4c13a --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryList/index.ts @@ -0,0 +1,3 @@ +import CountryList from './CountryList'; + +export default CountryList; diff --git a/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.module.scss b/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.module.scss new file mode 100644 index 0000000..c636a78 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.module.scss @@ -0,0 +1,120 @@ +.LoadingWrapper { + display: flex; + align-items: center; + justify-content: center; + max-width: 960px; + margin-left: auto; + margin-right: auto; + padding: 64px 16px; +} + +.LoadingInner { + display: flex; + align-items: center; + gap: 12px; + color: #94a3b8; +} + +.Spinner { + width: 20px; + height: 20px; + animation: countryMapSpin 1s linear infinite; +} + +.SpinnerTrack { + opacity: 0.25; +} + +.SpinnerHead { + opacity: 0.75; +} + +@keyframes countryMapSpin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.Root { + position: relative; + max-width: 960px; + margin-left: auto; + margin-right: auto; + padding: 8px 16px; +} + +.Svg { + display: block; + width: 100%; + height: auto; + user-select: none; +} + +.CountryPath { + cursor: pointer; + transition: + fill 0.2s, + stroke 0.2s, + stroke-width 0.2s; +} + +.LabelGroup { + pointer-events: none; +} + +.LabelDot { + transition: all 0.2s; +} + +.LabelText { + font-family: var(--font-geist-sans), system-ui, sans-serif; + transition: all 0.2s; + text-shadow: + 0 0 3px white, + 0 0 6px white, + 0 0 9px white; +} + +.Tooltip { + pointer-events: none; + position: fixed; + z-index: 100; + border: 1px solid #e2e8f0; + border-radius: 12px; + background: rgba(255, 255, 255, 0.95); + padding: 12px 16px; + box-shadow: + 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 8px 10px -6px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); +} + +.TooltipHead { + display: flex; + align-items: center; + gap: 8px; +} + +.TooltipName { + font-size: 14px; + font-weight: 700; + color: #1a1a2e; +} + +.TooltipMeta { + margin-top: 4px; + font-size: 12px; + color: #64748b; +} + +.TooltipHint { + margin-top: 6px; + font-family: var(--font-geist-mono), ui-monospace, monospace; + font-size: 10px; + letter-spacing: 0.025em; + color: #337ab7; +} diff --git a/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.tsx b/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.tsx new file mode 100644 index 0000000..e841bd5 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryMap/CountryMap.tsx @@ -0,0 +1,453 @@ +import { + geoGraticule10, + geoNaturalEarth1, + geoPath, + type GeoPermissibleObjects, +} from 'd3-geo'; +import type { Feature, FeatureCollection, Geometry } from 'geojson'; +import { useRouter } from 'next/router'; +import { + type FC, + type MouseEvent, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import { feature } from 'topojson-client'; +import type { GeometryCollection, Topology } from 'topojson-specification'; + +import type { TRouter } from '@local-types/global'; + +import { countryBiasByLocale, REGION_COLORS } from '@data/countryBias'; + +import FlagImage from '../FlagImage'; + +import styles from './CountryMap.module.scss'; + +const ISO_TO_ID: Record = { + '032': 'ar', + '051': 'am', + '036': 'au', + '040': 'at', + '056': 'be', + '076': 'br', + '124': 'ca', + '152': 'cl', + '156': 'cn', + '170': 'co', + '203': 'cz', + '208': 'dk', + '818': 'eg', + '231': 'et', + '246': 'fi', + '250': 'fr', + '276': 'de', + '300': 'gr', + '356': 'in', + '360': 'id', + '364': 'ir', + '372': 'ie', + '376': 'il', + '380': 'it', + '392': 'jp', + '404': 'ke', + '458': 'my', + '484': 'mx', + '504': 'ma', + '528': 'nl', + '554': 'nz', + '566': 'ng', + '578': 'no', + '586': 'pk', + '604': 'pe', + '608': 'ph', + '616': 'pl', + '620': 'pt', + '642': 'ro', + '682': 'sa', + '702': 'sg', + '710': 'za', + '410': 'kr', + '724': 'es', + '752': 'se', + '756': 'ch', + '764': 'th', + '792': 'tr', + '784': 'ae', + '804': 'ua', + '826': 'gb', + '840': 'us', + '704': 'vn', +}; + +const LABEL_OFFSETS: Record = { + us: [0, -6], + gb: [-10, -10], + fr: [0, 6], + de: [10, -6], + se: [10, 0], + il: [-14, 4], + tr: [0, -4], + sa: [0, 6], + kr: [10, -4], + jp: [12, 0], + ke: [0, 6], + ng: [0, -4], + be: [0, -10], + nl: [8, -10], + ch: [0, 8], + at: [8, 4], + ie: [-14, -6], + dk: [6, -8], + no: [6, -4], + fi: [8, 4], + it: [-8, 4], + es: [-6, 4], + pt: [-14, 2], + pl: [8, 2], + cz: [0, -8], + gr: [0, 6], + ro: [8, 2], + ua: [8, -4], + am: [10, 4], + ae: [8, 6], + eg: [0, -4], + ma: [-6, 4], + sg: [10, 6], + my: [0, -6], + th: [-8, 2], + vn: [8, 4], + ph: [12, 0], + pk: [0, -6], +}; + +interface CountryFeature extends Feature { + id: string; + properties: { name: string }; +} + +interface CountryMapProps { + selected: string | null; + hoveredCountry: string | null; + filterRegion: string; + onSelect: (id: string) => void; + onHover: (id: string | null) => void; +} + +const WIDTH = 960; +const HEIGHT = 500; + +const projection = geoNaturalEarth1() + .scale(155) + .translate([WIDTH / 2, HEIGHT / 2]) + .precision(0.1); + +const pathGen = geoPath(projection); + +const regionColor = (c: { region: string }) => + REGION_COLORS[c.region] ?? '#337AB7'; + +const CountryMap: FC = ({ + selected, + hoveredCountry, + filterRegion, + onSelect, + onHover, +}) => { + const { locale } = useRouter() as TRouter; + const { countries, ui, regions } = countryBiasByLocale[locale]; + + const [worldData, setWorldData] = useState(null); + const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>( + null, + ); + const svgRef = useRef(null); + + useEffect(() => { + fetch('/uxcore_/data/countries-110m.json') + .then(r => r.json()) + .then((topo: Topology) => { + const geo = feature( + topo, + topo.objects.countries as GeometryCollection, + ) as FeatureCollection; + setWorldData(geo); + }); + }, []); + + const { targetFeatures, bgFeatures } = useMemo(() => { + if (!worldData) return { targetFeatures: [], bgFeatures: [] }; + const targets: CountryFeature[] = []; + const bg: Feature[] = []; + for (const f of worldData.features) { + const fId = String((f as CountryFeature).id); + if (ISO_TO_ID[fId]) { + targets.push(f as CountryFeature); + } else { + bg.push(f); + } + } + return { targetFeatures: targets, bgFeatures: bg }; + }, [worldData]); + + const centroids = useMemo(() => { + const map: Record = {}; + for (const f of targetFeatures) { + const countryId = ISO_TO_ID[String(f.id)]; + if (countryId) { + const c = pathGen.centroid(f); + if (c && !isNaN(c[0])) { + const offset = LABEL_OFFSETS[countryId] ?? [0, 0]; + map[countryId] = [c[0] + offset[0], c[1] + offset[1]]; + } + } + } + return map; + }, [targetFeatures]); + + const graticule = useMemo(() => pathGen(geoGraticule10()) ?? '', []); + + const outlinePath = useMemo( + () => pathGen({ type: 'Sphere' } as GeoPermissibleObjects) ?? '', + [], + ); + + const handleMouseMove = useCallback( + (e: MouseEvent) => { + if (hoveredCountry) { + setMousePos({ x: e.clientX, y: e.clientY }); + } + }, + [hoveredCountry], + ); + + const hoveredData = useMemo(() => { + if (!hoveredCountry) return null; + return countries.find(c => c.id === hoveredCountry) ?? null; + }, [hoveredCountry, countries]); + + if (!worldData) { + return ( +
+
+ + + + + {ui.loadingMap} +
+
+ ); + } + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + {bgFeatures.map((f, i) => { + const d = pathGen(f) ?? ''; + return ( + + ); + })} + + {targetFeatures.map(f => { + const countryId = ISO_TO_ID[String(f.id)]; + if (!countryId) return null; + const country = countries.find(c => c.id === countryId); + if (!country) return null; + + const d = pathGen(f) ?? ''; + const baseColor = REGION_COLORS[country.region] ?? '#337AB7'; + const isActive = selected === countryId; + const isHovered = hoveredCountry === countryId; + const isDimmed = + filterRegion !== 'All' && country.region !== filterRegion; + + let fill: string; + let strokeColor: string; + let strokeW: number; + + if (isDimmed) { + fill = '#D5DAE0'; + strokeColor = '#B8BEC6'; + strokeW = 0.4; + } else if (isActive) { + fill = baseColor; + strokeColor = '#1A1A2E'; + strokeW = 1.8; + } else if (isHovered) { + fill = `${baseColor}CC`; + strokeColor = baseColor; + strokeW = 1.2; + } else { + fill = `${baseColor}55`; + strokeColor = `${baseColor}99`; + strokeW = 0.6; + } + + return ( + onSelect(countryId)} + onMouseEnter={() => onHover(countryId)} + onMouseLeave={() => onHover(null)} + /> + ); + })} + + {targetFeatures.map(f => { + const countryId = ISO_TO_ID[String(f.id)]; + if (!countryId) return null; + const country = countries.find(c => c.id === countryId); + if (!country) return null; + const pos = centroids[countryId]; + if (!pos) return null; + + const isActive = selected === countryId; + const isHovered = hoveredCountry === countryId; + const isDimmed = + filterRegion !== 'All' && country.region !== filterRegion; + const baseColor = REGION_COLORS[country.region] ?? '#337AB7'; + + return ( + + + {(isActive || isHovered) && ( + + {country.id.toUpperCase()} + + )} + + ); + })} + + + {hoveredData && mousePos && ( +
+
+ + {hoveredData.name} +
+
+ {regions[hoveredData.region]} · {hoveredData.biases.length}{' '} + {ui.tooltipBiases} · {Math.round(hoveredData.confidence * 100)}% +
+
{ui.tooltipHint}
+
+ )} +
+ ); +}; + +export default CountryMap; diff --git a/src/components/_uxcp/CountryBiasMap/CountryMap/index.ts b/src/components/_uxcp/CountryBiasMap/CountryMap/index.ts new file mode 100644 index 0000000..215bf21 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/CountryMap/index.ts @@ -0,0 +1,3 @@ +import CountryMap from './CountryMap'; + +export default CountryMap; diff --git a/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.module.scss b/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.module.scss new file mode 100644 index 0000000..b02d8ad --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.module.scss @@ -0,0 +1,6 @@ +.Flag { + display: inline-block; + flex-shrink: 0; + border-radius: 2px; + object-fit: cover; +} diff --git a/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.tsx b/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.tsx new file mode 100644 index 0000000..e6fa6b7 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/FlagImage/FlagImage.tsx @@ -0,0 +1,36 @@ +import cn from 'classnames'; +import type { FC } from 'react'; + +import styles from './FlagImage.module.scss'; + +interface FlagImageProps { + countryCode: string; + size?: number; + className?: string; +} + +const FlagImage: FC = ({ + countryCode, + size = 20, + className = '', +}) => { + const code = countryCode.toLowerCase(); + const w = Math.round(size * 1.5); + const cdnW = w >= 40 ? 80 : 40; + const cdnW2x = w >= 40 ? 160 : 80; + + return ( + + ); +}; + +export default FlagImage; diff --git a/src/components/_uxcp/CountryBiasMap/FlagImage/index.ts b/src/components/_uxcp/CountryBiasMap/FlagImage/index.ts new file mode 100644 index 0000000..7f8a03b --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/FlagImage/index.ts @@ -0,0 +1,3 @@ +import FlagImage from './FlagImage'; + +export default FlagImage; diff --git a/src/components/_uxcp/CountryBiasMap/index.ts b/src/components/_uxcp/CountryBiasMap/index.ts new file mode 100644 index 0000000..265a999 --- /dev/null +++ b/src/components/_uxcp/CountryBiasMap/index.ts @@ -0,0 +1,3 @@ +import CountryBiasMap from './CountryBiasMap'; + +export default CountryBiasMap; diff --git a/src/data/countryBias/en.ts b/src/data/countryBias/en.ts new file mode 100644 index 0000000..2e49de2 --- /dev/null +++ b/src/data/countryBias/en.ts @@ -0,0 +1,744 @@ +import type { CountryBiasLocale } from './types'; + +export const en: CountryBiasLocale = { + countries: [ + { + id: 'ar', + name: 'Argentina', + flag: '🇦🇷', + region: 'Americas', + rationale: + 'Collectivist, high uncertainty avoidance, emotionally expressive, short-term oriented', + biases: [50, 53, 93, 79, 37, 22, 55, 91, 75, 100, 13], + confidence: 0.74, + aliases: ['Argentine', 'Argentinian', 'Argentinean'], + biasRationale: + 'Argentina scores moderately collectivist (46 IDV) with high uncertainty avoidance (86) and very high indulgence (62). This creates a culture where group consensus and emotional storytelling drive decisions, while uncertainty avoidance pushes toward familiar options. The strong indulgence score manifests as susceptibility to instant gratification and positivity-seeking biases.', + }, + { + id: 'am', + name: 'Armenia', + flag: '🇦🇲', + region: 'Middle East', + rationale: + 'Collectivist, high power distance, tradition-preserving, diaspora-connected, family-driven', + biases: [48, 53, 50, 88, 81, 19, 47, 90, 70, 25, 52], + confidence: 0.67, + aliases: ['Armenian', 'Hayastan', 'Hayastani'], + biasRationale: + 'Armenia exhibits high power distance and strong collectivism rooted in ancient cultural traditions and a deeply family-oriented social structure. The diaspora experience reinforces in-group favoritism and endowment effects around cultural heritage. High uncertainty avoidance and long-term orientation from centuries of resilience drive conservatism and escalation of commitment in decision-making.', + }, + { + id: 'au', + name: 'Australia', + flag: '🇦🇺', + region: 'Oceania', + rationale: + 'Individualistic, anti-authority, risk-tolerant, pragmatic-casual', + biases: [91, 13, 44, 79, 80, 78, 55, 12, 74, 77, 71, 37], + confidence: 0.87, + aliases: ['Australian', 'Aussie', 'AUS', 'AU'], + biasRationale: + "Australia scores very high on individualism (90) and indulgence (71) with notably low power distance (38). The anti-authoritarian 'tall poppy syndrome' culture fuels reactance and fundamental attribution error, while high indulgence drives hyperbolic discounting and positivity effects. Strong individualism produces illusory superiority and overconfidence in personal judgment.", + }, + { + id: 'at', + name: 'Austria', + flag: '🇦🇹', + region: 'Europe', + rationale: + 'Moderate individualism, high uncertainty avoidance, masculine achievement-oriented, structured', + biases: [86, 93, 69, 44, 19, 102, 85, 87, 81, 20, 94], + confidence: 0.8, + aliases: ['Austrian', 'AUT'], + biasRationale: + 'Austria scores high on masculinity (79) and uncertainty avoidance (70) with moderate individualism (55). The achievement-oriented culture combined with a need for structure drives zero-risk bias and ambiguity avoidance. High masculinity produces overconfidence and fundamental attribution error, while the detail-oriented Austrian mindset creates reliance on systematic processing and information-seeking.', + }, + { + id: 'be', + name: 'Belgium', + flag: '🇧🇪', + region: 'Europe', + rationale: + 'High uncertainty avoidance, moderate individualism, consensus-seeking, linguistically divided', + biases: [93, 86, 19, 50, 70, 94, 92, 10, 58, 102, 85], + confidence: 0.79, + aliases: ['Belgian', 'BEL'], + biasRationale: + 'Belgium scores very high on uncertainty avoidance (94) with moderate individualism (75) and low indulgence (57). The strong uncertainty avoidance drives ambiguity aversion and zero-risk bias, while the consensus-seeking culture between linguistic communities produces bandwagon effects and social desirability. The restrained dimension contributes to omission bias and normality bias.', + }, + { + id: 'br', + name: 'Brazil', + flag: '🇧🇷', + region: 'Americas', + rationale: + 'High power distance, collectivist, indulgent, emotionally expressive', + biases: [79, 55, 50, 37, 13, 75, 100, 22, 41, 53, 48, 84], + confidence: 0.82, + aliases: ['Brazilian', 'Brasil', 'BR'], + biasRationale: + 'Brazil scores high on power distance (69) and very high on indulgence (59) with strong collectivism (38 IDV). The indulgent, emotionally expressive culture drives hyperbolic discounting and positivity effects, while collectivism produces bandwagon and in-group biases. High power distance fosters authority bias, and the vibrant storytelling tradition makes anecdotal evidence particularly persuasive.', + }, + { + id: 'ca', + name: 'Canada', + flag: '🇨🇦', + region: 'Americas', + rationale: + 'Individualistic, egalitarian, multicultural consensus-seeking, moderate uncertainty avoidance', + biases: [70, 50, 77, 55, 91, 80, 22, 93, 97, 10, 13, 44], + confidence: 0.87, + aliases: ['Canadian', 'CAN', 'CA'], + biasRationale: + 'Canada scores high on individualism (80) with low power distance (39) and moderate indulgence (68). The multicultural consensus culture produces social desirability bias and bandwagon effects alongside individualistic illusory superiority. Moderate uncertainty avoidance (48) paired with politeness norms creates a tendency toward omission bias, while indulgence drives appeal to novelty and positivity effects.', + }, + { + id: 'cl', + name: 'Chile', + flag: '🇨🇱', + region: 'Americas', + rationale: + 'Moderate collectivism, high uncertainty avoidance, class-conscious, restrained', + biases: [93, 86, 48, 90, 19, 83, 10, 30, 50, 57, 81], + confidence: 0.73, + aliases: ['Chilean', 'CHL'], + biasRationale: + 'Chile scores high on uncertainty avoidance (86) with moderate collectivism (23 IDV) and notably low indulgence (28). The high uncertainty avoidance creates strong ambiguity and zero-risk biases, while restraint produces omission bias and ostrich effects. Class-conscious social hierarchies drive authority bias and system justification, with loss aversion reinforced by economic volatility awareness.', + }, + { + id: 'cn', + name: 'China', + flag: '🇨🇳', + region: 'Asia', + rationale: + 'Collectivist, high power distance, long-term strategic, face-saving', + biases: [48, 81, 90, 22, 18, 57, 83, 50, 42, 104, 53, 70, 19], + confidence: 0.88, + aliases: ['Chinese', 'PRC', 'CN', 'Zhongguo'], + biasRationale: + 'China scores very high on long-term orientation (87) and power distance (80) with strong collectivism (20 IDV). The long-term strategic culture drives escalation of commitment, loss aversion, and mental accounting. High power distance produces authority bias and system justification, while face-saving collectivism creates social desirability bias, bandwagon effects, and strong in-group favoritism.', + }, + { + id: 'co', + name: 'Colombia', + flag: '🇨🇴', + region: 'Americas', + rationale: + 'Collectivist, high power distance, indulgent, family-oriented, entrepreneurial', + biases: [48, 53, 79, 55, 37, 50, 13, 75, 22, 41, 100], + confidence: 0.72, + aliases: ['Colombian', 'COL'], + biasRationale: + 'Colombia scores high on power distance (67) and very high on indulgence (83) with strong collectivism (13 IDV). The highly indulgent culture drives hyperbolic discounting and positivity effects, while collectivism and family orientation produce in-group favoritism and bandwagon effects. The entrepreneurial spirit combined with anecdotal storytelling traditions creates susceptibility to hot hand fallacy and vivid narrative persuasion.', + }, + { + id: 'cz', + name: 'Czech Republic', + flag: '🇨🇿', + region: 'Europe', + rationale: + 'Individualistic, pragmatic, high uncertainty avoidance, restrained, skeptical', + biases: [93, 19, 91, 30, 10, 17, 86, 83, 87, 71, 25], + confidence: 0.74, + aliases: ['Czech', 'Czechia', 'CZE'], + biasRationale: + 'The Czech Republic scores high on individualism (58) with notable uncertainty avoidance (74) and very low indulgence (29). The restrained, skeptical culture produces ostrich and omission biases alongside negativity bias. High uncertainty avoidance drives ambiguity aversion and conservatism, while the pragmatic individualism creates reactance toward external pressures and processing difficulty engagement.', + }, + { + id: 'dk', + name: 'Denmark', + flag: '🇩🇰', + region: 'Europe', + rationale: + 'Highly individualistic, egalitarian, feminine culture, low power distance, indulgent', + biases: [70, 58, 97, 10, 50, 55, 80, 13, 85, 93, 44], + confidence: 0.83, + aliases: ['Danish', 'Dane', 'DNK'], + biasRationale: + "Denmark scores very high on individualism (74) with extremely low power distance (18) and high indulgence (70). The 'Janteloven' egalitarian culture drives social desirability bias and normality bias, discouraging self-promotion. Low masculinity (16) produces consensus-seeking through bandwagon effects, while indulgence creates appeal to novelty and positivity biases. The feminine culture values less-is-better simplicity.", + }, + { + id: 'eg', + name: 'Egypt', + flag: '🇪🇬', + region: 'Middle East', + rationale: + 'High power distance, collectivist, restrained, tradition-anchored, high uncertainty avoidance', + biases: [48, 53, 90, 19, 47, 93, 52, 70, 88, 58, 25, 30], + confidence: 0.72, + aliases: ['Egyptian', 'EGY', 'Misr'], + biasRationale: + 'Egypt scores very high on power distance (70) with strong collectivism and high restraint. The tradition-anchored culture with strong authority structures drives authority bias, system justification, and conservatism. High uncertainty avoidance produces ambiguity aversion, while collectivism creates in-group favoritism and out-group homogeneity. Restraint manifests as ostrich effect and social desirability bias.', + }, + { + id: 'et', + name: 'Ethiopia', + flag: '🇪🇹', + region: 'Africa', + rationale: + 'Collectivist, communal, high power distance, oral tradition, spiritually grounded', + biases: [48, 53, 37, 47, 50, 31, 96, 76, 19, 70, 58], + confidence: 0.66, + aliases: ['Ethiopian', 'ETH'], + biasRationale: + 'Ethiopia exhibits high power distance and strong collectivism rooted in communal social structures and deep spiritual traditions. The rich oral storytelling tradition makes anecdotal evidence and conjunction fallacy particularly influential. Authority bias and just-world fallacy are reinforced by religious frameworks, while community-driven decision-making produces bandwagon effects and in-group favoritism.', + }, + { + id: 'fi', + name: 'Finland', + flag: '🇫🇮', + region: 'Europe', + rationale: + 'Individualistic, low power distance, high uncertainty avoidance, restrained, egalitarian', + biases: [93, 86, 10, 30, 70, 87, 102, 85, 17, 94, 58, 19], + confidence: 0.83, + aliases: ['Finnish', 'Finn', 'Suomi', 'FIN'], + biasRationale: + "Finland scores high on individualism (63) with very low power distance (33), high uncertainty avoidance (59), and notably low indulgence (57). The restrained 'sisu' culture drives omission bias and ostrich effects, while uncertainty avoidance creates ambiguity aversion and zero-risk bias. The methodical Finnish approach produces processing difficulty engagement and serial recall preferences, with social desirability reflecting the reserved communication style.", + }, + { + id: 'fr', + name: 'France', + flag: '🇫🇷', + region: 'Europe', + rationale: + 'Individualistic yet hierarchical, aesthetics-driven, intellectual-contrarian', + biases: [54, 20, 91, 89, 92, 97, 104, 71, 14, 83, 69, 87], + confidence: 0.88, + aliases: ['French', 'FRA', 'FR'], + biasRationale: + 'France scores high on individualism (71) with notable power distance (68) and high uncertainty avoidance (86). The aesthetics-driven culture amplifies halo effects and contrast effects, while intellectual contrarianism fuels reactance and backfire effects. High uncertainty avoidance combined with individualism creates a unique profile where overconfidence meets loss aversion, and the emphasis on intellectual rigor drives processing difficulty engagement.', + }, + { + id: 'de', + name: 'Germany', + flag: '🇩🇪', + region: 'Europe', + rationale: + 'Rule-oriented, engineering mindset, precision-driven, moderate individualism', + biases: [87, 94, 86, 19, 25, 49, 102, 85, 81, 93, 83, 17], + confidence: 0.89, + aliases: ['German', 'Deutsche', 'DEU', 'DE'], + biasRationale: + 'Germany scores high on individualism (67) with strong uncertainty avoidance (65) and high long-term orientation (83). The engineering-precision culture drives processing difficulty engagement, information bias, and serial recall preferences. Uncertainty avoidance produces zero-risk and ambiguity biases, while long-term orientation reinforces escalation of commitment and loss aversion. The rule-oriented mindset creates conservatism and confirmation bias.', + }, + { + id: 'gr', + name: 'Greece', + flag: '🇬🇷', + region: 'Europe', + rationale: + 'Collectivist-leaning, very high uncertainty avoidance, high power distance, indulgent', + biases: [93, 86, 48, 53, 79, 55, 91, 88, 19, 37, 100, 81], + confidence: 0.75, + aliases: ['Greek', 'Hellenic', 'GRC', 'Hellas'], + biasRationale: + 'Greece scores the highest uncertainty avoidance in Europe (100) with high power distance (60) and moderate collectivism (35 IDV). The extreme uncertainty avoidance drives ambiguity and zero-risk biases, while the indulgent Mediterranean culture (50 IVR) produces hyperbolic discounting and positivity effects. Strong family collectivism creates in-group favoritism, and the rhetorical tradition amplifies anecdotal evidence persuasion.', + }, + { + id: 'in', + name: 'India', + flag: '🇮🇳', + region: 'Asia', + rationale: + 'Hierarchical, collectivist, long-term oriented, bargaining culture', + biases: [48, 53, 25, 81, 47, 96, 57, 18, 36, 42, 50, 88, 90], + confidence: 0.85, + aliases: ['Indian', 'IND', 'IN', 'Bharat'], + biasRationale: + 'India scores very high on power distance (77) with strong long-term orientation (51) and moderate collectivism (48 IDV). The hierarchical culture drives authority bias and system justification, while the bargaining tradition amplifies anchoring effects and mental accounting. Long-term orientation produces escalation of commitment, and the storytelling tradition makes conjunction fallacy and anecdotal narratives highly persuasive.', + }, + { + id: 'id', + name: 'Indonesia', + flag: '🇮🇩', + region: 'Asia', + rationale: + 'Collectivist, high power distance, harmony-seeking, spiritually grounded', + biases: [48, 50, 70, 58, 10, 30, 47, 90, 53, 31, 19, 42], + confidence: 0.78, + aliases: ['Indonesian', 'IDN'], + biasRationale: + "Indonesia scores very high on power distance (78) with strong collectivism (14 IDV) and low indulgence (38). The harmony-seeking 'musyawarah' culture drives social desirability, omission bias, and normality bias. High power distance produces authority bias and system justification, while spiritual grounding reinforces just-world fallacy and subjective validation. Restraint manifests as ostrich effect avoidance of confrontation.", + }, + { + id: 'ir', + name: 'Iran', + flag: '🇮🇷', + region: 'Middle East', + rationale: + 'High power distance, collectivist, high uncertainty avoidance, restrained, tradition-preserving', + biases: [48, 90, 19, 93, 53, 52, 88, 47, 30, 10, 70, 89], + confidence: 0.68, + aliases: ['Iranian', 'Persian', 'IRN', 'Persia'], + biasRationale: + 'Iran scores very high on power distance and uncertainty avoidance with strong collectivism and restraint. The tradition-preserving culture drives conservatism, system justification, and authority bias. High uncertainty avoidance produces ambiguity aversion, while collectivism reinforces in-group favoritism and out-group homogeneity. Restraint and cultural resilience create ostrich and omission biases, with backfire effects reflecting resistance to external narratives.', + }, + { + id: 'ie', + name: 'Ireland', + flag: '🇮🇪', + region: 'Europe', + rationale: + 'Individualistic, low power distance, masculine, short-term oriented, highly indulgent', + biases: [13, 37, 79, 55, 80, 91, 44, 77, 12, 100, 75], + confidence: 0.76, + aliases: ['Irish', 'IRL', 'Eire'], + biasRationale: + 'Ireland scores high on individualism (70) with low power distance (28) and very high indulgence (65). The storytelling culture makes anecdotal evidence and humor effects particularly powerful. High indulgence drives hyperbolic discounting and positivity effects, while individualism produces illusory superiority and reactance. The short-term orientation (24 LTO) creates appeal to novelty, and the convivial culture amplifies the bizarreness and Barnum effects.', + }, + { + id: 'il', + name: 'Israel', + flag: '🇮🇱', + region: 'Middle East', + rationale: + 'Direct communication, startup culture, security-conscious, low power distance', + biases: [69, 91, 89, 74, 80, 83, 1, 36, 79, 84, 78, 77], + confidence: 0.84, + aliases: ['Israeli', 'ISR', 'IL'], + biasRationale: + "Israel scores low on power distance (13) with high individualism (54) and moderate uncertainty avoidance (81). The 'chutzpah' startup culture drives overconfidence, Dunning-Kruger, and illusory superiority, while direct communication style produces reactance and backfire effects. Security consciousness amplifies availability heuristics and neglect of probability, and the innovation-driven economy creates appeal to novelty and IKEA effect.", + }, + { + id: 'it', + name: 'Italy', + flag: '🇮🇹', + region: 'Europe', + rationale: + 'Individualistic, high uncertainty avoidance, masculine, aesthetics-driven, family-oriented', + biases: [54, 93, 86, 20, 53, 69, 14, 92, 104, 83, 88, 79], + confidence: 0.84, + aliases: ['Italian', 'ITA', 'IT'], + biasRationale: + 'Italy scores high on individualism (76), masculinity (70), and uncertainty avoidance (75). The aesthetics-obsessed culture amplifies halo effects and picture superiority, while high uncertainty avoidance creates ambiguity and zero-risk biases. Masculinity drives overconfidence and competitive framing via contrast and decoy effects. Family-oriented collectivism at the local level produces in-group favoritism, with loss aversion and endowment effects reinforced by heritage preservation values.', + }, + { + id: 'jp', + name: 'Japan', + flag: '🇯🇵', + region: 'Asia', + rationale: + 'Collectivist, extremely high uncertainty avoidance, hierarchical, detail-perfectionist', + biases: [50, 90, 19, 48, 70, 93, 86, 101, 54, 102, 81, 83, 10], + confidence: 0.9, + aliases: ['Japanese', 'JPN', 'JP', 'Nippon'], + biasRationale: + 'Japan scores extremely high on uncertainty avoidance (92) and long-term orientation (88) with strong masculinity (95) and collectivism (46 IDV). The perfectionist culture drives zero-risk bias, ambiguity aversion, and meticulous serial recall processing. High collectivism produces bandwagon effects and social desirability, while long-term orientation reinforces escalation of commitment and loss aversion. The hierarchical structure creates authority bias and system justification.', + }, + { + id: 'ke', + name: 'Kenya', + flag: '🇰🇪', + region: 'Africa', + rationale: + 'Community-driven, mobile-first economy, resourceful, oral storytelling tradition', + biases: [37, 53, 79, 41, 76, 40, 84, 96, 69, 55, 48, 50], + confidence: 0.73, + aliases: ['Kenyan', 'KEN'], + biasRationale: + 'Kenya exhibits moderate collectivism with entrepreneurial dynamism and a mobile-first digital economy. The oral storytelling tradition makes anecdotal evidence and conjunction fallacy highly persuasive. Community-driven decision-making produces in-group favoritism and bandwagon effects, while the resourceful entrepreneurial culture drives illusion of control, overconfidence, and IKEA effect from self-built solutions.', + }, + { + id: 'my', + name: 'Malaysia', + flag: '🇲🇾', + region: 'Asia', + rationale: + 'Very high power distance, collectivist, moderate uncertainty avoidance, harmony-seeking', + biases: [48, 50, 53, 90, 70, 58, 10, 47, 22, 88, 19], + confidence: 0.75, + aliases: ['Malaysian', 'MYS'], + biasRationale: + "Malaysia scores the highest power distance globally (100) with strong collectivism (26 IDV) and moderate uncertainty avoidance (36). The extreme power distance drives authority bias and system justification, while harmony-seeking collectivism produces bandwagon effects, in-group favoritism, and social desirability. The 'face-saving' culture reinforces omission bias and normality bias, with framing effects amplified by the multiethnic consensus-building tradition.", + }, + { + id: 'mx', + name: 'Mexico', + flag: '🇲🇽', + region: 'Americas', + rationale: + 'Collectivist, family-centered, high power distance, expressive-indulgent', + biases: [53, 48, 79, 37, 100, 7, 55, 75, 22, 84, 50, 41], + confidence: 0.82, + aliases: ['Mexican', 'MEX', 'MX'], + biasRationale: + 'Mexico scores high on power distance (81) with strong collectivism (30 IDV) and very high indulgence (97). The family-centered culture drives in-group favoritism and authority bias, while extreme indulgence creates hyperbolic discounting and positivity effects. The emotionally expressive culture amplifies mood-congruent memory and fading affect bias, with anecdotal storytelling and Barnum-effect susceptibility reflecting the warm interpersonal tradition.', + }, + { + id: 'ma', + name: 'Morocco', + flag: '🇲🇦', + region: 'Africa', + rationale: + 'High power distance, collectivist, high uncertainty avoidance, restrained, tradition-oriented', + biases: [48, 53, 93, 19, 90, 47, 70, 52, 88, 10, 30, 18], + confidence: 0.67, + aliases: ['Moroccan', 'MAR', 'Maghreb'], + biasRationale: + 'Morocco scores high on power distance (70) with strong collectivism (25 IDV) and high uncertainty avoidance (68). The tradition-oriented culture drives conservatism, authority bias, and system justification. High uncertainty avoidance produces ambiguity aversion, while collectivism reinforces in-group favoritism and out-group homogeneity. The bazaar-influenced negotiation culture amplifies anchoring effects, with restraint manifesting as omission and ostrich effects.', + }, + { + id: 'nl', + name: 'Netherlands', + flag: '🇳🇱', + region: 'Europe', + rationale: + 'Highly individualistic, egalitarian, direct communicators, low power distance, indulgent', + biases: [77, 91, 44, 80, 79, 55, 94, 87, 71, 97, 74, 13], + confidence: 0.87, + aliases: ['Dutch', 'Holland', 'NLD', 'NL', 'Netherlander'], + biasRationale: + "The Netherlands scores very high on individualism (80) with very low power distance (38) and high indulgence (68). The direct, egalitarian 'poldermodel' culture drives illusory superiority, reactance, and fundamental attribution error. High indulgence produces hyperbolic discounting and positivity effects, while the analytical trading tradition creates information bias and processing difficulty engagement. Dutch directness amplifies third-person effect and Dunning-Kruger tendencies.", + }, + { + id: 'nz', + name: 'New Zealand', + flag: '🇳🇿', + region: 'Oceania', + rationale: + 'Individualistic, egalitarian, anti-pretension, pragmatic, highly indulgent', + biases: [91, 44, 77, 13, 55, 80, 79, 70, 12, 97, 58, 74], + confidence: 0.82, + aliases: ['New Zealander', 'Kiwi', 'NZL', 'NZ', 'Aotearoa'], + biasRationale: + "New Zealand scores high on individualism (79) with low power distance (22) and high indulgence (75). The 'tall poppy' anti-pretension culture creates reactance and social desirability bias, while egalitarianism drives fundamental attribution error. High indulgence produces hyperbolic discounting and positivity effects. The pragmatic Kiwi culture values humor effects and less-is-better simplicity, with normality bias reflecting the laid-back lifestyle orientation.", + }, + { + id: 'ng', + name: 'Nigeria', + flag: '🇳🇬', + region: 'Africa', + rationale: + 'Collectivist, high power distance, entrepreneurial, faith-oriented', + biases: [48, 47, 31, 37, 40, 75, 69, 79, 78, 53, 41, 76], + confidence: 0.73, + aliases: ['Nigerian', 'NGA', 'Naija'], + biasRationale: + 'Nigeria scores high on power distance (80) with strong collectivism (30 IDV) and moderate indulgence (84). The faith-oriented culture amplifies just-world fallacy and subjective validation, while the entrepreneurial hustle culture drives overconfidence, risk compensation, and illusion of control. High indulgence creates hyperbolic discounting, and the oral tradition makes anecdotal evidence and Barnum effects highly persuasive.', + }, + { + id: 'no', + name: 'Norway', + flag: '🇳🇴', + region: 'Europe', + rationale: + 'Highly individualistic, very low power distance, feminine, indulgent, egalitarian', + biases: [70, 58, 10, 97, 55, 80, 50, 93, 44, 13, 85], + confidence: 0.84, + aliases: ['Norwegian', 'NOR', 'NO'], + biasRationale: + "Norway scores high on individualism (69) with extremely low power distance (31) and very low masculinity (8). The deeply egalitarian 'Janteloven' culture drives social desirability bias and normality bias, suppressing self-promotion. Low masculinity produces consensus-seeking bandwagon effects and less-is-better preferences. High indulgence (55) creates positivity effects and appeal to novelty, while the structured society produces omission bias in decision-making.", + }, + { + id: 'pk', + name: 'Pakistan', + flag: '🇵🇰', + region: 'Asia', + rationale: + 'Very high power distance, collectivist, restrained, tradition-oriented, masculine', + biases: [48, 53, 47, 90, 50, 19, 52, 70, 30, 10, 88, 43], + confidence: 0.72, + aliases: ['Pakistani', 'PAK', 'PK'], + biasRationale: + 'Pakistan scores very high on power distance (55) and collectivism (14 IDV) with high masculinity (50) and very low indulgence (0). The tradition-oriented culture with strong authority structures drives authority bias, system justification, and conservatism. Extreme restraint produces ostrich and omission biases, while collectivism creates in-group favoritism, bandwagon effects, and out-group homogeneity. The just-world fallacy is reinforced by religious and social frameworks.', + }, + { + id: 'pe', + name: 'Peru', + flag: '🇵🇪', + region: 'Americas', + rationale: + 'High power distance, collectivist, moderate uncertainty avoidance, restrained', + biases: [48, 53, 50, 19, 90, 10, 30, 47, 79, 37, 88], + confidence: 0.68, + aliases: ['Peruvian', 'PER'], + biasRationale: + 'Peru scores high on power distance (64) with strong collectivism (16 IDV) and moderate uncertainty avoidance (87). The hierarchical culture drives authority bias and system justification, while collectivism produces in-group favoritism and bandwagon effects. High uncertainty avoidance creates conservatism, and the restrained dimension (46 IVR) manifests as omission and ostrich effects. Anecdotal storytelling traditions remain influential in decision-making.', + }, + { + id: 'ph', + name: 'Philippines', + flag: '🇵🇭', + region: 'Asia', + rationale: + 'High power distance, collectivist, very high indulgence, family-centered', + biases: [48, 53, 79, 55, 50, 13, 37, 75, 100, 47, 70, 41], + confidence: 0.74, + aliases: ['Filipino', 'Filipina', 'Philippine', 'PHL', 'Pinoy'], + biasRationale: + "The Philippines scores high on power distance (94) with strong collectivism (32 IDV) and very high indulgence (42). The 'bayanihan' communal culture drives in-group favoritism and bandwagon effects, while authority deference produces authority bias. High indulgence creates hyperbolic discounting and positivity effects. The warm, humor-driven culture amplifies humor effects and Barnum susceptibility, with fading affect bias reflecting the resilient 'bahala na' attitude.", + }, + { + id: 'pl', + name: 'Poland', + flag: '🇵🇱', + region: 'Europe', + rationale: + 'Individualistic, high uncertainty avoidance, masculine, restrained, pragmatic', + biases: [93, 86, 19, 69, 44, 83, 81, 10, 30, 17, 25, 87], + confidence: 0.8, + aliases: ['Polish', 'Pole', 'POL', 'PL'], + biasRationale: + 'Poland scores high on individualism (60) with very high uncertainty avoidance (93) and low indulgence (29). The strong uncertainty avoidance drives ambiguity and zero-risk biases, while restraint produces omission bias and ostrich effects. High masculinity (64) creates overconfidence and fundamental attribution error. Long-term orientation (38) combined with historical caution produces loss aversion, escalation of commitment, and negativity bias.', + }, + { + id: 'pt', + name: 'Portugal', + flag: '🇵🇹', + region: 'Europe', + rationale: + 'Collectivist-leaning, very high uncertainty avoidance, feminine, restrained', + biases: [93, 86, 70, 10, 58, 50, 19, 83, 30, 100, 55, 85], + confidence: 0.76, + aliases: ['Portuguese', 'PRT', 'PT'], + biasRationale: + "Portugal scores the highest uncertainty avoidance in Europe (99) with moderate collectivism (27 IDV) and low masculinity (31). Extreme uncertainty avoidance drives ambiguity and zero-risk biases, while the 'saudade' cultural melancholy creates fading affect bias and social desirability. Low masculinity produces normality bias and consensus-seeking bandwagon effects. Restraint (33 IVR) manifests as omission and ostrich biases, with loss aversion reinforced by cautious financial culture.", + }, + { + id: 'ro', + name: 'Romania', + flag: '🇷🇴', + region: 'Europe', + rationale: + 'High power distance, collectivist-leaning, high uncertainty avoidance, restrained', + biases: [48, 93, 90, 19, 10, 30, 83, 52, 53, 70, 17], + confidence: 0.72, + aliases: ['Romanian', 'ROU', 'RO'], + biasRationale: + 'Romania scores high on power distance (90) with high uncertainty avoidance (90) and low indulgence (20). The combination of strong hierarchy and uncertainty avoidance drives authority bias, system justification, and ambiguity aversion. Extreme restraint produces omission and ostrich biases, while collectivist tendencies create in-group favoritism and out-group homogeneity. Historical skepticism reinforces conservatism, negativity bias, and loss aversion.', + }, + { + id: 'sa', + name: 'Saudi Arabia', + flag: '🇸🇦', + region: 'Middle East', + rationale: + 'High power distance, collectivist, tradition-preserving, restrained', + biases: [48, 90, 19, 52, 43, 88, 47, 89, 53, 58, 70, 86], + confidence: 0.82, + aliases: ['Saudi', 'KSA', 'SAU'], + biasRationale: + 'Saudi Arabia scores very high on power distance (95) with strong collectivism and high uncertainty avoidance (80). The tradition-preserving culture drives conservatism, system justification, and authority bias. Collectivism produces in-group favoritism, out-group homogeneity, and group attribution errors. The restrained culture creates endowment effects around tradition and normality bias, with backfire effects reflecting resistance to rapid cultural change narratives.', + }, + { + id: 'sg', + name: 'Singapore', + flag: '🇸🇬', + region: 'Asia', + rationale: + 'Low individualism, very high power distance, pragmatic, restrained, meritocratic', + biases: [48, 90, 49, 102, 85, 81, 83, 57, 86, 70, 50, 19, 93], + confidence: 0.85, + aliases: ['Singaporean', 'SGP', 'SG'], + biasRationale: + 'Singapore scores very high on power distance (74) with low individualism (20) and very high long-term orientation (72). The pragmatic meritocratic culture drives authority bias, system justification, and automation bias from tech-forward governance. Long-term orientation produces escalation of commitment, loss aversion, and mental accounting. Low indulgence (46) creates zero-risk bias and social desirability, while the systematic society reinforces serial recall and unit bias.', + }, + { + id: 'za', + name: 'South Africa', + flag: '🇿🇦', + region: 'Africa', + rationale: + 'High power distance, collectivist, masculine, short-term oriented, restrained', + biases: [48, 53, 52, 69, 44, 47, 79, 78, 37, 43, 91, 83], + confidence: 0.74, + aliases: ['South African', 'ZAF', 'SA', 'Mzansi'], + biasRationale: + 'South Africa scores high on power distance (49) with moderate individualism (65) and high masculinity (63). The complex multicultural society produces in-group favoritism, out-group homogeneity, and group attribution errors. Masculinity drives overconfidence and fundamental attribution error, while short-term orientation (34) creates hyperbolic discounting. The entrepreneurial resilience culture amplifies risk compensation, and anecdotal storytelling traditions remain powerful. Reactance reflects post-colonial resistance patterns.', + }, + { + id: 'kr', + name: 'South Korea', + flag: '🇰🇷', + region: 'Asia', + rationale: + 'Collectivist, appearance-conscious, tech-forward, Confucian hierarchy', + biases: [50, 54, 64, 80, 20, 70, 15, 77, 90, 84, 81, 83, 48], + confidence: 0.88, + aliases: ['Korean', 'South Korean', 'KOR', 'KR'], + biasRationale: + "South Korea scores high on long-term orientation (100) and uncertainty avoidance (85) with strong collectivism (18 IDV). The appearance-conscious 'nunchi' culture amplifies spotlight effect, halo effect, and social desirability bias. Confucian hierarchy produces authority bias and system justification, while long-term orientation drives escalation of commitment and loss aversion. The tech-forward K-culture creates strong appeal to novelty and IKEA effects from participatory fan culture.", + }, + { + id: 'es', + name: 'Spain', + flag: '🇪🇸', + region: 'Europe', + rationale: + 'Collectivist-leaning, very high uncertainty avoidance, feminine-leaning, indulgent', + biases: [93, 86, 53, 55, 79, 50, 37, 22, 13, 100, 91, 20], + confidence: 0.83, + aliases: ['Spanish', 'Spaniard', 'ESP', 'ES'], + biasRationale: + 'Spain scores very high on uncertainty avoidance (86) with moderate collectivism (51 IDV) and high indulgence (44). The uncertainty avoidance drives ambiguity and zero-risk biases, while indulgence creates hyperbolic discounting and positivity effects. The social, family-oriented culture produces in-group favoritism and bandwagon effects. The expressive communication style amplifies framing effects and anecdotal persuasion, with humor effects and reactance reflecting the passionate Mediterranean temperament.', + }, + { + id: 'se', + name: 'Sweden', + flag: '🇸🇪', + region: 'Europe', + rationale: + "Egalitarian, consensus-seeking, low indulgence, 'Lagom' moderation culture", + biases: [93, 70, 10, 58, 76, 97, 30, 85, 50, 17, 44, 80], + confidence: 0.88, + aliases: ['Swedish', 'Swede', 'SWE', 'SE'], + biasRationale: + "Sweden scores very high on individualism (71) with extremely low power distance (31) and very low masculinity (5). The 'Lagom' moderation culture drives social desirability bias, normality bias, and omission bias through consensus-seeking. Low masculinity creates less-is-better preferences and bandwagon conformity to group norms. The progressive culture produces appeal to novelty while maintaining ambiguity aversion, with fundamental attribution error reflecting the individualistic meritocratic belief system.", + }, + { + id: 'ch', + name: 'Switzerland', + flag: '🇨🇭', + region: 'Europe', + rationale: + 'Individualistic, high uncertainty avoidance, moderate power distance, restrained, precision-driven', + biases: [86, 93, 94, 87, 102, 19, 81, 83, 85, 97, 10, 49], + confidence: 0.84, + aliases: ['Swiss', 'CHE', 'CH'], + biasRationale: + 'Switzerland scores high on individualism (68) with notable uncertainty avoidance (58) and moderate restraint (66 IVR). The precision-driven culture amplifies zero-risk bias, ambiguity aversion, and information bias. The banking and watchmaking traditions reinforce processing difficulty engagement and serial recall. Long-term orientation (74) drives escalation of commitment and loss aversion, while the consensus-based direct democracy creates omission bias and less-is-better preferences.', + }, + { + id: 'th', + name: 'Thailand', + flag: '🇹🇭', + region: 'Asia', + rationale: + 'High power distance, collectivist, low uncertainty avoidance, restrained, harmony-seeking', + biases: [48, 50, 53, 70, 55, 58, 10, 22, 90, 47, 100, 13], + confidence: 0.75, + aliases: ['Thai', 'THA', 'TH', 'Siam'], + biasRationale: + "Thailand scores high on power distance (64) with strong collectivism (20 IDV) and low uncertainty avoidance (64). The 'kreng jai' harmony-seeking culture drives social desirability, omission bias, and normality bias through conflict avoidance. High power distance produces authority bias and system justification, while collectivism creates bandwagon effects and in-group favoritism. The Buddhist-influenced 'mai pen rai' attitude produces fading affect bias and positivity effects.", + }, + { + id: 'tr', + name: 'Turkey', + flag: '🇹🇷', + region: 'Middle East', + rationale: + 'Collectivist, high power distance, negotiation culture, honor-based social codes', + biases: [48, 18, 53, 81, 22, 43, 52, 88, 47, 25, 93, 90], + confidence: 0.82, + aliases: ['Turkish', 'Turk', 'TUR', 'TR', 'Turkiye'], + biasRationale: + 'Turkey scores high on power distance (66) with strong collectivism (37 IDV) and high uncertainty avoidance (85). The negotiation-rich culture amplifies anchoring effects and framing, while honor-based social codes drive in-group favoritism and group attribution errors. High uncertainty avoidance produces ambiguity aversion and system justification. Escalation of commitment reflects the cultural emphasis on persistence and follow-through in social obligations.', + }, + { + id: 'ae', + name: 'United Arab Emirates', + flag: '🇦🇪', + region: 'Middle East', + rationale: + 'Very high power distance, collectivist, future-oriented, status-conscious, cosmopolitan', + biases: [48, 54, 80, 90, 53, 88, 20, 57, 79, 15, 86, 50], + confidence: 0.74, + aliases: ['Emirati', 'UAE', 'ARE', 'Dubai', 'Abu Dhabi'], + biasRationale: + 'The UAE scores very high on power distance (90) with strong collectivism (25 IDV) and notable restraint. The status-conscious cosmopolitan culture amplifies halo effects, Von Restorff distinctiveness, and contrast effects. High power distance drives authority bias and system justification, while the future-oriented development mindset creates appeal to novelty. Mental accounting is pronounced in the luxury-commerce culture, with zero-risk bias reflecting the emphasis on premium quality and security.', + }, + { + id: 'ua', + name: 'Ukraine', + flag: '🇺🇦', + region: 'Europe', + rationale: + 'Moderate collectivism, high uncertainty avoidance, restrained, resilient, low power distance', + biases: [1, 83, 91, 19, 93, 17, 81, 84, 78, 10, 53], + confidence: 0.68, + aliases: ['Ukrainian', 'UKR', 'UA'], + biasRationale: + 'Ukraine scores moderate on individualism (25) with high uncertainty avoidance (95) and very low indulgence (18). The resilient culture shaped by historical upheaval amplifies availability heuristics and negativity bias. High uncertainty avoidance creates ambiguity aversion and conservatism, while extreme restraint produces omission bias. The strong community bonds drive in-group favoritism, and the resourceful DIY culture creates IKEA effects. Reactance and risk compensation reflect adaptive responses to adversity.', + }, + { + id: 'gb', + name: 'United Kingdom', + flag: '🇬🇧', + region: 'Europe', + rationale: + 'Individualistic, understated, tradition-respecting, dry humor culture', + biases: [20, 97, 13, 30, 71, 19, 88, 105, 12, 17, 91, 83], + confidence: 0.89, + aliases: [ + 'British', + 'English', + 'Scottish', + 'Welsh', + 'UK', + 'GBR', + 'GB', + 'Britain', + ], + biasRationale: + 'The UK scores very high on individualism (89) with low power distance (35) and moderate indulgence (69). The understated culture drives less-is-better and contrast effects through subtle communication. Dry humor amplifies humor and bizarreness effects, while tradition-respecting conservatism creates endowment and ostrich effects. High individualism produces third-person effect and reactance, with negativity bias reflecting the culturally embedded skepticism and understatement.', + }, + { + id: 'us', + name: 'United States', + flag: '🇺🇸', + region: 'Americas', + rationale: + 'Individualistic, low uncertainty avoidance, marketing-saturated, instant-gratification culture', + biases: [77, 79, 69, 50, 80, 22, 83, 37, 71, 91, 44, 74, 78], + confidence: 0.9, + aliases: ['American', 'USA', 'US', 'United States of America'], + biasRationale: + 'The United States scores exceptionally high on individualism (91) and low on uncertainty avoidance (46), creating a culture that rewards self-promotion and risk-taking. Combined with high indulgence (68), Americans are particularly susceptible to instant-gratification biases and overconfidence in personal judgment. The marketing-saturated environment amplifies framing effects, bandwagon pressure, and appeal to novelty.', + }, + { + id: 'vn', + name: 'Vietnam', + flag: '🇻🇳', + region: 'Asia', + rationale: + 'Collectivist, high power distance, long-term oriented, restrained, harmony-seeking', + biases: [48, 50, 53, 81, 83, 70, 90, 10, 57, 19, 58, 42], + confidence: 0.73, + aliases: ['Vietnamese', 'VNM', 'VN'], + biasRationale: + 'Vietnam scores high on power distance (70) with strong collectivism (20 IDV) and very high long-term orientation (57). The Confucian-influenced culture drives authority bias, system justification, and social desirability through harmony-seeking. Long-term orientation produces escalation of commitment, loss aversion, and mental accounting. Collectivism creates bandwagon effects and in-group favoritism, while restraint (35 IVR) manifests as omission bias and normality bias.', + }, + ], + + regions: { + All: 'All', + Americas: 'Americas', + Europe: 'Europe', + Asia: 'Asia', + 'Middle East': 'Middle East', + Africa: 'Africa', + Oceania: 'Oceania', + }, + + ui: { + chooseYour: 'Choose your', + cyclingWords: ['Persona', 'Opponent', 'Target Audience', 'Rival'], + cyclingBoldWord: 'Persona', + tagline: 'The only place where you see the future of your business.', + subTaglineLead: 'You asked — We built. ', + subTagline: + 'Select a country to auto-fill a cognitive bias profile. Each template highlights 10–15 biases with higher cultural prevalence — ready to use in the Persona builder.', + statTemplates: 'Nationality Templates', + statReady: 'Ready when you are', + loadingMap: 'Loading map…', + tooltipBiases: 'biases', + tooltipHint: 'Click to view bias profile', + searchPlaceholder: 'Search country or nationality...', + moreCountries: (n: number) => `+${n} more countries`, + showLess: 'Show less', + matchSuffix: '% match', + whyTheseBiases: 'Why these biases?', + whyApproxNote: + 'This is an approximate score reflecting how closely the bias template aligns with documented behavioral patterns for this country.', + hofstedeNote: + 'Based on Hofstede cultural dimensions and behavioral research coverage.', + useInPersonaBuilder: 'Use in Persona Builder →', + emptyStateLead: 'Select the country and ', + emptyStateLink: 'see the future of your business', + emptyStateHint: 'Click to load bias template', + footerBiases: 'biases', + footerConfidence: 'confidence', + }, +}; diff --git a/src/data/countryBias/hy.ts b/src/data/countryBias/hy.ts new file mode 100644 index 0000000..7d41728 --- /dev/null +++ b/src/data/countryBias/hy.ts @@ -0,0 +1,682 @@ +import type { CountryBiasLocale } from './types'; + +export const hy: CountryBiasLocale = { + countries: [ + { + id: 'ar', + name: 'Արգենտինա', + flag: '🇦🇷', + region: 'Americas', + rationale: + 'Կոլեկտիվիստական, անորոշության խուսափման բարձր մակարդակ, հուզականորեն արտահայտիչ, կարճաժամկետ կողմնորոշված', + biases: [50, 53, 93, 79, 37, 22, 55, 91, 75, 100, 13], + confidence: 0.74, + aliases: ['Արգենտինացի', 'Argentine', 'Argentinian', 'Argentinean'], + biasRationale: `Արգենտինան ունի չափավոր կոլեկտիվիստական մշակույթ (IDV 46) անորոշության խուսափման բարձր մակարդակով (86) և շատ բարձր հաճույքակենտրոնությամբ (62)։ Սա ստեղծում է մշակույթ, որտեղ խմբային համաձայնությունը և հուզական պատմությունը կառավարում են որոշումները, իսկ անորոշության խուսափումը հակում է դեպի ծանոթ տարբերակները։ Հաճույքակենտրոնության բարձր մակարդակը դրսևորվում է ակնթարթային վարձատրության նկատմամբ զգայունության և դրականության կողմ կողմնակալությունների տեսքով։`, + }, + { + id: 'am', + name: 'Հայաստան', + flag: '🇦🇲', + region: 'Middle East', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, ավանդապահպան, սփյուռքի հետ կապված, ընտանեկենտրոն', + biases: [48, 53, 50, 88, 81, 19, 47, 90, 70, 25, 52], + confidence: 0.67, + aliases: ['Հայ', 'հայկական', 'Armenian', 'Hayastan'], + biasRationale: `Հայաստանը ցուցադրում է իշխանական մեծ հեռավորություն և ուժեղ կոլեկտիվիզմ՝ արմատավորված հնագույն մշակութային ավանդույթներում և խորապես ընտանեկենտրոն սոցիալական կառուցվածքում։ Սփյուռքի փորձառությունը ուժեղացնում է ներխմբային ֆավորիտիզմը և մշակութային ժառանգության շուրջ տիրապետման էֆեկտները։ Անորոշության խուսափման բարձր մակարդակը և երկարաժամկետ կողմնորոշումը՝ ձևավորված դարավոր կայունությունից, ստեղծում են պահպանողականություն և պարտավորությունների աճ որոշումներ ընդունելիս։`, + }, + { + id: 'au', + name: 'Ավստրալիա', + flag: '🇦🇺', + region: 'Oceania', + rationale: + 'Անհատապաշտական, հակաավտորիտար, ռիսկային, գործնական-անպաշտոնական', + biases: [91, 13, 44, 79, 80, 78, 55, 12, 74, 77, 71, 37], + confidence: 0.87, + aliases: ['Ավստրալիացի', 'Australian', 'Aussie'], + biasRationale: `Ավստրալիան ունի շատ բարձր անհատապաշտություն (90) և հաճույքակենտրոնություն (71)՝ նկատելիորեն ցածր իշխանական հեռավորությամբ (38)։ Հակաավտորիտար «բարձր կակաչի համախտանիշի» մշակույթը սնում է ռեակտիվությունը և ատրիբուցիայի հիմնարար սխալը, իսկ բարձր հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Ուժեղ անհատապաշտությունը ձևավորում է իլյուզորային գերազանցություն և գերվստահություն սեփական դատողություններում։`, + }, + { + id: 'at', + name: 'Ավստրիա', + flag: '🇦🇹', + region: 'Europe', + rationale: + 'Չափավոր անհատապաշտություն, անորոշության խուսափման բարձր մակարդակ, մասկուլինական-նվաճողական, կառուցվածքային', + biases: [86, 93, 69, 44, 19, 102, 85, 87, 81, 20, 94], + confidence: 0.8, + aliases: ['Ավստրիացի', 'Austrian'], + biasRationale: `Ավստրիան ունի մասկուլինության (79) և անորոշության խուսափման (70) բարձր ցուցանիշներ՝ չափավոր անհատապաշտությամբ (55)։ Նվաճողական մշակույթը՝ զուգորդված կառուցվածքի կարիքի հետ, ձևավորում է զրո-ռիսկի կողմնակալություն և երկիմաստության խուսափում։ Բարձր մասկուլինությունը ստեղծում է գերվստահություն և ատրիբուցիայի հիմնարար սխալ, իսկ ավստրիական մանրակրկիտությունը ձևավորում է հենում սիստեմատիկ մշակման և տեղեկատվության որոնման վրա։`, + }, + { + id: 'be', + name: 'Բելգիա', + flag: '🇧🇪', + region: 'Europe', + rationale: + 'Անորոշության խուսափման բարձր մակարդակ, չափավոր անհատապաշտություն, համաձայնության ձգտող, լեզվապես բաժանված', + biases: [93, 86, 19, 50, 70, 94, 92, 10, 58, 102, 85], + confidence: 0.79, + aliases: ['Բելգիացի', 'Belgian'], + biasRationale: `Բելգիան ունի անորոշության խուսափման շատ բարձր մակարդակ (94)՝ չափավոր անհատապաշտությամբ (75) և ցածր հաճույքակենտրոնությամբ (57)։ Անորոշության խուսափման ուժեղ մակարդակը ձևավորում է երկիմաստության խուսափում և զրո-ռիսկի կողմնակալություն, իսկ լեզվական համայնքների միջև համաձայնության ձգտող մշակույթը ստեղծում է զանգվածային էֆեկտներ և սոցիալական ցանկալիություն։ Զսպվածությունը նպաստում է բացթողման կողմնակալությանը և նորմալության կողմնակալությանը։`, + }, + { + id: 'br', + name: 'Բրազիլիա', + flag: '🇧🇷', + region: 'Americas', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, հաճույքակենտրոն, հուզականորեն արտահայտիչ', + biases: [79, 55, 50, 37, 13, 75, 100, 22, 41, 53, 48, 84], + confidence: 0.82, + aliases: ['Բրազիլացի', 'Brazilian', 'Brasil'], + biasRationale: `Բրազիլիան ունի իշխանական մեծ հեռավորություն (69) և շատ բարձր հաճույքակենտրոնություն (59)՝ ուժեղ կոլեկտիվիզմով (IDV 38)։ Հաճույքակենտրոն, հուզականորեն արտահայտիչ մշակույթը ձևավորում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ, իսկ կոլեկտիվիզմը ստեղծում է զանգվածային էֆեկտներ և ներխմբային կողմնակալություններ։ Իշխանական մեծ հեռավորությունը խթանում է ավտորիտետային կողմնակալությունը, իսկ վառ պատմողական ավանդույթը անեկդոտային վկայությունները հատկապես համոզիչ է դարձնում։`, + }, + { + id: 'ca', + name: 'Կանադա', + flag: '🇨🇦', + region: 'Americas', + rationale: + 'Անհատապաշտական, հավասարազոր, բազմամշակութային-համաձայնության ձգտող, անորոշության խուսափման չափավոր մակարդակ', + biases: [70, 50, 77, 55, 91, 80, 22, 93, 97, 10, 13, 44], + confidence: 0.87, + aliases: ['Կանադացի', 'Canadian'], + biasRationale: `Կանադան ունի անհատապաշտության բարձր մակարդակ (80)՝ ցածր իշխանական հեռավորությամբ (39) և չափավոր հաճույքակենտրոնությամբ (68)։ Բազմամշակութային համաձայնության մշակույթը ստեղծում է սոցիալական ցանկալիություն և զանգվածային էֆեկտներ՝ անհատապաշտական իլյուզորային գերազանցության հետ միասին։ Անորոշության խուսափման չափավոր մակարդակը (48)՝ զուգորդված քաղաքավարության նորմերի հետ, ստեղծում է հակում դեպի բացթողման կողմնակալություն, իսկ հաճույքակենտրոնությունը ձևավորում է նորության գրավչություն և դրականության էֆեկտներ։`, + }, + { + id: 'cl', + name: 'Չիլի', + flag: '🇨🇱', + region: 'Americas', + rationale: + 'Չափավոր կոլեկտիվիզմ, անորոշության խուսափման բարձր մակարդակ, դասային գիտակցական, զսպված', + biases: [93, 86, 48, 90, 19, 83, 10, 30, 50, 57, 81], + confidence: 0.73, + aliases: ['Չիլիացի', 'Chilean'], + biasRationale: `Չիլին ունի անորոշության խուսափման բարձր մակարդակ (86)՝ չափավոր կոլեկտիվիզմով (IDV 23) և նկատելիորեն ցածր հաճույքակենտրոնությամբ (28)։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության և զրո-ռիսկի ուժեղ կողմնակալություններ, իսկ զսպվածությունը ձևավորում է բացթողման կողմնակալություն և «ջայլամի» էֆեկտներ։ Դասային-գիտակցական սոցիալական հիերարխիաները խթանում են ավտորիտետային կողմնակալությունը և համակարգի արդարացումը, իսկ կորստի-խուսափումը ուժեղանում է տնտեսական անկայունության գիտակցմամբ։`, + }, + { + id: 'cn', + name: 'Չինաստան', + flag: '🇨🇳', + region: 'Asia', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, երկարաժամկետ ռազմավարական, դեմքը պահպանող', + biases: [48, 81, 90, 22, 18, 57, 83, 50, 42, 104, 53, 70, 19], + confidence: 0.88, + aliases: ['Չինացի', 'Chinese', 'Zhongguo'], + biasRationale: `Չինաստանը ունի շատ բարձր երկարաժամկետ կողմնորոշում (87) և իշխանական հեռավորություն (80)՝ ուժեղ կոլեկտիվիզմով (IDV 20)։ Երկարաժամկետ-ռազմավարական մշակույթը ձևավորում է պարտավորությունների աճ, կորստի-խուսափում և մտավոր հաշվապահություն։ Իշխանական մեծ հեռավորությունը ստեղծում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ դեմքը պահպանող կոլեկտիվիզմը ստեղծում է սոցիալական ցանկալիություն, զանգվածային էֆեկտներ և ուժեղ ներխմբային ֆավորիտիզմ։`, + }, + { + id: 'co', + name: 'Կոլումբիա', + flag: '🇨🇴', + region: 'Americas', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, հաճույքակենտրոն, ընտանեկենտրոն, ձեռներեցական', + biases: [48, 53, 79, 55, 37, 50, 13, 75, 22, 41, 100], + confidence: 0.72, + aliases: ['Կոլումբիացի', 'Colombian'], + biasRationale: `Կոլումբիան ունի իշխանական մեծ հեռավորություն (67) և շատ բարձր հաճույքակենտրոնություն (83)՝ ուժեղ կոլեկտիվիզմով (IDV 13)։ Բարձր հաճույքակենտրոն մշակույթը ձևավորում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ, իսկ կոլեկտիվիզմը և ընտանեկենտրոնությունը ստեղծում են ներխմբային ֆավորիտիզմ և զանգվածային էֆեկտներ։ Ձեռներեցական ոգին՝ զուգորդված պատմողական ավանդույթների հետ, ստեղծում է զգայունություն «շոգ ձեռքի» սխալանքի և վառ պատմողական համոզիչության նկատմամբ։`, + }, + { + id: 'cz', + name: 'Չեխիա', + flag: '🇨🇿', + region: 'Europe', + rationale: + 'Անհատապաշտական, գործնական, անորոշության խուսափման բարձր մակարդակ, զսպված, թերահավատ', + biases: [93, 19, 91, 30, 10, 17, 86, 83, 87, 71, 25], + confidence: 0.74, + aliases: ['Չեխ', 'Czech', 'Czechia'], + biasRationale: `Չեխիան ունի անհատապաշտության բարձր մակարդակ (58)՝ նկատելի անորոշության խուսափմամբ (74) և շատ ցածր հաճույքակենտրոնությամբ (29)։ Զսպված, թերահավատ մշակույթը ստեղծում է «ջայլամի» և բացթողման կողմնակալություններ՝ բացասականության կողմնակալության հետ միասին։ Անորոշության խուսափման բարձր մակարդակը ձևավորում է երկիմաստության խուսափում և պահպանողականություն, իսկ գործնական անհատապաշտությունը ստեղծում է ռեակտիվություն արտաքին ճնշման նկատմամբ և մշակման բարդության միջոցով ներգրավվածություն։`, + }, + { + id: 'dk', + name: 'Դանիա', + flag: '🇩🇰', + region: 'Europe', + rationale: + 'Բարձր անհատապաշտություն, հավասարազոր, ֆեմինինական մշակույթ, ցածր իշխանական հեռավորություն, հաճույքակենտրոն', + biases: [70, 58, 97, 10, 50, 55, 80, 13, 85, 93, 44], + confidence: 0.83, + aliases: ['Դանիացի', 'Danish', 'Dane'], + biasRationale: `Դանիան ունի շատ բարձր անհատապաշտություն (74)՝ ծայրահեղ ցածր իշխանական հեռավորությամբ (18) և բարձր հաճույքակենտրոնությամբ (70)։ «Janteloven» հավասարազոր մշակույթը ձևավորում է սոցիալական ցանկալիություն և նորմալության կողմնակալություն՝ սահմանափակելով ինքնաառաջխաղացումը։ Ցածր մասկուլինությունը (16) ստեղծում է համաձայնության ձգտում զանգվածային էֆեկտների միջոցով, իսկ հաճույքակենտրոնությունը ստեղծում է նորության գրավչություն և դրականության կողմնակալություններ։ Ֆեմինինական մշակույթը գնահատում է «ավելի քիչ — ավելի լավ» սկզբունքով պարզությունը։`, + }, + { + id: 'eg', + name: 'Եգիպտոս', + flag: '🇪🇬', + region: 'Middle East', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, զսպված, ավանդույթներով խարսխված, անորոշության խուսափման բարձր մակարդակ', + biases: [48, 53, 90, 19, 47, 93, 52, 70, 88, 58, 25, 30], + confidence: 0.72, + aliases: ['Եգիպտացի', 'Egyptian', 'Misr'], + biasRationale: `Եգիպտոսը ունի շատ բարձր իշխանական հեռավորություն (70)՝ ուժեղ կոլեկտիվիզմով և բարձր զսպվածությամբ։ Ավանդույթներով խարսխված մշակույթը ամուր ավտորիտար կառուցվածքով ձևավորում է ավտորիտետային կողմնակալություն, համակարգի արդարացում և պահպանողականություն։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության խուսափում, իսկ կոլեկտիվիզմը ստեղծում է ներխմբային ֆավորիտիզմ և արտախմբային միատարրություն։ Զսպվածությունը դրսևորվում է «ջայլամի» էֆեկտով և սոցիալական ցանկալիությամբ։`, + }, + { + id: 'et', + name: 'Եթովպիա', + flag: '🇪🇹', + region: 'Africa', + rationale: + 'Կոլեկտիվիստական, համայնքային, իշխանական մեծ հեռավորություն, բանավոր ավանդույթ, հոգևոր հիմնավորված', + biases: [48, 53, 37, 47, 50, 31, 96, 76, 19, 70, 58], + confidence: 0.66, + aliases: ['Եթովպիացի', 'Ethiopian'], + biasRationale: `Եթովպիան ցուցադրում է իշխանական մեծ հեռավորություն և ուժեղ կոլեկտիվիզմ՝ արմատավորված համայնքային սոցիալական կառուցվածքներում և խորը հոգևոր ավանդույթներում։ Հարուստ բանավոր պատմողական ավանդույթը անեկդոտային վկայությունները և կոնյունկցիայի սխալանքը հատկապես ազդեցիկ է դարձնում։ Ավտորիտետային կողմնակալությունը և արդարության սխալանքը ուժեղանում են կրոնական շրջանակներով, իսկ համայնքային որոշումներ ընդունելը ստեղծում է զանգվածային էֆեկտներ և ներխմբային ֆավորիտիզմ։`, + }, + { + id: 'fi', + name: 'Ֆինլանդիա', + flag: '🇫🇮', + region: 'Europe', + rationale: + 'Անհատապաշտական, ցածր իշխանական հեռավորություն, անորոշության խուսափման բարձր մակարդակ, զսպված, հավասարազոր', + biases: [93, 86, 10, 30, 70, 87, 102, 85, 17, 94, 58, 19], + confidence: 0.83, + aliases: ['Ֆին', 'Finnish', 'Finn', 'Suomi'], + biasRationale: `Ֆինլանդիան ունի անհատապաշտության բարձր մակարդակ (63)՝ շատ ցածր իշխանական հեռավորությամբ (33), անորոշության խուսափման բարձր մակարդակով (59) և նկատելիորեն ցածր հաճույքակենտրոնությամբ (57)։ Զսպված «sisu» մշակույթը ձևավորում է բացթողման կողմնակալություններ և «ջայլամի» էֆեկտներ, իսկ անորոշության խուսափումը ստեղծում է երկիմաստության խուսափում և զրո-ռիսկի կողմնակալություն։ Ֆինների մեթոդիկ մոտեցումը ստեղծում է ներգրավվածություն մշակման բարդության միջոցով և հաջորդական հիշողության նախընտրություններ, իսկ սոցիալական ցանկալիությունը արտացոլում է զսպված հաղորդակցության ոճը։`, + }, + { + id: 'fr', + name: 'Ֆրանսիա', + flag: '🇫🇷', + region: 'Europe', + rationale: + 'Անհատապաշտական, սակայն հիերարխիկ, գեղագիտությամբ առաջնորդվող, ինտելեկտուալ-հակասական', + biases: [54, 20, 91, 89, 92, 97, 104, 71, 14, 83, 69, 87], + confidence: 0.88, + aliases: ['Ֆրանսիացի', 'French'], + biasRationale: `Ֆրանսիան ունի անհատապաշտության բարձր մակարդակ (71)՝ նկատելի իշխանական հեռավորությամբ (68) և անորոշության խուսափման բարձր մակարդակով (86)։ Գեղագիտությամբ առաջնորդվող մշակույթը ուժեղացնում է լուսապսակի և կոնտրաստի էֆեկտները, իսկ ինտելեկտուալ հակասությունը սնում է ռեակտիվությունը և հակառակ արձագանքի էֆեկտները։ Անորոշության խուսափման բարձր մակարդակը՝ զուգորդված անհատապաշտության հետ, ստեղծում է եզակի պրոֆիլ, որտեղ գերվստահությունը հանդիպում է կորստի-խուսափմանը, և ինտելեկտուալ խստության շեշտադրումը ձևավորում է ներգրավվածություն մշակման բարդության միջոցով։`, + }, + { + id: 'de', + name: 'Գերմանիա', + flag: '🇩🇪', + region: 'Europe', + rationale: + 'Կանոնակենտրոն, ինժեներական մտածողություն, ճշգրտությամբ առաջնորդվող, չափավոր անհատապաշտություն', + biases: [87, 94, 86, 19, 25, 49, 102, 85, 81, 93, 83, 17], + confidence: 0.89, + aliases: ['Գերմանացի', 'German', 'Deutsche'], + biasRationale: `Գերմանիան ունի անհատապաշտության բարձր մակարդակ (67)՝ անորոշության խուսափման ուժեղ մակարդակով (65) և երկարաժամկետ կողմնորոշման բարձր մակարդակով (83)։ Ինժեներա-ճշգրտության մշակույթը ձևավորում է ներգրավվածություն մշակման բարդության միջոցով, տեղեկատվական կողմնակալություն և հաջորդական հիշողության նախընտրություններ։ Անորոշության խուսափումը ստեղծում է զրո-ռիսկի և երկիմաստության կողմնակալություններ, իսկ երկարաժամկետ կողմնորոշումը ուժեղացնում է պարտավորությունների աճը և կորստի-խուսափումը։ Կանոնակենտրոն մտածողությունը ստեղծում է պահպանողականություն և հաստատման կողմնակալություն։`, + }, + { + id: 'gr', + name: 'Հունաստան', + flag: '🇬🇷', + region: 'Europe', + rationale: + 'Կոլեկտիվիզմին հակվող, շատ բարձր անորոշության խուսափում, իշխանական մեծ հեռավորություն, հաճույքակենտրոն', + biases: [93, 86, 48, 53, 79, 55, 91, 88, 19, 37, 100, 81], + confidence: 0.75, + aliases: ['Հույն', 'Greek', 'Hellenic', 'Hellas'], + biasRationale: `Հունաստանը ունի Եվրոպայում անորոշության խուսափման ամենաբարձր մակարդակը (100)՝ բարձր իշխանական հեռավորությամբ (60) և չափավոր կոլեկտիվիզմով (IDV 35)։ Անորոշության խուսափման ծայրահեղ մակարդակը ձևավորում է երկիմաստության և զրո-ռիսկի կողմնակալություններ, իսկ հաճույքակենտրոն միջերկրածովյան մշակույթը (IVR 50) ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Ուժեղ ընտանեկան կոլեկտիվիզմը ստեղծում է ներխմբային ֆավորիտիզմ, իսկ ճարտասանական ավանդույթը ուժեղացնում է անեկդոտային վկայությունների համոզիչությունը։`, + }, + { + id: 'in', + name: 'Հնդկաստան', + flag: '🇮🇳', + region: 'Asia', + rationale: + 'Հիերարխիկ, կոլեկտիվիստական, երկարաժամկետ կողմնորոշված, սակարկության մշակույթ', + biases: [48, 53, 25, 81, 47, 96, 57, 18, 36, 42, 50, 88, 90], + confidence: 0.85, + aliases: ['Հնդիկ', 'Indian', 'Bharat'], + biasRationale: `Հնդկաստանը ունի շատ բարձր իշխանական հեռավորություն (77)՝ ուժեղ երկարաժամկետ կողմնորոշմամբ (51) և չափավոր կոլեկտիվիզմով (IDV 48)։ Հիերարխիկ մշակույթը ձևավորում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ սակարկության ավանդույթը ուժեղացնում է խարսխման էֆեկտները և մտավոր հաշվապահությունը։ Երկարաժամկետ կողմնորոշումը ստեղծում է պարտավորությունների աճ, իսկ պատմողական ավանդույթը կոնյունկցիայի սխալանքը և անեկդոտային պատումները չափազանց համոզիչ է դարձնում։`, + }, + { + id: 'id', + name: 'Ինդոնեզիա', + flag: '🇮🇩', + region: 'Asia', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, ներդաշնակություն փնտրող, հոգևոր հիմնավորված', + biases: [48, 50, 70, 58, 10, 30, 47, 90, 53, 31, 19, 42], + confidence: 0.78, + aliases: ['Ինդոնեզացի', 'Indonesian'], + biasRationale: `Ինդոնեզիան ունի շատ բարձր իշխանական հեռավորություն (78)՝ ուժեղ կոլեկտիվիզմով (IDV 14) և ցածր հաճույքակենտրոնությամբ (38)։ Ներդաշնակություն փնտրող «musyawarah» մշակույթը ձևավորում է սոցիալական ցանկալիություն, բացթողման կողմնակալություն և նորմալության կողմնակալություն։ Իշխանական մեծ հեռավորությունը ստեղծում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ հոգևոր հիմքը ուժեղացնում է արդարության սխալանքը և սուբյեկտիվ հաստատումը։ Զսպվածությունը դրսևորվում է որպես առճակատման խուսափում «ջայլամի» էֆեկտի միջոցով։`, + }, + { + id: 'ir', + name: 'Իրան', + flag: '🇮🇷', + region: 'Middle East', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, անորոշության խուսափման բարձր մակարդակ, զսպված, ավանդապահպան', + biases: [48, 90, 19, 93, 53, 52, 88, 47, 30, 10, 70, 89], + confidence: 0.68, + aliases: ['Իրանցի', 'Պարսիկ', 'Iranian', 'Persian'], + biasRationale: `Իրանը ունի շատ բարձր իշխանական հեռավորություն և անորոշության խուսափում՝ ուժեղ կոլեկտիվիզմով և զսպվածությամբ։ Ավանդապահպան մշակույթը ձևավորում է պահպանողականություն, համակարգի արդարացում և ավտորիտետային կողմնակալություն։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության խուսափում, իսկ կոլեկտիվիզմը ուժեղացնում է ներխմբային ֆավորիտիզմը և արտախմբային միատարրությունը։ Զսպվածությունը և մշակութային դիմացկունությունը ստեղծում են «ջայլամի» և բացթողման կողմնակալություններ, իսկ հակառակ արձագանքի էֆեկտները արտացոլում են արտաքին պատումներին դիմադրությունը։`, + }, + { + id: 'ie', + name: 'Իռլանդիա', + flag: '🇮🇪', + region: 'Europe', + rationale: + 'Անհատապաշտական, ցածր իշխանական հեռավորություն, մասկուլինական, կարճաժամկետ կողմնորոշված, շատ հաճույքակենտրոն', + biases: [13, 37, 79, 55, 80, 91, 44, 77, 12, 100, 75], + confidence: 0.76, + aliases: ['Իռլանդացի', 'Irish', 'Eire'], + biasRationale: `Իռլանդիան ունի անհատապաշտության բարձր մակարդակ (70)՝ ցածր իշխանական հեռավորությամբ (28) և շատ բարձր հաճույքակենտրոնությամբ (65)։ Պատմողական մշակույթը անեկդոտային վկայությունները և հումորի էֆեկտները հատկապես հզոր է դարձնում։ Բարձր հաճույքակենտրոնությունը ձևավորում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ, իսկ անհատապաշտությունը ստեղծում է իլյուզորային գերազանցություն և ռեակտիվություն։ Կարճաժամկետ կողմնորոշումը (LTO 24) ստեղծում է նորության գրավչություն, իսկ ընկերակցական մշակույթը ուժեղացնում է տարօրինակության և Բարնումի էֆեկտները։`, + }, + { + id: 'il', + name: 'Իսրայել', + flag: '🇮🇱', + region: 'Middle East', + rationale: + 'Ուղիղ հաղորդակցություն, ստարտափ-մշակույթ, անվտանգությանը կարևորող, ցածր իշխանական հեռավորություն', + biases: [69, 91, 89, 74, 80, 83, 1, 36, 79, 84, 78, 77], + confidence: 0.84, + aliases: ['Իսրայելցի', 'Israeli'], + biasRationale: `Իսրայելը ունի ցածր իշխանական հեռավորություն (13)՝ բարձր անհատապաշտությամբ (54) և անորոշության խուսափման չափավոր մակարդակով (81)։ «Chutzpah» ստարտափ-մշակույթը ձևավորում է գերվստահություն, Դանինգ-Կրյուգերի էֆեկտ և իլյուզորային գերազանցություն, իսկ ուղիղ հաղորդակցության ոճը ստեղծում է ռեակտիվություն և հակառակ արձագանքի էֆեկտներ։ Անվտանգության մտահոգությունը ուժեղացնում է մատչելիության էվրիստիկաները և հավանականության անտեսումը, իսկ նորարարական տնտեսությունը ստեղծում է նորության գրավչություն և IKEA-ի էֆեկտ։`, + }, + { + id: 'it', + name: 'Իտալիա', + flag: '🇮🇹', + region: 'Europe', + rationale: + 'Անհատապաշտական, անորոշության խուսափման բարձր մակարդակ, մասկուլինական, գեղագիտությամբ առաջնորդվող, ընտանեկենտրոն', + biases: [54, 93, 86, 20, 53, 69, 14, 92, 104, 83, 88, 79], + confidence: 0.84, + aliases: ['Իտալացի', 'Italian'], + biasRationale: `Իտալիան ունի անհատապաշտության բարձր մակարդակ (76), մասկուլինություն (70) և անորոշության խուսափում (75)։ Գեղագիտությանը կենտրոնացած մշակույթը ուժեղացնում է լուսապսակի և պատկերի գերազանցության էֆեկտները, իսկ անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության և զրո-ռիսկի կողմնակալություններ։ Մասկուլինությունը ձևավորում է գերվստահություն և մրցակցային շրջանակում կոնտրաստի և խայծի էֆեկտների միջոցով։ Ընտանեկան կոլեկտիվիզմը տեղական մակարդակում ստեղծում է ներխմբային ֆավորիտիզմ, իսկ կորստի-խուսափումը և տիրապետման էֆեկտը ուժեղանում են ժառանգության պահպանման արժեքներով։`, + }, + { + id: 'jp', + name: 'Ճապոնիա', + flag: '🇯🇵', + region: 'Asia', + rationale: + 'Կոլեկտիվիստական, ծայրահեղ բարձր անորոշության խուսափում, հիերարխիկ, մանրակրկիտ-պերֆեկցիոնիստական', + biases: [50, 90, 19, 48, 70, 93, 86, 101, 54, 102, 81, 83, 10], + confidence: 0.9, + aliases: ['Ճապոնացի', 'Japanese', 'Nippon'], + biasRationale: `Ճապոնիան ունի ծայրահեղ բարձր անորոշության խուսափում (92) և երկարաժամկետ կողմնորոշում (88)՝ ուժեղ մասկուլինությամբ (95) և կոլեկտիվիզմով (IDV 46)։ Պերֆեկցիոնիստական մշակույթը ձևավորում է զրո-ռիսկի կողմնակալություն, երկիմաստության խուսափում և մանրակրկիտ մշակում հաջորդական հիշողության միջոցով։ Բարձր կոլեկտիվիզմը ստեղծում է զանգվածային էֆեկտներ և սոցիալական ցանկալիություն, իսկ երկարաժամկետ կողմնորոշումը ուժեղացնում է պարտավորությունների աճը և կորստի-խուսափումը։ Հիերարխիկ կառուցվածքը ստեղծում է ավտորիտետային կողմնակալություն և համակարգի արդարացում։`, + }, + { + id: 'ke', + name: 'Քենիա', + flag: '🇰🇪', + region: 'Africa', + rationale: + 'Համայնքակենտրոն, բջջային-կողմնորոշված տնտեսություն, հնարամիտ, բանավոր պատմողական ավանդույթ', + biases: [37, 53, 79, 41, 76, 40, 84, 96, 69, 55, 48, 50], + confidence: 0.73, + aliases: ['Քենիացի', 'Kenyan'], + biasRationale: `Քենիան ցուցադրում է չափավոր կոլեկտիվիզմ՝ ձեռներեցական դինամիզմով և բջջային-առաջնային թվային տնտեսությամբ։ Բանավոր պատմողական ավանդույթը անեկդոտային վկայությունները և կոնյունկցիայի սխալանքը չափազանց համոզիչ է դարձնում։ Համայնքակենտրոն որոշումներ ընդունելը ստեղծում է ներխմբային ֆավորիտիզմ և զանգվածային էֆեկտներ, իսկ հնարամիտ ձեռներեցական մշակույթը ձևավորում է վերահսկողության պատրանք, գերվստահություն և ինքնակառուցված լուծումներից IKEA-ի էֆեկտներ։`, + }, + { + id: 'my', + name: 'Մալայզիա', + flag: '🇲🇾', + region: 'Asia', + rationale: + 'Շատ բարձր իշխանական հեռավորություն, կոլեկտիվիստական, անորոշության խուսափման չափավոր մակարդակ, ներդաշնակություն փնտրող', + biases: [48, 50, 53, 90, 70, 58, 10, 47, 22, 88, 19], + confidence: 0.75, + aliases: ['Մալայզիացի', 'Malaysian'], + biasRationale: `Մալայզիան ունի աշխարհի ամենաբարձր իշխանական հեռավորությունը (100)՝ ուժեղ կոլեկտիվիզմով (IDV 26) և անորոշության խուսափման չափավոր մակարդակով (36)։ Իշխանական ծայրահեղ մեծ հեռավորությունը ձևավորում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ ներդաշնակություն փնտրող կոլեկտիվիզմը ստեղծում է զանգվածային էֆեկտներ, ներխմբային ֆավորիտիզմ և սոցիալական ցանկալիություն։ «Դեմքի պահպանման» մշակույթը ուժեղացնում է բացթողման կողմնակալությունը և նորմալության կողմնակալությունը, իսկ շրջանակման էֆեկտները ուժեղանում են բազմազգ համաձայնության ավանդույթով։`, + }, + { + id: 'mx', + name: 'Մեքսիկա', + flag: '🇲🇽', + region: 'Americas', + rationale: + 'Կոլեկտիվիստական, ընտանեկենտրոն, իշխանական մեծ հեռավորություն, արտահայտիչ-հաճույքակենտրոն', + biases: [53, 48, 79, 37, 100, 7, 55, 75, 22, 84, 50, 41], + confidence: 0.82, + aliases: ['Մեքսիկացի', 'Mexican'], + biasRationale: `Մեքսիկան ունի իշխանական մեծ հեռավորություն (81)՝ ուժեղ կոլեկտիվիզմով (IDV 30) և շատ բարձր հաճույքակենտրոնությամբ (97)։ Ընտանեկենտրոն մշակույթը ձևավորում է ներխմբային ֆավորիտիզմ և ավտորիտետային կողմնակալություն, իսկ ծայրահեղ հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Հուզականորեն արտահայտիչ մշակույթը ուժեղացնում է տրամադրությանը-համահունչ հիշողությունը և մարող աֆեկտի կողմնակալությունը, իսկ անեկդոտային պատմողականությունը և Բարնումի էֆեկտի զգայունությունը արտացոլում են ջերմ միջանձնային ավանդույթը։`, + }, + { + id: 'ma', + name: 'Մարոկկո', + flag: '🇲🇦', + region: 'Africa', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, անորոշության խուսափման բարձր մակարդակ, զսպված, ավանդապաշտ', + biases: [48, 53, 93, 19, 90, 47, 70, 52, 88, 10, 30, 18], + confidence: 0.67, + aliases: ['Մարոկկացի', 'Moroccan', 'Maghreb'], + biasRationale: `Մարոկկոն ունի իշխանական մեծ հեռավորություն (70)՝ ուժեղ կոլեկտիվիզմով (IDV 25) և անորոշության խուսափման բարձր մակարդակով (68)։ Ավանդապաշտ մշակույթը ձևավորում է պահպանողականություն, ավտորիտետային կողմնակալություն և համակարգի արդարացում։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության խուսափում, իսկ կոլեկտիվիզմը ուժեղացնում է ներխմբային ֆավորիտիզմը և արտախմբային միատարրությունը։ Բազարային ազդեցության բանակցային մշակույթը ուժեղացնում է խարսխման էֆեկտները, իսկ զսպվածությունը դրսևորվում է բացթողման և «ջայլամի» էֆեկտներով։`, + }, + { + id: 'nl', + name: 'Նիդերլանդներ', + flag: '🇳🇱', + region: 'Europe', + rationale: + 'Բարձր անհատապաշտություն, հավասարազոր, ուղիղ հաղորդակցողներ, ցածր իշխանական հեռավորություն, հաճույքակենտրոն', + biases: [77, 91, 44, 80, 79, 55, 94, 87, 71, 97, 74, 13], + confidence: 0.87, + aliases: ['Հոլանդացի', 'Dutch', 'Holland'], + biasRationale: `Նիդերլանդները ունեն շատ բարձր անհատապաշտություն (80)՝ շատ ցածր իշխանական հեռավորությամբ (38) և բարձր հաճույքակենտրոնությամբ (68)։ Ուղիղ, հավասարազոր «poldermodel» մշակույթը ձևավորում է իլյուզորային գերազանցություն, ռեակտիվություն և ատրիբուցիայի հիմնարար սխալ։ Բարձր հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ, իսկ վերլուծական առևտրային ավանդույթը ստեղծում է տեղեկատվական կողմնակալություն և մշակման բարդության միջոցով ներգրավվածություն։ Հոլանդական ուղղամիտությունը ուժեղացնում է երրորդ անձի էֆեկտը և Դանինգ-Կրյուգերի հակումները։`, + }, + { + id: 'nz', + name: 'Նոր Զելանդիա', + flag: '🇳🇿', + region: 'Oceania', + rationale: + 'Անհատապաշտական, հավասարազոր, հակա-ձևացնող, գործնական, շատ հաճույքակենտրոն', + biases: [91, 44, 77, 13, 55, 80, 79, 70, 12, 97, 58, 74], + confidence: 0.82, + aliases: ['Նորզելանդացի', 'Kiwi', 'Aotearoa'], + biasRationale: `Նոր Զելանդիան ունի անհատապաշտության բարձր մակարդակ (79)՝ ցածր իշխանական հեռավորությամբ (22) և բարձր հաճույքակենտրոնությամբ (75)։ «Բարձր կակաչի» հակա-ձևացնող մշակույթը ստեղծում է ռեակտիվություն և սոցիալական ցանկալիություն, իսկ հավասարազորությունը ձևավորում է ատրիբուցիայի հիմնարար սխալ։ Բարձր հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Քիվիների գործնական մշակույթը գնահատում է հումորի էֆեկտները և «ավելի քիչ — ավելի լավ» սկզբունքով պարզությունը, իսկ նորմալության կողմնակալությունը արտացոլում է հանգիստ ապրելակերպի կողմնորոշումը։`, + }, + { + id: 'ng', + name: 'Նիգերիա', + flag: '🇳🇬', + region: 'Africa', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, ձեռներեցական, հավատքակենտրոն', + biases: [48, 47, 31, 37, 40, 75, 69, 79, 78, 53, 41, 76], + confidence: 0.73, + aliases: ['Նիգերիացի', 'Nigerian', 'Naija'], + biasRationale: `Նիգերիան ունի իշխանական մեծ հեռավորություն (80)՝ ուժեղ կոլեկտիվիզմով (IDV 30) և չափավոր հաճույքակենտրոնությամբ (84)։ Հավատքակենտրոն մշակույթը ուժեղացնում է արդարության սխալանքը և սուբյեկտիվ հաստատումը, իսկ ձեռներեցական «hustle» մշակույթը ձևավորում է գերվստահություն, ռիսկի փոխհատուցում և վերահսկողության պատրանք։ Բարձր հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում, իսկ բանավոր ավանդույթը անեկդոտային վկայությունները և Բարնումի էֆեկտները չափազանց համոզիչ է դարձնում։`, + }, + { + id: 'no', + name: 'Նորվեգիա', + flag: '🇳🇴', + region: 'Europe', + rationale: + 'Բարձր անհատապաշտություն, շատ ցածր իշխանական հեռավորություն, ֆեմինինական, հաճույքակենտրոն, հավասարազոր', + biases: [70, 58, 10, 97, 55, 80, 50, 93, 44, 13, 85], + confidence: 0.84, + aliases: ['Նորվեգացի', 'Norwegian'], + biasRationale: `Նորվեգիան ունի անհատապաշտության բարձր մակարդակ (69)՝ ծայրահեղ ցածր իշխանական հեռավորությամբ (31) և շատ ցածր մասկուլինությամբ (8)։ Խորապես հավասարազոր «Janteloven» մշակույթը ձևավորում է սոցիալական ցանկալիություն և նորմալության կողմնակալություն՝ ճնշելով ինքնաառաջխաղացումը։ Ցածր մասկուլինությունը ստեղծում է համաձայնության ձգտում զանգվածային էֆեկտների միջոցով և «ավելի քիչ — ավելի լավ» նախընտրություններ։ Բարձր հաճույքակենտրոնությունը (55) ստեղծում է դրականության էֆեկտներ և նորության գրավչություն, իսկ կառուցվածքային հասարակությունը ստեղծում է բացթողման կողմնակալություն որոշումներ ընդունելիս։`, + }, + { + id: 'pk', + name: 'Պակիստան', + flag: '🇵🇰', + region: 'Asia', + rationale: + 'Շատ բարձր իշխանական հեռավորություն, կոլեկտիվիստական, զսպված, ավանդապաշտ, մասկուլինական', + biases: [48, 53, 47, 90, 50, 19, 52, 70, 30, 10, 88, 43], + confidence: 0.72, + aliases: ['Պակիստանցի', 'Pakistani'], + biasRationale: `Պակիստանը ունի շատ բարձր իշխանական հեռավորություն (55) և կոլեկտիվիզմ (IDV 14)՝ բարձր մասկուլինությամբ (50) և ծայրահեղ ցածր հաճույքակենտրոնությամբ (0)։ Ավանդապաշտ մշակույթը ամուր ավտորիտար կառուցվածքով ձևավորում է ավտորիտետային կողմնակալություն, համակարգի արդարացում և պահպանողականություն։ Ծայրահեղ զսպվածությունը ստեղծում է «ջայլամի» և բացթողման կողմնակալություններ, իսկ կոլեկտիվիզմը ստեղծում է ներխմբային ֆավորիտիզմ, զանգվածային էֆեկտներ և արտախմբային միատարրություն։ Արդարության սխալանքը ուժեղանում է կրոնական և սոցիալական շրջանակներով։`, + }, + { + id: 'pe', + name: 'Պերու', + flag: '🇵🇪', + region: 'Americas', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, անորոշության խուսափման չափավոր մակարդակ, զսպված', + biases: [48, 53, 50, 19, 90, 10, 30, 47, 79, 37, 88], + confidence: 0.68, + aliases: ['Պերուացի', 'Peruvian'], + biasRationale: `Պերուն ունի իշխանական մեծ հեռավորություն (64)՝ ուժեղ կոլեկտիվիզմով (IDV 16) և անորոշության խուսափման չափավոր մակարդակով (87)։ Հիերարխիկ մշակույթը ձևավորում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ կոլեկտիվիզմը ստեղծում է ներխմբային ֆավորիտիզմ և զանգվածային էֆեկտներ։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է պահպանողականություն, իսկ զսպվածությունը (IVR 46) դրսևորվում է բացթողման և «ջայլամի» էֆեկտներով։ Անեկդոտային պատմողական ավանդույթները մնում են ազդեցիկ որոշումներ ընդունելիս։`, + }, + { + id: 'ph', + name: 'Ֆիլիպիններ', + flag: '🇵🇭', + region: 'Asia', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, շատ բարձր հաճույքակենտրոնություն, ընտանեկենտրոն', + biases: [48, 53, 79, 55, 50, 13, 37, 75, 100, 47, 70, 41], + confidence: 0.74, + aliases: ['Ֆիլիպինցի', 'Filipino', 'Filipina', 'Pinoy'], + biasRationale: `Ֆիլիպինները ունեն իշխանական մեծ հեռավորություն (94)՝ ուժեղ կոլեկտիվիզմով (IDV 32) և շատ բարձր հաճույքակենտրոնությամբ (42)։ Համայնքային «bayanihan» մշակույթը ձևավորում է ներխմբային ֆավորիտիզմ և զանգվածային էֆեկտներ, իսկ ավտորիտետի հանդեպ հարգանքը ստեղծում է ավտորիտետային կողմնակալություն։ Բարձր հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Ջերմ, հումորակենտրոն մշակույթը ուժեղացնում է հումորի էֆեկտները և Բարնումի զգայունությունը, իսկ մարող աֆեկտի կողմնակալությունը արտացոլում է կայուն «bahala na» վերաբերմունքը։`, + }, + { + id: 'pl', + name: 'Լեհաստան', + flag: '🇵🇱', + region: 'Europe', + rationale: + 'Անհատապաշտական, անորոշության խուսափման բարձր մակարդակ, մասկուլինական, զսպված, գործնական', + biases: [93, 86, 19, 69, 44, 83, 81, 10, 30, 17, 25, 87], + confidence: 0.8, + aliases: ['Լեհ', 'Polish', 'Pole'], + biasRationale: `Լեհաստանը ունի անհատապաշտության բարձր մակարդակ (60)՝ շատ բարձր անորոշության խուսափմամբ (93) և ցածր հաճույքակենտրոնությամբ (29)։ Անորոշության խուսափման ուժեղ մակարդակը ձևավորում է երկիմաստության և զրո-ռիսկի կողմնակալություններ, իսկ զսպվածությունը ստեղծում է բացթողման կողմնակալություն և «ջայլամի» էֆեկտներ։ Բարձր մասկուլինությունը (64) ստեղծում է գերվստահություն և ատրիբուցիայի հիմնարար սխալ։ Երկարաժամկետ կողմնորոշումը (38)՝ զուգորդված պատմական զգուշավորության հետ, ստեղծում է կորստի-խուսափում, պարտավորությունների աճ և բացասականության կողմնակալություն։`, + }, + { + id: 'pt', + name: 'Պորտուգալիա', + flag: '🇵🇹', + region: 'Europe', + rationale: + 'Կոլեկտիվիզմին հակվող, շատ բարձր անորոշության խուսափում, ֆեմինինական, զսպված', + biases: [93, 86, 70, 10, 58, 50, 19, 83, 30, 100, 55, 85], + confidence: 0.76, + aliases: ['Պորտուգալացի', 'Portuguese'], + biasRationale: `Պորտուգալիան ունի Եվրոպայում անորոշության խուսափման ամենաբարձր մակարդակը (99)՝ չափավոր կոլեկտիվիզմով (IDV 27) և ցածր մասկուլինությամբ (31)։ Ծայրահեղ անորոշության խուսափումը ձևավորում է երկիմաստության և զրո-ռիսկի կողմնակալություններ, իսկ մշակութային մելամաղձոտ «saudade»-ը ստեղծում է մարող աֆեկտի կողմնակալություն և սոցիալական ցանկալիություն։ Ցածր մասկուլինությունը ստեղծում է նորմալության կողմնակալություն և համաձայնության ձգտող զանգվածային էֆեկտներ։ Զսպվածությունը (IVR 33) դրսևորվում է բացթողման և «ջայլամի» կողմնակալություններով, իսկ կորստի-խուսափումը ուժեղանում է զգույշ ֆինանսական մշակույթով։`, + }, + { + id: 'ro', + name: 'Ռումինիա', + flag: '🇷🇴', + region: 'Europe', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիզմին հակվող, անորոշության խուսափման բարձր մակարդակ, զսպված', + biases: [48, 93, 90, 19, 10, 30, 83, 52, 53, 70, 17], + confidence: 0.72, + aliases: ['Ռումինացի', 'Romanian'], + biasRationale: `Ռումինիան ունի իշխանական մեծ հեռավորություն (90)՝ բարձր անորոշության խուսափմամբ (90) և ցածր հաճույքակենտրոնությամբ (20)։ Ուժեղ հիերարխիայի և անորոշության խուսափման զուգակցումը ձևավորում է ավտորիտետային կողմնակալություն, համակարգի արդարացում և երկիմաստության խուսափում։ Ծայրահեղ զսպվածությունը ստեղծում է բացթողման և «ջայլամի» կողմնակալություններ, իսկ կոլեկտիվիստական հակումները ստեղծում են ներխմբային ֆավորիտիզմ և արտախմբային միատարրություն։ Պատմական թերահավատությունը ուժեղացնում է պահպանողականությունը, բացասականության կողմնակալությունը և կորստի-խուսափումը։`, + }, + { + id: 'sa', + name: 'Սաուդյան Արաբիա', + flag: '🇸🇦', + region: 'Middle East', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, ավանդապահպան, զսպված', + biases: [48, 90, 19, 52, 43, 88, 47, 89, 53, 58, 70, 86], + confidence: 0.82, + aliases: ['Սաուդացի', 'Saudi', 'KSA'], + biasRationale: `Սաուդյան Արաբիան ունի շատ բարձր իշխանական հեռավորություն (95)՝ ուժեղ կոլեկտիվիզմով և անորոշության խուսափման բարձր մակարդակով (80)։ Ավանդապահպան մշակույթը ձևավորում է պահպանողականություն, համակարգի արդարացում և ավտորիտետային կողմնակալություն։ Կոլեկտիվիզմը ստեղծում է ներխմբային ֆավորիտիզմ, արտախմբային միատարրություն և խմբային ատրիբուցիայի սխալներ։ Զսպված մշակույթը ստեղծում է տիրապետման էֆեկտներ ավանդույթի շուրջ և նորմալության կողմնակալություն, իսկ հակառակ արձագանքի էֆեկտները արտացոլում են արագ մշակութային փոփոխությունների պատումներին դիմադրությունը։`, + }, + { + id: 'sg', + name: 'Սինգապուր', + flag: '🇸🇬', + region: 'Asia', + rationale: + 'Ցածր անհատապաշտություն, շատ բարձր իշխանական հեռավորություն, գործնական, զսպված, արժանավորության սկզբունքով', + biases: [48, 90, 49, 102, 85, 81, 83, 57, 86, 70, 50, 19, 93], + confidence: 0.85, + aliases: ['Սինգապուրցի', 'Singaporean'], + biasRationale: `Սինգապուրը ունի շատ բարձր իշխանական հեռավորություն (74)՝ ցածր անհատապաշտությամբ (20) և շատ բարձր երկարաժամկետ կողմնորոշմամբ (72)։ Գործնական արժանավորության մշակույթը ձևավորում է ավտորիտետային կողմնակալություն, համակարգի արդարացում և ավտոմատացման կողմնակալություն տեխնոլոգիապես առաջադեմ կառավարման շնորհիվ։ Երկարաժամկետ կողմնորոշումը ստեղծում է պարտավորությունների աճ, կորստի-խուսափում և մտավոր հաշվապահություն։ Ցածր հաճույքակենտրոնությունը (46) ստեղծում է զրո-ռիսկի կողմնակալություն և սոցիալական ցանկալիություն, իսկ սիստեմատիկ հասարակությունը ուժեղացնում է հաջորդական հիշողությունը և միավոր կողմնակալությունը։`, + }, + { + id: 'za', + name: 'Հարավային Աֆրիկա', + flag: '🇿🇦', + region: 'Africa', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, մասկուլինական, կարճաժամկետ կողմնորոշված, զսպված', + biases: [48, 53, 52, 69, 44, 47, 79, 78, 37, 43, 91, 83], + confidence: 0.74, + aliases: ['Հարավաֆրիկացի', 'Mzansi'], + biasRationale: `Հարավային Աֆրիկան ունի իշխանական մեծ հեռավորություն (49)՝ չափավոր անհատապաշտությամբ (65) և բարձր մասկուլինությամբ (63)։ Բարդ բազմամշակութային հասարակությունը ստեղծում է ներխմբային ֆավորիտիզմ, արտախմբային միատարրություն և խմբային ատրիբուցիայի սխալներ։ Մասկուլինությունը ձևավորում է գերվստահություն և ատրիբուցիայի հիմնարար սխալ, իսկ կարճաժամկետ կողմնորոշումը (34) ստեղծում է հիպերբոլիկ զեղչում։ Ձեռներեցական դիմացկունության մշակույթը ուժեղացնում է ռիսկի փոխհատուցումը, իսկ անեկդոտային պատմողական ավանդույթները մնում են հզոր։ Ռեակտիվությունը արտացոլում է հետգաղութային դիմադրության օրինաչափությունները։`, + }, + { + id: 'kr', + name: 'Հարավային Կորեա', + flag: '🇰🇷', + region: 'Asia', + rationale: + 'Կոլեկտիվիստական, արտաքին տեսքին ուշադիր, տեխնոլոգիապես առաջադեմ, կոնֆուցիական հիերարխիա', + biases: [50, 54, 64, 80, 20, 70, 15, 77, 90, 84, 81, 83, 48], + confidence: 0.88, + aliases: ['Կորեացի', 'Korean'], + biasRationale: `Հարավային Կորեան ունի երկարաժամկետ կողմնորոշման բարձր մակարդակ (100) և անորոշության խուսափում (85)՝ ուժեղ կոլեկտիվիզմով (IDV 18)։ Արտաքին տեսքին ուշադիր «nunchi» մշակույթը ուժեղացնում է ուշադրության կենտրոնի էֆեկտը, լուսապսակի էֆեկտը և սոցիալական ցանկալիությունը։ Կոնֆուցիական հիերարխիան ստեղծում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ երկարաժամկետ կողմնորոշումը ձևավորում է պարտավորությունների աճ և կորստի-խուսափում։ Տեխնոլոգիապես առաջադեմ K-մշակույթը ստեղծում է ուժեղ նորության գրավչություն և մասնակցային ֆան-մշակույթից IKEA-ի էֆեկտներ։`, + }, + { + id: 'es', + name: 'Իսպանիա', + flag: '🇪🇸', + region: 'Europe', + rationale: + 'Կոլեկտիվիզմին հակվող, շատ բարձր անորոշության խուսափում, ֆեմինինությանը հակվող, հաճույքակենտրոն', + biases: [93, 86, 53, 55, 79, 50, 37, 22, 13, 100, 91, 20], + confidence: 0.83, + aliases: ['Իսպանացի', 'Spanish', 'Spaniard'], + biasRationale: `Իսպանիան ունի շատ բարձր անորոշության խուսափում (86)՝ չափավոր կոլեկտիվիզմով (IDV 51) և բարձր հաճույքակենտրոնությամբ (44)։ Անորոշության խուսափումը ձևավորում է երկիմաստության և զրո-ռիսկի կողմնակալություններ, իսկ հաճույքակենտրոնությունը ստեղծում է հիպերբոլիկ զեղչում և դրականության էֆեկտներ։ Սոցիալական, ընտանեկենտրոն մշակույթը ստեղծում է ներխմբային ֆավորիտիզմ և զանգվածային էֆեկտներ։ Արտահայտիչ հաղորդակցության ոճը ուժեղացնում է շրջանակման էֆեկտները և անեկդոտային համոզիչությունը, իսկ հումորի էֆեկտները և ռեակտիվությունը արտացոլում են կրքոտ միջերկրածովյան բնավորությունը։`, + }, + { + id: 'se', + name: 'Շվեդիա', + flag: '🇸🇪', + region: 'Europe', + rationale: + 'Հավասարազոր, համաձայնության ձգտող, ցածր հաճույքակենտրոնություն, «Lagom» չափավորության մշակույթ', + biases: [93, 70, 10, 58, 76, 97, 30, 85, 50, 17, 44, 80], + confidence: 0.88, + aliases: ['Շվեդ', 'Swedish'], + biasRationale: `Շվեդիան ունի շատ բարձր անհատապաշտություն (71)՝ ծայրահեղ ցածր իշխանական հեռավորությամբ (31) և շատ ցածր մասկուլինությամբ (5)։ Չափավորության «Lagom» մշակույթը ձևավորում է սոցիալական ցանկալիություն, նորմալության կողմնակալություն և բացթողման կողմնակալություն համաձայնության ձգտման միջոցով։ Ցածր մասկուլինությունը ստեղծում է «ավելի քիչ — ավելի լավ» նախընտրություններ և զանգվածային համապատասխանություն խմբային նորմերին։ Առաջադիմական մշակույթը ստեղծում է նորության գրավչություն՝ պահպանելով երկիմաստության խուսափումը, իսկ ատրիբուցիայի հիմնարար սխալը արտացոլում է անհատապաշտական արժանավորության սկզբունքով հավատի համակարգը։`, + }, + { + id: 'ch', + name: 'Շվեյցարիա', + flag: '🇨🇭', + region: 'Europe', + rationale: + 'Անհատապաշտական, անորոշության խուսափման բարձր մակարդակ, իշխանական չափավոր հեռավորություն, զսպված, ճշգրտությամբ առաջնորդվող', + biases: [86, 93, 94, 87, 102, 19, 81, 83, 85, 97, 10, 49], + confidence: 0.84, + aliases: ['Շվեյցարացի', 'Swiss'], + biasRationale: `Շվեյցարիան ունի անհատապաշտության բարձր մակարդակ (68)՝ նկատելի անորոշության խուսափմամբ (58) և չափավոր զսպվածությամբ (IVR 66)։ Ճշգրտությամբ առաջնորդվող մշակույթը ուժեղացնում է զրո-ռիսկի կողմնակալությունը, երկիմաստության խուսափումը և տեղեկատվական կողմնակալությունը։ Բանկային և ժամացույցագործության ավանդույթները ուժեղացնում են մշակման բարդության միջոցով ներգրավվածությունը և հաջորդական հիշողությունը։ Երկարաժամկետ կողմնորոշումը (74) ձևավորում է պարտավորությունների աճ և կորստի-խուսափում, իսկ համաձայնության ձգտող ուղղակի ժողովրդավարությունը ստեղծում է բացթողման կողմնակալություն և «ավելի քիչ — ավելի լավ» նախընտրություններ։`, + }, + { + id: 'th', + name: 'Թաիլանդ', + flag: '🇹🇭', + region: 'Asia', + rationale: + 'Իշխանական մեծ հեռավորություն, կոլեկտիվիստական, անորոշության խուսափման ցածր մակարդակ, զսպված, ներդաշնակություն փնտրող', + biases: [48, 50, 53, 70, 55, 58, 10, 22, 90, 47, 100, 13], + confidence: 0.75, + aliases: ['Թայ', 'Thai', 'Siam'], + biasRationale: `Թաիլանդը ունի իշխանական մեծ հեռավորություն (64)՝ ուժեղ կոլեկտիվիզմով (IDV 20) և անորոշության խուսափման ցածր մակարդակով (64)։ Ներդաշնակություն փնտրող «kreng jai» մշակույթը ձևավորում է սոցիալական ցանկալիություն, բացթողման կողմնակալություն և նորմալության կողմնակալություն հակամարտությունների խուսափման միջոցով։ Իշխանական մեծ հեռավորությունը ստեղծում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ կոլեկտիվիզմը ստեղծում է զանգվածային էֆեկտներ և ներխմբային ֆավորիտիզմ։ Բուդդիստական ազդեցության «mai pen rai» վերաբերմունքը ստեղծում է մարող աֆեկտի կողմնակալություն և դրականության էֆեկտներ։`, + }, + { + id: 'tr', + name: 'Թուրքիա', + flag: '🇹🇷', + region: 'Middle East', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, բանակցային մշակույթ, պատվի վրա հիմնված սոցիալական կոդերով', + biases: [48, 18, 53, 81, 22, 43, 52, 88, 47, 25, 93, 90], + confidence: 0.82, + aliases: ['Թուրք', 'Turkish', 'Türkiye'], + biasRationale: `Թուրքիան ունի իշխանական մեծ հեռավորություն (66)՝ ուժեղ կոլեկտիվիզմով (IDV 37) և անորոշության խուսափման բարձր մակարդակով (85)։ Բանակցություններով հարուստ մշակույթը ուժեղացնում է խարսխման էֆեկտները և շրջանակումը, իսկ պատվի վրա հիմնված սոցիալական կոդերը ձևավորում են ներխմբային ֆավորիտիզմ և խմբային ատրիբուցիայի սխալներ։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության խուսափում և համակարգի արդարացում։ Պարտավորությունների աճը արտացոլում է մշակութային շեշտադրումը հաստատակամության և սոցիալական պարտավորությունների կատարման վրա։`, + }, + { + id: 'ae', + name: 'ԱՄԷ', + flag: '🇦🇪', + region: 'Middle East', + rationale: + 'Շատ բարձր իշխանական հեռավորություն, կոլեկտիվիստական, ապագայի կողմնորոշված, կարգավիճակին ուշադիր, կոսմոպոլիտ', + biases: [48, 54, 80, 90, 53, 88, 20, 57, 79, 15, 86, 50], + confidence: 0.74, + aliases: ['Էմիրացի', 'UAE', 'Emirati', 'Dubai'], + biasRationale: `ԱՄԷ-ն ունի շատ բարձր իշխանական հեռավորություն (90)՝ ուժեղ կոլեկտիվիզմով (IDV 25) և նկատելի զսպվածությամբ։ Կարգավիճակին ուշադիր կոսմոպոլիտ մշակույթը ուժեղացնում է լուսապսակի էֆեկտները, ֆոն Ռեստորֆի տարբերակումը և կոնտրաստի էֆեկտները։ Իշխանական մեծ հեռավորությունը ձևավորում է ավտորիտետային կողմնակալություն և համակարգի արդարացում, իսկ ապագայի կողմնորոշված զարգացման մտածողությունը ստեղծում է նորության գրավչություն։ Մտավոր հաշվապահությունը արտահայտված է լյուքս-առևտրային մշակույթում, իսկ զրո-ռիսկի կողմնակալությունը արտացոլում է պրեմիում որակի և անվտանգության շեշտադրումը։`, + }, + { + id: 'ua', + name: 'Ուկրաինա', + flag: '🇺🇦', + region: 'Europe', + rationale: + 'Չափավոր կոլեկտիվիզմ, անորոշության խուսափման բարձր մակարդակ, զսպված, դիմացկուն, ցածր իշխանական հեռավորություն', + biases: [1, 83, 91, 19, 93, 17, 81, 84, 78, 10, 53], + confidence: 0.68, + aliases: ['Ուկրաինացի', 'Ukrainian'], + biasRationale: `Ուկրաինան ունի չափավոր անհատապաշտություն (25)՝ բարձր անորոշության խուսափմամբ (95) և շատ ցածր հաճույքակենտրոնությամբ (18)։ Պատմական ցնցումներով ձևավորված դիմացկուն մշակույթը ուժեղացնում է մատչելիության էվրիստիկաները և բացասականության կողմնակալությունը։ Անորոշության խուսափման բարձր մակարդակը ստեղծում է երկիմաստության խուսափում և պահպանողականություն, իսկ ծայրահեղ զսպվածությունը ստեղծում է բացթողման կողմնակալություն։ Համայնքային ուժեղ կապերը ձևավորում են ներխմբային ֆավորիտիզմ, իսկ հնարամիտ DIY-մշակույթը ստեղծում է IKEA-ի էֆեկտներ։ Ռեակտիվությունը և ռիսկի փոխհատուցումը արտացոլում են ադապտիվ արձագանքները նեղություններին։`, + }, + { + id: 'gb', + name: 'Միացյալ Թագավորություն', + flag: '🇬🇧', + region: 'Europe', + rationale: + 'Անհատապաշտական, զսպված, ավանդույթներին հարգանք, չոր հումորի մշակույթ', + biases: [20, 97, 13, 30, 71, 19, 88, 105, 12, 17, 91, 83], + confidence: 0.89, + aliases: ['Բրիտանացի', 'Անգլիացի', 'British', 'English', 'UK', 'Britain'], + biasRationale: `Միացյալ Թագավորությունը ունի շատ բարձր անհատապաշտություն (89)՝ ցածր իշխանական հեռավորությամբ (35) և չափավոր հաճույքակենտրոնությամբ (69)։ Զսպված մշակույթը ձևավորում է «ավելի քիչ — ավելի լավ» և կոնտրաստի էֆեկտներ նուրբ հաղորդակցության միջոցով։ Չոր հումորը ուժեղացնում է հումորի և տարօրինակության էֆեկտները, իսկ ավանդույթներին հարգող պահպանողականությունը ստեղծում է տիրապետման և «ջայլամի» էֆեկտներ։ Բարձր անհատապաշտությունը ստեղծում է երրորդ անձի էֆեկտ և ռեակտիվություն, իսկ բացասականության կողմնակալությունը արտացոլում է մշակութային ներքին թերահավատությունը և զսպվածությունը։`, + }, + { + id: 'us', + name: 'ԱՄՆ', + flag: '🇺🇸', + region: 'Americas', + rationale: + 'Անհատապաշտական, անորոշության խուսափման ցածր մակարդակ, մարքեթինգով հագեցած, ակնթարթային վարձատրության մշակույթ', + biases: [77, 79, 69, 50, 80, 22, 83, 37, 71, 91, 44, 74, 78], + confidence: 0.9, + aliases: ['Ամերիկացի', 'American', 'USA'], + biasRationale: `ԱՄՆ-ն ունի բացառիկ բարձր անհատապաշտություն (91) և անորոշության խուսափման ցածր մակարդակ (46), ստեղծելով մշակույթ, որը պարգևատրում է ինքնաառաջխաղացումը և ռիսկի վերցնելը։ Բարձր հաճույքակենտրոնության հետ զուգորդված (68) ամերիկացիները հատկապես զգայուն են ակնթարթային վարձատրության կողմնակալությունների և սեփական դատողություններում գերվստահության նկատմամբ։ Մարքեթինգով հագեցած միջավայրը ուժեղացնում է շրջանակման էֆեկտները, զանգվածային ճնշումը և նորության գրավչությունը։`, + }, + { + id: 'vn', + name: 'Վիետնամ', + flag: '🇻🇳', + region: 'Asia', + rationale: + 'Կոլեկտիվիստական, իշխանական մեծ հեռավորություն, երկարաժամկետ կողմնորոշված, զսպված, ներդաշնակություն փնտրող', + biases: [48, 50, 53, 81, 83, 70, 90, 10, 57, 19, 58, 42], + confidence: 0.73, + aliases: ['Վիետնամցի', 'Vietnamese'], + biasRationale: `Վիետնամը ունի իշխանական մեծ հեռավորություն (70)՝ ուժեղ կոլեկտիվիզմով (IDV 20) և շատ բարձր երկարաժամկետ կողմնորոշմամբ (57)։ Կոնֆուցիական ազդեցության մշակույթը ձևավորում է ավտորիտետային կողմնակալություն, համակարգի արդարացում և սոցիալական ցանկալիություն ներդաշնակության ձգտման միջոցով։ Երկարաժամկետ կողմնորոշումը ստեղծում է պարտավորությունների աճ, կորստի-խուսափում և մտավոր հաշվապահություն։ Կոլեկտիվիզմը ստեղծում է զանգվածային էֆեկտներ և ներխմբային ֆավորիտիզմ, իսկ զսպվածությունը (IVR 35) դրսևորվում է որպես բացթողման կողմնակալություն և նորմալության կողմնակալություն։`, + }, + ], + + regions: { + All: 'Բոլորը', + Americas: 'Ամերիկա', + Europe: 'Եվրոպա', + Asia: 'Ասիա', + 'Middle East': 'Մերձավոր Արևելք', + Africa: 'Աֆրիկա', + Oceania: 'Օվկիանիա', + }, + + ui: { + chooseYour: 'Ընտրիր քո', + cyclingWords: ['Պերսոնան', 'Հակառակորդին', 'Թիրախային լսարանը', 'Մրցակցին'], + cyclingBoldWord: 'Պերսոնան', + tagline: 'Միակ տեղը, որտեղ տեսնում ես քո բիզնեսի ապագան։', + subTaglineLead: 'Դուք խնդրեցիք — մենք ստեղծեցինք։ ', + subTagline: + 'Ընտրիր երկիր՝ ինքնաբերաբար լրացնելու կոգնիտիվ կողմնակալությունների պրոֆիլը։ Յուրաքանչյուր ձևանմուշ առանձնացնում է 10–15 կողմնակալություն բարձր մշակութային տարածվածությամբ — պատրաստ օգտագործման Պերսոնայի կառուցողում։', + statTemplates: 'Ազգային ձևանմուշներ', + statReady: 'Պատրաստ ենք, երբ դու ես', + loadingMap: 'Բեռնվում է քարտեզը…', + tooltipBiases: 'կողմնակալություն', + tooltipHint: 'Սեղմիր՝ կողմնակալությունների պրոֆիլը տեսնելու համար', + searchPlaceholder: 'Փնտրիր երկիր կամ ազգություն...', + moreCountries: (n: number) => `+${n} ևս երկիր`, + showLess: 'Ցույց տալ ավելի քիչ', + matchSuffix: '% համապատասխանություն', + whyTheseBiases: 'Ինչո՞ւ այս կողմնակալությունները', + whyApproxNote: + 'Սա մոտավոր գնահատական է, որն արտացոլում է, թե որքանով է կողմնակալությունների ձևանմուշը համապատասխանում այս երկրի համար փաստաթղթավորված վարքագծային օրինաչափություններին։', + hofstedeNote: + 'Հիմնված է Հոֆստեդեի մշակութային չափումների և վարքագծային հետազոտությունների ընդգրկման վրա։', + useInPersonaBuilder: 'Օգտագործել Պերսոնայի կառուցողում →', + emptyStateLead: 'Ընտրիր երկիրը և ', + emptyStateLink: 'տես քո բիզնեսի ապագան', + emptyStateHint: 'Սեղմիր՝ կողմնակալությունների ձևանմուշը բեռնելու համար', + footerBiases: 'կողմնակալություն', + footerConfidence: 'վստահություն', + }, +}; diff --git a/src/data/countryBias/index.ts b/src/data/countryBias/index.ts new file mode 100644 index 0000000..e90a1d5 --- /dev/null +++ b/src/data/countryBias/index.ts @@ -0,0 +1,18 @@ +import { en } from './en'; +import { hy } from './hy'; +import { ru } from './ru'; + +export const countryBiasByLocale = { + en, + ru, + hy, +} as const; + +export { REGION_COLORS } from './regionColors'; +export type { + Country, + CountryBiasLocale, + CountryUI, + RegionKey, + RegionLabels, +} from './types'; diff --git a/src/data/countryBias/regionColors.ts b/src/data/countryBias/regionColors.ts new file mode 100644 index 0000000..8e38a12 --- /dev/null +++ b/src/data/countryBias/regionColors.ts @@ -0,0 +1,8 @@ +export const REGION_COLORS: Record = { + Americas: '#7C5CFC', + Europe: '#10B981', + Asia: '#F97316', + 'Middle East': '#EAB308', + Africa: '#EC4899', + Oceania: '#3B82F6', +}; diff --git a/src/data/countryBias/ru.ts b/src/data/countryBias/ru.ts new file mode 100644 index 0000000..62d6ba0 --- /dev/null +++ b/src/data/countryBias/ru.ts @@ -0,0 +1,682 @@ +import type { CountryBiasLocale } from './types'; + +export const ru: CountryBiasLocale = { + countries: [ + { + id: 'ar', + name: 'Аргентина', + flag: '🇦🇷', + region: 'Americas', + rationale: + 'Коллективистская, высокое избегание неопределённости, эмоционально выразительная, краткосрочно-ориентированная', + biases: [50, 53, 93, 79, 37, 22, 55, 91, 75, 100, 13], + confidence: 0.74, + aliases: ['Аргентинец', 'Аргентинский', 'Argentine', 'Argentinian'], + biasRationale: `Аргентина имеет умеренно коллективистскую культуру (IDV 46) с высоким избеганием неопределённости (86) и очень высокой степенью допущения (62). Это создаёт культуру, где групповой консенсус и эмоциональное повествование определяют решения, тогда как избегание неопределённости подталкивает к знакомым опциям. Высокая степень допущения проявляется как восприимчивость к мгновенному вознаграждению и предубеждениям к позитивности.`, + }, + { + id: 'am', + name: 'Армения', + flag: '🇦🇲', + region: 'Middle East', + rationale: + 'Коллективистская, высокая дистанция власти, сохраняющая традиции, связанная с диаспорой, ориентированная на семью', + biases: [48, 53, 50, 88, 81, 19, 47, 90, 70, 25, 52], + confidence: 0.67, + aliases: ['Армянин', 'Армянский', 'Айастан', 'Armenian', 'Hayastan'], + biasRationale: `Армения демонстрирует высокую дистанцию власти и сильный коллективизм, укоренённый в древних культурных традициях и глубокой семейной структуре. Опыт диаспоры усиливает ингрупповой фаворитизм и эффекты владения вокруг культурного наследия. Высокое избегание неопределённости и долгосрочная ориентация, выработанные веками устойчивости, формируют консерватизм и эскалацию обязательств в принятии решений.`, + }, + { + id: 'au', + name: 'Австралия', + flag: '🇦🇺', + region: 'Oceania', + rationale: + 'Индивидуалистическая, антиавторитарная, толерантная к риску, прагматично-непринуждённая', + biases: [91, 13, 44, 79, 80, 78, 55, 12, 74, 77, 71, 37], + confidence: 0.87, + aliases: ['Австралиец', 'Австралийский', 'Australian', 'Aussie'], + biasRationale: `Австралия имеет очень высокий индивидуализм (90) и допущение (71) при заметно низкой дистанции власти (38). Антиавторитарная культура «синдрома высокого мака» подпитывает реактивность и фундаментальную ошибку атрибуции, а высокое допущение порождает гиперболическое дисконтирование и эффекты позитивности. Сильный индивидуализм формирует иллюзорное превосходство и сверхуверенность в собственных суждениях.`, + }, + { + id: 'at', + name: 'Австрия', + flag: '🇦🇹', + region: 'Europe', + rationale: + 'Умеренный индивидуализм, высокое избегание неопределённости, маскулинно-достиженческая, структурированная', + biases: [86, 93, 69, 44, 19, 102, 85, 87, 81, 20, 94], + confidence: 0.8, + aliases: ['Австриец', 'Австрийский', 'Austrian'], + biasRationale: `Австрия имеет высокий показатель маскулинности (79) и избегания неопределённости (70) при умеренном индивидуализме (55). Достиженческая культура в сочетании с потребностью в структуре формирует предубеждение к нулевому риску и избегание неоднозначности. Высокая маскулинность порождает сверхуверенность и фундаментальную ошибку атрибуции, а австрийская склонность к деталям создаёт опору на систематическую обработку и поиск информации.`, + }, + { + id: 'be', + name: 'Бельгия', + flag: '🇧🇪', + region: 'Europe', + rationale: + 'Высокое избегание неопределённости, умеренный индивидуализм, стремление к консенсусу, лингвистически разделённая', + biases: [93, 86, 19, 50, 70, 94, 92, 10, 58, 102, 85], + confidence: 0.79, + aliases: ['Бельгиец', 'Бельгийский', 'Belgian'], + biasRationale: `Бельгия имеет очень высокое избегание неопределённости (94) при умеренном индивидуализме (75) и низком допущении (57). Сильное избегание неопределённости формирует избегание неоднозначности и предубеждение к нулевому риску, а консенсусная культура между лингвистическими сообществами порождает эффект подражания и социальную желательность. Сдержанность вносит вклад в предубеждение к бездействию и нормальностное предубеждение.`, + }, + { + id: 'br', + name: 'Бразилия', + flag: '🇧🇷', + region: 'Americas', + rationale: + 'Высокая дистанция власти, коллективистская, потворствующая, эмоционально выразительная', + biases: [79, 55, 50, 37, 13, 75, 100, 22, 41, 53, 48, 84], + confidence: 0.82, + aliases: ['Бразилец', 'Бразильский', 'Brazilian', 'Brasil'], + biasRationale: `Бразилия имеет высокую дистанцию власти (69) и очень высокое допущение (59) при сильном коллективизме (IDV 38). Потворствующая, эмоционально выразительная культура формирует гиперболическое дисконтирование и эффекты позитивности, а коллективизм порождает эффект подражания и ингрупповые предубеждения. Высокая дистанция власти усиливает авторитарное предубеждение, а яркая традиция повествования делает анекдотические свидетельства особенно убедительными.`, + }, + { + id: 'ca', + name: 'Канада', + flag: '🇨🇦', + region: 'Americas', + rationale: + 'Индивидуалистическая, эгалитарная, мультикультурно-консенсусная, умеренное избегание неопределённости', + biases: [70, 50, 77, 55, 91, 80, 22, 93, 97, 10, 13, 44], + confidence: 0.87, + aliases: ['Канадец', 'Канадский', 'Canadian'], + biasRationale: `Канада имеет высокий индивидуализм (80) при низкой дистанции власти (39) и умеренном допущении (68). Мультикультурная консенсусная культура порождает социальную желательность и эффект подражания наряду с индивидуалистическим иллюзорным превосходством. Умеренное избегание неопределённости (48) в сочетании с нормами вежливости создаёт склонность к предубеждению к бездействию, а допущение порождает обращение к новизне и эффекты позитивности.`, + }, + { + id: 'cl', + name: 'Чили', + flag: '🇨🇱', + region: 'Americas', + rationale: + 'Умеренный коллективизм, высокое избегание неопределённости, классово-сознательная, сдержанная', + biases: [93, 86, 48, 90, 19, 83, 10, 30, 50, 57, 81], + confidence: 0.73, + aliases: ['Чилиец', 'Чилийский', 'Chilean'], + biasRationale: `Чили имеет высокое избегание неопределённости (86) при умеренном коллективизме (IDV 23) и заметно низком допущении (28). Высокое избегание неопределённости создаёт сильные предубеждения к неоднозначности и нулевому риску, а сдержанность порождает предубеждение к бездействию и эффекты страуса. Классово-сознательные социальные иерархии формируют авторитарное предубеждение и оправдание системы, а потерь-избегание усиливается осознанием экономической волатильности.`, + }, + { + id: 'cn', + name: 'Китай', + flag: '🇨🇳', + region: 'Asia', + rationale: + 'Коллективистская, высокая дистанция власти, долгосрочно-стратегическая, сохраняющая лицо', + biases: [48, 81, 90, 22, 18, 57, 83, 50, 42, 104, 53, 70, 19], + confidence: 0.88, + aliases: ['Китаец', 'Китайский', 'Chinese', 'Zhongguo'], + biasRationale: `Китай имеет очень высокую долгосрочную ориентацию (87) и дистанцию власти (80) при сильном коллективизме (IDV 20). Долгосрочно-стратегическая культура формирует эскалацию обязательств, потерь-избегание и ментальный учёт. Высокая дистанция власти порождает авторитарное предубеждение и оправдание системы, а сохраняющий лицо коллективизм создаёт социальную желательность, эффекты подражания и сильный ингрупповой фаворитизм.`, + }, + { + id: 'co', + name: 'Колумбия', + flag: '🇨🇴', + region: 'Americas', + rationale: + 'Коллективистская, высокая дистанция власти, потворствующая, ориентированная на семью, предпринимательская', + biases: [48, 53, 79, 55, 37, 50, 13, 75, 22, 41, 100], + confidence: 0.72, + aliases: ['Колумбиец', 'Колумбийский', 'Colombian'], + biasRationale: `Колумбия имеет высокую дистанцию власти (67) и очень высокое допущение (83) при сильном коллективизме (IDV 13). Высокопотворствующая культура формирует гиперболическое дисконтирование и эффекты позитивности, а коллективизм и семейная ориентация порождают ингрупповой фаворитизм и эффекты подражания. Предпринимательский дух в сочетании с традицией повествования создаёт восприимчивость к ошибке «горячей руки» и яркой нарративной убедительности.`, + }, + { + id: 'cz', + name: 'Чехия', + flag: '🇨🇿', + region: 'Europe', + rationale: + 'Индивидуалистическая, прагматичная, высокое избегание неопределённости, сдержанная, скептичная', + biases: [93, 19, 91, 30, 10, 17, 86, 83, 87, 71, 25], + confidence: 0.74, + aliases: ['Чех', 'Чешский', 'Czech', 'Czechia'], + biasRationale: `Чехия имеет высокий индивидуализм (58) с заметным избеганием неопределённости (74) и очень низким допущением (29). Сдержанная скептичная культура порождает предубеждения к страусу и бездействию наряду с предубеждением к негативности. Высокое избегание неопределённости формирует избегание неоднозначности и консерватизм, а прагматичный индивидуализм создаёт реактивность к внешнему давлению и вовлечённость через сложность обработки.`, + }, + { + id: 'dk', + name: 'Дания', + flag: '🇩🇰', + region: 'Europe', + rationale: + 'Высокий индивидуализм, эгалитарная, фемининная культура, низкая дистанция власти, потворствующая', + biases: [70, 58, 97, 10, 50, 55, 80, 13, 85, 93, 44], + confidence: 0.83, + aliases: ['Датчанин', 'Датский', 'Danish', 'Dane'], + biasRationale: `Дания имеет очень высокий индивидуализм (74) при крайне низкой дистанции власти (18) и высоком допущении (70). Эгалитарная культура «Янтелаген» формирует социальную желательность и нормальностное предубеждение, ограничивая самопрезентацию. Низкая маскулинность (16) порождает консенсус через эффект подражания, а допущение создаёт обращение к новизне и предубеждения к позитивности. Фемининная культура ценит простоту по принципу «меньше — лучше».`, + }, + { + id: 'eg', + name: 'Египет', + flag: '🇪🇬', + region: 'Middle East', + rationale: + 'Высокая дистанция власти, коллективистская, сдержанная, заякоренная в традициях, высокое избегание неопределённости', + biases: [48, 53, 90, 19, 47, 93, 52, 70, 88, 58, 25, 30], + confidence: 0.72, + aliases: ['Египтянин', 'Египетский', 'Egyptian', 'Misr'], + biasRationale: `Египет имеет очень высокую дистанцию власти (70) при сильном коллективизме и высокой сдержанности. Заякоренная в традициях культура с прочной авторитарной структурой формирует авторитарное предубеждение, оправдание системы и консерватизм. Высокое избегание неопределённости порождает избегание неоднозначности, а коллективизм создаёт ингрупповой фаворитизм и аутгрупповую гомогенность. Сдержанность проявляется как эффект страуса и социальная желательность.`, + }, + { + id: 'et', + name: 'Эфиопия', + flag: '🇪🇹', + region: 'Africa', + rationale: + 'Коллективистская, общинная, высокая дистанция власти, устная традиция, духовно-ориентированная', + biases: [48, 53, 37, 47, 50, 31, 96, 76, 19, 70, 58], + confidence: 0.66, + aliases: ['Эфиоп', 'Эфиопский', 'Ethiopian'], + biasRationale: `Эфиопия демонстрирует высокую дистанцию власти и сильный коллективизм, укоренённые в общинной социальной структуре и глубоких духовных традициях. Богатая устная традиция повествования делает анекдотические свидетельства и ошибку конъюнкции особенно влиятельными. Авторитарное предубеждение и ошибка справедливого мира усиливаются религиозными рамками, а общинное принятие решений порождает эффекты подражания и ингрупповой фаворитизм.`, + }, + { + id: 'fi', + name: 'Финляндия', + flag: '🇫🇮', + region: 'Europe', + rationale: + 'Индивидуалистическая, низкая дистанция власти, высокое избегание неопределённости, сдержанная, эгалитарная', + biases: [93, 86, 10, 30, 70, 87, 102, 85, 17, 94, 58, 19], + confidence: 0.83, + aliases: ['Финн', 'Финский', 'Suomi', 'Finnish'], + biasRationale: `Финляндия имеет высокий индивидуализм (63) при очень низкой дистанции власти (33), высоком избегании неопределённости (59) и заметно низком допущении (57). Сдержанная культура «sisu» формирует предубеждения к бездействию и эффекты страуса, а избегание неопределённости создаёт избегание неоднозначности и предубеждение к нулевому риску. Методичный финский подход порождает вовлечённость через сложность обработки и предпочтение последовательного запоминания, а социальная желательность отражает сдержанный стиль общения.`, + }, + { + id: 'fr', + name: 'Франция', + flag: '🇫🇷', + region: 'Europe', + rationale: + 'Индивидуалистическая, но иерархичная, движимая эстетикой, интеллектуально-противоречивая', + biases: [54, 20, 91, 89, 92, 97, 104, 71, 14, 83, 69, 87], + confidence: 0.88, + aliases: ['Француз', 'Французский', 'French'], + biasRationale: `Франция имеет высокий индивидуализм (71) при заметной дистанции власти (68) и высоком избегании неопределённости (86). Эстетико-ориентированная культура усиливает эффекты ореола и контраста, а интеллектуальная противоречивость подпитывает реактивность и эффекты обратной отдачи. Высокое избегание неопределённости в сочетании с индивидуализмом создаёт уникальный профиль, где сверхуверенность встречается с потерь-избеганием, а упор на интеллектуальную строгость формирует вовлечённость через сложность обработки.`, + }, + { + id: 'de', + name: 'Германия', + flag: '🇩🇪', + region: 'Europe', + rationale: + 'Ориентированная на правила, инженерное мышление, движимая точностью, умеренный индивидуализм', + biases: [87, 94, 86, 19, 25, 49, 102, 85, 81, 93, 83, 17], + confidence: 0.89, + aliases: ['Немец', 'Немецкий', 'Германский', 'German', 'Deutsche'], + biasRationale: `Германия имеет высокий индивидуализм (67) при сильном избегании неопределённости (65) и высокой долгосрочной ориентации (83). Инженерно-точностная культура формирует вовлечённость через сложность обработки, информационное предубеждение и предпочтение последовательного запоминания. Избегание неопределённости порождает предубеждения к нулевому риску и неоднозначности, а долгосрочная ориентация усиливает эскалацию обязательств и потерь-избегание. Ориентированный на правила менталитет создаёт консерватизм и предубеждение подтверждения.`, + }, + { + id: 'gr', + name: 'Греция', + flag: '🇬🇷', + region: 'Europe', + rationale: + 'Склонная к коллективизму, очень высокое избегание неопределённости, высокая дистанция власти, потворствующая', + biases: [93, 86, 48, 53, 79, 55, 91, 88, 19, 37, 100, 81], + confidence: 0.75, + aliases: ['Грек', 'Греческий', 'Hellenic', 'Greek', 'Hellas'], + biasRationale: `Греция имеет самое высокое избегание неопределённости в Европе (100) при высокой дистанции власти (60) и умеренном коллективизме (IDV 35). Экстремальное избегание неопределённости формирует предубеждения к неоднозначности и нулевому риску, а потворствующая средиземноморская культура (IVR 50) порождает гиперболическое дисконтирование и эффекты позитивности. Сильный семейный коллективизм создаёт ингрупповой фаворитизм, а риторическая традиция усиливает убедительность анекдотических свидетельств.`, + }, + { + id: 'in', + name: 'Индия', + flag: '🇮🇳', + region: 'Asia', + rationale: + 'Иерархическая, коллективистская, долгосрочно-ориентированная, культура торга', + biases: [48, 53, 25, 81, 47, 96, 57, 18, 36, 42, 50, 88, 90], + confidence: 0.85, + aliases: ['Индиец', 'Индийский', 'Indian', 'Bharat'], + biasRationale: `Индия имеет очень высокую дистанцию власти (77) при сильной долгосрочной ориентации (51) и умеренном коллективизме (IDV 48). Иерархическая культура формирует авторитарное предубеждение и оправдание системы, а традиция торга усиливает эффекты якорения и ментального учёта. Долгосрочная ориентация порождает эскалацию обязательств, а традиция повествования делает ошибку конъюнкции и анекдотические нарративы крайне убедительными.`, + }, + { + id: 'id', + name: 'Индонезия', + flag: '🇮🇩', + region: 'Asia', + rationale: + 'Коллективистская, высокая дистанция власти, ищущая гармонии, духовно-ориентированная', + biases: [48, 50, 70, 58, 10, 30, 47, 90, 53, 31, 19, 42], + confidence: 0.78, + aliases: ['Индонезиец', 'Индонезийский', 'Indonesian'], + biasRationale: `Индонезия имеет очень высокую дистанцию власти (78) при сильном коллективизме (IDV 14) и низком допущении (38). Ищущая гармонии культура «musyawarah» формирует социальную желательность, предубеждение к бездействию и нормальностное предубеждение. Высокая дистанция власти порождает авторитарное предубеждение и оправдание системы, а духовная основа усиливает ошибку справедливого мира и субъективное подтверждение. Сдержанность проявляется как избегание конфронтации через эффект страуса.`, + }, + { + id: 'ir', + name: 'Иран', + flag: '🇮🇷', + region: 'Middle East', + rationale: + 'Высокая дистанция власти, коллективистская, высокое избегание неопределённости, сдержанная, сохраняющая традиции', + biases: [48, 90, 19, 93, 53, 52, 88, 47, 30, 10, 70, 89], + confidence: 0.68, + aliases: ['Иранец', 'Персидский', 'Персия', 'Iranian', 'Persian'], + biasRationale: `Иран имеет очень высокую дистанцию власти и избегание неопределённости при сильном коллективизме и сдержанности. Сохраняющая традиции культура формирует консерватизм, оправдание системы и авторитарное предубеждение. Высокое избегание неопределённости порождает избегание неоднозначности, а коллективизм усиливает ингрупповой фаворитизм и аутгрупповую гомогенность. Сдержанность и культурная устойчивость создают предубеждения к страусу и бездействию, а эффекты обратной отдачи отражают сопротивление внешним нарративам.`, + }, + { + id: 'ie', + name: 'Ирландия', + flag: '🇮🇪', + region: 'Europe', + rationale: + 'Индивидуалистическая, низкая дистанция власти, маскулинная, краткосрочно-ориентированная, очень потворствующая', + biases: [13, 37, 79, 55, 80, 91, 44, 77, 12, 100, 75], + confidence: 0.76, + aliases: ['Ирландец', 'Ирландский', 'Irish', 'Eire'], + biasRationale: `Ирландия имеет высокий индивидуализм (70) при низкой дистанции власти (28) и очень высоком допущении (65). Культура повествования делает анекдотические свидетельства и эффекты юмора особенно мощными. Высокое допущение формирует гиперболическое дисконтирование и эффекты позитивности, а индивидуализм порождает иллюзорное превосходство и реактивность. Краткосрочная ориентация (LTO 24) создаёт обращение к новизне, а общительная культура усиливает эффекты странности и Барнума.`, + }, + { + id: 'il', + name: 'Израиль', + flag: '🇮🇱', + region: 'Middle East', + rationale: + 'Прямой стиль общения, культура стартапов, заботящаяся о безопасности, низкая дистанция власти', + biases: [69, 91, 89, 74, 80, 83, 1, 36, 79, 84, 78, 77], + confidence: 0.84, + aliases: ['Израильтянин', 'Израильский', 'Israeli'], + biasRationale: `Израиль имеет низкую дистанцию власти (13) при высоком индивидуализме (54) и умеренном избегании неопределённости (81). Стартап-культура «хуцпы» формирует сверхуверенность, эффект Даннинга-Крюгера и иллюзорное превосходство, а прямой стиль общения порождает реактивность и эффекты обратной отдачи. Озабоченность безопасностью усиливает эвристику доступности и пренебрежение вероятностями, а инновационная экономика создаёт обращение к новизне и эффект IKEA.`, + }, + { + id: 'it', + name: 'Италия', + flag: '🇮🇹', + region: 'Europe', + rationale: + 'Индивидуалистическая, высокое избегание неопределённости, маскулинная, движимая эстетикой, ориентированная на семью', + biases: [54, 93, 86, 20, 53, 69, 14, 92, 104, 83, 88, 79], + confidence: 0.84, + aliases: ['Итальянец', 'Итальянский', 'Italian'], + biasRationale: `Италия имеет высокий индивидуализм (76), маскулинность (70) и избегание неопределённости (75). Эстетически-одержимая культура усиливает эффекты ореола и превосходства изображения, а высокое избегание неопределённости создаёт предубеждения к неоднозначности и нулевому риску. Маскулинность формирует сверхуверенность и конкурентное обрамление через эффекты контраста и приманки. Семейный коллективизм на местном уровне порождает ингрупповой фаворитизм, а потерь-избегание и эффект владения усиливаются ценностями сохранения наследия.`, + }, + { + id: 'jp', + name: 'Япония', + flag: '🇯🇵', + region: 'Asia', + rationale: + 'Коллективистская, экстремально высокое избегание неопределённости, иерархическая, перфекционистская в деталях', + biases: [50, 90, 19, 48, 70, 93, 86, 101, 54, 102, 81, 83, 10], + confidence: 0.9, + aliases: ['Японец', 'Японский', 'Japanese', 'Nippon'], + biasRationale: `Япония имеет крайне высокое избегание неопределённости (92) и долгосрочную ориентацию (88) при сильной маскулинности (95) и коллективизме (IDV 46). Перфекционистская культура формирует предубеждение к нулевому риску, избегание неоднозначности и тщательную обработку через последовательное запоминание. Высокий коллективизм порождает эффекты подражания и социальную желательность, а долгосрочная ориентация усиливает эскалацию обязательств и потерь-избегание. Иерархическая структура создаёт авторитарное предубеждение и оправдание системы.`, + }, + { + id: 'ke', + name: 'Кения', + flag: '🇰🇪', + region: 'Africa', + rationale: + 'Общинная, мобильно-ориентированная экономика, изобретательная, традиция устного повествования', + biases: [37, 53, 79, 41, 76, 40, 84, 96, 69, 55, 48, 50], + confidence: 0.73, + aliases: ['Кениец', 'Кенийский', 'Kenyan'], + biasRationale: `Кения демонстрирует умеренный коллективизм с предпринимательским динамизмом и mobile-first цифровой экономикой. Традиция устного повествования делает анекдотические свидетельства и ошибку конъюнкции крайне убедительными. Общинное принятие решений порождает ингрупповой фаворитизм и эффекты подражания, а изобретательная предпринимательская культура формирует иллюзию контроля, сверхуверенность и эффект IKEA от самостоятельно созданных решений.`, + }, + { + id: 'my', + name: 'Малайзия', + flag: '🇲🇾', + region: 'Asia', + rationale: + 'Очень высокая дистанция власти, коллективистская, умеренное избегание неопределённости, ищущая гармонии', + biases: [48, 50, 53, 90, 70, 58, 10, 47, 22, 88, 19], + confidence: 0.75, + aliases: ['Малазиец', 'Малайзийский', 'Malaysian'], + biasRationale: `Малайзия имеет самую высокую дистанцию власти в мире (100) при сильном коллективизме (IDV 26) и умеренном избегании неопределённости (36). Экстремальная дистанция власти формирует авторитарное предубеждение и оправдание системы, а ищущий гармонии коллективизм порождает эффекты подражания, ингрупповой фаворитизм и социальную желательность. Культура «сохранения лица» усиливает предубеждение к бездействию и нормальностное предубеждение, а эффекты обрамления усиливаются мультиэтнической традицией консенсуса.`, + }, + { + id: 'mx', + name: 'Мексика', + flag: '🇲🇽', + region: 'Americas', + rationale: + 'Коллективистская, ориентированная на семью, высокая дистанция власти, выразительно-потворствующая', + biases: [53, 48, 79, 37, 100, 7, 55, 75, 22, 84, 50, 41], + confidence: 0.82, + aliases: ['Мексиканец', 'Мексиканский', 'Mexican'], + biasRationale: `Мексика имеет высокую дистанцию власти (81) при сильном коллективизме (IDV 30) и очень высоком допущении (97). Семейно-ориентированная культура формирует ингрупповой фаворитизм и авторитарное предубеждение, а экстремальное допущение создаёт гиперболическое дисконтирование и эффекты позитивности. Эмоционально выразительная культура усиливает настроенческо-конгруэнтную память и эффект угасания аффекта, а анекдотическое повествование и восприимчивость к эффекту Барнума отражают тёплую межличностную традицию.`, + }, + { + id: 'ma', + name: 'Марокко', + flag: '🇲🇦', + region: 'Africa', + rationale: + 'Высокая дистанция власти, коллективистская, высокое избегание неопределённости, сдержанная, ориентированная на традиции', + biases: [48, 53, 93, 19, 90, 47, 70, 52, 88, 10, 30, 18], + confidence: 0.67, + aliases: ['Марокканец', 'Марокканский', 'Moroccan', 'Maghreb'], + biasRationale: `Марокко имеет высокую дистанцию власти (70) при сильном коллективизме (IDV 25) и высоком избегании неопределённости (68). Ориентированная на традиции культура формирует консерватизм, авторитарное предубеждение и оправдание системы. Высокое избегание неопределённости порождает избегание неоднозначности, а коллективизм усиливает ингрупповой фаворитизм и аутгрупповую гомогенность. Базарная переговорная культура усиливает эффекты якорения, а сдержанность проявляется как эффекты бездействия и страуса.`, + }, + { + id: 'nl', + name: 'Нидерланды', + flag: '🇳🇱', + region: 'Europe', + rationale: + 'Высокий индивидуализм, эгалитарная, прямые коммуникаторы, низкая дистанция власти, потворствующая', + biases: [77, 91, 44, 80, 79, 55, 94, 87, 71, 97, 74, 13], + confidence: 0.87, + aliases: ['Голландец', 'Голландский', 'Dutch', 'Holland'], + biasRationale: `Нидерланды имеют очень высокий индивидуализм (80) при очень низкой дистанции власти (38) и высоком допущении (68). Прямая эгалитарная культура «полдермодели» формирует иллюзорное превосходство, реактивность и фундаментальную ошибку атрибуции. Высокое допущение порождает гиперболическое дисконтирование и эффекты позитивности, а аналитическая торговая традиция создаёт информационное предубеждение и вовлечённость через сложность обработки. Голландская прямота усиливает эффект третьего лица и склонность к Даннингу-Крюгеру.`, + }, + { + id: 'nz', + name: 'Новая Зеландия', + flag: '🇳🇿', + region: 'Oceania', + rationale: + 'Индивидуалистическая, эгалитарная, антипретенциозная, прагматичная, очень потворствующая', + biases: [91, 44, 77, 13, 55, 80, 79, 70, 12, 97, 58, 74], + confidence: 0.82, + aliases: ['Новозеландец', 'Новозеландский', 'Kiwi', 'Aotearoa'], + biasRationale: `Новая Зеландия имеет высокий индивидуализм (79) при низкой дистанции власти (22) и высоком допущении (75). Антипретенциозная культура «высокого мака» создаёт реактивность и социальную желательность, а эгалитаризм формирует фундаментальную ошибку атрибуции. Высокое допущение порождает гиперболическое дисконтирование и эффекты позитивности. Прагматичная культура киви ценит эффекты юмора и простоту по принципу «меньше — лучше», а нормальностное предубеждение отражает расслабленную ориентацию на образ жизни.`, + }, + { + id: 'ng', + name: 'Нигерия', + flag: '🇳🇬', + region: 'Africa', + rationale: + 'Коллективистская, высокая дистанция власти, предпринимательская, ориентированная на веру', + biases: [48, 47, 31, 37, 40, 75, 69, 79, 78, 53, 41, 76], + confidence: 0.73, + aliases: ['Нигериец', 'Нигерийский', 'Nigerian', 'Naija'], + biasRationale: `Нигерия имеет высокую дистанцию власти (80) при сильном коллективизме (IDV 30) и умеренном допущении (84). Ориентированная на веру культура усиливает ошибку справедливого мира и субъективное подтверждение, а предпринимательская культура «хастла» формирует сверхуверенность, компенсацию риска и иллюзию контроля. Высокое допущение создаёт гиперболическое дисконтирование, а устная традиция делает анекдотические свидетельства и эффекты Барнума крайне убедительными.`, + }, + { + id: 'no', + name: 'Норвегия', + flag: '🇳🇴', + region: 'Europe', + rationale: + 'Высокий индивидуализм, очень низкая дистанция власти, фемининная, потворствующая, эгалитарная', + biases: [70, 58, 10, 97, 55, 80, 50, 93, 44, 13, 85], + confidence: 0.84, + aliases: ['Норвежец', 'Норвежский', 'Norwegian'], + biasRationale: `Норвегия имеет высокий индивидуализм (69) при крайне низкой дистанции власти (31) и очень низкой маскулинности (8). Глубоко эгалитарная культура «Янтелаген» формирует социальную желательность и нормальностное предубеждение, подавляя самопрезентацию. Низкая маскулинность порождает консенсус через эффект подражания и предпочтения по принципу «меньше — лучше». Высокое допущение (55) создаёт эффекты позитивности и обращение к новизне, а структурированное общество порождает предубеждение к бездействию в принятии решений.`, + }, + { + id: 'pk', + name: 'Пакистан', + flag: '🇵🇰', + region: 'Asia', + rationale: + 'Очень высокая дистанция власти, коллективистская, сдержанная, ориентированная на традиции, маскулинная', + biases: [48, 53, 47, 90, 50, 19, 52, 70, 30, 10, 88, 43], + confidence: 0.72, + aliases: ['Пакистанец', 'Пакистанский', 'Pakistani'], + biasRationale: `Пакистан имеет очень высокую дистанцию власти (55) и коллективизм (IDV 14) при высокой маскулинности (50) и крайне низком допущении (0). Ориентированная на традиции культура с прочной авторитарной структурой формирует авторитарное предубеждение, оправдание системы и консерватизм. Экстремальная сдержанность порождает предубеждения к страусу и бездействию, а коллективизм создаёт ингрупповой фаворитизм, эффекты подражания и аутгрупповую гомогенность. Ошибка справедливого мира усиливается религиозными и социальными рамками.`, + }, + { + id: 'pe', + name: 'Перу', + flag: '🇵🇪', + region: 'Americas', + rationale: + 'Высокая дистанция власти, коллективистская, умеренное избегание неопределённости, сдержанная', + biases: [48, 53, 50, 19, 90, 10, 30, 47, 79, 37, 88], + confidence: 0.68, + aliases: ['Перуанец', 'Перуанский', 'Peruvian'], + biasRationale: `Перу имеет высокую дистанцию власти (64) при сильном коллективизме (IDV 16) и умеренном избегании неопределённости (87). Иерархическая культура формирует авторитарное предубеждение и оправдание системы, а коллективизм порождает ингрупповой фаворитизм и эффекты подражания. Высокое избегание неопределённости создаёт консерватизм, а сдержанность (IVR 46) проявляется как эффекты бездействия и страуса. Анекдотические традиции повествования остаются влиятельными в принятии решений.`, + }, + { + id: 'ph', + name: 'Филиппины', + flag: '🇵🇭', + region: 'Asia', + rationale: + 'Высокая дистанция власти, коллективистская, очень высокое допущение, ориентированная на семью', + biases: [48, 53, 79, 55, 50, 13, 37, 75, 100, 47, 70, 41], + confidence: 0.74, + aliases: ['Филиппинец', 'Филиппинский', 'Filipino', 'Filipina', 'Pinoy'], + biasRationale: `Филиппины имеют высокую дистанцию власти (94) при сильном коллективизме (IDV 32) и очень высоком допущении (42). Общинная культура «bayanihan» формирует ингрупповой фаворитизм и эффекты подражания, а уважение к авторитету порождает авторитарное предубеждение. Высокое допущение создаёт гиперболическое дисконтирование и эффекты позитивности. Тёплая, юмор-ориентированная культура усиливает эффекты юмора и восприимчивость к Барнуму, а эффект угасания аффекта отражает устойчивое отношение «bahala na».`, + }, + { + id: 'pl', + name: 'Польша', + flag: '🇵🇱', + region: 'Europe', + rationale: + 'Индивидуалистическая, высокое избегание неопределённости, маскулинная, сдержанная, прагматичная', + biases: [93, 86, 19, 69, 44, 83, 81, 10, 30, 17, 25, 87], + confidence: 0.8, + aliases: ['Поляк', 'Польский', 'Polish', 'Pole'], + biasRationale: `Польша имеет высокий индивидуализм (60) при очень высоком избегании неопределённости (93) и низком допущении (29). Сильное избегание неопределённости формирует предубеждения к неоднозначности и нулевому риску, а сдержанность порождает предубеждение к бездействию и эффекты страуса. Высокая маскулинность (64) создаёт сверхуверенность и фундаментальную ошибку атрибуции. Долгосрочная ориентация (38) в сочетании с исторической осторожностью порождает потерь-избегание, эскалацию обязательств и предубеждение к негативности.`, + }, + { + id: 'pt', + name: 'Португалия', + flag: '🇵🇹', + region: 'Europe', + rationale: + 'Склонная к коллективизму, очень высокое избегание неопределённости, фемининная, сдержанная', + biases: [93, 86, 70, 10, 58, 50, 19, 83, 30, 100, 55, 85], + confidence: 0.76, + aliases: ['Португалец', 'Португальский', 'Portuguese'], + biasRationale: `Португалия имеет самое высокое избегание неопределённости в Европе (99) при умеренном коллективизме (IDV 27) и низкой маскулинности (31). Экстремальное избегание неопределённости формирует предубеждения к неоднозначности и нулевому риску, а культурная меланхолия «saudade» создаёт эффект угасания аффекта и социальную желательность. Низкая маскулинность порождает нормальностное предубеждение и консенсусные эффекты подражания. Сдержанность (IVR 33) проявляется как предубеждения к бездействию и страусу, а потерь-избегание усиливается осторожной финансовой культурой.`, + }, + { + id: 'ro', + name: 'Румыния', + flag: '🇷🇴', + region: 'Europe', + rationale: + 'Высокая дистанция власти, склонная к коллективизму, высокое избегание неопределённости, сдержанная', + biases: [48, 93, 90, 19, 10, 30, 83, 52, 53, 70, 17], + confidence: 0.72, + aliases: ['Румын', 'Румынский', 'Romanian'], + biasRationale: `Румыния имеет высокую дистанцию власти (90) при высоком избегании неопределённости (90) и низком допущении (20). Сочетание сильной иерархии и избегания неопределённости формирует авторитарное предубеждение, оправдание системы и избегание неоднозначности. Экстремальная сдержанность порождает предубеждения к бездействию и страусу, а коллективистские тенденции создают ингрупповой фаворитизм и аутгрупповую гомогенность. Исторический скептицизм усиливает консерватизм, предубеждение к негативности и потерь-избегание.`, + }, + { + id: 'sa', + name: 'Саудовская Аравия', + flag: '🇸🇦', + region: 'Middle East', + rationale: + 'Высокая дистанция власти, коллективистская, сохраняющая традиции, сдержанная', + biases: [48, 90, 19, 52, 43, 88, 47, 89, 53, 58, 70, 86], + confidence: 0.82, + aliases: ['Саудовец', 'Саудовский', 'Saudi', 'KSA'], + biasRationale: `Саудовская Аравия имеет очень высокую дистанцию власти (95) при сильном коллективизме и высоком избегании неопределённости (80). Сохраняющая традиции культура формирует консерватизм, оправдание системы и авторитарное предубеждение. Коллективизм порождает ингрупповой фаворитизм, аутгрупповую гомогенность и групповые ошибки атрибуции. Сдержанная культура создаёт эффекты владения вокруг традиций и нормальностное предубеждение, а эффекты обратной отдачи отражают сопротивление нарративам быстрых культурных изменений.`, + }, + { + id: 'sg', + name: 'Сингапур', + flag: '🇸🇬', + region: 'Asia', + rationale: + 'Низкий индивидуализм, очень высокая дистанция власти, прагматичный, сдержанный, меритократический', + biases: [48, 90, 49, 102, 85, 81, 83, 57, 86, 70, 50, 19, 93], + confidence: 0.85, + aliases: ['Сингапурец', 'Сингапурский', 'Singaporean'], + biasRationale: `Сингапур имеет очень высокую дистанцию власти (74) при низком индивидуализме (20) и очень высокой долгосрочной ориентации (72). Прагматичная меритократическая культура формирует авторитарное предубеждение, оправдание системы и предубеждение к автоматизации от технологически развитого управления. Долгосрочная ориентация порождает эскалацию обязательств, потерь-избегание и ментальный учёт. Низкое допущение (46) создаёт предубеждение к нулевому риску и социальную желательность, а систематичное общество усиливает последовательное запоминание и единичное предубеждение.`, + }, + { + id: 'za', + name: 'Южная Африка', + flag: '🇿🇦', + region: 'Africa', + rationale: + 'Высокая дистанция власти, коллективистская, маскулинная, краткосрочно-ориентированная, сдержанная', + biases: [48, 53, 52, 69, 44, 47, 79, 78, 37, 43, 91, 83], + confidence: 0.74, + aliases: ['Южноафриканец', 'Южноафриканский', 'Mzansi'], + biasRationale: `Южная Африка имеет высокую дистанцию власти (49) при умеренном индивидуализме (65) и высокой маскулинности (63). Сложное мультикультурное общество порождает ингрупповой фаворитизм, аутгрупповую гомогенность и групповые ошибки атрибуции. Маскулинность формирует сверхуверенность и фундаментальную ошибку атрибуции, а краткосрочная ориентация (34) создаёт гиперболическое дисконтирование. Предпринимательская культура устойчивости усиливает компенсацию риска, а традиции анекдотического повествования остаются мощными. Реактивность отражает постколониальные паттерны сопротивления.`, + }, + { + id: 'kr', + name: 'Южная Корея', + flag: '🇰🇷', + region: 'Asia', + rationale: + 'Коллективистская, ориентированная на внешний вид, технологически развитая, конфуцианская иерархия', + biases: [50, 54, 64, 80, 20, 70, 15, 77, 90, 84, 81, 83, 48], + confidence: 0.88, + aliases: ['Кореец', 'Южнокорейский', 'Корейский', 'Korean'], + biasRationale: `Южная Корея имеет высокую долгосрочную ориентацию (100) и избегание неопределённости (85) при сильном коллективизме (IDV 18). Ориентированная на внешний вид культура «nunchi» усиливает эффект прожектора, эффект ореола и социальную желательность. Конфуцианская иерархия порождает авторитарное предубеждение и оправдание системы, а долгосрочная ориентация формирует эскалацию обязательств и потерь-избегание. Технологически развитая K-культура создаёт сильное обращение к новизне и эффекты IKEA от партиципативной фан-культуры.`, + }, + { + id: 'es', + name: 'Испания', + flag: '🇪🇸', + region: 'Europe', + rationale: + 'Склонная к коллективизму, очень высокое избегание неопределённости, склонная к фемининности, потворствующая', + biases: [93, 86, 53, 55, 79, 50, 37, 22, 13, 100, 91, 20], + confidence: 0.83, + aliases: ['Испанец', 'Испанский', 'Spanish', 'Spaniard'], + biasRationale: `Испания имеет очень высокое избегание неопределённости (86) при умеренном коллективизме (IDV 51) и высоком допущении (44). Избегание неопределённости формирует предубеждения к неоднозначности и нулевому риску, а допущение создаёт гиперболическое дисконтирование и эффекты позитивности. Социальная, ориентированная на семью культура порождает ингрупповой фаворитизм и эффекты подражания. Выразительный стиль общения усиливает эффекты обрамления и анекдотическую убедительность, а эффекты юмора и реактивность отражают страстный средиземноморский темперамент.`, + }, + { + id: 'se', + name: 'Швеция', + flag: '🇸🇪', + region: 'Europe', + rationale: + 'Эгалитарная, ищущая консенсуса, низкое допущение, культура умеренности «Lagom»', + biases: [93, 70, 10, 58, 76, 97, 30, 85, 50, 17, 44, 80], + confidence: 0.88, + aliases: ['Швед', 'Шведский', 'Swedish', 'Swede'], + biasRationale: `Швеция имеет очень высокий индивидуализм (71) при крайне низкой дистанции власти (31) и очень низкой маскулинности (5). Культура умеренности «Lagom» формирует социальную желательность, нормальностное предубеждение и предубеждение к бездействию через стремление к консенсусу. Низкая маскулинность создаёт предпочтения по принципу «меньше — лучше» и подражательное соответствие групповым нормам. Прогрессивная культура порождает обращение к новизне, сохраняя избегание неоднозначности, а фундаментальная ошибка атрибуции отражает индивидуалистическую меритократическую систему убеждений.`, + }, + { + id: 'ch', + name: 'Швейцария', + flag: '🇨🇭', + region: 'Europe', + rationale: + 'Индивидуалистическая, высокое избегание неопределённости, умеренная дистанция власти, сдержанная, движимая точностью', + biases: [86, 93, 94, 87, 102, 19, 81, 83, 85, 97, 10, 49], + confidence: 0.84, + aliases: ['Швейцарец', 'Швейцарский', 'Swiss'], + biasRationale: `Швейцария имеет высокий индивидуализм (68) при заметном избегании неопределённости (58) и умеренной сдержанности (IVR 66). Движимая точностью культура усиливает предубеждение к нулевому риску, избегание неоднозначности и информационное предубеждение. Банковские и часовые традиции усиливают вовлечённость через сложность обработки и последовательное запоминание. Долгосрочная ориентация (74) формирует эскалацию обязательств и потерь-избегание, а консенсусная прямая демократия создаёт предубеждение к бездействию и предпочтения по принципу «меньше — лучше».`, + }, + { + id: 'th', + name: 'Таиланд', + flag: '🇹🇭', + region: 'Asia', + rationale: + 'Высокая дистанция власти, коллективистская, низкое избегание неопределённости, сдержанная, ищущая гармонии', + biases: [48, 50, 53, 70, 55, 58, 10, 22, 90, 47, 100, 13], + confidence: 0.75, + aliases: ['Таец', 'Тайский', 'Thai', 'Siam'], + biasRationale: `Таиланд имеет высокую дистанцию власти (64) при сильном коллективизме (IDV 20) и низком избегании неопределённости (64). Ищущая гармонии культура «kreng jai» формирует социальную желательность, предубеждение к бездействию и нормальностное предубеждение через избегание конфликтов. Высокая дистанция власти порождает авторитарное предубеждение и оправдание системы, а коллективизм создаёт эффекты подражания и ингрупповой фаворитизм. Буддистски-влиянное отношение «mai pen rai» порождает эффект угасания аффекта и эффекты позитивности.`, + }, + { + id: 'tr', + name: 'Турция', + flag: '🇹🇷', + region: 'Middle East', + rationale: + 'Коллективистская, высокая дистанция власти, культура переговоров, основанная на чести', + biases: [48, 18, 53, 81, 22, 43, 52, 88, 47, 25, 93, 90], + confidence: 0.82, + aliases: ['Турок', 'Турецкий', 'Turkish', 'Türkiye'], + biasRationale: `Турция имеет высокую дистанцию власти (66) при сильном коллективизме (IDV 37) и высоком избегании неопределённости (85). Богатая переговорами культура усиливает эффекты якорения и обрамления, а основанные на чести социальные кодексы формируют ингрупповой фаворитизм и групповые ошибки атрибуции. Высокое избегание неопределённости порождает избегание неоднозначности и оправдание системы. Эскалация обязательств отражает культурный акцент на настойчивости и выполнении социальных обязательств.`, + }, + { + id: 'ae', + name: 'ОАЭ', + flag: '🇦🇪', + region: 'Middle East', + rationale: + 'Очень высокая дистанция власти, коллективистская, ориентированная на будущее, статусно-сознательная, космополитичная', + biases: [48, 54, 80, 90, 53, 88, 20, 57, 79, 15, 86, 50], + confidence: 0.74, + aliases: ['Эмиратец', 'Эмиратский', 'UAE', 'Emirati', 'Dubai'], + biasRationale: `ОАЭ имеют очень высокую дистанцию власти (90) при сильном коллективизме (IDV 25) и заметной сдержанности. Статусно-сознательная космополитичная культура усиливает эффекты ореола, отличительности фон Ресторфф и контраста. Высокая дистанция власти формирует авторитарное предубеждение и оправдание системы, а ориентированный на будущее менталитет развития создаёт обращение к новизне. Ментальный учёт выражен в люкс-коммерческой культуре, а предубеждение к нулевому риску отражает акцент на премиум-качестве и безопасности.`, + }, + { + id: 'ua', + name: 'Украина', + flag: '🇺🇦', + region: 'Europe', + rationale: + 'Умеренный коллективизм, высокое избегание неопределённости, сдержанная, устойчивая, низкая дистанция власти', + biases: [1, 83, 91, 19, 93, 17, 81, 84, 78, 10, 53], + confidence: 0.68, + aliases: ['Украинец', 'Украинский', 'Ukrainian'], + biasRationale: `Украина имеет умеренный индивидуализм (25) при высоком избегании неопределённости (95) и очень низком допущении (18). Устойчивая культура, сформированная историческими потрясениями, усиливает эвристику доступности и предубеждение к негативности. Высокое избегание неопределённости создаёт избегание неоднозначности и консерватизм, а экстремальная сдержанность порождает предубеждение к бездействию. Сильные общинные связи формируют ингрупповой фаворитизм, а изобретательная DIY-культура создаёт эффекты IKEA. Реактивность и компенсация риска отражают адаптивные ответы на невзгоды.`, + }, + { + id: 'gb', + name: 'Великобритания', + flag: '🇬🇧', + region: 'Europe', + rationale: + 'Индивидуалистическая, сдержанная, уважающая традиции, культура сухого юмора', + biases: [20, 97, 13, 30, 71, 19, 88, 105, 12, 17, 91, 83], + confidence: 0.89, + aliases: ['Британец', 'Британский', 'Англичанин', 'British', 'English'], + biasRationale: `Великобритания имеет очень высокий индивидуализм (89) при низкой дистанции власти (35) и умеренном допущении (69). Сдержанная культура формирует эффекты «меньше — лучше» и контраста через тонкую коммуникацию. Сухой юмор усиливает эффекты юмора и странности, а уважающий традиции консерватизм создаёт эффекты владения и страуса. Высокий индивидуализм порождает эффект третьего лица и реактивность, а предубеждение к негативности отражает культурно укоренённый скептицизм и сдержанность.`, + }, + { + id: 'us', + name: 'США', + flag: '🇺🇸', + region: 'Americas', + rationale: + 'Индивидуалистическая, низкое избегание неопределённости, насыщенная маркетингом, культура мгновенного вознаграждения', + biases: [77, 79, 69, 50, 80, 22, 83, 37, 71, 91, 44, 74, 78], + confidence: 0.9, + aliases: ['Американец', 'Американский', 'American', 'USA'], + biasRationale: `США имеют исключительно высокий индивидуализм (91) и низкое избегание неопределённости (46), создавая культуру, которая вознаграждает самопрезентацию и принятие риска. В сочетании с высоким допущением (68) американцы особенно восприимчивы к предубеждениям мгновенного вознаграждения и сверхуверенности в собственных суждениях. Насыщенная маркетингом среда усиливает эффекты обрамления, давление подражания и обращение к новизне.`, + }, + { + id: 'vn', + name: 'Вьетнам', + flag: '🇻🇳', + region: 'Asia', + rationale: + 'Коллективистская, высокая дистанция власти, долгосрочно-ориентированная, сдержанная, ищущая гармонии', + biases: [48, 50, 53, 81, 83, 70, 90, 10, 57, 19, 58, 42], + confidence: 0.73, + aliases: ['Вьетнамец', 'Вьетнамский', 'Vietnamese'], + biasRationale: `Вьетнам имеет высокую дистанцию власти (70) при сильном коллективизме (IDV 20) и очень высокой долгосрочной ориентации (57). Конфуциански-влиянная культура формирует авторитарное предубеждение, оправдание системы и социальную желательность через стремление к гармонии. Долгосрочная ориентация порождает эскалацию обязательств, потерь-избегание и ментальный учёт. Коллективизм создаёт эффекты подражания и ингрупповой фаворитизм, а сдержанность (IVR 35) проявляется как предубеждение к бездействию и нормальностное предубеждение.`, + }, + ], + + regions: { + All: 'Все', + Americas: 'Америка', + Europe: 'Европа', + Asia: 'Азия', + 'Middle East': 'Ближний Восток', + Africa: 'Африка', + Oceania: 'Океания', + }, + + ui: { + chooseYour: 'Выбери свою', + cyclingWords: ['Персону', 'Оппонента', 'Целевую аудиторию', 'Соперника'], + cyclingBoldWord: 'Персону', + tagline: 'Единственное место, где ты видишь будущее своего бизнеса.', + subTaglineLead: 'Вы попросили — мы сделали. ', + subTagline: + 'Выбери страну, чтобы автоматически заполнить профиль когнитивных искажений. Каждый шаблон выделяет 10–15 искажений с повышенной культурной распространённостью — готов к использованию в конструкторе персон.', + statTemplates: 'Шаблонов национальностей', + statReady: 'Готово, когда ты готов', + loadingMap: 'Загрузка карты…', + tooltipBiases: 'искажений', + tooltipHint: 'Нажми, чтобы увидеть профиль искажений', + searchPlaceholder: 'Поиск страны или национальности...', + moreCountries: (n: number) => `+${n} ещё стран`, + showLess: 'Показать меньше', + matchSuffix: '% совпадение', + whyTheseBiases: 'Почему эти искажения?', + whyApproxNote: + 'Это приблизительная оценка, отражающая, насколько шаблон искажений соответствует задокументированным поведенческим паттернам этой страны.', + hofstedeNote: + 'На основе культурных измерений Хофстеде и охвата поведенческих исследований.', + useInPersonaBuilder: 'Использовать в конструкторе персон →', + emptyStateLead: 'Выбери страну и ', + emptyStateLink: 'увидь будущее своего бизнеса', + emptyStateHint: 'Нажми, чтобы загрузить шаблон искажений', + footerBiases: 'искажений', + footerConfidence: 'уверенности', + }, +}; diff --git a/src/data/countryBias/types.ts b/src/data/countryBias/types.ts new file mode 100644 index 0000000..235150f --- /dev/null +++ b/src/data/countryBias/types.ts @@ -0,0 +1,54 @@ +export interface Country { + id: string; + name: string; + flag: string; + region: RegionKey; + rationale: string; + biases: number[]; + confidence: number; + aliases: string[]; + biasRationale: string; +} + +export type RegionKey = + | 'Americas' + | 'Europe' + | 'Asia' + | 'Middle East' + | 'Africa' + | 'Oceania'; + +export type RegionLabels = Record; + +export interface CountryUI { + chooseYour: string; + cyclingWords: string[]; + cyclingBoldWord: string; + tagline: string; + subTaglineLead: string; + subTagline: string; + statTemplates: string; + statReady: string; + loadingMap: string; + tooltipBiases: string; + tooltipHint: string; + searchPlaceholder: string; + moreCountries: (n: number) => string; + showLess: string; + matchSuffix: string; + whyTheseBiases: string; + whyApproxNote: string; + hofstedeNote: string; + useInPersonaBuilder: string; + emptyStateLead: string; + emptyStateLink: string; + emptyStateHint: string; + footerBiases: string; + footerConfidence: string; +} + +export interface CountryBiasLocale { + countries: Country[]; + ui: CountryUI; + regions: RegionLabels; +} diff --git a/src/layouts/UXCPLayout/UXCPLayout.tsx b/src/layouts/UXCPLayout/UXCPLayout.tsx index df4c5e6..a373903 100644 --- a/src/layouts/UXCPLayout/UXCPLayout.tsx +++ b/src/layouts/UXCPLayout/UXCPLayout.tsx @@ -25,6 +25,7 @@ import decisionTable from '@data/decisionTable'; import uxcpLocalization from '@data/uxcp'; import BiasSearch from '@components/_uxcp/BiasSearch'; +import CountryBiasMap from '@components/_uxcp/CountryBiasMap'; import DecisionTable from '@components/_uxcp/DecisionTable'; import LogInModal from '@components/_uxcp/LogInModal'; import MobileDisclimer from '@components/_uxcp/MobileDisclimer'; @@ -446,6 +447,15 @@ const UXCPLayout: FC = ({

(UXCP)

+ { + const matched = biases.filter(b => + biasNumbers.includes(b.number), + ); + setSelectedBiases(matched); + }} + /> {isMobile && } {!isMobile &&

{title}

}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2000ceb..912ded5 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -28,6 +28,7 @@ import Layout from '@layouts/Layout'; import Box from 'src/components/Box'; import '../styles/globals.scss'; +import '../styles/countryBias.scss'; const UXCoreFeedbackModal = dynamic( () => import('@components/UXCoreFeedbackModal'), diff --git a/src/styles/countryBias.scss b/src/styles/countryBias.scss new file mode 100644 index 0000000..af3c935 --- /dev/null +++ b/src/styles/countryBias.scss @@ -0,0 +1,52 @@ +@keyframes countryBiasFadeSlideUp { + from { + opacity: 0; + transform: translateY(12px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-in { + animation: countryBiasFadeSlideUp 0.3s ease-out forwards; +} + +.animated-underline-wrap { + display: inline-block; +} + +.animated-underline { + position: absolute; + bottom: -2px; + left: 0; + height: 2px; + width: 100%; + background: linear-gradient(90deg, #337ab7, #7c3aed); + border-radius: 1px; + transform-origin: left; + animation: countryBiasUnderlineSweep 3s ease-in-out infinite; +} + +@keyframes countryBiasUnderlineSweep { + 0% { + transform: scaleX(0); + opacity: 0; + } + 10% { + opacity: 1; + } + 50% { + transform: scaleX(1); + opacity: 1; + } + 80% { + transform: scaleX(1); + opacity: 0; + } + 100% { + transform: scaleX(1); + opacity: 0; + } +} From 587e0ee84b9592591e3c6e549a4825e917d29c78 Mon Sep 17 00:00:00 2001 From: MaryWylde Date: Fri, 1 May 2026 21:03:15 +0400 Subject: [PATCH 07/21] feat(biases): show interactive bias demo inside the bias modal When a user opens a bias modal (UXCore desktop or mobile), the matching demo from src/components/_biases/BiasBody/demos/ now renders below the body copy under a "Visual Example" heading (locale-aware). Each demo is a self-contained React component illustrating the cognitive bias in question. - src/components/_biases/BiasBody/: BiasBody.tsx renderer + 107 demo subdirs, demoRegistry.ts, _tokens.scss, DemoErrorBoundary (so a buggy demo can't take down the modal). - src/data/biasDemos/: 80 single-file bias-demo definitions. - src/data/biasList/{biases,hy,ru,index}.ts: canonical bundled bias text dataset per locale (~290KB total). - src/data/modal/{en,hy,ru}.ts: visualExample i18n key. - UXCoreModal.tsx + UXCoreModalMobile.tsx: imports BiasBody and renders {data.title && } beneath the existing usage section. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/UXCoreModal/UXCoreModal.tsx | 2 + .../UXCoreModalMobile/UXCoreModalMobile.tsx | 4 + .../_biases/BiasBody/BiasBody.module.scss | 99 ++ src/components/_biases/BiasBody/BiasBody.tsx | 142 ++ .../DemoErrorBoundary/DemoErrorBoundary.tsx | 36 + .../BiasBody/DemoErrorBoundary/index.ts | 3 + src/components/_biases/BiasBody/_tokens.scss | 53 + .../_biases/BiasBody/demoRegistry.ts | 165 ++ .../AmbiguityEffect.content.ts | 226 +++ .../AmbiguityEffect.module.scss | 102 ++ .../demos/AmbiguityEffect/AmbiguityEffect.tsx | 76 + .../AnchoringEffect.content.ts | 111 ++ .../AnchoringEffect.module.scss | 124 ++ .../demos/AnchoringEffect/AnchoringEffect.tsx | 88 ++ .../AnecdotalEvidence.content.ts | 72 + .../AnecdotalEvidence.module.scss | 136 ++ .../AnecdotalEvidence/AnecdotalEvidence.tsx | 57 + .../AppealToNovelty.content.ts | 49 + .../AppealToNovelty.module.scss | 126 ++ .../demos/AppealToNovelty/AppealToNovelty.tsx | 78 + .../AttentionalBias.content.ts | 70 + .../AttentionalBias.module.scss | 161 ++ .../demos/AttentionalBias/AttentionalBias.tsx | 79 + .../AuthorityBias/AuthorityBias.content.ts | 67 + .../AuthorityBias/AuthorityBias.module.scss | 154 ++ .../demos/AuthorityBias/AuthorityBias.tsx | 57 + .../AutomationBias/AutomationBias.content.ts | 76 + .../AutomationBias/AutomationBias.module.scss | 116 ++ .../demos/AutomationBias/AutomationBias.tsx | 66 + .../AvailabilityHeuristics.content.ts | 49 + .../AvailabilityHeuristics.module.scss | 85 ++ .../AvailabilityHeuristics.tsx | 56 + .../BackfireEffect/BackfireEffect.content.ts | 65 + .../BackfireEffect/BackfireEffect.module.scss | 91 ++ .../demos/BackfireEffect/BackfireEffect.tsx | 61 + .../BandwagonEffect.content.ts | 43 + .../BandwagonEffect.module.scss | 149 ++ .../demos/BandwagonEffect/BandwagonEffect.tsx | 65 + .../BarnumEffect/BarnumEffect.content.ts | 91 ++ .../BarnumEffect/BarnumEffect.module.scss | 101 ++ .../demos/BarnumEffect/BarnumEffect.tsx | 59 + .../BaseRateFallacy.content.ts | 105 ++ .../BaseRateFallacy.module.scss | 129 ++ .../demos/BaseRateFallacy/BaseRateFallacy.tsx | 75 + .../BiasBlindSpot/BiasBlindSpot.content.ts | 110 ++ .../BiasBlindSpot/BiasBlindSpot.module.scss | 123 ++ .../demos/BiasBlindSpot/BiasBlindSpot.tsx | 59 + .../BizarrenessEffect.content.ts | 57 + .../BizarrenessEffect.module.scss | 131 ++ .../BizarrenessEffect/BizarrenessEffect.tsx | 60 + .../ClusteringIllusion.content.ts | 121 ++ .../ClusteringIllusion.module.scss | 104 ++ .../ClusteringIllusion/ClusteringIllusion.tsx | 65 + .../ConfirmationBias.content.ts | 88 ++ .../ConfirmationBias.module.scss | 137 ++ .../ConfirmationBias/ConfirmationBias.tsx | 63 + .../CongruenceBias/CongruenceBias.content.ts | 131 ++ .../CongruenceBias/CongruenceBias.module.scss | 85 ++ .../demos/CongruenceBias/CongruenceBias.tsx | 58 + .../ConjunctionFallacy.content.ts | 91 ++ .../ConjunctionFallacy.module.scss | 78 + .../ConjunctionFallacy/ConjunctionFallacy.tsx | 48 + .../ConsensusBias/ConsensusBias.content.ts | 93 ++ .../ConsensusBias/ConsensusBias.module.scss | 119 ++ .../demos/ConsensusBias/ConsensusBias.tsx | 101 ++ .../Conservatism/Conservatism.content.ts | 100 ++ .../Conservatism/Conservatism.module.scss | 153 ++ .../demos/Conservatism/Conservatism.tsx | 62 + .../ContextEffect/ContextEffect.content.ts | 58 + .../ContextEffect/ContextEffect.module.scss | 152 ++ .../demos/ContextEffect/ContextEffect.tsx | 59 + .../ContinuedInfluenceEffect.content.ts | 79 + .../ContinuedInfluenceEffect.module.scss | 174 +++ .../ContinuedInfluenceEffect.tsx | 68 + .../ContrastEffect/ContrastEffect.content.ts | 115 ++ .../ContrastEffect/ContrastEffect.module.scss | 134 ++ .../demos/ContrastEffect/ContrastEffect.tsx | 72 + .../CueDependentForgetting.content.ts | 66 + .../CueDependentForgetting.module.scss | 140 ++ .../CueDependentForgetting.tsx | 72 + .../CurseOfKnowledge.content.ts | 111 ++ .../CurseOfKnowledge.module.scss | 120 ++ .../CurseOfKnowledge/CurseOfKnowledge.tsx | 73 + .../demos/DecoyEffect/DecoyEffect.content.ts | 106 ++ .../demos/DecoyEffect/DecoyEffect.module.scss | 127 ++ .../demos/DecoyEffect/DecoyEffect.tsx | 103 ++ .../DistinctionBias.content.ts | 106 ++ .../DistinctionBias.module.scss | 123 ++ .../demos/DistinctionBias/DistinctionBias.tsx | 84 ++ .../DunningKrugerEffect.content.ts | 79 + .../DunningKrugerEffect.module.scss | 128 ++ .../DunningKrugerEffect.tsx | 69 + .../demos/EmpathyGap/EmpathyGap.content.ts | 55 + .../demos/EmpathyGap/EmpathyGap.module.scss | 113 ++ .../BiasBody/demos/EmpathyGap/EmpathyGap.tsx | 66 + .../EndowmentEffect.content.ts | 64 + .../EndowmentEffect.module.scss | 114 ++ .../demos/EndowmentEffect/EndowmentEffect.tsx | 56 + .../EscalationOfCommitment.content.ts | 64 + .../EscalationOfCommitment.module.scss | 149 ++ .../EscalationOfCommitment.tsx | 57 + .../FadingAffectBias.content.ts | 77 + .../FadingAffectBias.module.scss | 185 +++ .../FadingAffectBias/FadingAffectBias.tsx | 82 + .../FramingEffect/FramingEffect.content.ts | 68 + .../FramingEffect/FramingEffect.module.scss | 170 +++ .../demos/FramingEffect/FramingEffect.tsx | 66 + .../FrequencyIllusion.content.ts | 65 + .../FrequencyIllusion.module.scss | 65 + .../FrequencyIllusion/FrequencyIllusion.tsx | 47 + .../FunctionalFixedness.content.ts | 76 + .../FunctionalFixedness.module.scss | 146 ++ .../FunctionalFixedness.tsx | 87 ++ .../FundamentalAttributionError.content.ts | 82 + .../FundamentalAttributionError.module.scss | 116 ++ .../FundamentalAttributionError.tsx | 64 + .../GamblersFallacy.content.ts | 49 + .../GamblersFallacy.module.scss | 140 ++ .../demos/GamblersFallacy/GamblersFallacy.tsx | 54 + .../GenerationEffect.content.ts | 73 + .../GenerationEffect.module.scss | 134 ++ .../GenerationEffect/GenerationEffect.tsx | 61 + .../GroupAttributionError.content.ts | 58 + .../GroupAttributionError.module.scss | 110 ++ .../GroupAttributionError.tsx | 83 + .../demos/HaloEffect/HaloEffect.content.ts | 68 + .../demos/HaloEffect/HaloEffect.module.scss | 198 +++ .../BiasBody/demos/HaloEffect/HaloEffect.tsx | 80 + .../HardEasyEffect/HardEasyEffect.content.ts | 191 +++ .../HardEasyEffect/HardEasyEffect.module.scss | 142 ++ .../demos/HardEasyEffect/HardEasyEffect.tsx | 143 ++ .../HindsightBias/HindsightBias.content.ts | 138 ++ .../HindsightBias/HindsightBias.module.scss | 148 ++ .../demos/HindsightBias/HindsightBias.tsx | 69 + .../HotHandFallacy/HotHandFallacy.content.ts | 67 + .../HotHandFallacy/HotHandFallacy.module.scss | 154 ++ .../demos/HotHandFallacy/HotHandFallacy.tsx | 71 + .../demos/HumorEffect/HumorEffect.content.ts | 58 + .../demos/HumorEffect/HumorEffect.module.scss | 115 ++ .../demos/HumorEffect/HumorEffect.tsx | 48 + .../HyperbolicDiscounting.content.ts | 85 ++ .../HyperbolicDiscounting.module.scss | 180 +++ .../HyperbolicDiscounting.tsx | 65 + .../demos/IKEAEffect/IKEAEffect.content.ts | 76 + .../demos/IKEAEffect/IKEAEffect.module.scss | 197 +++ .../BiasBody/demos/IKEAEffect/IKEAEffect.tsx | 76 + .../IllusionOfAsymmetricInsight.content.ts | 107 ++ .../IllusionOfAsymmetricInsight.module.scss | 127 ++ .../IllusionOfAsymmetricInsight.tsx | 59 + .../IllusionOfControl.content.ts | 82 + .../IllusionOfControl.module.scss | 98 ++ .../IllusionOfControl/IllusionOfControl.tsx | 55 + .../IllusionOfTransparency.content.ts | 134 ++ .../IllusionOfTransparency.module.scss | 124 ++ .../IllusionOfTransparency.tsx | 150 ++ .../IllusionOfValidity.content.ts | 64 + .../IllusionOfValidity.module.scss | 124 ++ .../IllusionOfValidity/IllusionOfValidity.tsx | 58 + .../IllusoryCorrelation.content.ts | 28 + .../IllusoryCorrelation.module.scss | 115 ++ .../IllusoryCorrelation.tsx | 58 + .../IllusorySuperiority.content.ts | 70 + .../IllusorySuperiority.module.scss | 157 ++ .../IllusorySuperiority.tsx | 64 + .../IllusoryTruthEffect.content.ts | 53 + .../IllusoryTruthEffect.module.scss | 87 ++ .../IllusoryTruthEffect.tsx | 45 + .../ImplicitStereotypes.content.ts | 63 + .../ImplicitStereotypes.module.scss | 139 ++ .../ImplicitStereotypes.tsx | 64 + .../InGroupFavoritism.content.ts | 115 ++ .../InGroupFavoritism.module.scss | 104 ++ .../InGroupFavoritism/InGroupFavoritism.tsx | 70 + .../InformationBias.content.ts | 190 +++ .../InformationBias.module.scss | 127 ++ .../demos/InformationBias/InformationBias.tsx | 63 + .../InsensitivityToSampleSize.content.ts | 124 ++ .../InsensitivityToSampleSize.module.scss | 151 ++ .../InsensitivityToSampleSize.tsx | 91 ++ .../JustWorldFallacy.content.ts | 77 + .../JustWorldFallacy.module.scss | 128 ++ .../JustWorldFallacy/JustWorldFallacy.tsx | 55 + .../LawOfTriviality.content.ts | 184 +++ .../LawOfTriviality.module.scss | 127 ++ .../demos/LawOfTriviality/LawOfTriviality.tsx | 54 + .../LessIsBetterEffect.content.ts | 76 + .../LessIsBetterEffect.module.scss | 116 ++ .../LessIsBetterEffect/LessIsBetterEffect.tsx | 61 + .../ListLengthEffect.content.ts | 251 ++++ .../ListLengthEffect.module.scss | 130 ++ .../ListLengthEffect/ListLengthEffect.tsx | 71 + .../LossAversion/LossAversion.content.ts | 109 ++ .../LossAversion/LossAversion.module.scss | 148 ++ .../demos/LossAversion/LossAversion.tsx | 65 + .../MentalAccounting.content.ts | 118 ++ .../MentalAccounting.module.scss | 143 ++ .../MentalAccounting/MentalAccounting.tsx | 63 + .../MereExposureEffect.content.ts | 78 + .../MereExposureEffect.module.scss | 173 +++ .../MereExposureEffect/MereExposureEffect.tsx | 80 + .../demos/MillersLaw/MillersLaw.content.ts | 138 ++ .../demos/MillersLaw/MillersLaw.module.scss | 82 + .../BiasBody/demos/MillersLaw/MillersLaw.tsx | 51 + .../MoneyIllusion/MoneyIllusion.content.ts | 202 +++ .../MoneyIllusion/MoneyIllusion.module.scss | 117 ++ .../demos/MoneyIllusion/MoneyIllusion.tsx | 80 + .../MoodCongruentMemory.content.ts | 88 ++ .../MoodCongruentMemory.module.scss | 161 ++ .../MoodCongruentMemory.tsx | 67 + .../NegativityBias/NegativityBias.content.ts | 87 ++ .../NegativityBias/NegativityBias.module.scss | 185 +++ .../demos/NegativityBias/NegativityBias.tsx | 77 + .../NeglectOfProbability.content.ts | 92 ++ .../NeglectOfProbability.module.scss | 127 ++ .../NeglectOfProbability.tsx | 65 + .../NormalityBias/NormalityBias.content.ts | 139 ++ .../NormalityBias/NormalityBias.module.scss | 160 ++ .../demos/NormalityBias/NormalityBias.tsx | 81 + .../NotInventedHere.content.ts | 86 ++ .../NotInventedHere.module.scss | 137 ++ .../demos/NotInventedHere/NotInventedHere.tsx | 72 + .../ObserverExpectancyEffect.content.ts | 76 + .../ObserverExpectancyEffect.module.scss | 85 ++ .../ObserverExpectancyEffect.tsx | 58 + .../OmissionBias/OmissionBias.content.ts | 97 ++ .../OmissionBias/OmissionBias.module.scss | 127 ++ .../demos/OmissionBias/OmissionBias.tsx | 82 + .../OstrichEffect/OstrichEffect.content.ts | 106 ++ .../OstrichEffect/OstrichEffect.module.scss | 113 ++ .../demos/OstrichEffect/OstrichEffect.tsx | 59 + .../OutGroupHomogeneity.content.ts | 114 ++ .../OutGroupHomogeneity.module.scss | 120 ++ .../OutGroupHomogeneity.tsx | 63 + .../OverconfidenceEffect.content.ts | 82 + .../OverconfidenceEffect.module.scss | 149 ++ .../OverconfidenceEffect.tsx | 71 + .../demos/PeakEndRule/PeakEndRule.content.ts | 66 + .../demos/PeakEndRule/PeakEndRule.module.scss | 146 ++ .../demos/PeakEndRule/PeakEndRule.tsx | 56 + .../PictureSuperiority.content.ts | 109 ++ .../PictureSuperiority.module.scss | 83 + .../PictureSuperiority/PictureSuperiority.tsx | 72 + .../PlaceboEffect/PlaceboEffect.content.ts | 61 + .../PlaceboEffect/PlaceboEffect.module.scss | 165 ++ .../demos/PlaceboEffect/PlaceboEffect.tsx | 69 + .../PlanningFallacy.content.ts | 123 ++ .../PlanningFallacy.module.scss | 185 +++ .../demos/PlanningFallacy/PlanningFallacy.tsx | 67 + .../PositivityEffect.content.ts | 100 ++ .../PositivityEffect.module.scss | 134 ++ .../PositivityEffect/PositivityEffect.tsx | 61 + .../PostPurchaseRationalization.content.ts | 88 ++ .../PostPurchaseRationalization.module.scss | 182 +++ .../PostPurchaseRationalization.tsx | 80 + .../demos/Prejudice/Prejudice.content.ts | 79 + .../demos/Prejudice/Prejudice.module.scss | 105 ++ .../BiasBody/demos/Prejudice/Prejudice.tsx | 65 + .../PrimacyEffect/PrimacyEffect.content.ts | 79 + .../PrimacyEffect/PrimacyEffect.module.scss | 125 ++ .../demos/PrimacyEffect/PrimacyEffect.tsx | 52 + .../ProInnovationBias.content.ts | 64 + .../ProInnovationBias.module.scss | 125 ++ .../ProInnovationBias/ProInnovationBias.tsx | 53 + .../ProcessingDifficulty.content.ts | 70 + .../ProcessingDifficulty.module.scss | 143 ++ .../ProcessingDifficulty.tsx | 75 + .../demos/Reactance/Reactance.content.ts | 57 + .../demos/Reactance/Reactance.module.scss | 155 ++ .../BiasBody/demos/Reactance/Reactance.tsx | 56 + .../RecencyIllusion.content.ts | 79 + .../RecencyIllusion.module.scss | 142 ++ .../demos/RecencyIllusion/RecencyIllusion.tsx | 83 + .../RiskCompensation.content.ts | 73 + .../RiskCompensation.module.scss | 165 ++ .../RiskCompensation/RiskCompensation.tsx | 73 + .../SelectivePerception.content.ts | 91 ++ .../SelectivePerception.module.scss | 102 ++ .../SelectivePerception.tsx | 91 ++ .../SelfReferenceEffect.content.ts | 62 + .../SelfReferenceEffect.module.scss | 105 ++ .../SelfReferenceEffect.tsx | 50 + .../SerialPositionEffect.content.ts | 164 ++ .../SerialPositionEffect.module.scss | 65 + .../SerialPositionEffect.tsx | 58 + .../SerialRecall/SerialRecall.content.ts | 82 + .../SerialRecall/SerialRecall.module.scss | 147 ++ .../demos/SerialRecall/SerialRecall.tsx | 79 + .../SocialDesirabilityBias.content.ts | 82 + .../SocialDesirabilityBias.module.scss | 161 ++ .../SocialDesirabilityBias.tsx | 73 + .../SpotlightEffect.content.ts | 61 + .../SpotlightEffect.module.scss | 121 ++ .../demos/SpotlightEffect/SpotlightEffect.tsx | 58 + .../demos/Stereotype/Stereotype.content.ts | 92 ++ .../demos/Stereotype/Stereotype.module.scss | 92 ++ .../BiasBody/demos/Stereotype/Stereotype.tsx | 60 + .../SubadditivityEffect.content.ts | 76 + .../SubadditivityEffect.module.scss | 123 ++ .../SubadditivityEffect.tsx | 55 + .../SubjectiveValidation.content.ts | 49 + .../SubjectiveValidation.module.scss | 124 ++ .../SubjectiveValidation.tsx | 81 + .../SurvivalBias/SurvivalBias.content.ts | 106 ++ .../SurvivalBias/SurvivalBias.module.scss | 134 ++ .../demos/SurvivalBias/SurvivalBias.tsx | 59 + .../SystemJustification.content.ts | 64 + .../SystemJustification.module.scss | 93 ++ .../SystemJustification.tsx | 60 + .../ThirdPersonEffect.content.ts | 114 ++ .../ThirdPersonEffect.module.scss | 207 +++ .../ThirdPersonEffect/ThirdPersonEffect.tsx | 72 + .../demos/UnitBias/UnitBias.content.ts | 49 + .../demos/UnitBias/UnitBias.module.scss | 144 ++ .../BiasBody/demos/UnitBias/UnitBias.tsx | 75 + .../VonRestorffEffect.content.ts | 42 + .../VonRestorffEffect.module.scss | 86 ++ .../VonRestorffEffect/VonRestorffEffect.tsx | 64 + .../WeberFechnerLaw.content.ts | 76 + .../WeberFechnerLaw.module.scss | 112 ++ .../demos/WeberFechnerLaw/WeberFechnerLaw.tsx | 63 + .../ZeroRiskBias/ZeroRiskBias.content.ts | 94 ++ .../ZeroRiskBias/ZeroRiskBias.module.scss | 123 ++ .../demos/ZeroRiskBias/ZeroRiskBias.tsx | 80 + src/components/_biases/BiasBody/index.ts | 3 + src/data/biasDemos/ambiguityEffect.ts | 68 + src/data/biasDemos/anchoringEffect.ts | 35 + src/data/biasDemos/anecdotalEvidence.ts | 23 + src/data/biasDemos/attentionalBias.ts | 24 + src/data/biasDemos/authorityBias.ts | 23 + src/data/biasDemos/automationBias.ts | 27 + src/data/biasDemos/availabilityHeuristics.ts | 17 + src/data/biasDemos/backfireEffect.ts | 22 + src/data/biasDemos/bandwagonEffect.ts | 15 + src/data/biasDemos/baseRateFallacy.ts | 37 + src/data/biasDemos/bizarrenessEffect.ts | 19 + src/data/biasDemos/clusteringIllusion.ts | 40 + src/data/biasDemos/confirmationBias.ts | 25 + src/data/biasDemos/conjunctionFallacy.ts | 31 + src/data/biasDemos/conservatism.ts | 34 + src/data/biasDemos/contextEffect.ts | 20 + .../biasDemos/continuedInfluenceEffect.ts | 27 + src/data/biasDemos/contrastEffect.ts | 39 + src/data/biasDemos/cueDependentForgetting.ts | 22 + src/data/biasDemos/curseOfKnowledge.ts | 35 + src/data/biasDemos/decoyEffect.ts | 36 + src/data/biasDemos/distinctionBias.ts | 36 + src/data/biasDemos/dunningKrugerEffect.ts | 22 + src/data/biasDemos/empathyGap.ts | 19 + src/data/biasDemos/endowmentEffect.ts | 22 + src/data/biasDemos/fadingAffectBias.ts | 26 + src/data/biasDemos/framingEffect.ts | 23 + src/data/biasDemos/frequencyIllusion.ts | 19 + src/data/biasDemos/functionalFixedness.ts | 26 + .../biasDemos/fundamentalAttributionError.ts | 28 + src/data/biasDemos/gamblersFallacy.ts | 17 + src/data/biasDemos/generationEffect.ts | 25 + src/data/biasDemos/groupAttributionError.ts | 20 + src/data/biasDemos/haloEffect.ts | 22 + src/data/biasDemos/hardEasyEffect.ts | 59 + src/data/biasDemos/hindsightBias.ts | 46 + src/data/biasDemos/hotHandFallacy.ts | 24 + src/data/biasDemos/humorEffect.ts | 20 + src/data/biasDemos/iKEAEffect.ts | 26 + src/data/biasDemos/illusionOfTransparency.ts | 45 + src/data/biasDemos/illusoryCorrelation.ts | 16 + src/data/biasDemos/illusoryTruthEffect.ts | 18 + src/data/biasDemos/inGroupFavoritism.ts | 39 + src/data/biasDemos/informationBias.ts | 64 + .../biasDemos/insensitivityToSampleSize.ts | 42 + src/data/biasDemos/justWorldFallacy.ts | 28 + src/data/biasDemos/lessIsBetterEffect.ts | 26 + src/data/biasDemos/listLengthEffect.ts | 79 + src/data/biasDemos/lossAversion.ts | 37 + src/data/biasDemos/mentalAccounting.ts | 40 + src/data/biasDemos/mereExposureEffect.ts | 26 + src/data/biasDemos/millersLaw.ts | 45 + src/data/biasDemos/moneyIllusion.ts | 65 + src/data/biasDemos/moodCongruentMemory.ts | 27 + src/data/biasDemos/negativityBias.ts | 29 + src/data/biasDemos/neglectOfProbability.ts | 26 + src/data/biasDemos/normalityBias.ts | 47 + src/data/biasDemos/omissionBias.ts | 33 + src/data/biasDemos/ostrichEffect.ts | 36 + src/data/biasDemos/peakEndRule.ts | 22 + src/data/biasDemos/pictureSuperiority.ts | 33 + src/data/biasDemos/placeboEffect.ts | 21 + src/data/biasDemos/positivityEffect.ts | 34 + .../biasDemos/postPurchaseRationalization.ts | 29 + src/data/biasDemos/prejudice.ts | 27 + src/data/biasDemos/primacyEffect.ts | 27 + src/data/biasDemos/processingDifficulty.ts | 24 + src/data/biasDemos/reactance.ts | 19 + src/data/biasDemos/recencyIllusion.ts | 28 + src/data/biasDemos/selectivePerception.ts | 31 + src/data/biasDemos/selfReferenceEffect.ts | 21 + src/data/biasDemos/serialPositionEffect.ts | 29 + src/data/biasDemos/serialRecall.ts | 28 + src/data/biasDemos/socialDesirabilityBias.ts | 28 + src/data/biasDemos/spotlightEffect.ts | 21 + src/data/biasDemos/subjectiveValidation.ts | 17 + src/data/biasDemos/systemJustification.ts | 22 + src/data/biasDemos/thirdPersonEffect.ts | 38 + src/data/biasDemos/unitBias.ts | 17 + src/data/biasDemos/vonRestorffEffect.ts | 10 + src/data/biasDemos/zeroRiskBias.ts | 26 + src/data/biasList/biases.ts | 1337 ++++++++++++++++ src/data/biasList/hy.ts | 212 +++ src/data/biasList/index.ts | 15 + src/data/biasList/ru.ts | 1338 +++++++++++++++++ src/data/modal/en.ts | 1 + src/data/modal/hy.ts | 1 + src/data/modal/ru.ts | 1 + 412 files changed, 36315 insertions(+) create mode 100644 src/components/_biases/BiasBody/BiasBody.module.scss create mode 100644 src/components/_biases/BiasBody/BiasBody.tsx create mode 100644 src/components/_biases/BiasBody/DemoErrorBoundary/DemoErrorBoundary.tsx create mode 100644 src/components/_biases/BiasBody/DemoErrorBoundary/index.ts create mode 100644 src/components/_biases/BiasBody/_tokens.scss create mode 100644 src/components/_biases/BiasBody/demoRegistry.ts create mode 100644 src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.tsx create mode 100644 src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.tsx create mode 100644 src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.content.ts create mode 100644 src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.module.scss create mode 100644 src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.tsx create mode 100644 src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.tsx create mode 100644 src/components/_biases/BiasBody/demos/BizarrenessEffect/BizarrenessEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/BizarrenessEffect/BizarrenessEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/BizarrenessEffect/BizarrenessEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ClusteringIllusion/ClusteringIllusion.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ClusteringIllusion/ClusteringIllusion.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ClusteringIllusion/ClusteringIllusion.tsx create mode 100644 src/components/_biases/BiasBody/demos/ConfirmationBias/ConfirmationBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ConfirmationBias/ConfirmationBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ConfirmationBias/ConfirmationBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/CongruenceBias/CongruenceBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/CongruenceBias/CongruenceBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/CongruenceBias/CongruenceBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/ConjunctionFallacy/ConjunctionFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ConjunctionFallacy/ConjunctionFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ConjunctionFallacy/ConjunctionFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/ConsensusBias/ConsensusBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ConsensusBias/ConsensusBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ConsensusBias/ConsensusBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/Conservatism/Conservatism.content.ts create mode 100644 src/components/_biases/BiasBody/demos/Conservatism/Conservatism.module.scss create mode 100644 src/components/_biases/BiasBody/demos/Conservatism/Conservatism.tsx create mode 100644 src/components/_biases/BiasBody/demos/ContextEffect/ContextEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ContextEffect/ContextEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ContextEffect/ContextEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ContinuedInfluenceEffect/ContinuedInfluenceEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ContinuedInfluenceEffect/ContinuedInfluenceEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ContinuedInfluenceEffect/ContinuedInfluenceEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ContrastEffect/ContrastEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ContrastEffect/ContrastEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ContrastEffect/ContrastEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/CueDependentForgetting/CueDependentForgetting.content.ts create mode 100644 src/components/_biases/BiasBody/demos/CueDependentForgetting/CueDependentForgetting.module.scss create mode 100644 src/components/_biases/BiasBody/demos/CueDependentForgetting/CueDependentForgetting.tsx create mode 100644 src/components/_biases/BiasBody/demos/CurseOfKnowledge/CurseOfKnowledge.content.ts create mode 100644 src/components/_biases/BiasBody/demos/CurseOfKnowledge/CurseOfKnowledge.module.scss create mode 100644 src/components/_biases/BiasBody/demos/CurseOfKnowledge/CurseOfKnowledge.tsx create mode 100644 src/components/_biases/BiasBody/demos/DecoyEffect/DecoyEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/DecoyEffect/DecoyEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/DecoyEffect/DecoyEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/DistinctionBias/DistinctionBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/DistinctionBias/DistinctionBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/DistinctionBias/DistinctionBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/DunningKrugerEffect/DunningKrugerEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/DunningKrugerEffect/DunningKrugerEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/DunningKrugerEffect/DunningKrugerEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/EmpathyGap/EmpathyGap.content.ts create mode 100644 src/components/_biases/BiasBody/demos/EmpathyGap/EmpathyGap.module.scss create mode 100644 src/components/_biases/BiasBody/demos/EmpathyGap/EmpathyGap.tsx create mode 100644 src/components/_biases/BiasBody/demos/EndowmentEffect/EndowmentEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/EndowmentEffect/EndowmentEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/EndowmentEffect/EndowmentEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/EscalationOfCommitment/EscalationOfCommitment.content.ts create mode 100644 src/components/_biases/BiasBody/demos/EscalationOfCommitment/EscalationOfCommitment.module.scss create mode 100644 src/components/_biases/BiasBody/demos/EscalationOfCommitment/EscalationOfCommitment.tsx create mode 100644 src/components/_biases/BiasBody/demos/FadingAffectBias/FadingAffectBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/FadingAffectBias/FadingAffectBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/FadingAffectBias/FadingAffectBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/FramingEffect/FramingEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/FramingEffect/FramingEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/FramingEffect/FramingEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/FrequencyIllusion/FrequencyIllusion.content.ts create mode 100644 src/components/_biases/BiasBody/demos/FrequencyIllusion/FrequencyIllusion.module.scss create mode 100644 src/components/_biases/BiasBody/demos/FrequencyIllusion/FrequencyIllusion.tsx create mode 100644 src/components/_biases/BiasBody/demos/FunctionalFixedness/FunctionalFixedness.content.ts create mode 100644 src/components/_biases/BiasBody/demos/FunctionalFixedness/FunctionalFixedness.module.scss create mode 100644 src/components/_biases/BiasBody/demos/FunctionalFixedness/FunctionalFixedness.tsx create mode 100644 src/components/_biases/BiasBody/demos/FundamentalAttributionError/FundamentalAttributionError.content.ts create mode 100644 src/components/_biases/BiasBody/demos/FundamentalAttributionError/FundamentalAttributionError.module.scss create mode 100644 src/components/_biases/BiasBody/demos/FundamentalAttributionError/FundamentalAttributionError.tsx create mode 100644 src/components/_biases/BiasBody/demos/GamblersFallacy/GamblersFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/GamblersFallacy/GamblersFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/GamblersFallacy/GamblersFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/GenerationEffect/GenerationEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/GenerationEffect/GenerationEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/GenerationEffect/GenerationEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/GroupAttributionError/GroupAttributionError.content.ts create mode 100644 src/components/_biases/BiasBody/demos/GroupAttributionError/GroupAttributionError.module.scss create mode 100644 src/components/_biases/BiasBody/demos/GroupAttributionError/GroupAttributionError.tsx create mode 100644 src/components/_biases/BiasBody/demos/HaloEffect/HaloEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HaloEffect/HaloEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HaloEffect/HaloEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/HardEasyEffect/HardEasyEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HardEasyEffect/HardEasyEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HardEasyEffect/HardEasyEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/HindsightBias/HindsightBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HindsightBias/HindsightBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HindsightBias/HindsightBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/HotHandFallacy/HotHandFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HotHandFallacy/HotHandFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HotHandFallacy/HotHandFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/HumorEffect/HumorEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HumorEffect/HumorEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HumorEffect/HumorEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/HyperbolicDiscounting/HyperbolicDiscounting.content.ts create mode 100644 src/components/_biases/BiasBody/demos/HyperbolicDiscounting/HyperbolicDiscounting.module.scss create mode 100644 src/components/_biases/BiasBody/demos/HyperbolicDiscounting/HyperbolicDiscounting.tsx create mode 100644 src/components/_biases/BiasBody/demos/IKEAEffect/IKEAEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IKEAEffect/IKEAEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IKEAEffect/IKEAEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfAsymmetricInsight/IllusionOfAsymmetricInsight.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfAsymmetricInsight/IllusionOfAsymmetricInsight.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfAsymmetricInsight/IllusionOfAsymmetricInsight.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfControl/IllusionOfControl.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfControl/IllusionOfControl.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfControl/IllusionOfControl.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfTransparency/IllusionOfTransparency.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfTransparency/IllusionOfTransparency.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfTransparency/IllusionOfTransparency.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfValidity/IllusionOfValidity.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfValidity/IllusionOfValidity.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusionOfValidity/IllusionOfValidity.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusoryCorrelation/IllusoryCorrelation.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusoryCorrelation/IllusoryCorrelation.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusoryCorrelation/IllusoryCorrelation.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusorySuperiority/IllusorySuperiority.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusorySuperiority/IllusorySuperiority.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusorySuperiority/IllusorySuperiority.tsx create mode 100644 src/components/_biases/BiasBody/demos/IllusoryTruthEffect/IllusoryTruthEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/IllusoryTruthEffect/IllusoryTruthEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/IllusoryTruthEffect/IllusoryTruthEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ImplicitStereotypes/ImplicitStereotypes.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ImplicitStereotypes/ImplicitStereotypes.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ImplicitStereotypes/ImplicitStereotypes.tsx create mode 100644 src/components/_biases/BiasBody/demos/InGroupFavoritism/InGroupFavoritism.content.ts create mode 100644 src/components/_biases/BiasBody/demos/InGroupFavoritism/InGroupFavoritism.module.scss create mode 100644 src/components/_biases/BiasBody/demos/InGroupFavoritism/InGroupFavoritism.tsx create mode 100644 src/components/_biases/BiasBody/demos/InformationBias/InformationBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/InformationBias/InformationBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/InformationBias/InformationBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/InsensitivityToSampleSize/InsensitivityToSampleSize.content.ts create mode 100644 src/components/_biases/BiasBody/demos/InsensitivityToSampleSize/InsensitivityToSampleSize.module.scss create mode 100644 src/components/_biases/BiasBody/demos/InsensitivityToSampleSize/InsensitivityToSampleSize.tsx create mode 100644 src/components/_biases/BiasBody/demos/JustWorldFallacy/JustWorldFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/JustWorldFallacy/JustWorldFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/JustWorldFallacy/JustWorldFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/LawOfTriviality/LawOfTriviality.content.ts create mode 100644 src/components/_biases/BiasBody/demos/LawOfTriviality/LawOfTriviality.module.scss create mode 100644 src/components/_biases/BiasBody/demos/LawOfTriviality/LawOfTriviality.tsx create mode 100644 src/components/_biases/BiasBody/demos/LessIsBetterEffect/LessIsBetterEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/LessIsBetterEffect/LessIsBetterEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/LessIsBetterEffect/LessIsBetterEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ListLengthEffect/ListLengthEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ListLengthEffect/ListLengthEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ListLengthEffect/ListLengthEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/LossAversion/LossAversion.content.ts create mode 100644 src/components/_biases/BiasBody/demos/LossAversion/LossAversion.module.scss create mode 100644 src/components/_biases/BiasBody/demos/LossAversion/LossAversion.tsx create mode 100644 src/components/_biases/BiasBody/demos/MentalAccounting/MentalAccounting.content.ts create mode 100644 src/components/_biases/BiasBody/demos/MentalAccounting/MentalAccounting.module.scss create mode 100644 src/components/_biases/BiasBody/demos/MentalAccounting/MentalAccounting.tsx create mode 100644 src/components/_biases/BiasBody/demos/MereExposureEffect/MereExposureEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/MereExposureEffect/MereExposureEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/MereExposureEffect/MereExposureEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/MillersLaw/MillersLaw.content.ts create mode 100644 src/components/_biases/BiasBody/demos/MillersLaw/MillersLaw.module.scss create mode 100644 src/components/_biases/BiasBody/demos/MillersLaw/MillersLaw.tsx create mode 100644 src/components/_biases/BiasBody/demos/MoneyIllusion/MoneyIllusion.content.ts create mode 100644 src/components/_biases/BiasBody/demos/MoneyIllusion/MoneyIllusion.module.scss create mode 100644 src/components/_biases/BiasBody/demos/MoneyIllusion/MoneyIllusion.tsx create mode 100644 src/components/_biases/BiasBody/demos/MoodCongruentMemory/MoodCongruentMemory.content.ts create mode 100644 src/components/_biases/BiasBody/demos/MoodCongruentMemory/MoodCongruentMemory.module.scss create mode 100644 src/components/_biases/BiasBody/demos/MoodCongruentMemory/MoodCongruentMemory.tsx create mode 100644 src/components/_biases/BiasBody/demos/NegativityBias/NegativityBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/NegativityBias/NegativityBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/NegativityBias/NegativityBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/NeglectOfProbability/NeglectOfProbability.content.ts create mode 100644 src/components/_biases/BiasBody/demos/NeglectOfProbability/NeglectOfProbability.module.scss create mode 100644 src/components/_biases/BiasBody/demos/NeglectOfProbability/NeglectOfProbability.tsx create mode 100644 src/components/_biases/BiasBody/demos/NormalityBias/NormalityBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/NormalityBias/NormalityBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/NormalityBias/NormalityBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/NotInventedHere/NotInventedHere.content.ts create mode 100644 src/components/_biases/BiasBody/demos/NotInventedHere/NotInventedHere.module.scss create mode 100644 src/components/_biases/BiasBody/demos/NotInventedHere/NotInventedHere.tsx create mode 100644 src/components/_biases/BiasBody/demos/ObserverExpectancyEffect/ObserverExpectancyEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ObserverExpectancyEffect/ObserverExpectancyEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ObserverExpectancyEffect/ObserverExpectancyEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/OmissionBias/OmissionBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/OmissionBias/OmissionBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/OmissionBias/OmissionBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/OstrichEffect/OstrichEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/OstrichEffect/OstrichEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/OstrichEffect/OstrichEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/OutGroupHomogeneity/OutGroupHomogeneity.content.ts create mode 100644 src/components/_biases/BiasBody/demos/OutGroupHomogeneity/OutGroupHomogeneity.module.scss create mode 100644 src/components/_biases/BiasBody/demos/OutGroupHomogeneity/OutGroupHomogeneity.tsx create mode 100644 src/components/_biases/BiasBody/demos/OverconfidenceEffect/OverconfidenceEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/OverconfidenceEffect/OverconfidenceEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/OverconfidenceEffect/OverconfidenceEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/PeakEndRule/PeakEndRule.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PeakEndRule/PeakEndRule.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PeakEndRule/PeakEndRule.tsx create mode 100644 src/components/_biases/BiasBody/demos/PictureSuperiority/PictureSuperiority.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PictureSuperiority/PictureSuperiority.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PictureSuperiority/PictureSuperiority.tsx create mode 100644 src/components/_biases/BiasBody/demos/PlaceboEffect/PlaceboEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PlaceboEffect/PlaceboEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PlaceboEffect/PlaceboEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/PlanningFallacy/PlanningFallacy.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PlanningFallacy/PlanningFallacy.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PlanningFallacy/PlanningFallacy.tsx create mode 100644 src/components/_biases/BiasBody/demos/PositivityEffect/PositivityEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PositivityEffect/PositivityEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PositivityEffect/PositivityEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/PostPurchaseRationalization/PostPurchaseRationalization.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PostPurchaseRationalization/PostPurchaseRationalization.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PostPurchaseRationalization/PostPurchaseRationalization.tsx create mode 100644 src/components/_biases/BiasBody/demos/Prejudice/Prejudice.content.ts create mode 100644 src/components/_biases/BiasBody/demos/Prejudice/Prejudice.module.scss create mode 100644 src/components/_biases/BiasBody/demos/Prejudice/Prejudice.tsx create mode 100644 src/components/_biases/BiasBody/demos/PrimacyEffect/PrimacyEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/PrimacyEffect/PrimacyEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/PrimacyEffect/PrimacyEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/ProInnovationBias/ProInnovationBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ProInnovationBias/ProInnovationBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ProInnovationBias/ProInnovationBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/ProcessingDifficulty/ProcessingDifficulty.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ProcessingDifficulty/ProcessingDifficulty.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ProcessingDifficulty/ProcessingDifficulty.tsx create mode 100644 src/components/_biases/BiasBody/demos/Reactance/Reactance.content.ts create mode 100644 src/components/_biases/BiasBody/demos/Reactance/Reactance.module.scss create mode 100644 src/components/_biases/BiasBody/demos/Reactance/Reactance.tsx create mode 100644 src/components/_biases/BiasBody/demos/RecencyIllusion/RecencyIllusion.content.ts create mode 100644 src/components/_biases/BiasBody/demos/RecencyIllusion/RecencyIllusion.module.scss create mode 100644 src/components/_biases/BiasBody/demos/RecencyIllusion/RecencyIllusion.tsx create mode 100644 src/components/_biases/BiasBody/demos/RiskCompensation/RiskCompensation.content.ts create mode 100644 src/components/_biases/BiasBody/demos/RiskCompensation/RiskCompensation.module.scss create mode 100644 src/components/_biases/BiasBody/demos/RiskCompensation/RiskCompensation.tsx create mode 100644 src/components/_biases/BiasBody/demos/SelectivePerception/SelectivePerception.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SelectivePerception/SelectivePerception.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SelectivePerception/SelectivePerception.tsx create mode 100644 src/components/_biases/BiasBody/demos/SelfReferenceEffect/SelfReferenceEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SelfReferenceEffect/SelfReferenceEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SelfReferenceEffect/SelfReferenceEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/SerialPositionEffect/SerialPositionEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SerialPositionEffect/SerialPositionEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SerialPositionEffect/SerialPositionEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/SerialRecall/SerialRecall.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SerialRecall/SerialRecall.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SerialRecall/SerialRecall.tsx create mode 100644 src/components/_biases/BiasBody/demos/SocialDesirabilityBias/SocialDesirabilityBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SocialDesirabilityBias/SocialDesirabilityBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SocialDesirabilityBias/SocialDesirabilityBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/SpotlightEffect/SpotlightEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SpotlightEffect/SpotlightEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SpotlightEffect/SpotlightEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/Stereotype/Stereotype.content.ts create mode 100644 src/components/_biases/BiasBody/demos/Stereotype/Stereotype.module.scss create mode 100644 src/components/_biases/BiasBody/demos/Stereotype/Stereotype.tsx create mode 100644 src/components/_biases/BiasBody/demos/SubadditivityEffect/SubadditivityEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SubadditivityEffect/SubadditivityEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SubadditivityEffect/SubadditivityEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/SubjectiveValidation/SubjectiveValidation.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SubjectiveValidation/SubjectiveValidation.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SubjectiveValidation/SubjectiveValidation.tsx create mode 100644 src/components/_biases/BiasBody/demos/SurvivalBias/SurvivalBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SurvivalBias/SurvivalBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SurvivalBias/SurvivalBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/SystemJustification/SystemJustification.content.ts create mode 100644 src/components/_biases/BiasBody/demos/SystemJustification/SystemJustification.module.scss create mode 100644 src/components/_biases/BiasBody/demos/SystemJustification/SystemJustification.tsx create mode 100644 src/components/_biases/BiasBody/demos/ThirdPersonEffect/ThirdPersonEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ThirdPersonEffect/ThirdPersonEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ThirdPersonEffect/ThirdPersonEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/UnitBias/UnitBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/UnitBias/UnitBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/UnitBias/UnitBias.tsx create mode 100644 src/components/_biases/BiasBody/demos/VonRestorffEffect/VonRestorffEffect.content.ts create mode 100644 src/components/_biases/BiasBody/demos/VonRestorffEffect/VonRestorffEffect.module.scss create mode 100644 src/components/_biases/BiasBody/demos/VonRestorffEffect/VonRestorffEffect.tsx create mode 100644 src/components/_biases/BiasBody/demos/WeberFechnerLaw/WeberFechnerLaw.content.ts create mode 100644 src/components/_biases/BiasBody/demos/WeberFechnerLaw/WeberFechnerLaw.module.scss create mode 100644 src/components/_biases/BiasBody/demos/WeberFechnerLaw/WeberFechnerLaw.tsx create mode 100644 src/components/_biases/BiasBody/demos/ZeroRiskBias/ZeroRiskBias.content.ts create mode 100644 src/components/_biases/BiasBody/demos/ZeroRiskBias/ZeroRiskBias.module.scss create mode 100644 src/components/_biases/BiasBody/demos/ZeroRiskBias/ZeroRiskBias.tsx create mode 100644 src/components/_biases/BiasBody/index.ts create mode 100644 src/data/biasDemos/ambiguityEffect.ts create mode 100644 src/data/biasDemos/anchoringEffect.ts create mode 100644 src/data/biasDemos/anecdotalEvidence.ts create mode 100644 src/data/biasDemos/attentionalBias.ts create mode 100644 src/data/biasDemos/authorityBias.ts create mode 100644 src/data/biasDemos/automationBias.ts create mode 100644 src/data/biasDemos/availabilityHeuristics.ts create mode 100644 src/data/biasDemos/backfireEffect.ts create mode 100644 src/data/biasDemos/bandwagonEffect.ts create mode 100644 src/data/biasDemos/baseRateFallacy.ts create mode 100644 src/data/biasDemos/bizarrenessEffect.ts create mode 100644 src/data/biasDemos/clusteringIllusion.ts create mode 100644 src/data/biasDemos/confirmationBias.ts create mode 100644 src/data/biasDemos/conjunctionFallacy.ts create mode 100644 src/data/biasDemos/conservatism.ts create mode 100644 src/data/biasDemos/contextEffect.ts create mode 100644 src/data/biasDemos/continuedInfluenceEffect.ts create mode 100644 src/data/biasDemos/contrastEffect.ts create mode 100644 src/data/biasDemos/cueDependentForgetting.ts create mode 100644 src/data/biasDemos/curseOfKnowledge.ts create mode 100644 src/data/biasDemos/decoyEffect.ts create mode 100644 src/data/biasDemos/distinctionBias.ts create mode 100644 src/data/biasDemos/dunningKrugerEffect.ts create mode 100644 src/data/biasDemos/empathyGap.ts create mode 100644 src/data/biasDemos/endowmentEffect.ts create mode 100644 src/data/biasDemos/fadingAffectBias.ts create mode 100644 src/data/biasDemos/framingEffect.ts create mode 100644 src/data/biasDemos/frequencyIllusion.ts create mode 100644 src/data/biasDemos/functionalFixedness.ts create mode 100644 src/data/biasDemos/fundamentalAttributionError.ts create mode 100644 src/data/biasDemos/gamblersFallacy.ts create mode 100644 src/data/biasDemos/generationEffect.ts create mode 100644 src/data/biasDemos/groupAttributionError.ts create mode 100644 src/data/biasDemos/haloEffect.ts create mode 100644 src/data/biasDemos/hardEasyEffect.ts create mode 100644 src/data/biasDemos/hindsightBias.ts create mode 100644 src/data/biasDemos/hotHandFallacy.ts create mode 100644 src/data/biasDemos/humorEffect.ts create mode 100644 src/data/biasDemos/iKEAEffect.ts create mode 100644 src/data/biasDemos/illusionOfTransparency.ts create mode 100644 src/data/biasDemos/illusoryCorrelation.ts create mode 100644 src/data/biasDemos/illusoryTruthEffect.ts create mode 100644 src/data/biasDemos/inGroupFavoritism.ts create mode 100644 src/data/biasDemos/informationBias.ts create mode 100644 src/data/biasDemos/insensitivityToSampleSize.ts create mode 100644 src/data/biasDemos/justWorldFallacy.ts create mode 100644 src/data/biasDemos/lessIsBetterEffect.ts create mode 100644 src/data/biasDemos/listLengthEffect.ts create mode 100644 src/data/biasDemos/lossAversion.ts create mode 100644 src/data/biasDemos/mentalAccounting.ts create mode 100644 src/data/biasDemos/mereExposureEffect.ts create mode 100644 src/data/biasDemos/millersLaw.ts create mode 100644 src/data/biasDemos/moneyIllusion.ts create mode 100644 src/data/biasDemos/moodCongruentMemory.ts create mode 100644 src/data/biasDemos/negativityBias.ts create mode 100644 src/data/biasDemos/neglectOfProbability.ts create mode 100644 src/data/biasDemos/normalityBias.ts create mode 100644 src/data/biasDemos/omissionBias.ts create mode 100644 src/data/biasDemos/ostrichEffect.ts create mode 100644 src/data/biasDemos/peakEndRule.ts create mode 100644 src/data/biasDemos/pictureSuperiority.ts create mode 100644 src/data/biasDemos/placeboEffect.ts create mode 100644 src/data/biasDemos/positivityEffect.ts create mode 100644 src/data/biasDemos/postPurchaseRationalization.ts create mode 100644 src/data/biasDemos/prejudice.ts create mode 100644 src/data/biasDemos/primacyEffect.ts create mode 100644 src/data/biasDemos/processingDifficulty.ts create mode 100644 src/data/biasDemos/reactance.ts create mode 100644 src/data/biasDemos/recencyIllusion.ts create mode 100644 src/data/biasDemos/selectivePerception.ts create mode 100644 src/data/biasDemos/selfReferenceEffect.ts create mode 100644 src/data/biasDemos/serialPositionEffect.ts create mode 100644 src/data/biasDemos/serialRecall.ts create mode 100644 src/data/biasDemos/socialDesirabilityBias.ts create mode 100644 src/data/biasDemos/spotlightEffect.ts create mode 100644 src/data/biasDemos/subjectiveValidation.ts create mode 100644 src/data/biasDemos/systemJustification.ts create mode 100644 src/data/biasDemos/thirdPersonEffect.ts create mode 100644 src/data/biasDemos/unitBias.ts create mode 100644 src/data/biasDemos/vonRestorffEffect.ts create mode 100644 src/data/biasDemos/zeroRiskBias.ts create mode 100644 src/data/biasList/biases.ts create mode 100644 src/data/biasList/hy.ts create mode 100644 src/data/biasList/index.ts create mode 100644 src/data/biasList/ru.ts diff --git a/src/components/UXCoreModal/UXCoreModal.tsx b/src/components/UXCoreModal/UXCoreModal.tsx index e760044..096f0ef 100644 --- a/src/components/UXCoreModal/UXCoreModal.tsx +++ b/src/components/UXCoreModal/UXCoreModal.tsx @@ -19,6 +19,7 @@ import modalIntl from '@data/modal'; import HrIcon from '@icons/HrIcon'; import ProductIcon from '@icons/ProductIcon'; +import BiasBody from '@components/_biases/BiasBody'; import ContentParser from '@components/ContentParser'; import ModalRaiting from '@components/ModalRaiting'; import Spinner from '@components/Spinner'; @@ -245,6 +246,7 @@ const UXCoreModal: FC = ({ styles={styles} />
+ {data.title && } {questions.length > 0 && ( <>
= ({ styles={styles} />
+ {bias.title && ( + + )} {questions.length > 0 && ( <>
= { + en: { + visualExample: 'Visual example', + scenario: 'Scenario:', + without: 'Without Bias', + with: 'With Bias', + why: 'Why It Works', + loading: 'Loading demo...', + missing: 'No demo available for this bias.', + }, + ru: { + visualExample: 'Наглядный пример', + scenario: 'Сценарий:', + without: 'Без искажения', + with: 'С искажением', + why: 'Почему это работает', + loading: 'Загрузка демо...', + missing: 'Для этого искажения демо пока нет.', + }, + hy: { + visualExample: 'Տեսողական օրինակ', + scenario: 'Scenario:', + without: 'Without Bias', + with: 'With Bias', + why: 'Why It Works', + loading: 'Loading demo...', + missing: 'No demo available for this bias.', + }, +}; + +const normalizeName = (s: string) => + s.toLowerCase().replace(/[^a-z0-9Ѐ-ӿ]/g, ''); + +const BiasBody = ({ biasNumber, name, locale }: BiasBodyProps) => { + const [DemoBefore, setDemoBefore] = useState(null); + const [DemoAfter, setDemoAfter] = useState(null); + + const biases = biasesByLocale[locale] ?? biasesByLocale.en; + const t = labels[locale] ?? labels.en; + const bias = + biasNumber != null + ? biases.find(b => b.id === biasNumber) + : name + ? biases.find(b => normalizeName(b.name) === normalizeName(name)) + : undefined; + const biasSlug = bias?.slug; + + useEffect(() => { + setDemoBefore(null); + setDemoAfter(null); + if (!biasSlug) return; + const loader = demoRegistry[biasSlug]; + if (loader) { + loader().then(mod => { + setDemoBefore(() => mod.Before); + setDemoAfter(() => mod.After); + }); + } + }, [biasSlug]); + + if (!bias) { + return ( +
+

{t.missing}

+
+ ); + } + + return ( +
+ {t.visualExample} +

+ {t.scenario}{' '} + {bias.scenario} +

+ +
+
+

{t.without}

+
+ + {DemoBefore ? ( + + ) : ( +
{t.loading}
+ )} + +
+

{bias.withoutBias}

+
+
+

{t.with}

+
+ + {DemoAfter ? ( + + ) : ( +
{t.loading}
+ )} + +
+

{bias.withBias}

+
+
+ +
+

{t.why}

+

{bias.whyItWorks}

+
+
+ ); +}; + +export default BiasBody; diff --git a/src/components/_biases/BiasBody/DemoErrorBoundary/DemoErrorBoundary.tsx b/src/components/_biases/BiasBody/DemoErrorBoundary/DemoErrorBoundary.tsx new file mode 100644 index 0000000..97168b9 --- /dev/null +++ b/src/components/_biases/BiasBody/DemoErrorBoundary/DemoErrorBoundary.tsx @@ -0,0 +1,36 @@ +import { Component, ReactNode } from 'react'; + +interface DemoErrorBoundaryProps { + children: ReactNode; +} + +interface DemoErrorBoundaryState { + hasError: boolean; +} + +class DemoErrorBoundary extends Component< + DemoErrorBoundaryProps, + DemoErrorBoundaryState +> { + constructor(props: DemoErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(): DemoErrorBoundaryState { + return { hasError: true }; + } + + render() { + if (this.state.hasError) { + return ( +
+ Demo unavailable +
+ ); + } + return this.props.children; + } +} + +export default DemoErrorBoundary; diff --git a/src/components/_biases/BiasBody/DemoErrorBoundary/index.ts b/src/components/_biases/BiasBody/DemoErrorBoundary/index.ts new file mode 100644 index 0000000..e847695 --- /dev/null +++ b/src/components/_biases/BiasBody/DemoErrorBoundary/index.ts @@ -0,0 +1,3 @@ +import DemoErrorBoundary from './DemoErrorBoundary'; + +export default DemoErrorBoundary; diff --git a/src/components/_biases/BiasBody/_tokens.scss b/src/components/_biases/BiasBody/_tokens.scss new file mode 100644 index 0000000..5ebf668 --- /dev/null +++ b/src/components/_biases/BiasBody/_tokens.scss @@ -0,0 +1,53 @@ +// ── Primary ── +$color-primary: #28587b; +$color-primary-hover: #5b88bd; +$color-dark: #1e2023; +$color-black: #000000; +$color-white: #ffffff; + +// ── Backgrounds ── +$bg-page: #f9fafb; +$bg-page-gradient: linear-gradient(180deg, #f9fafb, #e8e8e8); +$bg-card: #ffffff; +$bg-hover: #f1f1f1; +$bg-alt: #f5f5f5; + +// ── Borders ── +$border-color: #d9d9d9; +$border-dark: #cbcbcb; +$border-radius: 4px; +$border-radius-round: 50%; + +// ── Text ── +$text-primary: #000000; +$text-secondary: #9e9e9e; +$text-link: #28587b; +$text-disabled: rgba(0, 0, 0, 0.65); + +// ── Tag/Badge Colors ── +$tag-green: #42c256; +$tag-olive: #77a34b; +$tag-purple: #a36aa4; +$tag-orange: #cd7232; +$tag-dark-purple: #662369; + +// ── Effects ── +$shadow-card: 0 4px 16px rgba(0, 0, 0, 0.15); +$overlay-bg: rgba(0, 0, 0, 0.35); + +// ── Typography ── +$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; +$font-size-sm: 12px; +$font-size-base: 14px; +$font-size-md: 16px; +$font-size-lg: 20px; +$font-size-xl: 26px; +$font-size-display: 36px; + +// ── Spacing ── +$space-xs: 4px; +$space-sm: 8px; +$space-md: 12px; +$space-lg: 16px; +$space-xl: 20px; +$space-2xl: 28px; diff --git a/src/components/_biases/BiasBody/demoRegistry.ts b/src/components/_biases/BiasBody/demoRegistry.ts new file mode 100644 index 0000000..5b5b4ff --- /dev/null +++ b/src/components/_biases/BiasBody/demoRegistry.ts @@ -0,0 +1,165 @@ +import type { ComponentType } from 'react'; + +export const demoRegistry: Record< + string, + () => Promise<{ Before: ComponentType; After: ComponentType }> +> = { + 'availability-heuristics': () => + import('./demos/AvailabilityHeuristics/AvailabilityHeuristics'), + 'attentional-bias': () => import('./demos/AttentionalBias/AttentionalBias'), + 'illusory-truth-effect': () => + import('./demos/IllusoryTruthEffect/IllusoryTruthEffect'), + 'mere-exposure-effect': () => + import('./demos/MereExposureEffect/MereExposureEffect'), + 'context-effect': () => import('./demos/ContextEffect/ContextEffect'), + 'cue-dependent-forgetting': () => + import('./demos/CueDependentForgetting/CueDependentForgetting'), + 'mood-congruent-memory-bias': () => + import('./demos/MoodCongruentMemory/MoodCongruentMemory'), + 'frequency-illusion': () => + import('./demos/FrequencyIllusion/FrequencyIllusion'), + 'empathy-gap': () => import('./demos/EmpathyGap/EmpathyGap'), + 'omission-bias': () => import('./demos/OmissionBias/OmissionBias'), + 'base-rate-fallacy': () => import('./demos/BaseRateFallacy/BaseRateFallacy'), + 'bizarreness-effect': () => + import('./demos/BizarrenessEffect/BizarrenessEffect'), + 'humor-effect': () => import('./demos/HumorEffect/HumorEffect'), + 'picture-superiority-effect': () => + import('./demos/PictureSuperiority/PictureSuperiority'), + 'von-restorff-effect': () => + import('./demos/VonRestorffEffect/VonRestorffEffect'), + 'self-reference-effect': () => + import('./demos/SelfReferenceEffect/SelfReferenceEffect'), + 'negativity-bias': () => import('./demos/NegativityBias/NegativityBias'), + 'anchoring-effect': () => import('./demos/AnchoringEffect/AnchoringEffect'), + conservatism: () => import('./demos/Conservatism/Conservatism'), + 'contrast-effect': () => import('./demos/ContrastEffect/ContrastEffect'), + 'distinction-bias': () => import('./demos/DistinctionBias/DistinctionBias'), + 'framing-effect': () => import('./demos/FramingEffect/FramingEffect'), + 'money-illusion': () => import('./demos/MoneyIllusion/MoneyIllusion'), + 'weber-fechner-law': () => import('./demos/WeberFechnerLaw/WeberFechnerLaw'), + 'confirmation-bias': () => + import('./demos/ConfirmationBias/ConfirmationBias'), + 'post-purchase-rationalization': () => + import('./demos/PostPurchaseRationalization/PostPurchaseRationalization'), + 'selective-perception': () => + import('./demos/SelectivePerception/SelectivePerception'), + 'ostrich-effect': () => import('./demos/OstrichEffect/OstrichEffect'), + 'subjective-validation': () => + import('./demos/SubjectiveValidation/SubjectiveValidation'), + 'continued-influence-effect': () => + import('./demos/ContinuedInfluenceEffect/ContinuedInfluenceEffect'), + 'clustering-illusion': () => + import('./demos/ClusteringIllusion/ClusteringIllusion'), + 'insensitivity-to-sample-size': () => + import('./demos/InsensitivityToSampleSize/InsensitivityToSampleSize'), + 'neglect-of-probability': () => + import('./demos/NeglectOfProbability/NeglectOfProbability'), + 'anecdotal-evidence': () => + import('./demos/AnecdotalEvidence/AnecdotalEvidence'), + 'recency-illusion': () => import('./demos/RecencyIllusion/RecencyIllusion'), + 'gamblers-fallacy': () => import('./demos/GamblersFallacy/GamblersFallacy'), + 'hot-hand-fallacy': () => import('./demos/HotHandFallacy/HotHandFallacy'), + 'illusory-correlation': () => + import('./demos/IllusoryCorrelation/IllusoryCorrelation'), + 'group-attribution-error': () => + import('./demos/GroupAttributionError/GroupAttributionError'), + 'fundamental-attribution-error': () => + import('./demos/FundamentalAttributionError/FundamentalAttributionError'), + 'functional-fixedness': () => + import('./demos/FunctionalFixedness/FunctionalFixedness'), + 'just-world-fallacy': () => + import('./demos/JustWorldFallacy/JustWorldFallacy'), + 'authority-bias': () => import('./demos/AuthorityBias/AuthorityBias'), + 'automation-bias': () => import('./demos/AutomationBias/AutomationBias'), + 'bandwagon-effect': () => import('./demos/BandwagonEffect/BandwagonEffect'), + placebo: () => import('./demos/PlaceboEffect/PlaceboEffect'), + 'in-group-favoritism': () => + import('./demos/InGroupFavoritism/InGroupFavoritism'), + 'halo-effect': () => import('./demos/HaloEffect/HaloEffect'), + 'positivity-effect': () => + import('./demos/PositivityEffect/PositivityEffect'), + 'mental-accounting': () => + import('./demos/MentalAccounting/MentalAccounting'), + 'normality-bias': () => import('./demos/NormalityBias/NormalityBias'), + 'millers-law': () => import('./demos/MillersLaw/MillersLaw'), + 'illusion-of-transparency': () => + import('./demos/IllusionOfTransparency/IllusionOfTransparency'), + 'curse-of-knowledge': () => + import('./demos/CurseOfKnowledge/CurseOfKnowledge'), + 'spotlight-effect': () => import('./demos/SpotlightEffect/SpotlightEffect'), + 'hindsight-bias': () => import('./demos/HindsightBias/HindsightBias'), + 'social-desirability-bias': () => + import('./demos/SocialDesirabilityBias/SocialDesirabilityBias'), + 'third-person-effect': () => + import('./demos/ThirdPersonEffect/ThirdPersonEffect'), + 'hard-easy-effect': () => import('./demos/HardEasyEffect/HardEasyEffect'), + 'dunning-kruger-effect': () => + import('./demos/DunningKrugerEffect/DunningKrugerEffect'), + 'barnum-effect': () => import('./demos/BarnumEffect/BarnumEffect'), + 'illusion-of-control': () => + import('./demos/IllusionOfControl/IllusionOfControl'), + 'illusory-superiority': () => + import('./demos/IllusorySuperiority/IllusorySuperiority'), + 'risk-compensation': () => + import('./demos/RiskCompensation/RiskCompensation'), + 'hyperbolic-discounting': () => + import('./demos/HyperbolicDiscounting/HyperbolicDiscounting'), + 'appeal-to-novelty': () => import('./demos/AppealToNovelty/AppealToNovelty'), + 'escalation-of-commitment': () => + import('./demos/EscalationOfCommitment/EscalationOfCommitment'), + 'generation-effect': () => + import('./demos/GenerationEffect/GenerationEffect'), + 'loss-aversion': () => import('./demos/LossAversion/LossAversion'), + 'ikea-effect': () => import('./demos/IKEAEffect/IKEAEffect'), + 'unit-bias': () => import('./demos/UnitBias/UnitBias'), + 'zero-risk-bias': () => import('./demos/ZeroRiskBias/ZeroRiskBias'), + 'processing-difficulty-effect': () => + import('./demos/ProcessingDifficulty/ProcessingDifficulty'), + 'endowment-effect': () => import('./demos/EndowmentEffect/EndowmentEffect'), + 'backfire-effect': () => import('./demos/BackfireEffect/BackfireEffect'), + 'system-justification': () => + import('./demos/SystemJustification/SystemJustification'), + reactance: () => import('./demos/Reactance/Reactance'), + 'decoy-effect': () => import('./demos/DecoyEffect/DecoyEffect'), + 'ambiguity-effect': () => import('./demos/AmbiguityEffect/AmbiguityEffect'), + 'information-bias': () => import('./demos/InformationBias/InformationBias'), + 'conjunction-fallacy': () => + import('./demos/ConjunctionFallacy/ConjunctionFallacy'), + 'less-is-better-effect': () => + import('./demos/LessIsBetterEffect/LessIsBetterEffect'), + prejudice: () => import('./demos/Prejudice/Prejudice'), + 'fading-affect-bias': () => + import('./demos/FadingAffectBias/FadingAffectBias'), + 'peak-end-rule': () => import('./demos/PeakEndRule/PeakEndRule'), + 'serial-recall': () => import('./demos/SerialRecall/SerialRecall'), + 'list-length-effect': () => + import('./demos/ListLengthEffect/ListLengthEffect'), + 'primacy-effect': () => import('./demos/PrimacyEffect/PrimacyEffect'), + 'serial-position-effect': () => + import('./demos/SerialPositionEffect/SerialPositionEffect'), + 'congruence-bias': () => import('./demos/CongruenceBias/CongruenceBias'), + 'observer-expectancy-effect': () => + import('./demos/ObserverExpectancyEffect/ObserverExpectancyEffect'), + 'bias-blind-spot': () => import('./demos/BiasBlindSpot/BiasBlindSpot'), + 'illusion-of-validity': () => + import('./demos/IllusionOfValidity/IllusionOfValidity'), + stereotype: () => import('./demos/Stereotype/Stereotype'), + 'out-group-homogeneity': () => + import('./demos/OutGroupHomogeneity/OutGroupHomogeneity'), + 'not-invented-here': () => import('./demos/NotInventedHere/NotInventedHere'), + 'survival-bias': () => import('./demos/SurvivalBias/SurvivalBias'), + 'subadditivity-effect': () => + import('./demos/SubadditivityEffect/SubadditivityEffect'), + 'illusion-of-asymmetric-insight': () => + import('./demos/IllusionOfAsymmetricInsight/IllusionOfAsymmetricInsight'), + 'planning-fallacy': () => import('./demos/PlanningFallacy/PlanningFallacy'), + 'pro-innovation-bias': () => + import('./demos/ProInnovationBias/ProInnovationBias'), + 'overconfidence-effect': () => + import('./demos/OverconfidenceEffect/OverconfidenceEffect'), + 'consensus-bias': () => import('./demos/ConsensusBias/ConsensusBias'), + 'law-of-triviality': () => import('./demos/LawOfTriviality/LawOfTriviality'), + 'implicit-stereotypes': () => + import('./demos/ImplicitStereotypes/ImplicitStereotypes'), +}; diff --git a/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.content.ts b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.content.ts new file mode 100644 index 0000000..2c02a72 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.content.ts @@ -0,0 +1,226 @@ +const content = { + en: { + title: 'Choose Your Plan', + cta: 'Get Started', + before: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/mo', + features: ['Storage and support', 'Basic features', 'Email access'], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/mo', + features: ['More storage', 'More features', 'Priority access'], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/mo', + features: [ + 'Everything in Pro', + 'Advanced features', + 'Dedicated support', + ], + featured: false, + }, + ], + }, + after: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/mo', + features: [ + '10 GB storage', + '99.5% uptime SLA', + 'Email support (48h)', + ], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/mo', + features: [ + '50 GB storage', + '99.9% uptime SLA', + 'Live chat support (2h)', + ], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/mo', + features: [ + '500 GB storage', + '99.99% uptime SLA', + 'Dedicated manager (1h)', + ], + featured: false, + }, + ], + }, + }, + ru: { + title: 'Выберите тариф', + cta: 'Начать', + before: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/мес', + features: [ + 'Хранилище и поддержка', + 'Базовые функции', + 'Доступ по email', + ], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/мес', + features: ['Больше места', 'Больше функций', 'Приоритетный доступ'], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/мес', + features: [ + 'Всё из Pro', + 'Продвинутые функции', + 'Выделенная поддержка', + ], + featured: false, + }, + ], + }, + after: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/мес', + features: [ + '10 ГБ хранилища', + '99,5% SLA аптайма', + 'Email-поддержка (48 ч)', + ], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/мес', + features: [ + '50 ГБ хранилища', + '99,9% SLA аптайма', + 'Чат-поддержка (2 ч)', + ], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/мес', + features: [ + '500 ГБ хранилища', + '99,99% SLA аптайма', + 'Выделенный менеджер (1 ч)', + ], + featured: false, + }, + ], + }, + }, + hy: { + title: 'Ընտրեք ձեր փաթեթը', + cta: 'Սկսել', + before: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/ամս', + features: [ + 'Պահոց և աջակցություն', + 'Հիմնական գործառույթներ', + 'Email մուտք', + ], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/ամս', + features: [ + 'Ավելի շատ պահոց', + 'Ավելի շատ գործառույթներ', + 'Առաջնահերթ մուտք', + ], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/ամս', + features: [ + 'Ամեն ինչ Pro-ից', + 'Ընդլայնված գործառույթներ', + 'Անհատական աջակցություն', + ], + featured: false, + }, + ], + }, + after: { + plans: [ + { + name: 'Starter', + price: '$10', + priceUnit: '/ամս', + features: [ + '10 ԳԲ պահոց', + '99,5% աշխատաժամանակի SLA', + 'Email-աջակցություն (48 ժ)', + ], + featured: false, + }, + { + name: 'Pro', + price: '$25', + priceUnit: '/ամս', + features: [ + '50 ԳԲ պահոց', + '99,9% աշխատաժամանակի SLA', + 'Չատ-աջակցություն (2 ժ)', + ], + featured: true, + }, + { + name: 'Business', + price: '$50', + priceUnit: '/ամս', + features: [ + '500 ԳԲ պահոց', + '99,99% աշխատաժամանակի SLA', + 'Անհատական մենեջեր (1 ժ)', + ], + featured: false, + }, + ], + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.module.scss b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.module.scss new file mode 100644 index 0000000..2234f76 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.module.scss @@ -0,0 +1,102 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; +} + +.title { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; + margin: 0 0 $space-lg; + text-align: center; +} + +.plans { + display: flex; + gap: $space-sm; +} + +.plan { + flex: 1; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-sm; + + &.featured { + border-color: $color-primary; + box-shadow: $shadow-card; + } +} + +.planName { + font-size: $font-size-base; + font-weight: 600; + color: $text-primary; +} + +.price { + font-size: $font-size-xl; + font-weight: 700; + color: $color-primary; + + span { + font-size: $font-size-sm; + font-weight: 400; + color: $text-secondary; + } +} + +.features { + list-style: none; + margin: 0; + padding: 0; + flex: 1; + display: flex; + flex-direction: column; + gap: $space-xs; + + li { + font-size: $font-size-sm; + color: $text-secondary; + padding-left: $space-md; + position: relative; + + &::before { + content: '✓'; + position: absolute; + left: 0; + color: $tag-green; + font-weight: 700; + } + } +} + +.btn { + width: 100%; + padding: $space-sm; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $bg-card; + color: $text-primary; + font-size: $font-size-sm; + cursor: pointer; + font-family: $font-family; + + &Primary { + background: $color-primary; + color: $color-white; + border-color: $color-primary; + + &:hover { + background: $color-primary-hover; + } + } +} diff --git a/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.tsx b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.tsx new file mode 100644 index 0000000..022e894 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AmbiguityEffect/AmbiguityEffect.tsx @@ -0,0 +1,76 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AmbiguityEffect.content'; + +import styles from './AmbiguityEffect.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.before.plans.map(p => ( +
+
{p.name}
+
+ {p.price} + {p.priceUnit} +
+
    + {p.features.map(f => ( +
  • {f}
    • + ))} +
+ +
+ ))} +
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.after.plans.map(p => ( +
+
{p.name}
+
+ {p.price} + {p.priceUnit} +
+
    + {p.features.map(f => ( +
  • {f}
    • + ))} +
+ +
+ ))} +
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.content.ts b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.content.ts new file mode 100644 index 0000000..612e212 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.content.ts @@ -0,0 +1,111 @@ +const content = { + en: { + title: 'Choose Your Plan', + selectBtn: 'Select', + monthSuffix: '/mo', + featuredBadge: 'Best Value', + plans: [ + { + name: 'Starter', + price: '$10', + wasPrice: 'was $39/mo', + features: ['1 user', '5 projects', 'Basic analytics'], + featured: false, + }, + { + name: 'Pro', + price: '$25', + wasPrice: 'was $99/mo', + features: ['5 users', 'Unlimited projects', 'Advanced analytics'], + featured: true, + }, + { + name: 'Enterprise', + price: '$50', + wasPrice: 'was $149/mo', + features: [ + 'Unlimited users', + 'Unlimited projects', + 'Custom integrations', + ], + featured: false, + }, + ], + }, + ru: { + title: 'Выберите тариф', + selectBtn: 'Выбрать', + monthSuffix: '/мес', + featuredBadge: 'Лучшее предложение', + plans: [ + { + name: 'Starter', + price: '$10', + wasPrice: 'было $39/мес', + features: ['1 пользователь', '5 проектов', 'Базовая аналитика'], + featured: false, + }, + { + name: 'Pro', + price: '$25', + wasPrice: 'было $99/мес', + features: [ + '5 пользователей', + 'Безлимит проектов', + 'Продвинутая аналитика', + ], + featured: true, + }, + { + name: 'Enterprise', + price: '$50', + wasPrice: 'было $149/мес', + features: [ + 'Безлимит пользователей', + 'Безлимит проектов', + 'Кастомные интеграции', + ], + featured: false, + }, + ], + }, + hy: { + title: 'Ընտրեք ձեր փաթեթը', + selectBtn: 'Ընտրել', + monthSuffix: '/ամս', + featuredBadge: 'Լավագույն արժեքը', + plans: [ + { + name: 'Starter', + price: '$10', + wasPrice: 'նախկինում $39/ամս', + features: ['1 օգտատեր', '5 պրոյեկտ', 'Հիմնական վերլուծություն'], + featured: false, + }, + { + name: 'Pro', + price: '$25', + wasPrice: 'նախկինում $99/ամս', + features: [ + '5 օգտատեր', + 'Անսահմանափակ պրոյեկտներ', + 'Ընդլայնված վերլուծություն', + ], + featured: true, + }, + { + name: 'Enterprise', + price: '$50', + wasPrice: 'նախկինում $149/ամս', + features: [ + 'Անսահմանափակ օգտատերեր', + 'Անսահմանափակ պրոյեկտներ', + 'Անհատական ինտեգրումներ', + ], + featured: false, + }, + ], + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.module.scss b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.module.scss new file mode 100644 index 0000000..f8d5296 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.module.scss @@ -0,0 +1,124 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; +} + +.title { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; + margin: 0 0 $space-lg; + text-align: center; +} + +.plans { + display: flex; + gap: $space-sm; +} + +.plan { + flex: 1; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-xs; + position: relative; + + &.featured { + border-color: $color-primary; + box-shadow: $shadow-card; + } +} + +.badge { + position: absolute; + top: -10px; + left: 50%; + transform: translateX(-50%); + background: $tag-green; + color: $color-white; + font-size: $font-size-sm; + font-weight: 600; + padding: 2px $space-sm; + border-radius: 20px; + white-space: nowrap; +} + +.planName { + font-size: $font-size-base; + font-weight: 600; + color: $text-primary; + margin-top: $space-sm; +} + +.wasPrice { + font-size: $font-size-sm; + color: $text-secondary; + text-decoration: line-through; +} + +.price { + font-size: $font-size-xl; + font-weight: 700; + color: $color-primary; + + span { + font-size: $font-size-sm; + font-weight: 400; + color: $text-secondary; + } +} + +.features { + list-style: none; + margin: $space-xs 0; + padding: 0; + flex: 1; + display: flex; + flex-direction: column; + gap: $space-xs; + + li { + font-size: $font-size-sm; + color: $text-secondary; + padding-left: $space-md; + position: relative; + + &::before { + content: '✓'; + position: absolute; + left: 0; + color: $tag-green; + font-weight: 700; + } + } +} + +.btn { + width: 100%; + padding: $space-sm; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $bg-card; + color: $text-primary; + font-size: $font-size-sm; + cursor: pointer; + font-family: $font-family; + + &Primary { + background: $color-primary; + color: $color-white; + border-color: $color-primary; + + &:hover { + background: $color-primary-hover; + } + } +} diff --git a/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.tsx b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.tsx new file mode 100644 index 0000000..62b7aae --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnchoringEffect/AnchoringEffect.tsx @@ -0,0 +1,88 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AnchoringEffect.content'; + +import styles from './AnchoringEffect.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.plans.map(p => ( +
+
{p.name}
+
+ {p.price} + {c.monthSuffix} +
+
    + {p.features.map(f => ( +
  • {f}
    • + ))} +
+ +
+ ))} +
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.plans.map(p => ( +
+ {p.featured && ( +
{c.featuredBadge}
+ )} +
{p.name}
+
{p.wasPrice}
+
+ {p.price} + {c.monthSuffix} +
+
    + {p.features.map(f => ( +
  • {f}
    • + ))} +
+ +
+ ))} +
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.content.ts b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.content.ts new file mode 100644 index 0000000..c967226 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.content.ts @@ -0,0 +1,72 @@ +const content = { + en: { + title: 'Why Teams Love Us', + before: { + stats: [ + { label: 'Overall satisfaction', value: '98%', barWidth: '98%' }, + { label: 'Active customers', value: '12,000', barWidth: '75%' }, + { label: 'Avg. hours saved / week', value: '8.4 hrs', barWidth: '60%' }, + ], + note: 'Based on 12,000 customer survey responses, Q4 2024.', + }, + after: { + quote: + 'I was drowning in invoices until I found this tool. It saved me 10 hours last week alone — I finally feel in control of my business.', + personName: 'Sarah Lin', + personRole: 'Freelance Designer', + avatar: 'SL', + logoMain: 'acme', + logoSuffix: 'co', + }, + }, + ru: { + title: 'За что команды нас любят', + before: { + stats: [ + { label: 'Общая удовлетворённость', value: '98%', barWidth: '98%' }, + { label: 'Активных клиентов', value: '12 000', barWidth: '75%' }, + { + label: 'В среднем сэкономлено часов / неделю', + value: '8,4 ч', + barWidth: '60%', + }, + ], + note: 'По результатам 12 000 опросов клиентов, Q4 2024.', + }, + after: { + quote: + 'Я тонула в счетах, пока не нашла этот инструмент. За одну только прошлую неделю он сэкономил мне 10 часов — я наконец-то чувствую, что контролирую свой бизнес.', + personName: 'Сара Лин', + personRole: 'Фриланс-дизайнер', + avatar: 'СЛ', + logoMain: 'acme', + logoSuffix: 'co', + }, + }, + hy: { + title: 'Ինչո՞ւ են թիմերը մեզ սիրում', + before: { + stats: [ + { label: 'Ընդհանուր գոհունակություն', value: '98%', barWidth: '98%' }, + { label: 'Ակտիվ հաճախորդներ', value: '12 000', barWidth: '75%' }, + { + label: 'Միջինում խնայված ժամեր / շաբաթ', + value: '8,4 ժ', + barWidth: '60%', + }, + ], + note: 'Ըստ 12 000 հաճախորդի հարցման արդյունքների, 2024 Q4:', + }, + after: { + quote: + 'Ես խեղդվում էի հաշիվների մեջ, մինչև գտա այս գործիքը: Միայն անցած շաբաթ այն ինձ խնայեց 10 ժամ — վերջապես զգում եմ, որ վերահսկում եմ իմ բիզնեսը:', + personName: 'Սառա Լին', + personRole: 'Ազատ աշխատող դիզայներ', + avatar: 'ՍԼ', + logoMain: 'acme', + logoSuffix: 'co', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.module.scss b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.module.scss new file mode 100644 index 0000000..a864eeb --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.module.scss @@ -0,0 +1,136 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; +} + +.title { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; + margin: 0 0 $space-lg; + text-align: center; +} + +// Before — aggregate stats +.aggregate { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-lg; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.statRow { + display: flex; + justify-content: space-between; + align-items: center; +} + +.statLabel { + font-size: $font-size-sm; + color: $text-secondary; +} + +.statValue { + font-size: $font-size-base; + font-weight: 700; + color: $color-primary; +} + +.barWrap { + height: 6px; + background: $bg-alt; + border-radius: 3px; + overflow: hidden; +} + +.bar { + height: 100%; + background: $color-primary; + border-radius: 3px; +} + +.note { + font-size: $font-size-sm; + color: $text-secondary; + margin-top: $space-md; + text-align: center; +} + +// After — testimonial card +.testimonialCard { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-lg; + box-shadow: $shadow-card; +} + +.quoteIcon { + font-size: 40px; + color: $color-primary; + line-height: 1; + margin-bottom: $space-xs; +} + +.quote { + font-size: $font-size-base; + color: $text-primary; + line-height: 1.6; + margin: 0 0 $space-lg; + font-style: italic; +} + +.person { + display: flex; + align-items: center; + gap: $space-sm; +} + +.avatar { + width: 36px; + height: 36px; + border-radius: $border-radius-round; + background: $color-primary; + color: $color-white; + display: flex; + align-items: center; + justify-content: center; + font-size: $font-size-sm; + font-weight: 700; + flex-shrink: 0; +} + +.personInfo { + flex: 1; +} + +.personName { + font-size: $font-size-base; + font-weight: 600; + color: $text-primary; +} + +.personRole { + font-size: $font-size-sm; + color: $text-secondary; +} + +.logo { + font-size: $font-size-sm; + font-weight: 700; + color: $text-secondary; + border: 1px solid $border-color; + padding: 2px $space-sm; + border-radius: $border-radius; + + span { + color: $color-primary; + } +} diff --git a/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.tsx b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.tsx new file mode 100644 index 0000000..ba73bf2 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AnecdotalEvidence/AnecdotalEvidence.tsx @@ -0,0 +1,57 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AnecdotalEvidence.content'; + +import styles from './AnecdotalEvidence.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.before.stats.map(s => ( +
+
+ {s.label} + {s.value} +
+
+
+
+
+ ))} +
+

{c.before.note}

+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+

{c.title}

+
+
“
+

{c.after.quote}

+
+
{c.after.avatar}
+
+
{c.after.personName}
+
{c.after.personRole}
+
+
+ {c.after.logoMain} + {c.after.logoSuffix} +
+
+
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.content.ts b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.content.ts new file mode 100644 index 0000000..c6e4a52 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.content.ts @@ -0,0 +1,49 @@ +const content = { + en: { + navItems: ['Dashboard', 'Reports', 'Settings'], + activeNav: 'Reports', + before: { + title: 'Report Builder has been updated', + sub: 'View changelog', + dismiss: 'Dismiss', + }, + after: { + newBadge: 'NEW', + title: 'Next-Gen Report Builder', + sub: 'Completely reimagined with AI-powered insights. Try the future of reporting.', + tryNow: 'Try Now', + }, + }, + ru: { + navItems: ['Дашборд', 'Отчёты', 'Настройки'], + activeNav: 'Отчёты', + before: { + title: 'Конструктор отчётов обновлён', + sub: 'Смотреть changelog', + dismiss: 'Закрыть', + }, + after: { + newBadge: 'НОВОЕ', + title: 'Конструктор отчётов нового поколения', + sub: 'Полностью переработан с AI-инсайтами. Попробуйте будущее отчётности.', + tryNow: 'Попробовать', + }, + }, + hy: { + navItems: ['Վահանակ', 'Հաշվետվություններ', 'Կարգավորումներ'], + activeNav: 'Հաշվետվություններ', + before: { + title: 'Հաշվետվությունների կառուցիչը թարմացվել է', + sub: 'Դիտել փոփոխությունների պատմությունը', + dismiss: 'Փակել', + }, + after: { + newBadge: 'ՆՈՐ', + title: 'Նոր սերնդի հաշվետվությունների կառուցիչ', + sub: 'Ամբողջովին վերաիմաստավորված AI-վերլուծությամբ: Փորձեք հաշվետվությունների ապագան:', + tryNow: 'Փորձել հիմա', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.module.scss b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.module.scss new file mode 100644 index 0000000..be4dadf --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.module.scss @@ -0,0 +1,126 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $space-md; +} + +.banner { + display: flex; + align-items: center; + gap: $space-sm; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm $space-md; +} + +.bannerNovelty { + background: linear-gradient(135deg, #1e3a5f 0%, #28587b 100%); + border-color: $color-primary; + color: $color-white; +} + +.bannerIcon { + font-size: $font-size-lg; + flex-shrink: 0; +} + +.newBadge { + flex-shrink: 0; + background: #f59e0b; + color: #000; + font-size: $font-size-sm; + font-weight: 700; + padding: 2px $space-sm; + border-radius: 3px; + letter-spacing: 0.05em; +} + +.bannerBody { + flex: 1; + min-width: 0; +} + +.bannerTitle { + font-size: $font-size-base; + font-weight: 600; + color: inherit; +} + +.bannerSub { + font-size: $font-size-sm; + color: inherit; + opacity: 0.75; + margin-top: 2px; +} + +.bannerBtn { + flex-shrink: 0; + padding: $space-xs $space-md; + border: 1px solid $border-color; + border-radius: $border-radius; + background: transparent; + color: $text-secondary; + font-size: $font-size-sm; + cursor: pointer; + font-family: $font-family; +} + +.bannerBtnCta { + background: #f59e0b; + color: #000; + border-color: #f59e0b; + font-weight: 600; + + &:hover { + background: #fbbf24; + } +} + +.appShell { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + overflow: hidden; + flex: 1; +} + +.appNav { + display: flex; + gap: 0; + border-bottom: 1px solid $border-color; + background: $bg-alt; +} + +.navItem { + padding: $space-sm $space-md; + font-size: $font-size-sm; + color: $text-secondary; + cursor: pointer; +} + +.navActive { + color: $color-primary; + font-weight: 600; + border-bottom: 2px solid $color-primary; + margin-bottom: -1px; +} + +.appContent { + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.placeholder { + height: 32px; + background: $bg-alt; + border-radius: $border-radius; +} diff --git a/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.tsx b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.tsx new file mode 100644 index 0000000..07c540a --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AppealToNovelty/AppealToNovelty.tsx @@ -0,0 +1,78 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AppealToNovelty.content'; + +import styles from './AppealToNovelty.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
📋
+
+
{c.before.title}
+
{c.before.sub}
+
+ +
+
+
+ {c.navItems.map(item => ( +
+ {item} +
+ ))} +
+
+
+
+
+
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
{c.after.newBadge}
+
+
{c.after.title}
+
{c.after.sub}
+
+ +
+
+
+ {c.navItems.map(item => ( +
+ {item} +
+ ))} +
+
+
+
+
+
+
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.content.ts b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.content.ts new file mode 100644 index 0000000..1df7b02 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.content.ts @@ -0,0 +1,70 @@ +const content = { + en: { + avatar: 'JD', + name: 'Jane Doe', + memberSince: 'Member since Jan 2023', + before: { + progressLabel: 'Profile Completion', + progressPct: '75%', + progressText: '75% complete', + statusLabel: 'Account Status', + statusBadge: 'Active', + tier: 'Standard tier', + }, + after: { + metrics: [ + { value: '2,840', label: 'Karma Points', variant: '' }, + { value: '142', label: 'Total Likes', variant: '' }, + { value: '#12', label: 'Contributor Rank', variant: 'rank' }, + { value: '14', label: 'Day Streak', variant: 'streak' }, + ], + streakMsg: '14-day activity streak — keep it going!', + }, + }, + ru: { + avatar: 'JD', + name: 'Jane Doe', + memberSince: 'Участник с января 2023', + before: { + progressLabel: 'Заполнение профиля', + progressPct: '75%', + progressText: 'Заполнено на 75%', + statusLabel: 'Статус аккаунта', + statusBadge: 'Активен', + tier: 'Стандартный уровень', + }, + after: { + metrics: [ + { value: '2 840', label: 'Очки кармы', variant: '' }, + { value: '142', label: 'Всего лайков', variant: '' }, + { value: '#12', label: 'Ранг контрибьютора', variant: 'rank' }, + { value: '14', label: 'Дней подряд', variant: 'streak' }, + ], + streakMsg: 'Стрик активности 14 дней — не останавливайтесь!', + }, + }, + hy: { + avatar: 'JD', + name: 'Jane Doe', + memberSince: 'Անդամ է 2023-ի հունվարից', + before: { + progressLabel: 'Պրոֆիլի լրացում', + progressPct: '75%', + progressText: 'Լրացված է 75%-ով', + statusLabel: 'Հաշվի կարգավիճակ', + statusBadge: 'Ակտիվ', + tier: 'Ստանդարտ մակարդակ', + }, + after: { + metrics: [ + { value: '2 840', label: 'Կարմայի միավորներ', variant: '' }, + { value: '142', label: 'Ընդհանուր հավանումներ', variant: '' }, + { value: '#12', label: 'Ներդրողի դիրք', variant: 'rank' }, + { value: '14', label: 'Օր անընդմեջ', variant: 'streak' }, + ], + streakMsg: '14 օր անընդմեջ ակտիվություն — շարունակեք նույն տեմպով:', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.module.scss b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.module.scss new file mode 100644 index 0000000..c61028b --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.module.scss @@ -0,0 +1,161 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $space-md; +} + +.profileCard { + display: flex; + align-items: center; + gap: $space-md; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; +} + +.avatar { + width: 40px; + height: 40px; + border-radius: $border-radius-round; + background: $color-primary; + color: $color-white; + font-size: $font-size-base; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.profileInfo { + display: flex; + flex-direction: column; + gap: 2px; +} + +.name { + font-size: $font-size-base; + font-weight: 600; + color: $text-primary; +} + +.meta { + font-size: $font-size-sm; + color: $text-secondary; +} + +.section { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.label { + font-size: $font-size-sm; + font-weight: 600; + color: $text-secondary; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.progressBar { + height: 8px; + background: $bg-alt; + border-radius: 4px; + overflow: hidden; +} + +.progressFill { + height: 100%; + background: $color-primary; + border-radius: 4px; +} + +.progressText { + font-size: $font-size-sm; + color: $text-secondary; +} + +.statusRow { + display: flex; + align-items: center; + gap: $space-sm; +} + +.statusBadge { + font-size: $font-size-sm; + background: $tag-green; + color: $color-white; + padding: 2px $space-sm; + border-radius: $border-radius; + font-weight: 600; +} + +// After styles +.metricsGrid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $space-sm; +} + +.metricCard { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + text-align: center; + display: flex; + flex-direction: column; + gap: $space-xs; +} + +.metricValue { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; +} + +.rankValue { + color: $tag-purple; +} + +.streakValue { + color: $tag-orange; +} + +.metricLabel { + font-size: $font-size-sm; + color: $text-secondary; +} + +.streakBar { + background: linear-gradient(90deg, #fff4e6, #ffe0b2); + border: 1px solid $tag-orange; + border-radius: $border-radius; + padding: $space-sm $space-md; + display: flex; + align-items: center; + gap: $space-sm; + font-size: $font-size-sm; + font-weight: 600; + color: $tag-orange; +} + +.fire { + font-size: $font-size-md; +} + +.streakMsg { + color: $tag-orange; +} diff --git a/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.tsx b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.tsx new file mode 100644 index 0000000..89dd037 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AttentionalBias/AttentionalBias.tsx @@ -0,0 +1,79 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AttentionalBias.content'; + +import styles from './AttentionalBias.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
{c.avatar}
+
+
{c.name}
+
{c.memberSince}
+
+
+
+
{c.before.progressLabel}
+
+
+
+
{c.before.progressText}
+
+
+
{c.before.statusLabel}
+
+ {c.before.statusBadge} + {c.before.tier} +
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
{c.avatar}
+
+
{c.name}
+
{c.memberSince}
+
+
+
+ {c.after.metrics.map(m => ( +
+
+ {m.value} +
+
{m.label}
+
+ ))} +
+
+ 🔥 + {c.after.streakMsg} +
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.content.ts b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.content.ts new file mode 100644 index 0000000..2a108c2 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.content.ts @@ -0,0 +1,67 @@ +const content = { + en: { + before: { + label: 'Recommendation', + recommendation: + 'Recommended: 30 minutes of daily walking to improve cardiovascular health.', + cta: 'View Details', + }, + after: { + doctorName: 'Dr. Sarah Chen, MD', + avatar: 'SC', + credentials: [ + 'Johns Hopkins Cardiology', + 'Board Certified · 18 yrs experience', + ], + verified: 'Verified', + quote: + '"I recommend 30 minutes of daily walking to all my cardiac patients. The evidence is clear — it reduces cardiovascular risk by up to 35%."', + tags: ['Cardiology', 'Evidence-Based', 'Johns Hopkins'], + cta: 'Follow Recommendation', + }, + }, + ru: { + before: { + label: 'Рекомендация', + recommendation: + 'Рекомендуется: 30 минут ходьбы ежедневно для улучшения здоровья сердца.', + cta: 'Подробнее', + }, + after: { + doctorName: 'Д-р Сара Чен, MD', + avatar: 'СЧ', + credentials: [ + 'Кардиология Johns Hopkins', + 'Сертифицирована · 18 лет опыта', + ], + verified: 'Проверено', + quote: + '«Я рекомендую 30 минут ходьбы ежедневно всем своим кардиологическим пациентам. Данные однозначны — это снижает сердечно-сосудистый риск до 35%.»', + tags: ['Кардиология', 'На основе данных', 'Johns Hopkins'], + cta: 'Следовать рекомендации', + }, + }, + hy: { + before: { + label: 'Առաջարկություն', + recommendation: + 'Խորհուրդ է տրվում՝ 30 րոպե ամենօրյա քայլք՝ սրտանոթային առողջությունը բարելավելու համար:', + cta: 'Մանրամասն', + }, + after: { + doctorName: 'Դր. Սառա Չեն, MD', + avatar: 'ՍՉ', + credentials: [ + 'Johns Hopkins սրտաբանություն', + 'Հավաստագրված · 18 տարվա փորձ', + ], + verified: 'Հաստատված', + quote: + '«Ես խորհուրդ եմ տալիս 30 րոպե ամենօրյա քայլք իմ բոլոր սրտաբանական հիվանդներին: Տվյալները միանշանակ են — դա նվազեցնում է սրտանոթային ռիսկը մինչև 35%-ով:»', + tags: ['Սրտաբանություն', 'Ապացուցահեն', 'Johns Hopkins'], + cta: 'Հետևել առաջարկությանը', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.module.scss b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.module.scss new file mode 100644 index 0000000..04298a5 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.module.scss @@ -0,0 +1,154 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $space-md; +} + +// Before +.card { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-lg; + display: flex; + flex-direction: column; + gap: $space-md; +} + +.label { + font-size: $font-size-sm; + font-weight: 600; + color: $text-secondary; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.recommendation { + font-size: $font-size-base; + color: $text-primary; + margin: 0; + line-height: 1.5; +} + +.btn { + align-self: flex-start; + padding: $space-sm $space-lg; + background: $bg-alt; + border: 1px solid $border-color; + border-radius: $border-radius; + font-size: $font-size-sm; + cursor: pointer; + color: $text-primary; +} + +// After +.doctorCard { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-lg; + display: flex; + flex-direction: column; + gap: $space-md; +} + +.doctorHeader { + display: flex; + align-items: flex-start; + gap: $space-md; +} + +.avatar { + width: 48px; + height: 48px; + border-radius: $border-radius-round; + background: $color-primary; + color: $color-white; + font-size: $font-size-base; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.doctorInfo { + flex: 1; + display: flex; + flex-direction: column; + gap: 2px; +} + +.doctorName { + font-size: $font-size-base; + font-weight: 700; + color: $text-primary; +} + +.credential { + font-size: $font-size-sm; + color: $text-secondary; +} + +.badge { + display: flex; + align-items: center; + gap: $space-xs; + background: #e8f5e9; + border: 1px solid $tag-green; + border-radius: $border-radius; + padding: 2px $space-sm; + font-size: $font-size-sm; + font-weight: 600; + color: darken(#42c256, 15%); + white-space: nowrap; +} + +.badgeIcon { + color: $tag-green; + font-weight: 700; +} + +.quote { + font-size: $font-size-base; + font-style: italic; + color: $text-primary; + margin: 0; + padding: $space-md; + border-left: 3px solid $color-primary; + background: $bg-alt; + border-radius: 0 $border-radius $border-radius 0; + line-height: 1.5; +} + +.tags { + display: flex; + flex-wrap: wrap; + gap: $space-xs; +} + +.tag { + font-size: $font-size-sm; + background: $bg-alt; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: 2px $space-sm; + color: $text-secondary; +} + +.btnPrimary { + padding: $space-sm $space-lg; + background: $color-primary; + color: $color-white; + border: none; + border-radius: $border-radius; + font-size: $font-size-base; + font-weight: 600; + cursor: pointer; +} diff --git a/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.tsx b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.tsx new file mode 100644 index 0000000..4e38285 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AuthorityBias/AuthorityBias.tsx @@ -0,0 +1,57 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AuthorityBias.content'; + +import styles from './AuthorityBias.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
{c.before.label}
+

{c.before.recommendation}

+ +
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
+
{c.after.avatar}
+
+
{c.after.doctorName}
+ {c.after.credentials.map(cr => ( +
+ {cr} +
+ ))} +
+
+ ✓ + {c.after.verified} +
+
+
{c.after.quote}
+
+ {c.after.tags.map(t => ( + + {t} + + ))} +
+ +
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.content.ts b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.content.ts new file mode 100644 index 0000000..aacff46 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.content.ts @@ -0,0 +1,76 @@ +const content = { + en: { + sectionLabel: 'Code Review — auth.ts', + aiAuthor: 'AI Assistant', + aiSuggestion: 'Suggestion: Refactor this function to reduce nesting depth.', + comments: [ + { + author: 'Marcus R.', + line: 'line 42', + body: 'This function is hard to follow — consider early returns.', + }, + { + author: 'Priya K.', + line: 'line 55', + body: 'Missing null check before accessing user.profile.', + }, + ], + beforeAiLine: 'line 42', + after: { + aiLabel: 'AI Verified', + confidence: '98.7% confidence', + aiFooter: 'Analyzed 1,204 similar patterns · Auto-apply available', + }, + }, + ru: { + sectionLabel: 'Код-ревью — auth.ts', + aiAuthor: 'AI-ассистент', + aiSuggestion: + 'Предложение: отрефакторьте эту функцию, чтобы уменьшить глубину вложенности.', + comments: [ + { + author: 'Маркус Р.', + line: 'строка 42', + body: 'Эту функцию сложно читать — рассмотрите ранние возвраты.', + }, + { + author: 'Прия К.', + line: 'строка 55', + body: 'Нет проверки на null перед доступом к user.profile.', + }, + ], + beforeAiLine: 'строка 42', + after: { + aiLabel: 'Проверено AI', + confidence: 'уверенность 98,7%', + aiFooter: + 'Проанализировано 1 204 похожих паттерна · Доступно автоприменение', + }, + }, + hy: { + sectionLabel: 'Կոդի վերանայում — auth.ts', + aiAuthor: 'AI-օգնական', + aiSuggestion: + 'Առաջարկ՝ վերակառուցեք այս ֆունկցիան՝ ներդրման խորությունը նվազեցնելու համար:', + comments: [ + { + author: 'Մարկուս Ռ.', + line: 'տող 42', + body: 'Այս ֆունկցիային դժվար է հետևել — դիտարկեք վաղ վերադարձները:', + }, + { + author: 'Պրիյա Կ.', + line: 'տող 55', + body: 'Բացակայում է null-ի ստուգումը user.profile-ին դիմելուց առաջ:', + }, + ], + beforeAiLine: 'տող 42', + after: { + aiLabel: 'AI-ով ստուգված', + confidence: 'վստահություն 98,7%', + aiFooter: 'Վերլուծված է 1 204 նմանատիպ օրինակ · Հասանելի է ավտոկիրառումը', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.module.scss b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.module.scss new file mode 100644 index 0000000..05c50e3 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.module.scss @@ -0,0 +1,116 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.sectionLabel { + font-size: $font-size-sm; + font-weight: 600; + color: $text-secondary; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: $space-xs; +} + +.comment { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.commentHeader { + display: flex; + align-items: center; + gap: $space-sm; +} + +.authorDot { + width: 8px; + height: 8px; + border-radius: $border-radius-round; + background: $border-dark; + flex-shrink: 0; +} + +.author { + font-size: $font-size-sm; + font-weight: 600; + color: $text-primary; +} + +.line { + font-size: $font-size-sm; + color: $text-secondary; + margin-left: auto; +} + +.commentBody { + font-size: $font-size-sm; + color: $text-primary; + margin: 0; + line-height: 1.5; +} + +// After — AI comment +.aiComment { + border-color: $tag-green; + background: linear-gradient(135deg, #f0faf2, #ffffff); + order: -1; +} + +.aiHeader { + display: flex; + align-items: center; + gap: $space-sm; +} + +.shield { + width: 20px; + height: 20px; + background: $tag-green; + border-radius: $border-radius; + color: $color-white; + font-size: $font-size-sm; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + flex-shrink: 0; +} + +.aiLabel { + font-size: $font-size-sm; + font-weight: 700; + color: darken(#42c256, 18%); +} + +.confidence { + font-size: $font-size-sm; + font-weight: 600; + color: $tag-green; +} + +.checkmark { + margin-left: auto; + color: $tag-green; + font-weight: 700; + font-size: $font-size-base; +} + +.aiFooter { + font-size: $font-size-sm; + color: $text-secondary; + border-top: 1px solid lighten(#42c256, 30%); + padding-top: $space-sm; +} diff --git a/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.tsx b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.tsx new file mode 100644 index 0000000..b727596 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AutomationBias/AutomationBias.tsx @@ -0,0 +1,66 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AutomationBias.content'; + +import styles from './AutomationBias.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
{c.sectionLabel}
+
+
+
+ {c.aiAuthor} + {c.beforeAiLine} +
+

{c.aiSuggestion}

+
+ {c.comments.map(cm => ( +
+
+
+ {cm.author} + {cm.line} +
+

{cm.body}

+
+ ))} +
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
{c.sectionLabel}
+
+
+
▮
+ {c.after.aiLabel} + {c.after.confidence} + ✓ +
+

{c.aiSuggestion}

+
{c.after.aiFooter}
+
+ {c.comments.map(cm => ( +
+
+
+ {cm.author} + {cm.line} +
+

{cm.body}

+
+ ))} +
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.content.ts b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.content.ts new file mode 100644 index 0000000..cff04d2 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.content.ts @@ -0,0 +1,49 @@ +const content = { + en: { + productName: 'VaultChain Storage', + subtitle: 'Available on macOS, Windows, and Linux', + cta: 'Download Free', + before: { + icon: '⛓', + tagline: 'Powered by Blockchain Technology', + chips: ['Decentralized Nodes', 'Token-Verified', 'Web3 Native'], + }, + after: { + icon: '🛡', + tagline: 'Military-Grade Encrypted Cloud Storage', + chips: ['AES-256 Encryption', 'Zero-Knowledge', 'SOC 2 Certified'], + }, + }, + ru: { + productName: 'VaultChain Storage', + subtitle: 'Доступно для macOS, Windows и Linux', + cta: 'Скачать бесплатно', + before: { + icon: '⛓', + tagline: 'На основе блокчейн-технологии', + chips: ['Децентрализованные узлы', 'Токен-верификация', 'Web3-нативный'], + }, + after: { + icon: '🛡', + tagline: 'Облачное хранилище с шифрованием военного уровня', + chips: ['Шифрование AES-256', 'Zero-Knowledge', 'Сертификат SOC 2'], + }, + }, + hy: { + productName: 'VaultChain Storage', + subtitle: 'Հասանելի է macOS, Windows և Linux համակարգերի համար', + cta: 'Ներբեռնել անվճար', + before: { + icon: '⛓', + tagline: 'Աշխատում է blockchain-տեխնոլոգիայի հիման վրա', + chips: ['Ապակենտրոնացված հանգույցներ', 'Տոկեն-հաստատված', 'Web3-բնիկ'], + }, + after: { + icon: '🛡', + tagline: 'Ռազմական մակարդակի գաղտնագրված ամպային պահոց', + chips: ['AES-256 գաղտնագրում', 'Zero-Knowledge', 'SOC 2 հավաստագրված'], + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.module.scss b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.module.scss new file mode 100644 index 0000000..471b0f0 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.module.scss @@ -0,0 +1,85 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.hero { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-2xl $space-lg; + text-align: center; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: $space-md; +} + +.chainIcon, +.shieldIcon { + font-size: 40px; +} + +.productName { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; + margin: 0; +} + +.tagline { + font-size: $font-size-base; + color: $text-secondary; + margin: 0; +} + +.features { + display: flex; + flex-wrap: wrap; + gap: $space-xs; + justify-content: center; +} + +.chip { + font-size: $font-size-sm; + padding: 2px $space-sm; + border-radius: 20px; + border: 1px solid $border-color; + color: $text-secondary; + background: $bg-alt; +} + +.btn { + padding: $space-sm $space-2xl; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $bg-card; + color: $text-primary; + font-size: $font-size-base; + cursor: pointer; + font-family: $font-family; + + &Primary { + background: $color-primary; + color: $color-white; + border-color: $color-primary; + + &:hover { + background: $color-primary-hover; + } + } +} + +.sub { + font-size: $font-size-sm; + color: $text-secondary; + margin-top: $space-sm; +} diff --git a/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.tsx b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.tsx new file mode 100644 index 0000000..34cc685 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/AvailabilityHeuristics/AvailabilityHeuristics.tsx @@ -0,0 +1,56 @@ +import { useRouter } from 'next/router'; + +import rawContent from './AvailabilityHeuristics.content'; + +import styles from './AvailabilityHeuristics.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
{c.before.icon}
+

{c.productName}

+

{c.before.tagline}

+
+ {c.before.chips.map(chip => ( + + {chip} + + ))} +
+ +
+

{c.subtitle}

+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
{c.after.icon}
+

{c.productName}

+

{c.after.tagline}

+
+ {c.after.chips.map(chip => ( + + {chip} + + ))} +
+ +
+

{c.subtitle}

+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.content.ts b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.content.ts new file mode 100644 index 0000000..de803d6 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.content.ts @@ -0,0 +1,65 @@ +const content = { + en: { + chatHeader: 'Support Chat', + userMessage: 'I was charged twice for my subscription this month!', + before: { + agentReply: + 'Our records show you were charged correctly. Here is the invoice proving the charge is valid. The Terms of Service section 4.2 states that charges are non-refundable.', + attachments: ['📄 Invoice_March.pdf', '📄 ToS_section4.2.pdf'], + followUp: 'Is there anything else I can help you with?', + }, + after: { + agentReply: + 'I understand this charge was unexpected — that would concern me too. Let me walk through your account activity with you so we can figure out exactly what happened together.', + activity: [ + { label: 'Mar 1 — Renewal', amount: '$29.00' }, + { label: 'Mar 1 — Plan upgrade', amount: '$10.00' }, + ], + followUp: + "Does that match what you saw? If anything looks off, we'll fix it right away.", + }, + }, + ru: { + chatHeader: 'Чат поддержки', + userMessage: 'С меня в этом месяце дважды списали за подписку!', + before: { + agentReply: + 'Согласно нашим записям, списание корректно. Вот счёт, подтверждающий, что платёж действителен. Раздел 4.2 Условий обслуживания гласит, что списания не возвращаются.', + attachments: ['📄 Счёт_март.pdf', '📄 Условия_4.2.pdf'], + followUp: 'Могу ещё чем-нибудь помочь?', + }, + after: { + agentReply: + 'Понимаю, что это списание было неожиданным — меня бы это тоже насторожило. Давайте вместе пройдёмся по активности вашего аккаунта и разберёмся, что произошло.', + activity: [ + { label: '1 марта — Продление', amount: '$29,00' }, + { label: '1 марта — Апгрейд тарифа', amount: '$10,00' }, + ], + followUp: + 'Это совпадает с тем, что вы видели? Если что-то не так — сразу исправим.', + }, + }, + hy: { + chatHeader: 'Աջակցության չատ', + userMessage: + 'Այս ամիս բաժանորդագրությանս համար ինձնից երկու անգամ գումար են գանձել:', + before: { + agentReply: + 'Մեր գրառումների համաձայն՝ գանձումը կատարվել է ճիշտ: Ահա հաշիվը, որը հաստատում է վճարումը: Ծառայության պայմանների 4.2-րդ կետը նշում է, որ գանձումները չեն վերադարձվում:', + attachments: ['📄 Հաշիվ_մարտ.pdf', '📄 Պայմաններ_4.2.pdf'], + followUp: 'Կարո՞ղ եմ այլ բանով օգնել:', + }, + after: { + agentReply: + 'Հասկանում եմ, որ այս գանձումը անսպասելի էր — ինձ էլ դա կմտահոգեր: Եկեք միասին նայենք ձեր հաշվի ակտիվությանը, որպեսզի հստակ պարզենք, թե ինչ է տեղի ունեցել:', + activity: [ + { label: 'մարտի 1 — Վերականգնում', amount: '$29,00' }, + { label: 'մարտի 1 — Փաթեթի բարձրացում', amount: '$10,00' }, + ], + followUp: + 'Դա համապատասխանու՞մ է ձեր տեսածին: Եթե որևէ բան սխալ է — անմիջապես կուղղենք:', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.module.scss b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.module.scss new file mode 100644 index 0000000..c9dcab0 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.module.scss @@ -0,0 +1,91 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.chatHeader { + font-size: $font-size-sm; + font-weight: 600; + color: $text-secondary; + text-transform: uppercase; + letter-spacing: 0.05em; + padding-bottom: $space-sm; + border-bottom: 1px solid $border-color; +} + +.messages { + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.bubble { + max-width: 85%; + padding: $space-sm $space-md; + border-radius: $border-radius; + font-size: $font-size-sm; + line-height: 1.5; +} + +.user { + align-self: flex-end; + background: $color-primary; + color: $color-white; + border-bottom-right-radius: 2px; +} + +.agent { + align-self: flex-start; + background: $bg-card; + border: 1px solid $border-color; + color: $text-primary; + border-bottom-left-radius: 2px; +} + +.attachmentRow { + display: flex; + gap: $space-sm; + flex-wrap: wrap; + align-self: flex-start; + padding-left: $space-sm; +} + +.attachment { + font-size: $font-size-sm; + background: $bg-alt; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-xs $space-sm; + color: $text-secondary; +} + +// After +.activityCard { + align-self: flex-start; + background: $bg-alt; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm $space-md; + width: 85%; + display: flex; + flex-direction: column; + gap: $space-xs; +} + +.activityRow { + display: flex; + justify-content: space-between; + font-size: $font-size-sm; + color: $text-primary; +} + +.amount { + font-weight: 600; +} diff --git a/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.tsx b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.tsx new file mode 100644 index 0000000..8e59949 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BackfireEffect/BackfireEffect.tsx @@ -0,0 +1,61 @@ +import { useRouter } from 'next/router'; + +import rawContent from './BackfireEffect.content'; + +import styles from './BackfireEffect.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
{c.chatHeader}
+
+
{c.userMessage}
+
+ {c.before.agentReply} +
+
+ {c.before.attachments.map(a => ( + + {a} + + ))} +
+
+ {c.before.followUp} +
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
{c.chatHeader}
+
+
{c.userMessage}
+
+ {c.after.agentReply} +
+
+ {c.after.activity.map(row => ( +
+ {row.label} + {row.amount} +
+ ))} +
+
+ {c.after.followUp} +
+
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.content.ts b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.content.ts new file mode 100644 index 0000000..2e450a6 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.content.ts @@ -0,0 +1,43 @@ +const content = { + en: { + appName: 'TaskFlow Pro', + category: 'Productivity', + stars: '★★★★☆', + rating: '4.2', + price: '$4.99 / month', + cta: 'Get App', + after: { + trendingBadge: '#1 Trending', + ratingTotal: '(12,847 ratings)', + socialText: '847 people got this today', + }, + }, + ru: { + appName: 'TaskFlow Pro', + category: 'Продуктивность', + stars: '★★★★☆', + rating: '4,2', + price: '$4,99 / мес', + cta: 'Установить', + after: { + trendingBadge: '#1 в трендах', + ratingTotal: '(12 847 оценок)', + socialText: '847 человек установили сегодня', + }, + }, + hy: { + appName: 'TaskFlow Pro', + category: 'Արտադրողականություն', + stars: '★★★★☆', + rating: '4,2', + price: '$4,99 / ամս', + cta: 'Ստանալ հավելվածը', + after: { + trendingBadge: '#1 թրենդում', + ratingTotal: '(12 847 գնահատական)', + socialText: '847 մարդ այսօր ներբեռնեց', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.module.scss b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.module.scss new file mode 100644 index 0000000..6337f70 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.module.scss @@ -0,0 +1,149 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; + display: flex; + align-items: flex-start; + justify-content: center; +} + +.card { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + overflow: hidden; + width: 100%; + max-width: 280px; + box-shadow: $shadow-card; +} + +.cardImg { + height: 120px; + background: $bg-alt; + position: relative; +} + +.cardImgTrending { + background: linear-gradient(135deg, #1e3a5f, $color-primary); +} + +.trendingBadge { + position: absolute; + top: $space-sm; + left: $space-sm; + background: #f59e0b; + color: #000; + font-size: $font-size-sm; + font-weight: 700; + padding: 3px $space-sm; + border-radius: 3px; +} + +.cardBody { + padding: $space-md; + display: flex; + flex-direction: column; + gap: $space-xs; +} + +.cardName { + font-size: $font-size-md; + font-weight: 700; + color: $text-primary; +} + +.cardCategory { + font-size: $font-size-sm; + color: $text-secondary; +} + +.cardRating { + display: flex; + align-items: center; + gap: $space-xs; +} + +.stars { + color: #f59e0b; + font-size: $font-size-sm; +} + +.ratingCount { + font-size: $font-size-sm; + font-weight: 600; + color: $text-primary; +} + +.ratingTotal { + font-size: $font-size-sm; + color: $text-secondary; +} + +.socialProof { + display: flex; + align-items: center; + gap: $space-sm; + padding: $space-xs $space-sm; + background: $bg-alt; + border-radius: $border-radius; +} + +.avatarStack { + display: flex; +} + +.avatar { + width: 18px; + height: 18px; + border-radius: $border-radius-round; + background: $color-primary; + border: 2px solid $bg-card; + margin-left: -6px; + + &:first-child { + margin-left: 0; + background: $tag-green; + } + + &:last-child { + background: $tag-purple; + } +} + +.socialText { + font-size: $font-size-sm; + color: $text-secondary; +} + +.cardPrice { + font-size: $font-size-base; + font-weight: 600; + color: $color-primary; + margin-top: $space-xs; +} + +.btn { + width: 100%; + padding: $space-sm; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $bg-card; + color: $text-primary; + font-size: $font-size-sm; + cursor: pointer; + font-family: $font-family; +} + +.btnPrimary { + background: $color-primary; + color: $color-white; + border-color: $color-primary; + font-weight: 600; + + &:hover { + background: $color-primary-hover; + } +} diff --git a/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.tsx b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.tsx new file mode 100644 index 0000000..a1ef6d9 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BandwagonEffect/BandwagonEffect.tsx @@ -0,0 +1,65 @@ +import { useRouter } from 'next/router'; + +import rawContent from './BandwagonEffect.content'; + +import styles from './BandwagonEffect.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
+
+
{c.appName}
+
{c.category}
+
+ {c.stars} + {c.rating} +
+
{c.price}
+ +
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
+
{c.after.trendingBadge}
+
+
+
{c.appName}
+
{c.category}
+
+ {c.stars} + {c.rating} + {c.after.ratingTotal} +
+
+ + + + + + {c.after.socialText} +
+
{c.price}
+ +
+
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.content.ts b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.content.ts new file mode 100644 index 0000000..8d0a5ea --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.content.ts @@ -0,0 +1,91 @@ +const content = { + en: { + score: '78', + scoreMax: '/100', + before: { + label: 'Your Assessment Score', + areas: [ + { name: 'Communication', pct: '72%' }, + { name: 'Time Management', pct: '81%' }, + { name: 'Leadership', pct: '65%' }, + ], + }, + after: { + label: 'Your Personalized Profile', + insights: [ + { + icon: '⚡', + text: 'You value efficiency above all else — your time is your most precious asset.', + }, + { + icon: '🤝', + text: 'Others rely on your judgment, even when you doubt yourself in the moment.', + }, + { + icon: '🎯', + text: "You set high standards and occasionally struggle when those around you don't match them.", + }, + ], + }, + }, + ru: { + score: '78', + scoreMax: '/100', + before: { + label: 'Ваш результат оценки', + areas: [ + { name: 'Коммуникация', pct: '72%' }, + { name: 'Тайм-менеджмент', pct: '81%' }, + { name: 'Лидерство', pct: '65%' }, + ], + }, + after: { + label: 'Ваш персональный профиль', + insights: [ + { + icon: '⚡', + text: 'Вы цените эффективность превыше всего — ваше время ваш самый ценный ресурс.', + }, + { + icon: '🤝', + text: 'Другие полагаются на ваше суждение, даже когда вы сами в себе сомневаетесь.', + }, + { + icon: '🎯', + text: 'Вы ставите высокую планку и порой расстраиваетесь, когда окружающие ей не соответствуют.', + }, + ], + }, + }, + hy: { + score: '78', + scoreMax: '/100', + before: { + label: 'Ձեր գնահատման միավորը', + areas: [ + { name: 'Հաղորդակցություն', pct: '72%' }, + { name: 'Ժամանակի կառավարում', pct: '81%' }, + { name: 'Առաջնորդություն', pct: '65%' }, + ], + }, + after: { + label: 'Ձեր անհատականացված պրոֆիլը', + insights: [ + { + icon: '⚡', + text: 'Դուք ամեն ինչից վեր գնահատում եք արդյունավետությունը — ձեր ժամանակն ամենաթանկ ռեսուրսն է:', + }, + { + icon: '🤝', + text: 'Ուրիշները հույս են դնում ձեր դատողության վրա, նույնիսկ երբ դուք ինքներդ ձեր մեջ կասկածում եք:', + }, + { + icon: '🎯', + text: 'Դուք բարձր չափանիշներ եք սահմանում և երբեմն դժվարանում եք, երբ շրջապատը դրանց չի համապատասխանում:', + }, + ], + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.module.scss b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.module.scss new file mode 100644 index 0000000..934a968 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.module.scss @@ -0,0 +1,101 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; +} + +.card { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-lg; +} + +.scoreRow { + display: flex; + align-items: baseline; + gap: $space-xs; + margin-bottom: $space-xs; +} + +.scoreBig { + font-size: $font-size-display; + font-weight: 700; + color: $color-primary; +} + +.scoreMax { + font-size: $font-size-lg; + color: $text-secondary; +} + +.label { + font-size: $font-size-sm; + color: $text-secondary; + margin-bottom: $space-lg; +} + +// Before — bar chart areas +.areas { + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.areaRow { + display: flex; + align-items: center; + gap: $space-sm; +} + +.areaName { + font-size: $font-size-sm; + color: $text-primary; + width: 120px; + flex-shrink: 0; +} + +.barWrap { + flex: 1; + height: 8px; + background: $bg-alt; + border-radius: 4px; + overflow: hidden; +} + +.bar { + height: 100%; + background: $color-primary; + border-radius: 4px; +} + +.areaPct { + font-size: $font-size-sm; + color: $text-secondary; + width: 32px; + text-align: right; +} + +// After — insights +.insights { + display: flex; + flex-direction: column; + gap: $space-md; +} + +.insight { + display: flex; + align-items: flex-start; + gap: $space-sm; + font-size: $font-size-sm; + color: $text-primary; + line-height: 1.5; +} + +.insightIcon { + font-size: $font-size-md; + flex-shrink: 0; +} diff --git a/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.tsx b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.tsx new file mode 100644 index 0000000..632a8e1 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BarnumEffect/BarnumEffect.tsx @@ -0,0 +1,59 @@ +import { useRouter } from 'next/router'; + +import rawContent from './BarnumEffect.content'; + +import styles from './BarnumEffect.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
+
+ {c.score} + {c.scoreMax} +
+
{c.before.label}
+
+ {c.before.areas.map(a => ( +
+ {a.name} +
+
+
+ {a.pct} +
+ ))} +
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+
+
+ {c.score} + {c.scoreMax} +
+
{c.after.label}
+
+ {c.after.insights.map(ins => ( +
+ {ins.icon} + {ins.text} +
+ ))} +
+
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.content.ts b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.content.ts new file mode 100644 index 0000000..2d228aa --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.content.ts @@ -0,0 +1,105 @@ +const content = { + en: { + title: 'User Reviews', + negativeReviews: [ + { + stars: 1, + text: 'Terrible. Crashed every time I opened it.', + author: 'Jordan M.', + }, + { + stars: 1, + text: 'Waste of money. Support is non-existent.', + author: 'Priya K.', + }, + { + stars: 2, + text: 'Full of bugs. Would not recommend.', + author: 'Carlos R.', + }, + ], + before: { + overallSmall: '4.8 stars from 15,847 ratings', + }, + after: { + summaryScore: '4.8', + summaryStars: '★★★★★', + summaryCount: '15,847 ratings', + bars: [ + { stars: 5, pct: 78 }, + { stars: 4, pct: 14 }, + { stars: 3, pct: 4 }, + { stars: 2, pct: 2 }, + { stars: 1, pct: 2 }, + ], + }, + }, + ru: { + title: 'Отзывы пользователей', + negativeReviews: [ + { + stars: 1, + text: 'Ужас. Падало каждый раз при открытии.', + author: 'Джордан М.', + }, + { + stars: 1, + text: 'Выкинутые деньги. Поддержки не существует.', + author: 'Прия К.', + }, + { stars: 2, text: 'Сплошные баги. Не рекомендую.', author: 'Карлос Р.' }, + ], + before: { + overallSmall: '4,8 звёзд из 15 847 оценок', + }, + after: { + summaryScore: '4,8', + summaryStars: '★★★★★', + summaryCount: '15 847 оценок', + bars: [ + { stars: 5, pct: 78 }, + { stars: 4, pct: 14 }, + { stars: 3, pct: 4 }, + { stars: 2, pct: 2 }, + { stars: 1, pct: 2 }, + ], + }, + }, + hy: { + title: 'Օգտատերերի կարծիքները', + negativeReviews: [ + { + stars: 1, + text: 'Սարսափելի է: Ամեն բացելիս կախվում էր:', + author: 'Ջորդան Մ.', + }, + { + stars: 1, + text: 'Փող գցել: Աջակցություն ընդհանրապես չկա:', + author: 'Պրիյա Կ.', + }, + { + stars: 2, + text: 'Լի է սխալներով: Չեմ խորհուրդ տա:', + author: 'Կառլոս Ռ.', + }, + ], + before: { + overallSmall: '4,8 աստղ 15 847 գնահատականից', + }, + after: { + summaryScore: '4,8', + summaryStars: '★★★★★', + summaryCount: '15 847 գնահատական', + bars: [ + { stars: 5, pct: 78 }, + { stars: 4, pct: 14 }, + { stars: 3, pct: 4 }, + { stars: 2, pct: 2 }, + { stars: 1, pct: 2 }, + ], + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.module.scss b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.module.scss new file mode 100644 index 0000000..b356e0a --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.module.scss @@ -0,0 +1,129 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + min-height: 100%; +} + +.title { + font-size: $font-size-lg; + font-weight: 700; + color: $text-primary; + margin: 0 0 $space-md; +} + +.summary { + display: flex; + gap: $space-lg; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-md; + margin-bottom: $space-md; + align-items: flex-start; +} + +.summaryScore { + font-size: $font-size-display; + font-weight: 700; + color: $text-primary; + line-height: 1; +} + +.summaryRight { + flex: 1; +} + +.summaryStars { + color: #f59e0b; + font-size: $font-size-base; +} + +.summaryCount { + font-size: $font-size-sm; + color: $text-secondary; + margin-bottom: $space-sm; +} + +.barChart { + display: flex; + flex-direction: column; + gap: 3px; +} + +.barRow { + display: flex; + align-items: center; + gap: $space-xs; +} + +.barLabel { + font-size: $font-size-sm; + color: $text-secondary; + width: 20px; + text-align: right; +} + +.barTrack { + flex: 1; + height: 8px; + background: $bg-alt; + border-radius: 4px; + overflow: hidden; +} + +.barFill { + height: 100%; + background: $tag-green; + border-radius: 4px; +} + +.barPct { + font-size: $font-size-sm; + color: $text-secondary; + width: 28px; +} + +.divider { + height: 1px; + background: $border-color; + margin: $space-md 0; +} + +.reviewList { + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.review { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm $space-md; +} + +.reviewStars { + color: #f59e0b; + font-size: $font-size-sm; +} + +.reviewText { + font-size: $font-size-sm; + color: $text-primary; + margin: 2px 0; +} + +.reviewAuthor { + font-size: $font-size-sm; + color: $text-secondary; +} + +.overallSmall { + font-size: $font-size-sm; + color: $text-secondary; + text-align: center; + padding: $space-sm; +} diff --git a/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.tsx b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.tsx new file mode 100644 index 0000000..a58b4dc --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BaseRateFallacy/BaseRateFallacy.tsx @@ -0,0 +1,75 @@ +import { useRouter } from 'next/router'; + +import rawContent from './BaseRateFallacy.content'; + +import styles from './BaseRateFallacy.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+

{c.title}

+
+ {c.negativeReviews.map(r => ( +
+
+ {'★'.repeat(r.stars)} + {'☆'.repeat(5 - r.stars)} +
+
{r.text}
+
{r.author}
+
+ ))} +
{c.before.overallSmall}
+
+
+ ); +} + +export function After() { + const c = useContent(); + return ( +
+

{c.title}

+
+
{c.after.summaryScore}
+
+
{c.after.summaryStars}
+
{c.after.summaryCount}
+
+ {c.after.bars.map(b => ( +
+ {b.stars}★ +
+
+
+ {b.pct}% +
+ ))} +
+
+
+
+
+ {c.negativeReviews.map(r => ( +
+
+ {'★'.repeat(r.stars)} + {'☆'.repeat(5 - r.stars)} +
+
{r.text}
+
{r.author}
+
+ ))} +
+
+ ); +} diff --git a/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.content.ts b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.content.ts new file mode 100644 index 0000000..b00f9e1 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.content.ts @@ -0,0 +1,110 @@ +const content = { + en: { + title: 'Candidate Review', + candidate: 'Alex M. — Senior Engineer', + scoreLabel: 'Overall', + before: { + feedback: + "Strong gut feeling. Reminds me of Jordan from the platform team — that worked out great. I think he'd be a culture fit. Would hire.", + score: '4.5 / 5', + disclaimer: '"I\'m a fair judge of character — I don\'t play favorites."', + }, + after: { + criteria: [ + { + label: 'System design (live exercise)', + value: 4, + evidence: + 'Designed sharded queue; missed back-pressure — flagged it himself.', + }, + { + label: 'Code quality (take-home)', + value: 3, + evidence: 'Solution worked, tests thin, error handling skipped.', + }, + { + label: 'Collaboration (panel signal)', + value: 4, + evidence: + 'Asked clarifying questions; pushed back on ambiguous reqs.', + }, + ], + counterLabel: 'Counter-evidence prompt:', + counter: + 'Name one specific reason this candidate might fail in this role.', + }, + }, + ru: { + title: 'Оценка кандидата', + candidate: 'Алекс М. — Senior Engineer', + scoreLabel: 'Итого', + before: { + feedback: + 'Сильное первое впечатление. Напоминает Джордана из платформенной команды — там всё сложилось. Думаю, наш человек по культуре. Брал бы.', + score: '4.5 / 5', + disclaimer: '«Я объективно оцениваю людей — без любимчиков».', + }, + after: { + criteria: [ + { + label: 'System design (живая задача)', + value: 4, + evidence: + 'Спроектировал шардированную очередь; забыл про back-pressure — сам поднял вопрос.', + }, + { + label: 'Качество кода (тестовое)', + value: 3, + evidence: + 'Решение работает, тесты слабые, обработка ошибок пропущена.', + }, + { + label: 'Коммуникация (сигнал панели)', + value: 4, + evidence: + 'Задавал уточняющие вопросы, спорил с размытыми требованиями.', + }, + ], + counterLabel: 'Промпт на контр-аргументы:', + counter: + 'Назовите одну конкретную причину, по которой этот кандидат может не справиться.', + }, + }, + hy: { + title: 'Թեկնածուի գնահատում', + candidate: 'Ալեքս Մ. — Senior Engineer', + scoreLabel: 'Ընդհանուր', + before: { + feedback: + 'Ուժեղ ինտուիցիա։ Հիշեցնում է Ջորդանին պլատֆորմի թիմից — այնտեղ լավ ստացվեց։ Կարծում եմ՝ կուլտուրապես հարմար է։ Կվարձեի։', + score: '4.5 / 5', + disclaimer: '«Ես արդար եմ դատում մարդկանց — սիրելիներ չեմ ընտրում»։', + }, + after: { + criteria: [ + { + label: 'System design (կենդանի վարժություն)', + value: 4, + evidence: + 'Նախագծեց shard-ավորված queue; back-pressure-ը բաց թողեց — ինքն էլ նկատեց։', + }, + { + label: 'Կոդի որակ (take-home)', + value: 3, + evidence: + 'Լուծումն աշխատում է, թեստերը թույլ են, սխալների մշակումը բաց է։', + }, + { + label: 'Կոլաբորացիա (պանելի ազդանշան)', + value: 4, + evidence: 'Ճշտող հարցեր է տալիս, անհստակ պահանջներին հակառակվում է։', + }, + ], + counterLabel: 'Հակափաստարկի հուշում.', + counter: + 'Նշեք մեկ կոնկրետ պատճառ, թե ինչու այս թեկնածուն կարող է չհաջողել այս դերում։', + }, + }, +}; + +export default content; diff --git a/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.module.scss b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.module.scss new file mode 100644 index 0000000..fa01729 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.module.scss @@ -0,0 +1,123 @@ +@use '../../tokens' as *; + +.container { + padding: $space-lg; + font-family: $font-family; + background: $bg-page; + display: flex; + flex-direction: column; + gap: $space-sm; +} + +.formTitle { + font-size: $font-size-md; + font-weight: 700; + color: $text-primary; +} + +.candidate { + font-size: $font-size-sm; + color: $text-secondary; + background: $bg-card; + padding: $space-xs $space-sm; + border-radius: $border-radius; + border: 1px solid $border-color; + width: fit-content; +} + +.textarea { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm; + font-family: $font-family; + font-size: $font-size-sm; + color: $text-primary; + resize: none; + min-height: 90px; +} + +.scoreRow { + display: flex; + justify-content: space-between; + align-items: center; + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm $space-md; + font-size: $font-size-sm; + color: $text-secondary; +} + +.scoreVal { + font-size: $font-size-lg; + font-weight: 700; + color: $color-primary; +} + +.disclaimer { + font-size: 11px; + font-style: italic; + color: $text-secondary; +} + +.rubric { + display: flex; + flex-direction: column; + gap: $space-xs; +} + +.criterion { + background: $bg-card; + border: 1px solid $border-color; + border-radius: $border-radius; + padding: $space-sm $space-md; + display: grid; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto; + gap: 2px $space-md; + align-items: center; +} + +.criterionLabel { + font-size: $font-size-sm; + font-weight: 600; + color: $text-primary; +} + +.criterionScore { + display: flex; + gap: 3px; + grid-row: 1; + grid-column: 2; +} + +.dotOn, +.dotOff { + width: 10px; + height: 10px; + border-radius: 50%; +} + +.dotOn { + background: $color-primary; +} + +.dotOff { + background: $border-color; +} + +.criterionEvidence { + grid-column: 1 / -1; + font-size: 11px; + color: $text-secondary; +} + +.counterPrompt { + background: lighten(#42c256, 45%); + border: 1px solid $tag-green; + border-radius: $border-radius; + padding: $space-sm $space-md; + font-size: $font-size-sm; + color: $text-primary; +} diff --git a/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.tsx b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.tsx new file mode 100644 index 0000000..df50fc0 --- /dev/null +++ b/src/components/_biases/BiasBody/demos/BiasBlindSpot/BiasBlindSpot.tsx @@ -0,0 +1,59 @@ +import { useRouter } from 'next/router'; + +import rawContent from './BiasBlindSpot.content'; + +import styles from './BiasBlindSpot.module.scss'; + +const useContent = () => { + const { locale = 'en' } = useRouter(); + return rawContent[locale as keyof typeof rawContent] ?? rawContent.en; +}; + +export function Before() { + const c = useContent(); + return ( +
+
{c.title}
+
{c.candidate}
+