Initial commit with translated description
This commit is contained in:
332
references/28-patterns-personalization.md
Normal file
332
references/28-patterns-personalization.md
Normal file
@@ -0,0 +1,332 @@
|
||||
# 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 | | |
|
||||
Reference in New Issue
Block a user