singular-particular-space/skills/commissioning-skill/fetched-skills/ux-design/references/uxh-cultural-ux.md

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

/* 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

// 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