4.3 KiB
4.3 KiB
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)\rightarrowIdentify(Active: Blue filled)\rightarrowUpdate(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)
- High (≥80%): Success Green (
- 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)
- Title:
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:
- Scanning frame flashes Green.
- A "Slide-in" transition from the right (300ms ease-out).
- Step indicator dot for "Scan" transforms into a checkmark.
- Step indicator dot for "Identify" fills with Primary color.
Transition: Identify \rightarrow Update
- Trigger: "Confirm" button tapped.
- Animation:
- Slide-in transition from the right (300ms ease-out).
- Step indicator dot for "Identify" transforms into a checkmark.
- 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.