# 🎯 Audit UX/UI Mobile - MapPage.mobile.vue

**Date:** 5 novembre 2025  
**Objectif:** Refonte complète de l'expérience mobile pour maximiser satisfaction utilisateur

---

## 📊 État Actuel (Problèmes Identifiés)

### 1. **Hiérarchie Visuelle Confuse**
| Élément | Position | Problème |
|---------|----------|----------|
| Context Bar | Top center | Bon placement mais contenu surchargé en mode navigation |
| Floating GPS | Bottom-left | Trop petit, difficile à taper |
| Floating Action | Bottom-right | Icône contextuelle peu claire |
| FABs (modes + actions) | Bottom-right stack | Collisions avec floating buttons |
| Bottom Sheet | Bottom (slide-up) | Bonne idée mais segments cassent le flow |

### 2. **Problèmes d'Utilisabilité**
- **Touch targets trop petits** : Floating buttons = 32px (norme = 44px minimum)
- **Trop d'informations** : Context bar mode navigation affiche vitesse + icône + titre + ETA + temps
- **Actions cachées** : Boutons d'étapes invisibles jusqu'à ouverture de la sheet
- **Confusion modale** : Utilisateur ne sait pas quel mode il utilise actuellement
- **Feedback manquant** : Pas d'indication claire des actions disponibles

### 3. **Problèmes de Flow**
```
User Journey Actuel (Navigation):
1. Ouvre l'app → Voit carte + context bar
2. Veut voir les étapes → Doit trouver et cliquer context bar
3. Bottom sheet s'ouvre → Liste d'étapes visible
4. Veut modifier étape → Doit cliquer pour révéler actions
5. Veut naviguer → Multiple taps requis

Points de friction: 4-5 taps pour action simple
```

### 4. **Incohérences Design**
- Context bar change complètement de structure selon le mode
- Segments de route inline cassent la hiérarchie visuelle
- FABs + Floating buttons = 2 systèmes de navigation différents
- Tooltips sur mobile (inutiles au touch)

---

## 🎨 Principes de Redesign

### Hiérarchie des Informations Mobile
```
1. CRITIQUE (toujours visible)
   - Position utilisateur
   - Direction de déplacement
   - Prochaine action requise

2. IMPORTANT (accessible en 1 tap)
   - Liste des étapes
   - Changement de mode
   - Actions rapides (recherche, ajout)

3. SECONDAIRE (accessible en 2 taps)
   - Détails d'étape
   - Paramètres avancés
   - Historique
```

### Design Tokens Mobile
| Token | Valeur | Raison |
|-------|--------|--------|
| Touch target minimum | 44px | Apple/Google guidelines |
| Spacing entre actions | 12px | Évite tap errors |
| Bottom safe area | 100px | Zone confortable pouce |
| Animation duration | 300ms | Perçu instantané |
| Glass opacity | 0.92 | Lisibilité garantie |

---

## 🚀 Proposition de Refonte

### Architecture des Layers
```
┌─────────────────────────────────┐
│   Context Bar (Top)             │ ← Info contextuelle minimaliste
├─────────────────────────────────┤
│                                 │
│   MAP PLEIN ÉCRAN               │ ← Focus principal
│   + User Marker Premium         │
│                                 │
├─────────────────────────────────┤
│   Quick Actions (Floating)      │ ← 2-3 boutons max, bottom-center
├─────────────────────────────────┤
│   Mode Selector (Bottom)        │ ← Tabs horizontales, toujours visible
└─────────────────────────────────┘
     ↓ Swipe up
┌─────────────────────────────────┐
│   Stages Bottom Sheet           │ ← Liste d'étapes avec actions inline
└─────────────────────────────────┘
```

### Nouveau Context Bar (Simplifié)
**Mode Navigation:**
```
┌─────────────────────────────────┐
│ 🧭 Colmar                  45 km/h │
│ 14:30 • 12.3 km                 │
└─────────────────────────────────┘
```
- **Ligne 1**: Icône + destination + vitesse (droite)
- **Ligne 2**: ETA + distance (gris, plus petit)

**Mode Explore:**
```
┌─────────────────────────────────┐
│ 📍 Colmar • 12.3 km • 14:30 ▼  │
└─────────────────────────────────┘
```
- **Une seule ligne** : Icône + nom + infos + arrow

**Mode Discovery:**
```
┌─────────────────────────────────┐
│ 🗺️ Vue satellite              │
└─────────────────────────────────┘
```
- **Une seule ligne** : Icône + label style

### Nouveau System de Navigation (Bottom Tabs)
```
┌─────────────────────────────────┐
│ [🧭] [🔍] [📋] [🌍] [⚙️]       │
│ Nav  Rech Plan Déco Opts        │
└─────────────────────────────────┘
```
- **Toujours visible** (pas de FAB à ouvrir)
- **5 modes maximum**
- **Labels courts** (3-4 caractères)
- **Indicateur actif** : underline accent

### Quick Actions (Centre-Bottom)
```
┌─────────────────────────────────┐
│        [🎯] [➕] [📍]           │
│       Center Add  GPS           │
└─────────────────────────────────┘
```
- **3 actions max** contextuelles selon mode
- **Position centrale** (zone pouce)
- **44x44px minimum**
- **Animation scale au tap**

### Stages Bottom Sheet (Refonte Complète)
```
╔═══════════════════════════════════╗
║ ━━━━━ (handle)                    ║
║ 9 étapes                     [✕]  ║
╟───────────────────────────────────╢
║ ┌─────────────────────────────┐   ║
║ │ 1  Paris                 →  │   ║
║ │    Départ 08:00             │   ║
║ │    [✏️] [🗑️] [▶️]          │   ║
║ └─────────────────────────────┘   ║
║                                   ║
║    ┊ 45 km • 1h                   ║ ← Segment inline compact
║                                   ║
║ ┌─────────────────────────────┐   ║
║ │ 2  Colmar               →   │   ║
║ │    Arrivée 14:30            │   ║
║ │    [✏️] [🗑️] [▶️]          │   ║
║ └─────────────────────────────┘   ║
╚═══════════════════════════════════╝
```

**Améliorations:**
- Segment **entre les cards** (pas dedans)
- Actions **toujours visibles** (pas cachées)
- **Swipe horizontal** sur card pour actions destructives
- **Drag & drop** pour réorganiser (handle à gauche)

---

## 🎯 User Flows Optimisés

### Flow 1: Navigation Active
```
1. User voit carte + vitesse + prochaine étape (0 tap)
2. Veut voir toutes les étapes → Swipe up sheet (1 tap)
3. Veut modifier étape → Tap icône ✏️ visible (1 tap)
Total: 2 taps vs 4-5 actuellement
```

### Flow 2: Ajouter une Étape
```
1. User explore la carte
2. Trouve un POI intéressant
3. Tap bouton [➕] bottom-center (1 tap)
4. Confirmation inline (1 tap)
Total: 2 taps vs 3-4 actuellement
```

### Flow 3: Changer de Mode
```
1. User veut passer en mode Découverte
2. Tap icône 🌍 dans bottom tabs (1 tap)
3. Interface s'adapte instantanément
Total: 1 tap vs 2-3 actuellement (ouvrir FAB + sélectionner)
```

---

## 📱 Spécifications Techniques

### Composants à Créer
| Composant | Responsabilité | Fichier |
|-----------|----------------|---------|
| `ContextBarMobile.vue` | Barre contextuelle adaptative | `components/mobile/` |
| `BottomTabNavigator.vue` | Navigation par tabs | `components/mobile/` |
| `QuickActionBar.vue` | Actions rapides contextuelles | `components/mobile/` |
| `StageListSheet.vue` | Bottom sheet optimisée | `components/mobile/` |
| `StageCardMobile.vue` | Card d'étape avec actions | `components/mobile/` |

### States à Gérer
```typescript
interface MobileMapState {
  currentMode: 'navigation' | 'explore' | 'discovery' | 'booking' | 'settings'
  sheetState: 'hidden' | 'peek' | 'expanded'
  selectedStageId: string | null
  quickActions: QuickAction[]
  contextInfo: ContextBarData
}
```

### Animations Clés
```scss
// Sheet slide up
.sheet-enter-active { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }

// Tab switch
.tab-indicator { transition: transform 200ms ease-out; }

// Button feedback
.action-btn:active { transform: scale(0.92); }

// FAB push on sheet open
.fab-pushed { transform: translateY(-350px); transition: 300ms; }
```

---

## 🚦 Plan d'Implémentation

### Phase 1: Simplification (Nettoyage)
- [ ] Supprimer FABs redondants
- [ ] Unifier floating buttons en QuickActionBar
- [ ] Simplifier context bar (1-2 lignes max)
- [ ] Nettoyer segments route (inline discret)

### Phase 2: Nouveau System de Navigation
- [ ] Créer BottomTabNavigator
- [ ] Migrer modes vers tabs
- [ ] Implémenter indicateur actif
- [ ] Animations de transition

### Phase 3: Optimisation Stages Sheet
- [ ] Refonte StageCard (actions visibles)
- [ ] Swipe gestures pour actions
- [ ] Drag & drop réorganisation
- [ ] Segments visuels améliorés

### Phase 4: Polish & Animations
- [ ] Animation push FABs → QuickActions
- [ ] Transitions fluides entre modes
- [ ] Feedback tactile (vibrations)
- [ ] States visuels (loading, error)

---

## ✅ KPIs de Succès

| Métrique | Avant | Objectif |
|----------|-------|----------|
| Taps pour voir étapes | 1-2 | 1 (swipe) |
| Taps pour modifier étape | 3-4 | 1 |
| Taps pour changer mode | 2-3 | 1 |
| Touch targets < 44px | 8 | 0 |
| Layers d'UI superposés | 5 | 3 |
| Temps de compréhension | ? | < 5s |

---

## 🎨 Mockups Conceptuels

### Layout Principal
```
┌─────────────────────────────────┐
│ 🧭 Colmar • 45 km/h       [≡]  │ ← Context Bar
├─────────────────────────────────┤
│                                 │
│        🗺️ CARTE                │
│                                 │
│           👤 ← User marker      │
│              (custom SVG)       │
│                                 │
│    [🎯]   [➕]   [📍]          │ ← Quick Actions
├─────────────────────────────────┤
│ [🧭] [🔍] [📋] [🌍] [⚙️]       │ ← Bottom Tabs
└─────────────────────────────────┘
```

### Interactions Gestures
```
Swipe Up (carte) → Ouvre stages sheet
Swipe Down (sheet) → Ferme sheet
Swipe Left/Right (stage card) → Actions destructives
Long press (stage) → Drag & drop mode
Double tap (carte) → Zoom in
Pinch (carte) → Zoom in/out
```

---

## 💡 Innovations à Considérer

1. **Peek State pour Sheet**: Sheet à mi-hauteur montrant 2-3 étapes
2. **Smart Context Bar**: Change automatiquement selon vitesse/proximité
3. **Voice Feedback**: "Prochaine étape dans 5 minutes"
4. **Vibration Patterns**: Feedback tactile différent selon action
5. **Night Mode Auto**: Détection luminosité ambiante
6. **Offline Indicator**: Pastille discrète si pas de réseau
7. **Battery Saver**: Mode économie d'énergie (réduit animations)

---

## 🔄 Prochaines Étapes Concrètes

1. **Valider mockups** avec utilisateur/client
2. **Prioriser features** (MVP vs Nice-to-have)
3. **Implémenter Phase 1** (simplification)
4. **Test utilisateur** (5 personnes minimum)
5. **Itérer** selon feedback

---

**Questions Ouvertes:**
- Garder le mode "Booking" ou fusionner avec "Explore" ?
- FAB menu actions : garder ou migrer vers QuickActions ?
- Segments de route : afficher ou masquer par défaut ?
- Animations : full motion ou reduced motion par défaut ?
