WP-FE-ROUTE-UX-AUDIT-01 — Audit UX chỉ đường vs Google Maps
Domain: D-ROUTE · Surface: CON · Date: 2026-08-14
Scope: RoutingDirections → RouteSteps → RouteActive
Goal: So hành vi người dùng với Maps hiện tại; xếp ưu tiên P0–P2; ship P0 FE ngay trong cùng WP.
1. Verdict
RouteActive (follow / scenarios / reroute / explore) đã gần Maps hơn phần còn lại.
RoutingDirections + RouteSteps vẫn scaffold: shortcut giả, menu chết, sheet không snap, bước không focus map, ETA mode nhân số FE, không alternatives / voice.
2. Luồng thao tác hiện tại
Chọn điểm đến → Xem lộ trình (Steps) → Bắt đầu dẫn đường (Active)
↑ modes / steps list ↑ GPS+compass+explore
| Bước Maps điển hình |
WELIFE |
Gap |
| Search origin + dest |
Dest search; origin GPS-only |
Origin không sửa / không pick-on-map |
| Shortcuts Home/Work |
Hardcode DEFAULT_GEO |
Phải gắn /addresses |
| Recents |
Static list |
Persist thật |
| Mode + ETA thật |
Mode UI; ETA × hệ số FE; transit→driving |
Provider per-mode |
| Alt routes / avoid |
Không |
BE alternatives |
| Preview map + tap step |
Map overview; list tĩnh |
Focus camera khi tap bước |
| Sheet peek ↔ full |
Flex layout, handle trang trí |
Snap points |
| Overflow share / open Maps |
⋮ no-op |
Wire Share + Linking |
| Start nav |
Có |
OK |
| Voice guidance |
Mute UI |
TTS chưa |
| Off-route / reroute |
Có (SCENARIOS) |
OK MVP |
| Explore along route |
Có (EXPLORE) |
Search-along-route còn thiếu |
| Prefill từ PlaceDetail |
Navigate không params |
Bug |
3. Ma trận hành vi (Google Maps mental model)
Chọn lộ trình (RoutingDirections)
| Hành vi mong đợi |
Status |
| Ô điểm đến + autocomplete |
✅ |
| Swap A↔B |
✅ |
| Nhà / Công ty từ địa chỉ đã lưu |
❌ → P0 |
| Gần đây theo lịch sử chọn |
❌ → P0 |
| Sửa điểm đi / chọn trên bản đồ |
❌ P1 |
| Multi-stop trước khi đi |
❌ P2 |
Chi tiết lộ trình (RouteSteps)
| Hành vi mong đợi |
Status |
| Overview polyline |
✅ |
| Đổi mode + reload route |
✅ (ETA soft) |
| Sheet kéo peek/full |
❌ → P0 |
| Tap bước → zoom maneuver |
❌ → P0 |
| Menu: Chia sẻ / Mở Maps ngoài |
❌ → P0 |
| Tuyến thay thế |
❌ P2 (BE) |
| Badge eco thật |
Fake → P0 ẩn khi estimate |
Dẫn đường (RouteActive)
| Hành vi mong đợi |
Status |
| Banner chỉ dẫn + scenario |
✅ |
| Follow heading / recenter |
✅ |
| Mute = TTS |
❌ P1 |
Zoom + = zoom-in |
Misleading → P1 |
| Explore POI + via |
✅ |
| End trip summary |
❌ P2 |
4. Backlog ưu tiên
P0 — ship trong WP này (FE, không secret)
- Directions:
AddressesApi cho Nhà/Công ty + AsyncStorage recents
- PlaceDetail → prefill
destinationLat/Lng/Label
- Steps: overflow Share / Open external Maps
- Steps: tap step →
animateTo location
- Steps: sheet snap peek ↔ expanded
- Ẩn badge «Tiết kiệm» khi tuyến ước lượng
P1 — session kế
- Origin editable + pick-on-map
- TTS (expo-speech) wire mute
- FAB zoom đúng nghĩa
- Prefill HealthVaxDetail khi có coords
P2 — cần BE / product
- Route alternatives + avoid toll/highway
- Transit mode thật
- Lane guidance / speed limit
- End-of-trip card
5. Files đụng (P0)
| Path |
Change |
docs/reports/WP-FE-ROUTE-UX-AUDIT-01.md |
Báo cáo này |
mobile/src/features/routing/routeRecents.ts |
Persist recents |
mobile/src/features/routing/routeHelpers.ts |
Step lat/lng |
mobile/src/features/routing/screens/RoutingDirectionsScreen.tsx |
Addresses + recents |
mobile/src/features/routing/screens/RouteStepsScreen.tsx |
Sheet / focus / menu |
mobile/src/features/places/screens/PlaceDetailScreen.tsx |
Prefill dest |
Status: IMP (P0) · P1/P2 tracked above