UI/UX Analysis: Cards vs. Alphabetical Index for Nested Pages

Date: February 2026 Context: Mobile navigation redesign for nested article listings

Problem Statement

The site has deeply nested content with varying item counts:

Current implementation: Nested pages with many articles use a simple bulleted list, which becomes overwhelming for 20+ items.

Current State Assessment

Where Cards Work Well

Where Current Design Breaks Down

Nested pages with many articles (e.g., /adhyatmachutukes/Hari, Vayu and Haridaasas/) use a bulleted list that creates:

1. Cognitive overload - wall of 46 links with no organization
2. No landmarks - users lose position while scrolling
3. No predictability - items appear in file-system order
4. Long scroll - ~4700px for 46 items on mobile

Proposed Solution: Alphabetical Index

Visual Concept

┌─────────────────────────────────┐
│ ← Back                          │
│                                 │
│ Hari, Vayu and Haridaasas       │
│ 46 articles                     │
│                                 │
│ [A][B][D][G][H][J][K][L][M]...  │  ← Jump nav (sticky)
├─────────────────────────────────┤
│                                 │
│ A                               │  ← Letter header
│ ─────────────────────────────── │
│   Ananda Daasa Part 1           │
│   Ananda Daasa Part 2           │
│                                 │
│ B                               │
│ ─────────────────────────────── │
│   Bhootharaja                   │
│                                 │
│ D                               │
│ ─────────────────────────────── │
│   Dasaavani                     │
│   Dwaadasha Stothra             │
│                                 │
└─────────────────────────────────┘

Comparative Analysis

Advantages of Alphabetical Index

1. Predictable location - users know where to find items
2. Jump navigation - tap letter to skip instantly
3. Visual chunking - letter headers break the wall of links
4. Familiar pattern - mirrors contacts app, dictionary
5. Scales well - works for 20 or 200 items

Disadvantages / Concerns

1. Semantic grouping broken - thematically related articles scatter across letters
2. "The" problem - "The Demons" under T or D? (Recommend: strip "The" for sorting)
3. Single-item letters - "B" with just one item looks sparse
4. Doesn't help discovery - if you don't know what you're looking for, alphabetical doesn't help
5. Multi-part articles - "Part 1", "Part 10" must sort numerically

Recommendation: Hybrid Approach

This targets the actual pain point without over-engineering smaller sections.

Implementation Considerations

1. Threshold - apply alphabetical only when item count > 15
2. "The" handling - sort "The Demons" under D, display as "The Demons"
3. Jump nav - only show for 20+ items (sticky letter bar)
4. Empty letters - don't show letters with no content
5. Number handling - articles starting with numbers go before A
6. Part numbering - ensure "Part 1", "Part 2", "Part 10" sort numerically

Files Involved

• app/overrides/partials/content.html - back button navigation
• app/overrides/assets/stylesheets/custom.css - card and index styling
• app/overrides/assets/javascripts/custom.js - hub menu logic
• Individual index.md files for sections

Status

Analysis complete. Implementation pending based on prioritization.