101 lines
4.3 KiB
Markdown
101 lines
4.3 KiB
Markdown
# Design Specification: Smart Intake - Identification State
|
|
|
|
**Screen ID:** FIL-003-B
|
|
**State:** 2 of 3 (Identify)
|
|
**Context:** Occurs immediately after a successful barcode/QR scan.
|
|
**Objective:** Validate the identity of the spool before committing it to the inventory.
|
|
|
|
---
|
|
|
|
## 1. User Experience Goals
|
|
- **Frictionless Validation:** If the scan is high-confidence, the user should only need to tap "Confirm".
|
|
- **Error Correction:** Provide easy paths to correct misidentified attributes without restarting the entire flow.
|
|
- **Glanceability:** Use color-coded confidence bars so the user knows immediately if the system is "sure" or "guessing".
|
|
|
|
---
|
|
|
|
## 2. Visual Hierarchy & Layout
|
|
|
|
### 2.1 Global Header
|
|
- **Top App Bar:** `md-top-app-bar` (Small).
|
|
- **Leading:** Close icon (✕) -> Returns to Inventory with "Discard changes?" prompt.
|
|
- **Title:** "Smart Intake"
|
|
- **Step Indicator:** Custom linear stepper.
|
|
- `Scan` (Completed: Green check) $\rightarrow$ `Identify` (Active: Blue filled) $\rightarrow$ `Update` (Pending: Grey outline).
|
|
|
|
### 2.2 Main Content Area
|
|
The content is organized as a vertical stack of cards/inputs to ensure touch-first accessibility.
|
|
|
|
#### A. Confidence Card (`md-card` - filled)
|
|
- **Label:** "Scanned: [Barcode Value]" (Monospace)
|
|
- **Confidence Metric:** "Match: HIGH CONFIDENCE"
|
|
- **Visual Indicator:** A linear progress bar.
|
|
- **High (≥80%):** Success Green (`#16A34A` / `#4ADE70`)
|
|
- **Medium (40-79%):** Warning Yellow (`#CA8A04` / `#FACC15`)
|
|
- **Low (<40%):** Error Red (`#DC2626` / `#F87171`)
|
|
- **Percentage:** Displayed as text (e.g., "92%") at the end of the bar.
|
|
|
|
#### B. Attribute Selection (Input Group)
|
|
- **Material Selector:** `md-dropdown-select` (Searchable).
|
|
- *Pre-fill:* Based on scan result.
|
|
- **Brand Selector:** `md-dropdown-select` (Searchable).
|
|
- *Pre-fill:* Based on scan result.
|
|
- **Color Picker:** Custom circular swatch grid.
|
|
- **Interaction:** Tap to select. Selected swatch has a high-contrast ring indicator.
|
|
- **Custom Option:** A "Custom" button that opens a text input for unique colors.
|
|
- **Finish & Modifier:** `md-chip-set` (Single select).
|
|
- **Finish:** [Basic, Matte, Silk, Sparkle, Metallic, Translucent]
|
|
- **Modifier:** [None, Carbon Fiber, Wood Fill, Glow-in-Dark, Marble, Gradient]
|
|
|
|
### 2.3 Action Bar (Footer)
|
|
- **Rescan Button:** `md-outlined-button`. Transitions user back to State 1 (Scan).
|
|
- **Confirm Button:** `md-filled-button`. Primary CTA. Transitions user to State 3 (Update).
|
|
- *Constraint:* Disabled until Material, Brand, and Color are selected.
|
|
|
|
---
|
|
|
|
## 3. Technical Specifications
|
|
|
|
### 3.1 Dimensions & Touch Targets
|
|
- **Touch Targets:** Minimum 44x44px for all buttons, dropdowns, and swatches.
|
|
- **Padding:** 16px internal card padding; 24px external margin between major sections.
|
|
- **Typography:**
|
|
- Title: `Display Small` (text-3xl font-bold)
|
|
- Section Labels: `Label Medium` (text-sm font-medium)
|
|
- Value Text: `Body Large` (text-base font-normal)
|
|
|
|
### 3.2 Theme Mapping
|
|
| Element | Kiosk (Dark) | Mobile (Light) |
|
|
|-----------|--------------|---------------|
|
|
| Background | `#0F172A` | `#F8FAFC` |
|
|
| Surface | `#1E293B` | `#FFFFFF` |
|
|
| Primary | `#60A5FA` | `#2563EB` |
|
|
| Text Primary | `#F1F5F9` | `#0F172A` |
|
|
| Text Secondary| `#94A3B8` | `#475569` |
|
|
|
|
---
|
|
|
|
## 4. State Transitions
|
|
|
|
### Transition: Scan $\rightarrow$ Identify
|
|
- **Trigger:** Barcode detected and decoded.
|
|
- **Animation:**
|
|
1. Scanning frame flashes **Green**.
|
|
2. A "Slide-in" transition from the right (300ms ease-out).
|
|
3. Step indicator dot for "Scan" transforms into a checkmark.
|
|
4. Step indicator dot for "Identify" fills with Primary color.
|
|
|
|
### Transition: Identify $\rightarrow$ Update
|
|
- **Trigger:** "Confirm" button tapped.
|
|
- **Animation:**
|
|
1. Slide-in transition from the right (300ms ease-out).
|
|
2. Step indicator dot for "Identify" transforms into a checkmark.
|
|
3. Step indicator dot for "Update" fills with Primary color.
|
|
|
|
---
|
|
|
|
## 5. Edge Cases & Error Handling
|
|
- **No Match Found:** Confidence bar is Red (0%). All dropdowns are empty. System displays a hint: "Barcode unknown. Please enter details manually."
|
|
- **Ambiguous Match:** Confidence bar is Yellow. Material and Brand are pre-filled, but Color is highlighted with a "Review Required" pulse.
|
|
- **Invalid Input:** If a user attempts to confirm without required fields, the missing fields pulse Red.
|