Initial commit with translated description
This commit is contained in:
397
references/30-patterns-information.md
Normal file
397
references/30-patterns-information.md
Normal file
@@ -0,0 +1,397 @@
|
||||
# Patterns: Information Relationships
|
||||
|
||||
Patterns for organizing, relating, and surfacing content.
|
||||
|
||||
---
|
||||
|
||||
## What are Information Relationships?
|
||||
|
||||
How content connects, relates, and is organized. Good information architecture makes content findable and understandable.
|
||||
|
||||
**Core principle:** Users should always know where they are, how they got there, and where they can go.
|
||||
|
||||
---
|
||||
|
||||
## Breadcrumbs
|
||||
|
||||
**What:** Hierarchical trail showing location in site structure.
|
||||
|
||||
### Types
|
||||
|
||||
| Type | Use Case |
|
||||
|------|----------|
|
||||
| **Hierarchy-based** | Shows parent/child path (Home > Category > Item) |
|
||||
| **History-based** | Shows pages visited (like browser back) |
|
||||
| **Attribute-based** | Shows filters/selections applied |
|
||||
|
||||
### Benefits
|
||||
|
||||
- **Orientation** — Users know where they are
|
||||
- **Efficiency** — Quick navigation to parent levels
|
||||
- **Context** — Understand content hierarchy
|
||||
- **Recovery** — Easy return to previous levels
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Use for sites with 3+ hierarchy levels
|
||||
- Link all but current page
|
||||
- Use separator (/ or >) between levels
|
||||
- Truncate long trails intelligently
|
||||
- Position consistently (top of content area)
|
||||
|
||||
**DON'T:**
|
||||
- Use for flat site structures
|
||||
- Make current page a link
|
||||
- Use breadcrumbs as primary navigation
|
||||
- Show breadcrumbs on homepage
|
||||
- Inconsistent placement across pages
|
||||
|
||||
### Breadcrumb Examples
|
||||
|
||||
**Standard:**
|
||||
```
|
||||
Home / Products / Electronics / Headphones
|
||||
```
|
||||
|
||||
**Attribute-based:**
|
||||
```
|
||||
Headphones > Over-ear > Wireless > Sony
|
||||
```
|
||||
|
||||
**Truncated:**
|
||||
```
|
||||
Home / ... / Category / Subcategory / Item
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Sitemaps & Information Architecture
|
||||
|
||||
**What:** Structured overview of all site content.
|
||||
|
||||
### Sitemap Types
|
||||
|
||||
| Type | Purpose |
|
||||
|------|---------|
|
||||
| **Visual sitemap** | Design/planning tool |
|
||||
| **HTML sitemap** | User-facing page listing |
|
||||
| **XML sitemap** | SEO, search engine crawling |
|
||||
|
||||
### IA Organization Schemes
|
||||
|
||||
| Scheme | Examples |
|
||||
|--------|----------|
|
||||
| **Alphabetical** | Directories, glossaries |
|
||||
| **Chronological** | News, blog archives |
|
||||
| **Geographical** | Store locators, regional content |
|
||||
| **Topical** | Subject-based categories |
|
||||
| **Task-based** | What users want to do |
|
||||
| **Audience-based** | By user type (admin, user) |
|
||||
|
||||
### IA Principles
|
||||
|
||||
**DO:**
|
||||
- Organize by user mental model
|
||||
- Use card sorting to validate
|
||||
- Limit depth (3-4 levels max)
|
||||
- Use clear, descriptive labels
|
||||
- Cross-link related content
|
||||
|
||||
**DON'T:**
|
||||
- Organize by org structure
|
||||
- Create deep hierarchies
|
||||
- Use internal jargon
|
||||
- Duplicate content in multiple places
|
||||
- Forget search as navigation
|
||||
|
||||
---
|
||||
|
||||
## Tagging & Categorization
|
||||
|
||||
**What:** Metadata that makes content findable and relatable.
|
||||
|
||||
### Categories vs. Tags
|
||||
|
||||
| Categories | Tags |
|
||||
|------------|------|
|
||||
| Hierarchical | Flat |
|
||||
| Mutually exclusive | Multiple allowed |
|
||||
| Pre-defined | Often user-created |
|
||||
| Broad classification | Specific descriptors |
|
||||
| Navigation structure | Discovery/filtering |
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Define clear taxonomy
|
||||
- Limit tag proliferation (governance)
|
||||
- Show related content via shared tags
|
||||
- Allow multiple tags per item
|
||||
- Make tags clickable (for discovery)
|
||||
|
||||
**DON'T:**
|
||||
- Over-tag content
|
||||
- Create overlapping categories
|
||||
- Use inconsistent naming
|
||||
- Hide tag functionality
|
||||
- Ignore tag maintenance
|
||||
|
||||
### Tag UI Patterns
|
||||
|
||||
**Tag display:**
|
||||
```
|
||||
[UX Design] [Mobile] [Case Study]
|
||||
```
|
||||
|
||||
**Tag filtering:**
|
||||
```
|
||||
Filter by tag:
|
||||
☑ UX Design (24)
|
||||
☐ Mobile (18)
|
||||
☐ Case Study (12)
|
||||
```
|
||||
|
||||
**Tag input:**
|
||||
```
|
||||
Tags: [UX Design ×] [Mobile ×] [Add tag...]
|
||||
Suggested: Case Study, Research
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Faceted Search & Filters
|
||||
|
||||
**What:** Multi-dimensional filtering to narrow results.
|
||||
|
||||
### Components
|
||||
|
||||
| Component | Function |
|
||||
|-----------|----------|
|
||||
| **Facets** | Filter categories (price, size, color) |
|
||||
| **Values** | Options within facets |
|
||||
| **Counts** | Number of results per value |
|
||||
| **Applied filters** | Currently active filters |
|
||||
| **Clear all** | Reset to unfiltered state |
|
||||
|
||||
### Benefits
|
||||
|
||||
- **Precision** — Find exactly what's needed
|
||||
- **Exploration** — Discover by browsing facets
|
||||
- **Transparency** — See how results are filtered
|
||||
- **Control** — User-driven refinement
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Show result counts per facet value
|
||||
- Allow multiple selections within facets
|
||||
- Update results immediately (or on apply)
|
||||
- Show applied filters prominently
|
||||
- Provide clear "reset all"
|
||||
|
||||
**DON'T:**
|
||||
- Show zero-result facet values (or mark unavailable)
|
||||
- Hide facet values users might need
|
||||
- Create too many facets
|
||||
- Remove facets that would narrow to zero
|
||||
- Make filters hard to clear
|
||||
|
||||
### Faceted Search UI
|
||||
|
||||
```
|
||||
Filters [Clear all]
|
||||
|
||||
Price
|
||||
○ Under $50 (120)
|
||||
○ $50-$100 (85)
|
||||
● $100-$200 (42)
|
||||
○ Over $200 (23)
|
||||
|
||||
Brand
|
||||
☑ Nike (35)
|
||||
☑ Adidas (28)
|
||||
☐ Puma (15)
|
||||
☐ Under Armour (12)
|
||||
|
||||
[Show 42 results]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Related Content
|
||||
|
||||
**What:** Surfacing connections between content.
|
||||
|
||||
### Types
|
||||
|
||||
| Type | Basis |
|
||||
|------|-------|
|
||||
| **Manual curation** | Editor-selected relations |
|
||||
| **Automatic** | Shared tags, categories, keywords |
|
||||
| **Behavioral** | "Users also viewed" |
|
||||
| **Temporal** | "Recent" or "trending" |
|
||||
|
||||
### Placement
|
||||
|
||||
- End of content (post-consumption)
|
||||
- Sidebar (during consumption)
|
||||
- Inline (contextual mentions)
|
||||
- Below fold (scroll to discover)
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Show genuinely related content
|
||||
- Limit quantity (3-5 items)
|
||||
- Include visual preview
|
||||
- Vary recommendation types
|
||||
- Track click-through
|
||||
|
||||
**DON'T:**
|
||||
- Show unrelated content
|
||||
- Overwhelm with recommendations
|
||||
- Use only one recommendation type
|
||||
- Show same recommendations everywhere
|
||||
- Link to outdated content
|
||||
|
||||
### Related Content UI
|
||||
|
||||
```
|
||||
Related Articles
|
||||
|
||||
[Image] How to improve your UX process
|
||||
3 min read
|
||||
|
||||
[Image] Design systems for startups
|
||||
5 min read
|
||||
|
||||
[Image] User research on a budget
|
||||
4 min read
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Cross-Linking & Content Discovery
|
||||
|
||||
**What:** Connecting content through intentional links.
|
||||
|
||||
### Cross-Link Types
|
||||
|
||||
| Type | Purpose |
|
||||
|------|---------|
|
||||
| **See also** | Alternative content |
|
||||
| **Learn more** | Deeper dive |
|
||||
| **Prerequisites** | Required knowledge |
|
||||
| **Next steps** | Sequential content |
|
||||
| **Examples** | Illustrative content |
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Link to genuinely useful content
|
||||
- Use descriptive anchor text
|
||||
- Open external links appropriately
|
||||
- Maintain links (fix broken)
|
||||
- Use bidirectional linking
|
||||
|
||||
**DON'T:**
|
||||
- Use "click here" as anchor text
|
||||
- Link excessively (every paragraph)
|
||||
- Link to irrelevant pages
|
||||
- Open all links in new tabs
|
||||
- Create orphan pages (no inbound links)
|
||||
|
||||
### Link Patterns
|
||||
|
||||
**Inline:**
|
||||
```
|
||||
For more details, see our guide to [user research methods].
|
||||
```
|
||||
|
||||
**Call-out:**
|
||||
```
|
||||
📚 Related: [Complete guide to design systems →]
|
||||
```
|
||||
|
||||
**Footer:**
|
||||
```
|
||||
Learn more:
|
||||
• User research fundamentals
|
||||
• Conducting user interviews
|
||||
• Analyzing research findings
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Search
|
||||
|
||||
**What:** Finding content through queries.
|
||||
|
||||
### Search Components
|
||||
|
||||
| Component | Function |
|
||||
|-----------|----------|
|
||||
| **Search box** | Query input |
|
||||
| **Suggestions** | Autocomplete, recent, popular |
|
||||
| **Results** | Matched content |
|
||||
| **Filters** | Refine results |
|
||||
| **Sort** | Order results |
|
||||
| **No results** | Empty state handling |
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
**DO:**
|
||||
- Make search prominent
|
||||
- Support autocomplete
|
||||
- Show result count
|
||||
- Highlight matched terms
|
||||
- Handle no results gracefully
|
||||
- Remember recent searches
|
||||
|
||||
**DON'T:**
|
||||
- Hide search (especially on content-heavy sites)
|
||||
- Require exact matches
|
||||
- Show empty results without guidance
|
||||
- Ignore typos/synonyms
|
||||
- Make filters hard to find
|
||||
|
||||
### Search UI Patterns
|
||||
|
||||
**Search box:**
|
||||
```
|
||||
🔍 [Search products, articles... ]
|
||||
Recent: shoes, headphones
|
||||
Popular: new arrivals, sale
|
||||
```
|
||||
|
||||
**Search results:**
|
||||
```
|
||||
42 results for "wireless headphones"
|
||||
|
||||
[Filter by: Price ▼] [Category ▼] [Sort by: Relevance ▼]
|
||||
|
||||
Sony WH-1000XM5
|
||||
Wireless noise-canceling **headphones** with...
|
||||
$349 ★★★★★ (2,341)
|
||||
|
||||
AirPods Max
|
||||
Premium **wireless headphones** from Apple...
|
||||
$549 ★★★★☆ (1,892)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Information Architecture Checklist
|
||||
|
||||
| Element | Implemented? |
|
||||
|---------|--------------|
|
||||
| ☐ Clear hierarchy (3-4 levels max) | |
|
||||
| ☐ Breadcrumbs for deep content | |
|
||||
| ☐ Consistent categorization | |
|
||||
| ☐ Useful tagging system | |
|
||||
| ☐ Effective search | |
|
||||
| ☐ Faceted filtering where appropriate | |
|
||||
| ☐ Related content surfacing | |
|
||||
| ☐ Cross-linking strategy | |
|
||||
| ☐ No orphan content | |
|
||||
Reference in New Issue
Block a user