Mobile Artifact Viewer Remediation
design-artifact-viewer-mobile-remediation-r1
Quality
100.0
Complete
100%
Judges
3
Disagree
3.3
Mobile Artifact Viewer Remediation
This document outlines a concrete remediation plan for the mobile artifact viewer in the live initiative room. It covers a practical mobile UX diagnosis, a proposed mobile information architecture (IA) for content, provenance, metadata, and review actions, explicit header/tab/action placement rules, state handling for empty/loading/long-document/error, accessibility and touch-target requirements, and component-level engineering guidance. The plan is designed to be implemented directly by frontend engineers and product developers, with specific measurements, ARIA usage, and responsive behaviors that address the issues raised by users about cramped layout, header dominance, discoverability of actions, and clear separation between reading, provenance, and review controls.
1) Core Mobile UX Diagnosis
Header consumption: The top bar occupies a large fraction of vertical space, leaving insufficient viewport for content when the user first opens the artifact.
Context ambiguity: Users cannot easily distinguish sections for reading content vs provenance vs review controls due to mixed tabs and insufficient affordances.
Action discoverability: Key actions (mark as read, comment, approve, diff expand, metadata toggle) are buried in a dense header or overflow menu, causing friction.
Content fragmentation: Markdown, code diffs, task evidence, assets, and metadata should be navigable with minimal cognitive load; current layout forces horizontal scrolling and poor focus handling.
Performance cues: Loading skeletons and empty states are not clear; users cannot tell whether content is forthcoming or missing.
Accessibility gaps: Touch targets are too small in places, focus order is non-linear, screen reader landmarks are missing, and reading order may be disrupted by tabbed content.
2) Proposed Mobile Information Architecture
Global structure (top to bottom):
Header bar with compact title, artifact status badge, and essential quick actions.
Primary navigation as a segmented control (context tabs) below header: Reading, Provenance, Review.
Content container that switches content per tab with consistent scroll.
Floating action bar (FAB) for primary action(s) when in Reading: e.g., Jump to End, Toggle Read/Unread, Comment. Secondary actions exposed in bottom sheet.
Persistent bottom bar for metadata quick glance (tags, last updated) and a shortcut to metadata panel.
Per-tab content layout:
Reading: Markdown renderer with inline code blocks, expandable sections, and a per-section reading progress indicator.