codymaster 4.1.3 → 4.3.0

package/skills/cm-ux-master/references/cultural-ux.md

@@ -0,0 +1,346 @@
+# Cultural UX Considerations
+
+Designing for global audiences: RTL languages, color meanings, form conventions, and localization.
+
+## Right-to-Left (RTL) Languages
+
+### Languages That Use RTL
+
+- Arabic
+- Hebrew
+- Persian (Farsi)
+- Urdu
+
+### What to Mirror
+
+| Element | LTR | RTL |
+|---------|-----|-----|
+| Text alignment | Left | Right |
+| Navigation | Left side | Right side |
+| Progress indicators | Left to right | Right to left |
+| Icons with direction | → | ← |
+| Checkmarks | ✓ on right | ✓ on left |
+| Back buttons | ← | → |
+| Carousels/sliders | Swipe left for next | Swipe right for next |
+
+### What NOT to Mirror
+
+| Element | Reason |
+|---------|--------|
+| Numbers | Always LTR (123, not ٣٢١) |
+| Phone numbers | Universal format |
+| Clocks | Universal format |
+| Video player controls | Universal convention |
+| Brand logos | Design integrity |
+| Math equations | Universal notation |
+
+### CSS for RTL
+
+```css
+/* Modern approach using logical properties */
+.element {
+  /* Instead of margin-left: 16px */
+  margin-inline-start: 16px;
+
+  /* Instead of padding-right: 8px */
+  padding-inline-end: 8px;
+
+  /* Instead of text-align: left */
+  text-align: start;
+
+  /* Instead of float: left */
+  float: inline-start;
+}
+
+/* Or use dir attribute */
+[dir="rtl"] .element {
+  /* RTL-specific overrides */
+}
+```
+
+### RTL Icons
+
+Icons with inherent direction need mirroring:
+
+| Icon | Mirror? | Reason |
+|------|---------|--------|
+| Back arrow | Yes | Directional navigation |
+| Forward arrow | Yes | Directional navigation |
+| Reply icon | Yes | Shows direction of response |
+| Search icon | No | Magnifying glass is universal |
+| Home icon | No | House has no direction |
+| Settings gear | No | Symmetric |
+| Play button | No | Universal media convention |
+
+---
+
+## Color Meanings Across Cultures
+
+### Red
+
+| Culture | Meaning |
+|---------|---------|
+| Western | Danger, stop, error, love |
+| China | Good luck, prosperity, happiness |
+| India | Purity, fertility |
+| South Africa | Mourning |
+| Japan | Life, anger |
+
+**Design implication:** Don't use red for error states in apps targeting Chinese markets without context.
+
+### White
+
+| Culture | Meaning |
+|---------|---------|
+| Western | Purity, cleanliness, peace |
+| China/Japan | Death, mourning |
+| India | Unhappiness, mourning |
+
+**Design implication:** White space may have different connotations; "clean" design may feel empty or cold.
+
+### Green
+
+| Culture | Meaning |
+|---------|---------|
+| Western | Go, success, nature, money |
+| Islamic | Sacred, paradise |
+| China | Infidelity (green hat = cuckold) |
+| Ireland | National identity |
+
+**Design implication:** Green success states work globally, but be careful with green accessories or hats in Chinese contexts.
+
+### Yellow
+
+| Culture | Meaning |
+|---------|---------|
+| Western | Caution, happiness |
+| Japan | Courage, royalty |
+| Egypt | Mourning |
+| Latin America | Death, mourning |
+
+### Blue
+
+| Culture | Meaning |
+|---------|---------|
+| Most cultures | Trust, calm, professionalism |
+| Iran | Mourning, spirituality |
+
+**Design implication:** Blue is relatively safe globally; commonly used for links and primary actions.
+
+### General Guidelines
+
+1. **Test with local users** - Color perception varies
+2. **Don't rely on color alone** - Add icons and text
+3. **Provide customization** - Let users choose colors where possible
+4. **Research target markets** - Specific meanings in your target regions
+
+---
+
+## Form Conventions
+
+### Name Fields
+
+| Culture | Name Structure |
+|---------|----------------|
+| Western | First + Last (given + family) |
+| China/Japan/Korea | Family + Given |
+| Iceland | Given + Patronymic |
+| Spanish | Given + Father's surname + Mother's surname |
+| Arabic | Given + Father's + Grandfather's + Family |
+
+**Best practices:**
+- Use single "Full Name" field when possible
+- If splitting, use "Given Name" and "Family Name" (not First/Last)
+- Don't assume first/last order
+- Allow long names (>50 characters)
+
+### Address Fields
+
+| Region | Considerations |
+|--------|----------------|
+| US | State, ZIP code (5 or 9 digits) |
+| UK | County optional, postcode format varies |
+| Japan | Prefecture, address reads large→small |
+| Brazil | CEP codes |
+| Countries without postal codes | 50+ countries don't use them |
+
+**Best practices:**
+- Don't require postal code universally
+- Use country-appropriate field labels
+- Allow flexible formats
+- Consider address autocomplete services
+
+### Phone Numbers
+
+| Consideration | Approach |
+|---------------|----------|
+| Country codes | Allow input or select separately |
+| Length | Varies widely (7-15 digits) |
+| Format | Don't enforce specific format |
+| Mobile vs landline | Labels may not translate |
+
+**Best practices:**
+- Accept multiple formats
+- Store in E.164 format internally (+1234567890)
+- Display in local format
+- Don't validate too strictly
+
+### Dates
+
+| Region | Format |
+|--------|--------|
+| US | MM/DD/YYYY |
+| Most of world | DD/MM/YYYY |
+| Japan, China, Korea | YYYY/MM/DD |
+| ISO standard | YYYY-MM-DD |
+
+**Best practices:**
+- Use date pickers instead of text input
+- Show month names (not numbers) to avoid confusion
+- Store in ISO format (YYYY-MM-DD)
+- Display in user's locale
+
+### Currency
+
+| Consideration | Examples |
+|---------------|----------|
+| Symbol position | $100 vs 100€ vs 100 kr |
+| Decimal separator | $1,234.56 vs €1.234,56 |
+| Thousands separator | 1,000 vs 1.000 vs 1 000 |
+| Currency names | Dollar, Yuan, Rupee |
+
+**Best practices:**
+- Format according to user locale
+- Always show currency symbol/code
+- Be clear about which currency
+- Handle conversion if multi-currency
+
+---
+
+## Text Considerations
+
+### Text Expansion
+
+Translated text is often longer than English:
+
+| Language | Expansion Factor |
+|----------|------------------|
+| German | 1.3x |
+| French | 1.2x |
+| Russian | 1.2x |
+| Spanish | 1.2x |
+| Chinese | 0.8x |
+| Japanese | 0.9x |
+
+**Design implications:**
+- Don't design to exact English text length
+- Allow buttons and labels to expand
+- Test layouts with longest expected translations
+- Use flexible grid/flexbox layouts
+
+### Text in Images
+
+Avoid text in images because:
+- Can't be translated easily
+- Not accessible to screen readers
+- Doesn't scale with user preferences
+- Complicates localization workflow
+
+**Alternative:** Use CSS text over images.
+
+### Numbers and Units
+
+| Element | Consideration |
+|---------|---------------|
+| Measurement | Metric (most world) vs Imperial (US) |
+| Paper size | A4 (most world) vs Letter (US, Canada) |
+| Temperature | Celsius vs Fahrenheit |
+| Time | 24-hour vs 12-hour (AM/PM) |
+
+---
+
+## Icons and Imagery
+
+### Potentially Problematic Icons
+
+| Icon | Issue | Alternative |
+|------|-------|-------------|
+| Mailbox | US-specific design | Envelope |
+| Check mark | Means "wrong" in some cultures | Consider context |
+| Thumbs up | Offensive in some cultures | Hearts, stars |
+| Hand gestures | Vary widely in meaning | Avoid gestures |
+| Animals | Religious/cultural sensitivities | Research target market |
+| Religious symbols | May exclude or offend | Use neutral symbols |
+
+### Photography
+
+| Consideration | Approach |
+|---------------|----------|
+| Diversity | Represent target audience |
+| Gestures | Avoid culture-specific gestures |
+| Clothing | Consider cultural norms |
+| Settings | Use locally relevant contexts |
+| Food | Be aware of dietary restrictions |
+
+---
+
+## Localization Best Practices
+
+### Technical
+
+```javascript
+// Use internationalization libraries
+const formatter = new Intl.DateTimeFormat('de-DE');
+const date = formatter.format(new Date());
+
+const currencyFormatter = new Intl.NumberFormat('ja-JP', {
+  style: 'currency',
+  currency: 'JPY'
+});
+const price = currencyFormatter.format(1000);
+```
+
+### Content
+
+- Use simple, clear language (easier to translate)
+- Avoid idioms and colloquialisms
+- Don't hardcode strings (use translation keys)
+- Provide context for translators
+- Test with pseudo-localization during development
+
+### Design
+
+- Design for flexibility (expanding text)
+- Use icons with text (not alone)
+- Test layouts in RTL and longest languages
+- Consider reading order in complex layouts
+
+---
+
+## Quick Reference Checklist
+
+Before launching internationally:
+
+**Layout:**
+- [ ] Supports RTL if targeting Arabic, Hebrew, Persian
+- [ ] Text can expand 30% without breaking
+- [ ] No text in images
+- [ ] Icons are culturally neutral
+
+**Forms:**
+- [ ] Name fields are flexible
+- [ ] Addresses work without postal codes
+- [ ] Phone numbers accept various formats
+- [ ] Dates use pickers or clear formats
+
+**Content:**
+- [ ] Colors don't carry unintended meaning
+- [ ] Images represent target audience
+- [ ] No culture-specific idioms
+- [ ] Units match target region
+
+**Technical:**
+- [ ] Dates, numbers, currency use locale formatting
+- [ ] All strings externalized for translation
+- [ ] Character encoding supports target languages
+- [ ] Font supports required character sets

package/skills/cm-ux-master/references/dark-patterns.md

@@ -0,0 +1,362 @@
+# Dark Patterns in UX Design
+
+Understanding manipulative design practices to recognize and avoid them. Ethical alternatives that achieve business goals without deceiving users.
+
+## What Are Dark Patterns?
+
+Dark patterns are user interface designs that trick users into doing things they didn't intend. They exploit cognitive biases and psychological vulnerabilities for business benefit at user expense.
+
+**Key distinction:**
+- Persuasion = helping users make decisions aligned with their goals
+- Dark patterns = tricking users into decisions against their interests
+
+---
+
+## Categories of Dark Patterns
+
+### 1. Forced Continuity
+
+**Definition:** Making it easy to sign up for a free trial but difficult to cancel.
+
+**Examples:**
+- Require phone call to cancel (but signup was online)
+- Bury cancellation in settings maze
+- Show "Are you sure?" modals repeatedly
+- Require cancellation 30 days before renewal
+
+**Why it's harmful:**
+- Users pay for services they don't want
+- Exploits inertia and forgetfulness
+- Damages trust when discovered
+
+**Ethical alternative:**
+- Cancel button as easy to find as signup
+- Clear cancellation confirmation (not guilt trips)
+- Email reminder before renewal charge
+- Allow pause instead of forcing cancel
+
+### 2. Roach Motel
+
+**Definition:** Easy to get into a situation, hard to get out.
+
+**Examples:**
+- Account creation takes 1 minute, deletion takes 30 days and support tickets
+- Subscribing to emails requires one click, unsubscribing requires login + multiple confirmations
+- Joining is free, but exported data costs money
+
+**Why it's harmful:**
+- Traps users against their will
+- Violates user autonomy
+- Often illegal under GDPR and similar regulations
+
+**Ethical alternative:**
+- Symmetric design: if X is easy, reversing X should be easy
+- Account deletion should be self-service
+- Data export should be free and complete
+- Unsubscribe = one click
+
+### 3. Privacy Zuckering
+
+**Definition:** Tricking users into sharing more information than intended.
+
+**Examples:**
+- Default settings share everything publicly
+- "Connect with friends" imports entire contact list
+- Profile completion gamification encourages oversharing
+- Confusing privacy controls that require expertise
+
+**Why it's harmful:**
+- Users lose control of personal information
+- Can lead to real-world harm (stalking, discrimination)
+- Exploits the complexity of privacy settings
+
+**Ethical alternative:**
+- Privacy-respecting defaults (share nothing by default)
+- Clear, plain-language privacy explanations
+- Granular, understandable controls
+- Regular privacy checkups that surface settings
+
+### 4. Bait and Switch
+
+**Definition:** User sets out to do one thing, but something different happens.
+
+**Examples:**
+- "X" button that triggers action instead of closing
+- "Download" button that's actually an ad
+- "Free trial" that immediately charges
+- Changing terms after user commits to purchase
+
+**Why it's harmful:**
+- Directly deceives users about consequences
+- Violates fundamental expectations
+- Often results in unwanted charges or actions
+
+**Ethical alternative:**
+- Buttons do exactly what they say
+- Clear labeling distinguishes ads from content
+- Free trials are genuinely free until stated conversion point
+- Terms are locked at time of agreement
+
+### 5. Confirmshaming
+
+**Definition:** Using guilt or shame to manipulate users into opting in.
+
+**Examples:**
+- "No thanks, I don't want to save money"
+- "I'll stay ignorant" (for newsletter)
+- "I don't care about my health"
+- Imagery showing sad faces for decline option
+
+**Why it's harmful:**
+- Manipulates emotions to override rational decision
+- Disrespects user autonomy
+- Creates negative brand association
+
+**Ethical alternative:**
+- Neutral decline options: "No thanks" or "Maybe later"
+- Equal visual weight for both choices
+- Respect the "no" without comment
+- Focus on value proposition, not guilt
+
+### 6. Hidden Costs
+
+**Definition:** Prices or fees revealed only at final checkout.
+
+**Examples:**
+- Service fees added at last step
+- Required "convenience fees"
+- Shipping costs revealed after entering payment info
+- "Processing fees" on top of advertised price
+
+**Why it's harmful:**
+- Users commit time/effort before learning true cost
+- Exploits sunk cost fallacy
+- Illegal in many jurisdictions (price must be clear)
+
+**Ethical alternative:**
+- Show total cost including all fees upfront
+- If fees depend on choices, show estimates early
+- Price transparency builds trust
+- All-in pricing where possible
+
+### 7. Misdirection
+
+**Definition:** Design draws attention away from important information.
+
+**Examples:**
+- Terms and conditions in tiny gray text
+- "Yes" button prominent, "No" button hidden
+- Pre-selected add-ons that require unchecking
+- Important disclaimers below the fold
+
+**Why it's harmful:**
+- Prevents informed decision-making
+- Hides information users would want to know
+- Exploits visual hierarchy against users
+
+**Ethical alternative:**
+- Important information is visually prominent
+- Both options equally accessible
+- Nothing pre-selected that costs money
+- Disclaimers at point of relevance, not hidden
+
+### 8. Trick Questions
+
+**Definition:** Confusing wording that leads to unintended choices.
+
+**Examples:**
+- "Uncheck to not receive no emails" (double negative)
+- Checkboxes that mean opposite things mixed together
+- "Continue" meaning "I agree" without stating so
+- Questions worded to confuse opt-in vs opt-out
+
+**Why it's harmful:**
+- Deliberately confuses users
+- Results in choices user didn't mean to make
+- Exploits cognitive load
+
+**Ethical alternative:**
+- Clear, simple language
+- Consistent meaning (check = yes, uncheck = no)
+- Explicit confirmation language
+- User testing to catch confusing wording
+
+### 9. Sneak into Basket
+
+**Definition:** Items added to cart without user action.
+
+**Examples:**
+- Insurance pre-selected during checkout
+- "Protection plan" added by default
+- Donation to charity checked by default
+- Accessories added when buying main product
+
+**Why it's harmful:**
+- Users pay for things they didn't choose
+- Exploits inattention during checkout
+- Often hidden in long checkout flows
+
+**Ethical alternative:**
+- Nothing added without explicit user action
+- Optional items clearly offered (not pre-selected)
+- Cart contents always visible and editable
+- Confirmation of what's being purchased
+
+### 10. Urgency & Scarcity (False)
+
+**Definition:** Creating fake urgency or scarcity to pressure decisions.
+
+**Examples:**
+- "Only 2 left!" (restocked hourly)
+- "This deal expires in 10:00" (resets on refresh)
+- "15 people viewing this" (fabricated)
+- "Prices increase tomorrow" (they don't)
+
+**Why it's harmful:**
+- Pressures users into hasty decisions
+- Based on lies (not real scarcity)
+- Prevents price comparison and consideration
+- Particularly harmful for high-stakes purchases
+
+**Ethical alternative:**
+- Only show real inventory counts
+- Honest sale end dates
+- If scarcity is real, explain why
+- Give users time to decide
+
+---
+
+## Regulatory Context
+
+### GDPR (Europe)
+
+Dark patterns affecting consent are illegal:
+- Consent must be freely given
+- Rejecting must be as easy as accepting
+- Pre-ticked boxes invalid for consent
+- Bundled consent (all-or-nothing) invalid
+
+### FTC (United States)
+
+The FTC has taken action against:
+- Hidden subscription fees
+- Difficult cancellation processes
+- Misleading "free trial" offers
+- Fake urgency and scarcity
+
+### California Privacy Rights Act (CPRA)
+
+Specifically prohibits:
+- Dark patterns in opt-out processes
+- Requires symmetry in design
+- Consent obtained through dark patterns is invalid
+
+---
+
+## How to Audit for Dark Patterns
+
+### Checklist
+
+**Signup/Subscription:**
+- [ ] Can users cancel as easily as they signed up?
+- [ ] Are renewal terms clear at signup?
+- [ ] Is the "free" trial genuinely free?
+
+**Checkout:**
+- [ ] Is the total price clear before final step?
+- [ ] Are all added items explicitly chosen by user?
+- [ ] Are opt-outs as prominent as opt-ins?
+
+**Data/Privacy:**
+- [ ] Are privacy settings understandable?
+- [ ] Are defaults privacy-respecting?
+- [ ] Can users export/delete their data easily?
+
+**General:**
+- [ ] Does every button do what it says?
+- [ ] Is important information visually prominent?
+- [ ] Are decline options neutral (no shaming)?
+- [ ] Is urgency/scarcity real?
+
+### The Mirror Test
+
+Ask: "Would I feel comfortable if a journalist wrote about how this works?"
+
+If the answer is no, it's probably a dark pattern.
+
+---
+
+## Ethical Alternatives That Work
+
+### Instead of Forced Continuity
+
+**Business goal:** Retain subscribers
+
+**Ethical approach:**
+- Make the product so good they don't want to cancel
+- Offer pause option instead of cancel
+- Win-back campaigns for churned users
+- Ask why they're leaving and address it
+
+### Instead of Hidden Costs
+
+**Business goal:** Competitive-looking prices
+
+**Ethical approach:**
+- All-in pricing (include fees in advertised price)
+- Compete on value, not deceptive pricing
+- Explain what fees cover (transparency builds trust)
+- Offer fee-free options (digital delivery, etc.)
+
+### Instead of Confirmshaming
+
+**Business goal:** Higher opt-in rates
+
+**Ethical approach:**
+- Stronger value proposition
+- Social proof (join 100k subscribers)
+- Clear benefit statement
+- Respect "no" and try again later
+
+### Instead of False Urgency
+
+**Business goal:** Faster purchase decisions
+
+**Ethical approach:**
+- Genuine limited-time offers (and honor them)
+- Waitlists for genuinely scarce items
+- Early access for committed customers
+- Value-based urgency (limited capacity, real deadlines)
+
+---
+
+## The Business Case Against Dark Patterns
+
+### Short-term vs Long-term
+
+| Metric | Dark Pattern Impact | Ethical Design Impact |
+|--------|---------------------|----------------------|
+| Initial conversion | ↑ Higher | Slightly lower |
+| Customer trust | ↓ Lower | ↑ Higher |
+| Churn rate | ↑ Higher | ↓ Lower |
+| Customer lifetime value | ↓ Lower | ↑ Higher |
+| Word of mouth | Negative | Positive |
+| Regulatory risk | High | Low |
+
+### Real Costs of Dark Patterns
+
+1. **Support costs** - Dealing with angry customers
+2. **Chargeback rates** - Users disputing unwanted charges
+3. **Reputation damage** - Social media exposure
+4. **Legal fees** - Defending against lawsuits
+5. **Regulatory fines** - Increasing enforcement
+6. **Employee morale** - Good people don't want to deceive users
+
+### Companies That Changed
+
+Several major companies have eliminated dark patterns after backlash:
+- LinkedIn simplified privacy controls after criticism
+- Amazon made "Subscribe & Save" more transparent
+- Apple added App Store subscription management
+
+The pattern: Short-term thinking creates dark patterns; long-term thinking removes them.