120 lines
5.4 KiB
Markdown
120 lines
5.4 KiB
Markdown
# UX/UI Analysis: Header vs Rail Navigation
|
|
|
|
Date: 2026-03-22
|
|
|
|
## Overview
|
|
|
|
Evaluation of IPTVnator's navigation architecture — specifically the separation between **global actions in the top header** and **playlist-local actions in the left rail sidebar**, assessed from a user understanding perspective.
|
|
|
|
## Current Architecture
|
|
|
|
| Region | Intended Scope | Actual Contents |
|
|
|--------|---------------|-----------------|
|
|
| **Header** (top) | Global / app-wide | Playlist switcher, search, add playlist, global favorites, downloads, **context menu with local actions** |
|
|
| **Rail** (left) | Local / playlist-specific | Dashboard (global), Sources (global), **dynamic provider links** (local), Settings (global) |
|
|
|
|
Neither region is purely global or purely local. Both mix scopes, which muddies the mental model.
|
|
|
|
## Strengths
|
|
|
|
- **Playlist switcher in the header** is excellent placement. Acts like a "workspace context selector" — similar to Slack's workspace switcher or VS Code's project selector.
|
|
- **Command palette** nails the global-vs-local distinction with explicit "GLOBAL ACTIONS" and "THIS PLAYLIST" section headers. Clearest articulation of scope in the entire UI.
|
|
- **Rail dividers** between static workspace links (Dashboard, Sources) and dynamic provider links provide a subtle visual boundary hinting at the scope change.
|
|
- **Search bar adapting its placeholder text** per route is good contextual affordance.
|
|
- **Settings at the rail bottom** follows a well-established pattern (Slack, Discord, VS Code).
|
|
|
|
## Confusion Points
|
|
|
|
### A. Rail Mixes Global and Local Without Explaining Why
|
|
|
|
When a user selects an Xtream playlist, the rail shows:
|
|
```
|
|
Dashboard <- global
|
|
Sources <- global
|
|
-----------------
|
|
Movies <- local (Xtream)
|
|
Live TV <- local (Xtream)
|
|
Series <- local (Xtream)
|
|
-----------------
|
|
Search <- local (Xtream)
|
|
Recently viewed <- local (Xtream)
|
|
Favorites <- local (Xtream)
|
|
-----------------
|
|
Settings <- global
|
|
```
|
|
|
|
When switching to M3U:
|
|
```
|
|
Dashboard <- global
|
|
Sources <- global
|
|
-----------------
|
|
All channels <- local (M3U)
|
|
Groups <- local (M3U)
|
|
Recently viewed <- local (M3U)
|
|
Favorites <- local (M3U)
|
|
-----------------
|
|
Settings <- global
|
|
```
|
|
|
|
**Issue:** The dynamic links change silently. There's no label like "rucolor.tv" or "clean.m3u" above the provider links to indicate *which* playlist these links belong to. Users who switch playlists via the header dropdown may not immediately notice the rail updated.
|
|
|
|
**Severity:** Medium.
|
|
|
|
### B. Header's Three-Dot Menu Breaks the "Global Header" Mental Model
|
|
|
|
The context actions menu in the header contains:
|
|
- **Playlist Info** — local to the current playlist
|
|
- **Account Info** — local to the current Xtream portal
|
|
- **Clear Recently Viewed** — local bulk action
|
|
|
|
These are playlist-scoped actions living in what should be the "global" header area.
|
|
|
|
**Severity:** Low-Medium.
|
|
|
|
### C. "Favorites" Appears in Both Global and Local Contexts
|
|
|
|
- **Header:** Global Favorites star icon (cross-playlist)
|
|
- **Rail:** Favorites link (playlist-specific)
|
|
|
|
A user clicking the star in the header vs the heart in the rail gets *different* favorites views with *no* clear labeling of "global" vs "this playlist."
|
|
|
|
**Severity:** Medium-High. Most likely source of user confusion.
|
|
|
|
### D. Search Bar Scope Is Invisible
|
|
|
|
The search bar disables itself on some routes and changes behavior on others. The placeholder text changes, but "Search in this section..." doesn't clarify *which* section.
|
|
|
|
**Severity:** Low.
|
|
|
|
## Recommendations
|
|
|
|
### Quick Wins (Low Effort, High Impact)
|
|
|
|
1. **Add a playlist name label above the dynamic rail links.** Small, muted text showing "clean.m3u" or "rucolor.tv" above the provider-specific navigation.
|
|
2. **Keep Global Favorites as a single left-rail destination.** Avoid reintroducing a second header shortcut for the same global destination; reserve header actions for contextual controls.
|
|
3. **Add a scope label to the search bar** when active: "Searching in Live TV" or "Searching in clean.m3u" instead of generic "Search in this section..."
|
|
|
|
### Medium Effort
|
|
|
|
4. **Consider moving the three-dot context menu into the context panel** rather than the header, keeping the header purely global.
|
|
5. **Animate the rail transition** when switching playlists — a subtle slide or fade to signal that links changed.
|
|
|
|
## Overall Assessment
|
|
|
|
**Score: 7/10 — Good, with clear improvement opportunities.**
|
|
|
|
The architecture follows patterns users will recognize from Slack, VS Code, and Spotify. The main risks are the **silent dynamic rail** and the **favorites scope ambiguity**. Fixing those two issues would bring this to a 9/10 for navigational clarity.
|
|
|
|
### Design Principle
|
|
|
|
The command palette already has the right model: **explicit scope labels**. Apply this same principle to the rail and header. Anywhere an action's scope isn't obvious from its placement, label it.
|
|
|
|
## Key Files
|
|
|
|
- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.html`
|
|
- `libs/workspace/shell/feature/src/lib/workspace-shell/workspace-shell.component.ts`
|
|
- `libs/portal/shared/ui/src/lib/navigation/portal-rail-links.component.ts`
|
|
- `libs/portal/shared/util/src/lib/navigation/portal-rail-links.ts`
|
|
- `libs/playlist/shared/ui/src/lib/playlist-switcher/playlist-switcher.component.ts`
|
|
- `libs/workspace/shell/feature/src/lib/workspace-command-palette/workspace-command-palette.component.ts`
|