Informační architektura a site map

# Information Architecture: CodeLearn E-Learning Platform

## 1. Content Audit

**Current Content Inventory:**
- 30 courses (10 beginner, 15 intermediate, 5 advanced)
- 200+ lessons across courses
- 50 tutorial articles
- 20 instructor profiles
- User dashboard (progress tracking)
- Community forum (3,500 posts)

**User Needs Analysis:**

| User Type | Primary Needs | Pain Points |
|-----------|--------------|-------------|
| Beginners | Find "start here" path, understand prerequisites | Overwhelmed by choices, unclear what to learn first |
| Intermediate | Build portfolio, learn specific frameworks | Hard to find "next step" after basics |
| Advanced | Deep dives, stay current, teach others | Content too basic, want to contribute |
| Instructors | Create courses, manage students, track engagement | Need analytics, communication tools |

**Content Gaps Identified:**
✗ No clear learning paths (users don't know progression)
✗ Missing: Portfolio showcase feature
✗ No comparison tool (which course to pick?)
✗ Lacking: Certificate/credential pages

**Content Prioritization (MoSCoW):**

**Must Have:**
- Course catalog with filters
- Individual course pages
- Lesson player
- User dashboard
- Sign up / login

**Should Have:**
- Learning paths (curated course sequences)
- Progress tracking
- Community forum
- Instructor profiles

**Could Have:**
- Blog/articles
- Portfolio showcase
- Course comparison tool
- Live coding challenges

**Won't Have (v1):**
- Live classes (async only for now)
- Mobile app (web-first)
- Gamification/badges

## 2. User Personas & Tasks

### Persona 1: "Beginner Beth" (45% of users)

**Demographics:** 24yo, career switcher, 0-6 months experience
**Goals:**
- Learn fundamentals (HTML/CSS/JS)
- Build first project
- Get job-ready

**Pain Points:**
- Doesn't know where to start
- Fears choosing wrong path
- Needs constant reassurance

**Top Tasks:**
1. Browse beginner courses (weekly)
2. Watch lesson videos (daily)
3. Track progress (weekly)
4. Ask questions in forum (weekly)

**User Journey Map:**
```
1. Lands on homepage → 2. Clicks "Start Learning" → 3. Sees learning paths
↓
4. Chooses "Web Dev Fundamentals" path → 5. Previews first course
↓
6. Signs up → 7. Starts first lesson → 8. Tracks progress on dashboard
```

### Persona 2: "Intermediate Ivan" (35% of users)

**Demographics:** 28yo, junior dev, 1-2 years experience
**Goals:**
- Level up to mid-level
- Learn React/Node
- Build portfolio projects

**Pain Points:**
- Beginner content too slow
- Advanced content too hard
- Wants practical, not theoretical

**Top Tasks:**
1. Search for specific topics (daily)
2. Watch course videos (daily)
3. Download project files (weekly)
4. Read articles/docs (weekly)

### Persona 3: "Expert Emma" (Instructor) (20% of users)

**Demographics:** 35yo, senior dev, teaches on side
**Goals:**
- Share knowledge
- Build reputation
- Earn passive income

**Top Tasks:**
1. Create course (monthly)
2. Upload videos (weekly)
3. Answer student questions (daily)
4. View analytics (weekly)

**Search vs Browse Patterns:**
- Beginners: 70% browse (don't know what to search)
- Intermediate: 60% search (know what they need)
- Instructors: 80% direct access (bookmarked pages)

## 3. Site Map

### Visual Site Map Diagram

```
🏠 HOMEPAGE
│
┌───────────────────────────────┼───────────────────────────────┐
│ │ │
📚 COURSES 🎓 LEARNING PATHS 👤 COMMUNITY
│ │ │
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│ │ │ │ │ │
Browse Search By Role By Tech Forum Students
│ │ │ │ │ │
┌──┴──┐ │ ┌──┴──┐ ┌──┴──┐ Topics Profiles
│ │ │ │ │ │ │ │
All By Advanced Web Data Front │
Category Filter Dev Science end Threads
│ │ │ │ │ │
┌──┴──┐ │ Courses Courses Courses Replies
│ │ │ │
Web Mobile │ Instructor
Dev Dev │ Answers
│ │ │
│ │ └─────> 📄 COURSE DETAIL PAGE
│ │ │
│ │ ┌───────────┼───────────┐
│ │ │ │ │
│ │ Overview Curriculum Reviews
│ │ │ │ │
│ │ Instructor 📹 Lessons Ratings
│ │ Bio │ │
│ │ │ Comments
│ │ │
│ │ 🎬 LESSON PLAYER
│ │ │
│ │ Video + Transcript + Code
│ │ │
│ │ [Next Lesson]
│ │
│ └─────────────────┼─────────────────────┐
│ │ │
│ 📊 DASHBOARD ⚙️ SETTINGS
│ │ │
│ ┌───────┼───────┐ Account
│ │ │ │ Profile
│ Progress Saved Activity Billing
│ (%) Courses Feed Preferences
│ │ │ │
│ Certificates Current Notifications
│ Courses
│
└──────────────────────────────────────────────┐
│
📰 RESOURCES
│
┌───────┼───────┐
│ │ │
Blog Guides About
│ │ │
Articles How-to Team
Docs Careers
Contact
```

**Hierarchical Structure:**

```
Level 1 (Homepage): 1 page
Level 2 (Main Sections): 7 pages
- Courses
- Learning Paths
- Community
- Dashboard (logged in)
- Resources
- Pricing
- About

Level 3 (Sub-sections): ~15 pages
- Courses → Browse, Search, Categories (Web Dev, Mobile, Data, etc.)
- Learning Paths → By Role, By Technology
- Community → Forum, Students, Instructors
- Dashboard → Progress, Saved, Activity
- Resources → Blog, Guides, Help

Level 4 (Detail Pages): ~30+ pages
- Individual course pages (30)
- Lesson player pages (200+)
- Blog posts (50)
- User profiles (dynamic)
- Forum threads (dynamic)

Total: ~50 core pages + dynamic content
```

**Navigation Depth:** Max 3 clicks to any page
- Homepage → Courses → Course Detail ✓ (3 clicks)
- Homepage → Dashboard ✓ (2 clicks)
- Homepage → Resources → Blog → Post ✗ (4 clicks) — reduce to 3

**Cross-Links & Related Content:**
- Course pages link to: Related courses, instructor profile, prerequisite courses
- Blog posts link to: Related courses, relevant learning paths
- Lesson pages link to: Next lesson, course home, forum discussions

**Orphan Page Check:**
✗ Found: Old "2019 Bootcamp" page (no inbound links) → Archive it
✗ Found: "Terms of Service" only in footer → Add to Help section

## 4. Navigation Systems

### Global Navigation (Header)

**Desktop:**
```
┌──────────────────────────────────────────────────────────────┐
│ [LOGO] Courses ▾ Learning Paths Community Resources [🔍] [Dashboard] [Profile ▾] │
└──────────────────────────────────────────────────────────────┘
││
││ MEGA MENU (Courses hover)
││
▼▼
┌──────────────────────────────────────────────────────────────┐
│ By Category By Level Featured │
│ • Web Development • Beginner [Course Card] │
│ • Mobile Development • Intermediate [Course Card] │
│ • Data Science • Advanced [Course Card] │
│ • DevOps │
│ │
│ [Browse All Courses →] │
└──────────────────────────────────────────────────────────────┘
```

**Mobile (< 768px):**
```
┌──────────────────┐
│ [☰] [LOGO] [👤] │ ← Hamburger + Profile
└──────────────────┘

Hamburger Opens:
┌──────────────────┐
│ 🏠 Home │
│ 📚 Courses │ ← Tap to expand
│ └ Browse All │ (accordion)
│ └ Categories │
│ 🎓 Learning Paths│
│ 👥 Community │
│ 📊 Dashboard │
│ 📰 Resources │
│ ⚙️ Settings │
└──────────────────┘
```

### Local Navigation (Course Detail Page)

**Sticky Tabs:**
```
[Overview] [Curriculum] [Reviews] [Instructor]
↑ Active (underlined)
```

**Sidebar (Desktop):**
```
┌─────────────────┐
│ Course Progress │
│ ████████░░ 80% │
│ │
│ [Continue] │
│ │
│ ─────────────── │
│ │
│ Curriculum: │
│ ▸ Module 1 │ ← Click to expand
│ ▾ Module 2 │ ← Expanded
│ ✓ Lesson 2.1 │ ← Completed
│ → Lesson 2.2 │ ← Current
│ ○ Lesson 2.3 │ ← Not started
│ ▸ Module 3 │
└─────────────────┘
```

### Utility Navigation (Footer)

```
┌──────────────────────────────────────────────────────────────┐
│ [LOGO] │
│ │
│ Company Courses Support Connect │
│ • About • Browse • Help Center • Twitter │
│ • Careers • Learning Paths • Contact • LinkedIn │
│ • Press • Instructors • Status • GitHub │
│ • Blog • Pricing • Terms • Discord │
│ • Privacy │
│ │
│ © 2026 CodeLearn • [Language: English ▾] │
└──────────────────────────────────────────────────────────────┘
```

### Breadcrumbs

**Course Detail Page:**
```
Home > Courses > Web Development > React Masterclass
```

**Lesson Player:**
```
Home > Courses > React Masterclass > Module 2 > Lesson 2.2: State Management
```

**Rules:**
- Always show on level 3+ pages
- Last item (current page) not linked
- Mobile: Collapse to "< Back" only

## 5. Taxonomy & Labeling

**Category Organization:**

```
📚 COURSES (Primary Taxonomy)
├─ 💻 Web Development
│ ├─ Frontend (React, Vue, Angular)
│ ├─ Backend (Node.js, Python, PHP)
│ └─ Fullstack
├─ 📱 Mobile Development
│ ├─ iOS (Swift, SwiftUI)
│ ├─ Android (Kotlin, Java)
│ └─ Cross-Platform (React Native, Flutter)
├─ 📊 Data Science
│ ├─ Machine Learning
│ ├─ Data Analysis
│ └─ Data Engineering
└─ 🔧 DevOps & Cloud
├─ Docker & Kubernetes
├─ CI/CD
└─ AWS / Azure / GCP
```

**Tag Strategy (Secondary):**
- Tags are cross-category
- Examples: #beginner-friendly, #project-based, #certificate, #free
- Limit: Max 5 tags per course
- User-facing: Show as filter chips

**Naming Conventions:**

| Don't Use (Jargon) | Use (User Language) |
|---------------------|---------------------|
| "Repository" | "Course Library" |
| "Modules" | "Lessons" or "Chapters" |
| "Curriculum" | "What You'll Learn" |
| "Enroll" | "Start Learning" |
| "Dashboard" | "My Learning" (more personal) |

**Label Testing (Card Sorting Results):**
- Tested with 30 users
- "Courses" preferred over "Classes" (85% agreement)
- "Community" clearer than "Forum" (70%)
- "Learning Paths" vs "Roadmaps" → tie, using "Paths"

## 6. Search Strategy

**Search Scope:**
- Global search (header): All content (courses, lessons, articles, forum)
- Filtered search (course page): Courses only

**Search Input:**
```
┌────────────────────────────────────────┐
│ 🔍 Search courses, topics, instructors│ ← Placeholder text
└────────────────────────────────────────┘
```

**Autocomplete Suggestions:**
```
User types: "reac"

┌────────────────────────────────────────┐
│ 🔍 reac │
├────────────────────────────────────────┤
│ 📚 React Masterclass Course│
│ 📚 React Hooks Deep Dive Course│
│ 📰 React 18 New Features Article│
│ 🏷️ #react Tag│
│ 👤 Sarah Chen Instructor│
└────────────────────────────────────────┘
```

**Filters & Facets:**
```
[Course Level ▾] [Duration ▾] [Price ▾] [Language ▾]

Results (showing 42 of 120):
- Level: ☑ Beginner ☑ Intermediate ☐ Advanced
- Duration: ☑ < 2 hours ☐ 2-5 hours ☐ 5+ hours
- Price: ☑ Free ☐ Paid
- Language: ☑ English ☐ Spanish ☐ French
```

**Zero-Results Handling:**
```
😕 No results for "cobol programming"

Did you mean: "Python programming"?

Or try:
• Browsing all courses
• Exploring learning paths
• Checking out popular courses
```

## 7. Content Types

**Page Templates Needed:**

1. **Homepage** (Custom)
- Hero section
- Featured courses
- Learning paths
- Testimonials

2. **Course Listing** (Archive)
- Grid of course cards
- Filters sidebar
- Pagination

3. **Course Detail** (Single)
- Course hero
- Curriculum accordion
- Reviews section
- Instructor bio

4. **Lesson Player** (Single)
- Video player
- Transcript panel
- Code editor
- Navigation (prev/next)

5. **Dashboard** (App)
- Progress widgets
- Current courses
- Activity feed

6. **User Profile** (Single)
- Avatar + bio
- Completed courses
- Certificates

7. **Blog Post** (Single)
- Article content
- Author bio
- Related posts

**Metadata Schema:**

```json
Course {
"id": "course-123",
"title": "React Masterclass",
"slug": "react-masterclass",
"category": "Web Development",
"subcategory": "Frontend",
"level": "Intermediate",
"duration": "12 hours",
"language": "English",
"price": 49.99,
"tags": ["react", "javascript", "frontend"],
"instructor_id": "instructor-456",
"published_date": "2025-01-15",
"updated_date": "2025-11-20",
"enrollment_count": 1250,
"rating": 4.8,
"certificate": true
}
```

**URL Structure Conventions:**

```
✓ Good URLs:
/courses/web-development/react-masterclass
/learning-paths/frontend-developer
/community/forum/topic/123-react-hooks-question
/blog/2025/11/react-18-features

✗ Bad URLs:
/course.php?id=123
/page/42
/forum-thread-456789
```

**Rules:**
- Use hyphens (not underscores)
- Lowercase only
- No file extensions (.html, .php)
- Include category/context
- Keep ≤ 75 characters

## 8. Responsive Behavior

**Mobile Information Hierarchy (< 768px):**

**Priority 1 (Above fold):**
1. Search bar
2. Current course (if learning)
3. Primary CTA ("Start Learning")

**Priority 2 (Scroll Zone 1):**
4. Popular courses (3 cards)
5. Learning paths

**Priority 3 (Scroll Zone 2):**
6. Blog/resources
7. Footer

**Progressive Disclosure:**
- Course curriculum: Collapsed by default, tap to expand
- Lesson description: "Read more" truncates after 3 lines
- Reviews: Show first 3, "Load more" button

**Off-Canvas Navigation:**
```
Swipe from left edge → Menu slides in
[☰] tap → Menu slides in
Tap outside menu → Closes
Swipe left on menu → Closes
```

## 9. SEO Considerations

**Keyword Mapping:**

| Target Keyword | Mapped to Page |
|----------------|----------------|
| "learn react online" | /courses/web-development/react-masterclass |
| "python for beginners" | /learning-paths/python-beginner |
| "free coding courses" | /courses?filter=free |
| "web developer roadmap" | /learning-paths/web-developer |

**Internal Linking Strategy:**
- Every blog post links to ≥2 related courses
- Course pages link to prerequisite courses
- Learning paths link to all included courses
- Instructor bios link to their courses

**Canonical URLs:**
- Courses accessible via multiple paths? Set canonical:
```html
<link rel="canonical" href="https://codelearn.com/courses/react-masterclass" />
```

**XML Sitemap Structure:**
```xml
<urlset>
<url>
<loc>https://codelearn.com/</loc>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://codelearn.com/courses</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<!-- Courses -->
<url>
<loc>https://codelearn.com/courses/react-masterclass</loc>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
<lastmod>2025-11-20</lastmod>
</url>
<!-- ... more courses -->
</urlset>
```

## 10. Testing & Validation

**Tree Testing Results:**
- Task: "Find a beginner Python course"
- Success Rate: 85% (target: >80%) ✓
- Average Time: 18 seconds (target: <30s) ✓

- Task: "Track your learning progress"
- Success Rate: 72% (target: >80%) ✗ → Improved label to "My Progress"
- Retest: 88% ✓

**Findability Metrics:**
```
Google Analytics (Nov 2025):
- % using search: 35%
- % using navigation: 65%
- Top search terms:
1. "react" (2,450)
2. "python beginner" (1,820)
3. "certificate" (980)
```

**User Testing Insights:**
- 8/10 users confused by "Enroll" button
→ Changed to "Start Learning" (more action-oriented)
- 6/10 users didn't see breadcrumbs
→ Increased size from 12px to 14px, added background
- Mobile users struggled with mega menu
→ Simplified to accordion menu

**Analytics Review:**
```
Top Entry Pages:
1. Homepage (45%)
2. Course detail pages (30%)
3. Blog posts (15%)
4. Search results (10%)

Top Exit Pages:
1. Lesson player (40%) ← Good (completed lesson)
2. Pricing page (25%) ← Investigate (why leaving?)
3. Course detail (20%) ← A/B test CTA buttons
```

## Maintenance Plan

**Quarterly:**
- Review analytics (bounce rates, exit pages)
- Update top search queries (add to navigation?)
- Card sorting test with new users

**Annual:**
- Full IA audit
- Tree testing with 50+ users
- Competitor analysis (new patterns?)

**As Needed:**
- Add new categories (when >10 courses in "Other")
- Reorganize if depth exceeds 4 clicks
- Update labels based on support tickets

---

**Version:** 2.0 (Nov 2025)
**Owner:** Product Team + UX
**Next Review:** Feb 2026