Author: SCOUT (TITAN Research Arm)
Date: 2026-04-24
Status: FINAL
Commissioned by: Harnoor (verbatim trigger: "also do ui analysis and figure out best way to manage elements")
Companion ticket: A012 — "switch topic should be near topic"
Target length: ~4,500 words
---
Silent Infinity is a voice-first emotional AI companion. Its interface is not a productivity tool — it is an emotional space. Every pixel decision either reinforces that space or erodes it. The current layout (R0208) is structurally sound but carries the accumulated debt of incremental additions: a multi-tier footer designed for regulatory compliance now competes visually with the compose bar; the conversation-switcher drawer sits topologically far from the topic heading it governs; and the element count per screen slightly exceeds the Miller's Law ceiling for ambient emotional contexts.
Three root problems, one sentence each:
1. Too much footer, not enough screen. The primary action chips, safety row, and regulatory micro-text occupy three distinct footer tiers. For a voice-first emotional app, two of these tiers can be collapsed or relocated, freeing vertical real estate for the thread.
2. The topic switcher is homeless. The conversation-drawer trigger is a global navigation element living at top-left or top-right — spatially divorced from the current-topic label it controls. Harnoor's A012 instinct is architecturally correct: the switcher belongs adjacent to the topic title, not in the header chrome.
3. The header contains too much ambient information. The mandala orb plus any header chrome (model state, settings trigger, topic label) creates a "hero zone" that competes with the actual conversation thread for visual dominance on every message.
Recommended target layout in one paragraph:
Strip the header to orb + current-topic-label-with-inline-switcher. Move the compose bar to a single-tier input zone with voice-toggle built in. Collapse all footer content to a single persistent micro-bar (24px) for regulatory text, with safety resources surfacing contextually in-thread — not in the footer. Put the multi-convo drawer behind a gesture or icon adjacent to the topic label. Put settings into a modal, not the header. This produces a three-zone layout — Header Shell / Thread Canvas / Compose Zone — that matches how every leading emotional AI product (Pi, Replika, Hume EVI) converges when optimized for voice-first emotional engagement.
Next three R-numbers to ship:
---
Silent Infinity is not ChatGPT. It is not a task assistant. It is an emotionally-attuned companion, voice-first, that users return to for reflection, processing, and connection. This distinction is load-bearing for every layout decision in this memo.
The primary UI job is to disappear. The best emotional companion interfaces — Pi, Replika's avatar screen, Hume EVI's voice canvas — succeed not by showing more but by showing less. The interface should feel like presence, not tool. Every non-essential UI element competes with that feeling.
The secondary UI job is to be immediately operable with one thumb, in any emotional state. Users in distress, late at night, in bed, in the car — this is Silent Infinity's context of use. The compose bar must be reachable without repositioning grip. The safety resource must be tappable at 2am when hands are shaking. The drawer trigger must be within the natural thumb arc.
The tertiary UI job is regulatory trust. As an emotional AI companion, Silent Infinity will attract regulatory scrutiny and will need to demonstrate clear AI disclosure, crisis resource accessibility, and data handling transparency. These elements must exist — but their placement can be smart.
---
Layout: Two-column on desktop (left sidebar: conversation history + model switcher; right: thread + compose). On mobile: full-width thread, bottom-pinned compose, hamburger top-left for sidebar.
Header chrome: Model selector (GPT-5.2 / o3 / mini) top-center; conversation title top-left; new-chat button top-right. Three elements in the header = cognitive overhead.
Topic/conversation switching: Left sidebar, separate from the current conversation title. No proximity between where you are and how you switch.
Compose bar: Single row, sticky bottom. Voice input as microphone icon inside the input field on mobile.
Safety/footer: No persistent safety footer. Terms of service accessible from profile menu only. Crisis resources not surfaced in UI.
Verdict for Silent Infinity: ChatGPT's approach to safety is inadequate for an emotional companion. The sidebar-for-conversation-switching pattern would work but creates the same proximity problem Harnoor identified in A012.
---
Layout: Left sidebar (conversations + Projects), main chat. Minimal header with tone/length settings accessible per conversation.
Header chrome: Clean — just the conversation name and a settings gear. One of the cleaner emotional contexts in the competitive set despite being a productivity tool.
Topic switching: Projects concept is the most thoughtful in the category — a user can group conversations by domain (e.g., "work", "personal") and the sidebar collapses to show project-level context. This is progressive disclosure applied to conversation management.
Compose bar: Bottom-pinned, single row, no visible safety elements.
Safety/footer: None persistent. No crisis resources.
Verdict: Claude's Projects grouping is a direct analog to what Silent Infinity needs if it grows to multi-topic companion threads. The per-session settings-as-header-gear is worth borrowing.
---
Layout: Mobile-first. Full-bleed chat thread, minimal top bar (Pi logo + hamburger), bottom compose bar with mic and text integrated.
Header chrome: Near-zero. Pi's logo top-center functions as identity anchor only. No model selector, no topic label, no visible settings entry in the main flow.
Topic switching: Historically, Pi had no conversation management — every session was continuous. Post-2024, sessions are archived but switching is done through the hamburger menu, which reveals a drawer with past conversations. The Pi team explicitly chose NOT to put conversation management in the main flow — they wanted every session to feel like continuing a single relationship, not switching files.
Compose bar: Bottom-pinned, integrated voice-and-text. The mic and send button are co-located. The text input expands upward as content grows. This is the gold standard for voice-first compose design.
Safety: Pi surfaced crisis resources contextually — when emotional keywords were detected, a "Get support" chip appeared in-thread, above the compose bar. Not in the footer. This is the industry-leading pattern for emotional AI safety.
Verdict: Pi is the closest architectural analog to Silent Infinity. Its near-zero header chrome, integrated voice-text compose, and in-thread safety surfacing are the three most important borrowing targets.
---
Layout: Avatar screen (3D character) with a compact chat bar at bottom. Thread is secondary — it expands up from the compose bar. Avatar occupies top 60% of screen.
Header chrome: Avatar identity (name, mood state) at top. One element that is also emotionally functional (you see how Replika "feels").
Topic switching: Replika has no conversation switching — it maintains one continuous thread per persona. This is appropriate for its single-companion model.
Compose bar: Bottom-pinned. Voice call is a separate button above the text field, not integrated into it.
Safety: A "Replika Cares" resource is accessible from profile settings, not from the main chat. This is a known UX failure mode — users in crisis rarely navigate to settings.
Verdict: Replika's avatar-as-emotional-header is too heavy for Silent Infinity (which uses an orb instead), but its compose bar separation between voice-call and text-message is instructive — voice and text need visual differentiation when they serve different purposes (ambient voice vs. typed message).
---
Layout: Thread-first, minimal header (character name + avatar), bottom compose with voice input, left sidebar for switching between characters/chats.
Header chrome: Character name + small avatar. The header is also a tap target — tapping it opens character info sheet. Elegant dual function.
Topic switching: Sidebar on mobile via hamburger, with characters sorted by last-used. No proximity between current topic and the switcher — same problem as ChatGPT.
Compose bar: Bottom-pinned, integrated. Has a voice button, memory/image buttons.
Safety: Character.AI added a persistent "If you are in crisis, click here" banner above the compose bar after legal pressure in 2025. It is persistent, high-contrast, and tappable. This is a regulatory response, not a UX-designed solution — but it proves the pattern works.
Verdict: Character.AI's crisis banner above-compose is one of the clearest safety-placement proofs in the category. The character-name-as-tap-target for contextual info is a strong pattern for Silent Infinity's topic-label-as-switcher concept.
---
Layout: Near-zero UI. A pulsing orb or waveform display with a single start/stop button. No thread visible by default — transcript is accessible via a collapsible panel.
Header chrome: None. Hume EVI is pure voice — no persistent header.
Topic switching: Not applicable — EVI is session-scoped, no persistence.
Compose bar: Not applicable — voice only. The interface IS the compose.
Safety: Not present in playground mode, presumably because it is a developer tool.
Verdict: Hume EVI is the extreme case of voice-first minimal chrome. Silent Infinity already has a text thread and compose bar, which means it is a hybrid — but Hume's design philosophy (interface disappears, only presence remains) is the north star.
---
Layout: Thread-first, left sidebar with conversation history and Gems (custom chatbots). Material Design aesthetic.
Header chrome: App name / Gem name + model selector. More chrome than peers.
Topic switching: Sidebar navigation; search within conversations.
Compose bar: Bottom-pinned, multi-input (text, voice, image, file).
Safety/Footer: None persistent in the chat UI. Legal links in account settings.
Verdict: Gemini's multi-input compose bar is over-engineered for Silent Infinity's use case but is instructive as an example of how to integrate modalities (text + voice + file) without separate UI zones for each.
---
Layout: Search-query-first. The compose bar is effectively the homepage — no sidebar by default, history accessible from a collapsed drawer.
Header chrome: Logo + new-chat button + settings. Minimal.
Topic switching: Thread history in a left-side drawer, accessible from hamburger. Each thread is named by the first query.
Compose bar: Center-screen on entry, bottom-pinned after first message. This is a smooth progressive disclosure of the interface.
Safety: None — not applicable to use case.
Verdict: Perplexity's "compose bar as entry point" and the progressive reveal from center to bottom as conversation progresses is a sophisticated layout idea. Less relevant for Silent Infinity's always-running companion model, but worth noting for onboarding flows.
---
Principle: Time to acquire a target = log₂(2D/W) where D = distance, W = target width. Larger + closer = faster acquisition.
Application to Silent Infinity:
Current gap: The multi-convo drawer trigger (at present in top-left or hamburger position) requires the thumb to travel from bottom compose zone to top of screen — a ~600–750px journey on a typical iPhone. This violates Fitts at the most common navigation gesture.
---
Principle: Decision time increases logarithmically with number of options (T = b log₂[n+1]).
Application to Silent Infinity:
---
Principle: The average person can hold 7 ± 2 items in working memory at once.
Application to Silent Infinity (adjusted for emotional context):
For an emotionally-engaged user (lower available working memory due to emotional load), the effective ceiling is closer to 5. Every distinct UI element that demands visual attention consumes one chunk. Current inventory:
1. Mandala orb (ambient)
2. Thread messages (primary)
3. Compose bar (primary)
4. Action chips row (secondary)
5. Safety row (secondary)
6. Regulatory footer (ambient)
7. Multi-convo drawer trigger (ambient)
8. Topic label (ambient)
9. Any streaming word-rotation animation (active)
That is 9 elements competing for simultaneous awareness. At least 4 must be demoted to non-perceptible ambient or eliminated.
Target: 5 perceptible elements maximum:
1. Orb + topic label (unified identity zone)
2. Thread canvas (primary content)
3. Compose bar (primary action)
4. Contextual suggestion chip (one, max)
5. Ambient safety chip (contextual, not always visible)
---
Principle: Items placed near each other are perceived as related and governing each other.
Direct application to A012 (topic switcher placement):
The topic label and the conversation switcher govern the same thing: the current conversation's identity. They must be co-located. Placing the switcher in a hamburger menu at top-left while the topic label sits center-header violates Gestalt proximity — the user does not naturally associate the hamburger with "where I can change this topic."
The correct pattern: topic label (center-header or just above the thread, near the top of the content zone) carries an in-line chevron or tap affordance that reveals the drawer/switcher. The switcher action is embedded in the topic label itself. This is how Character.AI implements character-info, how iOS manages app-in-navigation-bar contextual menus, and how Slack manages channel-name-to-settings.
Additional proximity applications:
---
Principle: Present only the information/actions needed for the current task. Reveal more on demand.
Application to Silent Infinity element tiers:
| Tier | Elements | Visibility |
|------|----------|------------|
| Always-on | Orb, thread, compose bar, topic label | Persistent |
| On-demand (1 tap) | Multi-convo drawer, safety resources, past context | Gesture or tap |
| Contextual | Safety chip, quick-reply chips, name-capture dialog | AI-triggered |
| Deep | Settings modal, billing, privacy policy, terms | Profile/settings entry |
The current layout violates progressive disclosure by surfacing tier 3 and tier 4 elements (safety links, regulatory text) at the same visual level as tier 1 elements (compose bar).
---
Industry standard (2025): On a 6.1–6.7" phone held in portrait with one hand, the thumb arc covers roughly the bottom 40% of the screen comfortably (the "natural zone"), bottom 55% with some stretch, and the top 30% requires repositioning or two-hand operation.
Silent Infinity mapping:
Implication: The multi-convo drawer trigger must move from top chrome to either: (a) embedded in the topic label (tapped from where the eye lands, mid-screen), or (b) a swipe-left gesture on the thread (common in iOS messaging apps), or (c) a persistent bottom-left icon next to the compose bar (within natural thumb zone).
Of these, option (a) — embedded in the topic label — satisfies both Gestalt proximity and Fitts simultaneously. It is the recommended solution for A012.
---
F-pattern: Eyes scan horizontally across the top, then down the left edge, then short scans right for interesting content. Dominant on content-heavy, reading-oriented interfaces.
Z-pattern: Eyes scan top-left → top-right → diagonal to bottom-left → bottom-right. Dominant on sparse, action-oriented interfaces (landing pages, dashboards).
Which applies to Silent Infinity? Neither pure pattern, but Z-pattern is closer. Users open the app to act (compose) not to read. The eye journey is: top-center (orb/identity) → top-right (brief) → diagonal to compose bar → send. This means:
---
Principle: Users navigate toward interfaces that emit "scent" — visual signals that the path leads to their goal.
Application:
---
| # | Element | Current Location | Interaction Type |
|---|---------|-----------------|-----------------|
| 1 | Mandala orb | Top-center header | Ambient (animated) |
| 2 | Word-rotation text | Adjacent to orb | Ambient (streaming) |
| 3 | Thread message list | Center scroll zone | Passive scroll |
| 4 | Compose bar (text input) | Fixed bottom | Primary input |
| 5 | Voice toggle (mic button) | Compose bar | Primary input |
| 6 | Send button | Compose bar right | Primary action |
| 7 | Primary action chips | Above compose (row 1) | Contextual action |
| 8 | Safety/crisis links | Above compose (row 2) | Regulatory action |
| 9 | Regulatory micro-text | Footer (row 3) | Regulatory passive |
| 10 | Multi-convo drawer trigger | Header (hamburger/icon) | Navigation |
| 11 | Drawer content (convo list) | Slide-in panel | Navigation |
| 12 | Inline name-capture dialog | In-thread overlay | Contextual |
| 13 | Topic/conversation label | Header or near orb | Identity/navigation |
---
ESSENTIAL — Remove and the core loop breaks. Must always be visible.
| Element | Why Essential |
|---------|--------------|
| Thread message list | The conversation is the product |
| Compose bar (text + voice) | Primary interaction mode |
| Send / voice-commit action | Completes the loop |
| Mandala orb | Emotional presence anchor; signals AI state |
| Topic / conversation label | Identity anchor; user orientation |
CONTEXTUAL — Present when relevant, hidden otherwise. Activates on user action or AI trigger.
| Element | Trigger for Appearance |
|---------|----------------------|
| Primary action chips (1–3 max) | After AI message, or on focus of compose |
| Word-rotation text | When AI is actively processing/speaking |
| Name-capture dialog | First-session trigger, AI-generated |
| Multi-convo drawer | Tap on topic label / swipe gesture |
| Safety/support chip | Keyword detection or after X minutes of heavy emotional content |
| Settings modal | Tap on settings icon |
AMBIENT — Background presence, not demanding attention. Fine to persist if small and non-interactive.
| Element | Appropriate Form |
|---------|-----------------|
| AI status indicator | Orb pulse/glow state (already handled by orb) |
| AI name / brand identity | Sub-orb text label or footer wordmark |
REGULATORY — Must exist for compliance, but must not compete with essential elements.
| Element | Placement Target |
|---------|----------------|
| Privacy policy link | Settings modal → bottom link |
| Terms of service link | Settings modal → bottom link |
| AI disclosure text ("You are talking to an AI") | First-session onboarding banner (one-time dismiss), NOT persistent footer |
| Crisis resource link (persistent) | Above compose bar, slim 24px persistent strip — OR contextual chip in thread |
| Copyright / regulatory micro-text | Absolute footer, 10–12px, non-interactive, 20px height max |
---
┌─────────────────────────────────┐
│ HEADER SHELL │ ~80-100px
│ [Orb + word-rotation] │
│ [Topic Label ▾] [Settings ⚙] │
├─────────────────────────────────┤
│ │
│ │
│ THREAD CANVAS │ flex: 1
│ (scrollable message list) │ (fills remaining space)
│ │
│ │
├─────────────────────────────────┤
│ CONTEXTUAL STRIP (optional) │ ~36px, collapses when empty
│ [Chip 1] [Chip 2] [Chip 3] │
├─────────────────────────────────┤
│ COMPOSE ZONE │ ~56-64px
│ [Text input ............] [🎤] │
├─────────────────────────────────┤
│ REGULATORY MICRO-BAR │ ~20-24px
│ Privacy · Terms · © 2026 │
└─────────────────────────────────┘
Contents:
What moves out of header:
---
Contents:
What leaves the thread area:
---
Contents:
Implementation note: The strip should auto-dismiss after 15–20 seconds if not interacted with, to avoid permanent visual noise between messages.
---
Contents:
What leaves the compose zone:
---
Contents:
What stays out of the micro-bar:
---
Contents:
---
Trigger: Tap on topic label (with chevron ▾). This is the A012 resolution.
Contents:
Design note: The drawer should be bottom-sheet style on mobile (slides up) rather than side-drawer (requires thumb travel to left edge). Bottom-sheet is within the natural thumb arc; side-drawer is not.
---
Option 1: Adjacent to Topic Title (Recommended)
Option 2: In-Header Dropdown
Option 3: Slim Breadcrumb Above the Thread
Verdict: Option 1 is correct. The topic label becomes the drawer trigger. Implementation is: <button class="topic-label" onClick={openDrawer}>Processing Loss <ChevronDown /></button>. The visual affordance is the chevron. The interaction is a tap on the label itself (full-width tap target, not just the chevron). The drawer opens as a bottom sheet on mobile.
This resolves A012 with the minimum additional UI surface — no new elements, just re-purposing the existing topic label as an interactive control.
---
ALWAYS VISIBLE (Tier 1 — Essential)
├── Mandala orb [ambient state signal]
├── Thread canvas [primary content]
├── Compose bar [primary input]
└── Topic label w/ drawer trigger [identity + navigation]
ONE TAP AWAY (Tier 2 — Contextual / On-Demand)
├── Multi-convo drawer [via topic label tap]
├── Settings modal [via settings gear tap]
├── Action chips [appear after AI message]
└── Safety/support chip [AI-triggered or persistent slim strip]
TWO TAPS AWAY (Tier 3 — Progressive Disclosure)
├── Privacy policy [settings modal → link]
├── Terms of service [settings modal → link]
├── Account/billing [settings modal → section]
└── Conversation history search [drawer → search bar]
AMBIENT (Never Demands Attention)
├── Word-rotation text [adjacent to orb, low opacity until active]
└── Regulatory micro-bar [footer, 20px, subdued]
---
Silent Infinity is voice-first, which adds constraints beyond standard chat UI:
When the user is speaking (voice mode active), the UI must visually contract to pure presence. The recommended behavior:
This is a mode transition, not a layout change — the elements remain in position but change their visual state.
When switching from voice back to text (user taps the text input):
For a future state: when voice mode is sustained (the user is in a long verbal exchange), the orb could optionally expand to near-full-screen, with the thread collapsed behind it. This is the Hume EVI pattern — maximum presence, minimum chrome. This should be opt-in, not default, because some users need the thread for reference during voice.
---
What ships:
Why first: Footer cleanup is low-risk, high-impact on visual clarity. The contextual safety chip is both better UX and better regulatory design (demonstrates active safety, not passive link placement).
Effort estimate: M (3–6 hours). CSS change for footer, new in-thread card component, keyword trigger logic.
---
What ships:
<button> with chevron affordanceWhy second: A012 is already identified and architecturally clear. The topic label is already rendered — this is a behavioral and styling change, not a new component.
Effort estimate: S-M (2–4 hours). Repurpose existing drawer component as bottom sheet, add button wrapper to topic label.
---
What ships:
Why third: Lower urgency than safety and navigation fixes, but necessary to complete the layout architecture. Header chrome reduction has the highest aesthetic impact and most clearly communicates "this is an emotional space, not a productivity tool."
Effort estimate: M (4–6 hours). New settings modal component, header strip-down, migration of links.
---
Moving crisis links from persistent footer to contextual in-thread carries regulatory risk. Several jurisdictions (EU AI Act, draft US SAFE Innovation Framework) require that mental health AI products display crisis resources "persistently accessible." The recommended solution: the slim persistent strip above the compose bar (36px, always visible, "Crisis support ↗") satisfies persistence requirements without consuming footer space. The contextual in-thread chip augments this — it is not a replacement.
Risk mitigation: Do not remove the persistent strip entirely. Make it 36px, subdued in normal state, but always present. This satisfies both the UX goal (reduce footer noise) and the regulatory requirement (persistent access).
Bottom sheets require different dismiss patterns than side drawers (tap outside, swipe down vs. swipe right). If the app has deeply learned side-drawer muscle memory (from early users of R0206), the transition to bottom sheet may require a one-time onboarding tooltip. Low risk — bottom sheets are native patterns on both iOS and Android and are familiar to users.
If the topic label reads long ("Navigating Uncertainty and Processing Grief Over My Relationship") and the tap target is the full label, tap behavior may feel ambiguous (is this a navigation action or just a display label?). Mitigation: always show the chevron (▾) regardless of label length, and clip long labels at 70% of header width with ellipsis.
---
Instrumentation targets for the R0209-R0211 cohort:
| Metric | Baseline (R0208) | Target (post-R0211) |
|--------|-----------------|---------------------|
| Footer tap rate (legal links) | Measure now | Should be near-zero (links moved to settings) |
| Topic switcher usage rate | Low (drawer hidden in hamburger) | +40% (drawer trigger now visible in topic label) |
| Safety resource access rate | Measure now | Should increase (better placement) |
| Session length | Measure now | Should increase (less visual noise) |
| Compose bar time-to-first-tap | Measure now | Stable or decrease (simpler UI = faster orientation) |
| Settings modal open rate | Measure now | Should consolidate legal link taps |
---
| Element | R0208 State | Target State | Ships In |
|---------|------------|--------------|---------|
| Mandala orb | Header center | Header center (unchanged) | — |
| Word-rotation | Adjacent to orb | Adjacent to orb (unchanged) | — |
| Topic label | Display only | Interactive button → drawer | R0210 |
| Hamburger / drawer trigger | Header | Removed | R0210 |
| Multi-convo drawer | Side drawer | Bottom sheet | R0210 |
| Thread canvas | Center scroll | Center scroll (unchanged) | — |
| Compose bar (text + voice) | Fixed bottom | Fixed bottom (unchanged) | — |
| Primary action chips | Above compose row 1 | Contextual strip (collapses) | R0209 |
| Safety/crisis links | Footer row 2 | Persistent slim strip above compose + contextual in-thread chip | R0209 |
| Regulatory micro-text | Footer row 3 | Regulatory micro-bar (24px, same position, reduced height) | R0209 |
| Settings trigger | — or header | Top-right gear, opens modal | R0211 |
| Settings modal | — | New component | R0211 |
| Privacy / Terms links | Footer row 2 | Settings modal → links | R0211 |
---
1. Comparing Conversational AI Tool User Interfaces 2025 — IntuitionLabs — IntuitionLabs, 2025
2. Conversational UI Design Patterns — AI UX Design Guide — accessed 2026-04-24
3. 16 Chat UI Design Patterns That Work in 2026 — BricxLabs — accessed 2026-04-24
4. Fitts's Law — Laws of UX — accessed 2026-04-24
5. Opinion: Fitts's Law Still Matters in 2025 Mobile UX — Medium/Design Bootcamp — 2025
6. Gestalt Theory for UX Design: Principle of Proximity in Interfaces — Design4Users — accessed 2026-04-24
7. Gestalt Principles — IxDF (Interaction Design Foundation) — updated 2026
8. Mental Health App Design Guide: UI/UX Best Practices — Gapsy Studio — accessed 2026-04-24
9. 10 Modern Footer UX Patterns for 2026 — Eleken — 2026
10. Mobile-First UX: Designing for Thumbs, Not Just Screens — DEV Community — accessed 2026-04-24
11. The Emotional Map of User Interface Zones — UXmatters — November 2025
12. Voice User Interface Design Principles: Guide 2026 — Parallel HQ — 2026
13. Hume AI Empathic Voice Interface — Developer Docs — accessed 2026-04-24
14. The Shape of AI — UX Patterns for AI Design — accessed 2026-04-24
15. Replika AI Interface Analysis — TechAhead — accessed 2026-04-24
16. Best AI Companion Apps 2026: Ranked by What Actually Matters — Digital Human Corp — 2026
17. 7 New Rules of AI in UX Design for 2026 — Millipixels — 2026
18. UX Navigation Design: Common Patterns and Best Practices — Eleken — accessed 2026-04-24