185 lines
6.7 KiB
Markdown
185 lines
6.7 KiB
Markdown
# Mobile Experience Improvement Plan for Add Fuel Record Screen
|
|
|
|
## Analysis Summary
|
|
|
|
The current add fuel record screen has significant mobile UX issues that create pain points for users on mobile devices. The interface feels like a shrunken desktop version rather than a mobile-first experience.
|
|
|
|
## Critical Mobile UX Issues Identified
|
|
|
|
### 1. Modal Size and Viewport Problems
|
|
- Uses Bootstrap's default modal sizing without mobile optimization
|
|
- No mobile-specific modal sizing classes or responsive adjustments
|
|
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
|
|
### 2. Touch Target Size Issues
|
|
- Small "+" button for odometer increment (44px minimum not met)
|
|
- Small close button in header
|
|
- Form switch toggles too small for reliable touch interaction
|
|
- **File Locations**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 69, 99, 51, 48, 106, 110)
|
|
|
|
### 3. Dense Two-Column Layout Problems
|
|
- Advanced mode uses `col-md-6` layout creating cramped display
|
|
- Fields become too narrow for comfortable text input
|
|
- Second column with file upload becomes nearly unusable
|
|
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 59, 139)
|
|
|
|
### 4. Complex Header Layout on Mobile
|
|
- Modal header contains multiple elements in cramped flex layout
|
|
- Toggle labels may wrap or get cut off
|
|
- Mode switch becomes hard to understand and use
|
|
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 44-53)
|
|
|
|
### 5. Input Field Accessibility Issues
|
|
- Decimal inputs with custom key interceptors interfere with mobile keyboards
|
|
- Multi-select dropdown for tags difficult on mobile
|
|
- File upload interface unusable in narrow mobile view
|
|
- **File Locations**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml` (lines 74, 103, 117, 127, 130-135)
|
|
- `/wwwroot/js/gasrecord.js`
|
|
|
|
### 6. Modal Footer Button Layout
|
|
- Multiple buttons including conditional "Delete" button create touch conflicts
|
|
- Risk of accidental deletion or difficulty reaching primary action
|
|
- **File Location**: `/Views/Vehicle/Gas/_GasModal.cshtml` (line 155)
|
|
|
|
### 7. Form Mode Switching UX
|
|
- Simple/Advanced mode toggle jarring on mobile
|
|
- Content suddenly appears/disappears
|
|
- Users might not understand mode switching capability
|
|
- **File Location**: `/wwwroot/js/gasrecord.js` (lines 509-536)
|
|
|
|
### 8. Keyboard and Input Mode Issues
|
|
- Mixed input types with custom JavaScript key handlers
|
|
- Mobile keyboards may not behave predictably
|
|
- **File Locations**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/js/gasrecord.js`
|
|
|
|
### 9. Date Picker Mobile Issues
|
|
- Bootstrap datepicker doesn't provide optimal mobile experience
|
|
- Native mobile date pickers would be better
|
|
- **File Location**: `/wwwroot/js/gasrecord.js` (lines 6, 29)
|
|
|
|
### 10. No Progressive Enhancement for Mobile
|
|
- No mobile-specific CSS classes or touch-friendly spacing
|
|
- No mobile-optimized layouts
|
|
- **File Locations**:
|
|
- `/wwwroot/css/site.css`
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
|
|
## Mobile Experience Improvement Plan
|
|
|
|
### Priority 1: Critical Mobile UX Fixes
|
|
|
|
#### 1. Mobile-First Modal Design
|
|
- Implement full-screen modal on mobile devices
|
|
- Add slide-up animation for native app feel
|
|
- Create mobile-specific modal header with simplified layout
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/css/site.css`
|
|
- `/wwwroot/js/gasrecord.js`
|
|
|
|
#### 2. Touch Target Optimization
|
|
- Increase all interactive elements to minimum 44px
|
|
- Add larger padding around buttons and form controls
|
|
- Implement touch-friendly spacing between elements
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/css/site.css`
|
|
|
|
#### 3. Single-Column Mobile Layout
|
|
- Force single-column layout on mobile regardless of mode
|
|
- Stack all form fields vertically with proper spacing
|
|
- Move file upload and notes to dedicated sections
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/css/site.css`
|
|
|
|
### Priority 2: Input and Interaction Improvements
|
|
|
|
#### 4. Mobile-Optimized Inputs
|
|
- Replace Bootstrap datepicker with native HTML5 date input on mobile
|
|
- Simplify tag selection with mobile-friendly chip input
|
|
- Improve number input keyboards with proper `inputmode` attributes
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/js/gasrecord.js`
|
|
|
|
#### 5. Form Mode Simplification
|
|
- Default to Simple mode on mobile
|
|
- Make mode toggle more prominent and clear
|
|
- Add smooth transitions between modes
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/js/gasrecord.js`
|
|
- `/Controllers/Vehicle/GasController.cs`
|
|
|
|
### Priority 3: Enhanced Mobile Features
|
|
|
|
#### 6. Bottom Sheet Pattern
|
|
- Implement native-style bottom sheet for mobile
|
|
- Add swipe-to-dismiss gesture
|
|
- Include pull handle for better UX
|
|
- **Files to Modify**:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml`
|
|
- `/wwwroot/css/site.css`
|
|
- `/wwwroot/js/gasrecord.js`
|
|
|
|
#### 7. Mobile-Specific CSS Improvements
|
|
- Add mobile breakpoint styles
|
|
- Implement proper touch feedback
|
|
- Optimize form field sizing for mobile keyboards
|
|
- **Files to Modify**:
|
|
- `/wwwroot/css/site.css`
|
|
|
|
#### 8. Progressive Enhancement
|
|
- Add mobile detection for conditional features
|
|
- Implement haptic feedback where supported
|
|
- Add mobile-specific validation styling
|
|
- **Files to Modify**:
|
|
- `/wwwroot/js/gasrecord.js`
|
|
- `/wwwroot/js/shared.js`
|
|
- `/Views/Shared/_Layout.cshtml`
|
|
|
|
## Implementation Strategy
|
|
|
|
### Phase 1: Modal and Layout Fixes (Priority 1 items)
|
|
- Focus on making the most impactful changes first
|
|
- Ensure mobile modal feels native and intuitive
|
|
- Implement proper touch targets and single-column layout
|
|
|
|
### Phase 2: Input Optimizations (Priority 2 items)
|
|
- Optimize form inputs for mobile interaction
|
|
- Simplify complex form elements
|
|
- Improve mode switching experience
|
|
|
|
### Phase 3: Advanced Mobile Features (Priority 3 items)
|
|
- Add sophisticated mobile interaction patterns
|
|
- Implement progressive enhancement
|
|
- Add mobile-specific features and feedback
|
|
|
|
## Key Files for Mobile Improvements
|
|
|
|
### Primary Files:
|
|
- `/Views/Vehicle/Gas/_GasModal.cshtml` - Main modal template
|
|
- `/wwwroot/js/gasrecord.js` - Modal behavior and form handling
|
|
- `/wwwroot/css/site.css` - Styling and responsive design
|
|
|
|
### Supporting Files:
|
|
- `/Controllers/Vehicle/GasController.cs` - Server-side logic
|
|
- `/Views/Shared/_Layout.cshtml` - Global mobile configuration
|
|
- `/wwwroot/js/shared.js` - Shared JavaScript utilities
|
|
|
|
## Success Metrics
|
|
|
|
- Touch target compliance (minimum 44px)
|
|
- Single-column layout on mobile breakpoints
|
|
- Native mobile input patterns
|
|
- Improved task completion rates on mobile
|
|
- Reduced user friction and abandonment
|
|
|
|
## Notes
|
|
|
|
This plan maintains existing functionality while transforming the mobile experience from a desktop-centric interface to a mobile-first, touch-optimized experience that feels native and intuitive on mobile devices. |