User Interactions¶

Our bulk upload system is designed around natural, intuitive interactions that guide users through complex operations while maintaining efficiency and accessibility. Each interaction is carefully crafted to provide immediate feedback and clear progression through the upload process.

User Journey Map¶

journey
    title Bulk Upload User Journey
    section File Selection
      Choose file: 5: User
      Validate format: 3: System
      Show preview: 4: System
    section Data Review
      View data: 5: User
      Edit entries: 4: User
      Validate: 3: System
    section Route Planning
      View map: 5: User
      Adjust groups: 4: User
      Optimize: 3: System
    section Confirmation
      Review changes: 5: User
      Submit: 4: User
      Process: 3: System

File Upload Interactions¶

The file upload process is the user's first interaction with our system. It's crucial that this experience is smooth and confidence-inspiring.

Drag and Drop Flow¶

stateDiagram-v2
    [*] --> Idle
    Idle --> DragOver: File dragged over
    DragOver --> Validating: File dropped
    DragOver --> Idle: Drag leaves
    Validating --> Processing: Valid file
    Validating --> Error: Invalid file
    Processing --> Preview: Success
    Processing --> Error: Failure
    Error --> Idle: Reset
    Preview --> [*]

1. User drags file over drop zone
2. Zone highlights with visual feedback
3. "Drop to upload" message appears
4. User drops file
5. Immediate file type validation
6. Progress indicator shows upload status
7. Upload completion
8. Success/error feedback
9. Transition to preview stage

Manual File Selection¶

1. Click "Browse" button
2. Native file picker opens
3. File type filter applied (.csv)
4. File selection
5. Same validation and feedback as drag-drop
6. Consistent progress indication

Data Preview Interactions¶

The data preview stage is where users verify and refine their upload. The interface must balance comprehensive data display with easy navigation and editing capabilities.

Table Navigation Flow¶

graph TD
    A[Table Load] -->|Initial View| B[Default Sort]
    B --> C{User Action}
    C -->|Click Header| D[Sort Column]
    C -->|Select Rows| E[Bulk Actions]
    C -->|Search| F[Filter Data]
    C -->|Page| G[Load More]
    D --> B
    E --> H[Edit/Delete]
    F --> B
    G --> B

Table Navigation¶

• Column sorting by clicking headers
• Row selection with checkboxes
• Pagination controls
• Search/filter functionality

Data Editing¶

1. Double-click cell to edit
2. Tab navigation between cells
3. Bulk edit selected rows
4. Undo/redo capabilities

Route Group Management¶

Route management combines spatial and data interactions, requiring careful consideration of both map and list-based interfaces.

Map Interaction Flow¶

graph TD
    A[Map View] --> B{User Action}
    B -->|Zoom| C[Scale Map]
    B -->|Pan| D[Move View]
    B -->|Select| E[Highlight Point]
    B -->|Lasso| F[Group Selection]
    E --> G[Show Details]
    F --> H[Bulk Actions]
    H --> I[Group Operations]

Map Interactions¶

• Zoom: scroll wheel/pinch
• Pan: click and drag
• Select: click on markers
• Group selection: lasso tool

Group Adjustments¶

1. Drag deliveries between groups
2. Auto-rebalance option
3. Manual group creation
4. Group splitting/merging

Keyboard Navigation¶

Keyboard support ensures efficiency for power users and accessibility for all users.

graph LR
    A[Keyboard Input] --> B{Command Type}
    B -->|Navigation| C[Tab/Arrow Keys]
    B -->|Actions| D[Shortcuts]
    B -->|Editing| E[Input Keys]
    C --> F[Focus Movement]
    D --> G[Quick Actions]
    E --> H[Data Entry]

Navigation¶

• Tab: Move between interactive elements
• Enter: Confirm/submit
• Esc: Cancel/close
• Ctrl+Z: Undo
• Ctrl+Y: Redo

Data Manipulation¶

• Ctrl+C: Copy
• Ctrl+V: Paste
• Delete: Remove selected
• Ctrl+A: Select all

Accessibility¶

Our accessibility support ensures the system is usable by everyone, regardless of their abilities or preferred interaction methods.

Interaction Support Matrix¶

Keyboard Navigation¶

• Full keyboard accessibility
• Focus indicators
• Skip navigation links
• ARIA landmarks

Screen Reader Support¶

• Meaningful labels
• Status announcements
• Error descriptions
• Progress updates

Mobile Interactions¶

Mobile support focuses on touch-optimized interfaces while maintaining full functionality.

Touch Interaction Flow¶

stateDiagram-v2
    [*] --> Touch
    Touch --> Tap: Quick press
    Touch --> LongPress: Hold
    Touch --> Swipe: Move
    Touch --> Pinch: Two fingers
    Tap --> Action
    LongPress --> Context
    Swipe --> Scroll
    Pinch --> Zoom

Touch Gestures¶

• Swipe to scroll
• Pinch to zoom
• Long press for context menu
• Double tap to edit

Responsive Adjustments¶

• Stack layouts on small screens
• Touch-friendly hit areas
• Simplified controls
• Optimized table view