Add installer wireframe docs from Robert's Proksi UX sketches
4-screen wizard flow: welcome/account setup, drive selection with auto-setup, per-device purpose assignment, network/VPN config. Accessed via http://proksi.local from a headless live USB boot. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
877f05324c
commit
7e32d52456
1 changed files with 81 additions and 0 deletions
81
docs/installer-wireframes.md
Normal file
81
docs/installer-wireframes.md
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
# Installer Wireframes (Proksi UX)
|
||||||
|
|
||||||
|
Robert's wireframe sketches for the installer wizard UI.
|
||||||
|
|
||||||
|
**Source:** Hand-drawn mockup shared 2026-03-06
|
||||||
|
|
||||||
|
## Flow Overview
|
||||||
|
|
||||||
|
1. User boots from USB into a **headless live image**
|
||||||
|
2. Opens browser, navigates to **http://proksi.local**
|
||||||
|
3. Walks through a multi-step wizard (screens below)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Screen 1: Hello (Welcome / Account Setup)
|
||||||
|
|
||||||
|
| Field | Notes |
|
||||||
|
|-------|-------|
|
||||||
|
| Hostname | Name for the server |
|
||||||
|
| Username | Info tooltip explaining what this is for |
|
||||||
|
| Password | |
|
||||||
|
| Password (confirm) | |
|
||||||
|
| Backend on/off | Toggle to enable/disable backend |
|
||||||
|
| Backend address | Only relevant if backend is on |
|
||||||
|
| Language | Language selector |
|
||||||
|
|
||||||
|
Navigation: **Next** button (bottom right)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Screen 2: Device Setting (Drive Selection)
|
||||||
|
|
||||||
|
Shows detected drives as a selectable list with radio buttons.
|
||||||
|
|
||||||
|
| Element | Notes |
|
||||||
|
|---------|-------|
|
||||||
|
| Boot drive | Select which drive to install the OS on (info tooltip) |
|
||||||
|
| Drive list | Radio buttons for each detected drive |
|
||||||
|
| Other drives | Remaining drives used as storage |
|
||||||
|
| Auto setup | One-click automatic drive assignment |
|
||||||
|
|
||||||
|
**Auto setup logic:**
|
||||||
|
- Tests drive speeds
|
||||||
|
- Fastest drive becomes boot drive
|
||||||
|
- Remaining drives become LVM storage
|
||||||
|
|
||||||
|
Navigation: **Back** and **Next** buttons
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Screen 3: Device Setting (Per-Device Purpose)
|
||||||
|
|
||||||
|
Repeats for each additional connected device.
|
||||||
|
|
||||||
|
> "We see you have a [device] connected. What is it for?"
|
||||||
|
|
||||||
|
- Radio button options for device purpose
|
||||||
|
- **"I don't know" (default)** — safe fallback if user is unsure
|
||||||
|
|
||||||
|
Navigation: **Back** button, **Next** button (repeats for each device)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Screen 4: Connections (Network)
|
||||||
|
|
||||||
|
| Field | Notes |
|
||||||
|
|-------|-------|
|
||||||
|
| Network settings | IP configuration (DHCP/static) |
|
||||||
|
| Connect to a VPN | Optional VPN setup |
|
||||||
|
|
||||||
|
*(Wireframe was cut off — likely continues with more options or a summary/confirm screen)*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Notes
|
||||||
|
|
||||||
|
- Wizard-style step-by-step flow with back/forward navigation
|
||||||
|
- Info tooltips (i icons) on fields that need explanation
|
||||||
|
- Auto setup reduces decisions for beginners
|
||||||
|
- "I don't know" defaults keep things safe for non-technical users
|
||||||
|
- Working title for the installer UI: **Proksi**
|
||||||
Loading…
Add table
Reference in a new issue