fmode-app/.claude/skills/ui-audit/references/28-patterns-personalization.md

Patterns: Personalization

Patterns for adapting interfaces to individual users.

---

What is Personalization?

Tailoring the interface, content, or functionality based on user data, preferences, or behavior. The goal is relevance—showing users what matters to them.

Spectrum:

• Customization — User explicitly sets preferences
• Personalization — System adapts based on data/behavior

---

Customizable Dashboards

What: User-configured layouts and widgets.

Benefits

• Relevance — Users see what matters to them
• Ownership — IKEA effect (they built it)
• Efficiency — Quick access to frequent needs

Implementation Guidelines

DO:

• Provide useful defaults (don't start empty)
• Make customization discoverable but not required
• Allow adding, removing, rearranging widgets
• Save preferences across sessions
• Offer presets/templates

DON'T:

• Require customization to use the product
• Make defaults unusable
• Overwhelm with options
• Reset customization without warning
• Hide the reset/restore option

Widget Patterns

Pattern	Use For
Drag-and-drop	Rearranging layout
Widget picker	Adding new widgets
Resize handles	Adjusting widget size
Edit mode	Toggled customization state
Templates	Starting point presets

---

Adaptive Content

What: Content that changes based on user behavior or context.

Types

Type	Basis	Example
Role-based	User role/permissions	Admin vs. user views
Behavior-based	Past actions	"Continue where you left off"
Context-based	Current state	Location, device, time
Preference-based	Explicit settings	Language, theme

Implementation Guidelines

DO:

• Explain why content is personalized
• Allow users to dismiss/adjust
• Respect privacy expectations
• Provide value (not just surveillance)
• Fall back gracefully to defaults

DON'T:

• Be creepy (mentioning private data)
• Over-personalize (filter bubble)
• Personalize without value
• Remove access to non-personalized views
• Trap users in narrow recommendations

Transparency Patterns

"Based on your recent projects"
"Because you viewed [X]"
"Popular in your region"
[See all] | [Hide these suggestions]

---

User Preferences

What: Settings users explicitly configure.

Common Preference Categories

Category	Examples
Display	Theme, density, font size
Communication	Email frequency, notification types
Privacy	Data sharing, tracking
Regional	Language, timezone, currency
Workflow	Default views, keyboard shortcuts

Implementation Guidelines

DO:

• Group preferences logically
• Provide clear defaults
• Explain impact of settings
• Apply immediately (or show preview)
• Sync across devices

DON'T:

• Create endless settings pages
• Hide important preferences
• Require restart for simple changes
• Use jargon in preference names
• Set anti-user defaults

Settings Page Patterns

Grouped settings:

Account
  - Profile
  - Security
  - Privacy

Preferences  
  - Appearance
  - Notifications
  - Language & Region

Integrations
  - Connected apps
  - API keys

Inline settings:

[Toggle] Enable email notifications
        Get notified about new messages
        
[Dropdown] Frequency: [Daily digest ▼]

---

Localization (l10n)

What: Adapting interfaces for different languages and regions.

Key Considerations

Element	Localization Needs
Text	Translation, expansion space
Dates	Format varies by region
Numbers	Decimal/thousand separators
Currency	Symbol, position, format
Direction	LTR vs. RTL layouts
Images	Cultural appropriateness
Legal	Region-specific requirements

Implementation Guidelines

DO:

• Design for text expansion (German ~30% longer)
• Use Unicode/UTF-8 throughout
• Externalize strings (no hardcoding)
• Support RTL layouts
• Test with real translations
• Consider cultural context

DON'T:

• Concatenate strings for sentences
• Use flags for language selection
• Assume formats (dates, addresses)
• Hardcode text in images
• Use culturally specific idioms

Text Expansion Guidelines

Language	Expansion vs. English
German	+30%
French	+20%
Spanish	+20%
Chinese	-30% (but vertical space)
Japanese	-20%
Arabic	+25% (RTL)

---

Smart Defaults

What: Pre-selecting the most likely option.

Default Sources

Source	Example
User history	Last used option
User profile	Location-based defaults
Behavior patterns	Most common choice
Context	Time-appropriate defaults
System intelligence	ML-predicted preference

Implementation Guidelines

DO:

• Save and reuse user preferences
• Use sensible fallbacks
• Make overriding easy
• Be transparent about defaults
• Respect explicit user choices

DON'T:

• Force users into defaults
• Reset preferences unexpectedly
• Use defaults against user interest
• Make changing defaults hard
• Assume all users are the same

Examples

New document: Default to last-used template
Date picker: Default to today
Country: Default to detected location
Currency: Default to account currency
Recipient: Default to recent contacts

---

Recommendation Systems

What: Suggesting content based on user data.

Types

Type	Basis	Example
Collaborative	Similar users' behavior	"Users like you also bought"
Content-based	Item similarity	"Similar to items you viewed"
Hybrid	Combined approaches	"Recommended for you"

Implementation Guidelines

DO:

• Explain recommendation basis
• Allow feedback (helpful/not helpful)
• Include diversity (avoid filter bubble)
• Update recommendations regularly
• Provide "see more like this" options

DON'T:

• Show only narrow recommendations
• Recommend items already purchased/viewed
• Use recommendations for upselling only
• Hide non-recommended options
• Persist stale recommendations

Recommendation UI Patterns

"Because you watched [X]"
[Thumbnail] [Thumbnail] [Thumbnail]
            [See all →]

"Popular with marketers"
[Item] [Item] [Item]
[Not interested]

---

Progressive Profiles

What: Building user profiles over time rather than all at once.

Benefits

• Reduced friction — Don't ask everything upfront
• Better data — Ask in context when relevant
• Ongoing relationship — Learn more over time

Implementation Guidelines

DO:

• Ask for minimum to start
• Request additional info contextually
• Explain why you're asking
• Make additions optional
• Show value of providing info

DON'T:

• Front-load all questions
• Ask for irrelevant information
• Require full profiles to start
• Nag for profile completion
• Ask repeatedly for declined info

Contextual Profile Building

[First use] → Email only
[First project] → "What type of project is this?" (improves suggestions)
[Two weeks in] → "Add profile photo for team collaboration"
[First export] → "What file formats do you prefer?" (remembers choice)

---

Personalization Audit

Element	Implemented?	Value to User?
☐ Customizable dashboard
☐ Saved preferences
☐ Smart defaults
☐ Content recommendations
☐ Regional localization
☐ Progressive profiling
☐ User-controlled options
☐ Transparency about personalization