237 lines
11 KiB
Markdown
237 lines
11 KiB
Markdown
# Planner UX - Önce ve Sonra Karşılaştırması
|
||
|
||
## 📐 Layout Karşılaştırması
|
||
|
||
### ÖNCE (Eski Tasarım)
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Header (Undo/Redo/Title/Share/Export) │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌──────────────────────────┬──────────────────────────┐ │
|
||
│ │ │ │ │
|
||
│ │ Timeline (60%) │ Map (40%) │ │
|
||
│ │ │ │ │
|
||
│ │ - Trip Cover Card │ - Tüm günlerin │ │
|
||
│ │ - Explore Section │ marker'ları │ │
|
||
│ │ - Lead CTA │ - Karışık görünüm │ │
|
||
│ │ - Contextual Banner │ │ │
|
||
│ │ │ │ │
|
||
│ │ - Accordion (Günler) │ │ │
|
||
│ │ ▼ Gün 1 │ │ │
|
||
│ │ • Yer 1 │ │ │
|
||
│ │ • Yer 2 │ │ │
|
||
│ │ ▼ Gün 2 │ │ │
|
||
│ │ • Yer 3 │ │ │
|
||
│ │ │ │ │
|
||
│ └──────────────────────────┴──────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Sorunlar:**
|
||
- ❌ Hangi gün aktif belli değil
|
||
- ❌ Tüm günler aynı anda görünüyor (karmaşık)
|
||
- ❌ Harita tüm marker'ları gösteriyor (karışık)
|
||
- ❌ Gün değiştirmek zor (accordion)
|
||
- ❌ Odaklanma yok
|
||
|
||
### SONRA (Yeni Tasarım)
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ Header (Undo/Redo/Title/Share/Export) │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌───┬──────────────────────────────┬──────────────────┐ │
|
||
│ │ D │ │ │ │
|
||
│ │ a │ Timeline (54%) │ Map (40%) │ │
|
||
│ │ y │ (Ana Çalışma Alanı) │ (Yardımcı) │ │
|
||
│ │ s │ │ │ │
|
||
│ │ │ ┌────────────────────────┐ │ - Sadece aktif │ │
|
||
│ │ 6 │ │ Gün 2 - Salı │ │ günün │ │
|
||
│ │ % │ │ 15 Mayıs 2026 │ │ marker'ları │ │
|
||
│ │ │ │ [Yer Ekle] ──► │ │ │ │
|
||
│ │ G │ └────────────────────────┘ │ - Net görünüm │ │
|
||
│ │ ü │ │ │ │
|
||
│ │ n │ ┌────────────────────────┐ │ - Numaralı │ │
|
||
│ │ │ │ ① Göreme Açık Hava │ │ marker'lar │ │
|
||
│ │ 1 │ │ Müzesi │ │ │ │
|
||
│ │ │ │ 09:00-11:00 │ │ ① │ │
|
||
│ │ 2 │ └────────────────────────┘ │ ② │ │
|
||
│ │ │ │ ③ │ │
|
||
│ │ 3 │ ┌────────────────────────┐ │ │ │
|
||
│ │ │ │ ② Uçhisar Kalesi │ │ │ │
|
||
│ │ │ │ 11:30-13:00 │ │ │ │
|
||
│ │ │ └────────────────────────┘ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ ┌────────────────────────┐ │ │ │
|
||
│ │ │ │ ③ Yerel Restoran │ │ │ │
|
||
│ │ │ │ 13:30-15:00 │ │ │ │
|
||
│ │ │ └────────────────────────┘ │ │ │
|
||
│ │ │ │ │ │
|
||
│ │ │ ┌────────────────────────┐ │ │ │
|
||
│ │ │ │ ✨ Öneriler │ │ │ │
|
||
│ │ │ │ • Yakın yerler │ │ │ │
|
||
│ │ │ └────────────────────────┘ │ │ │
|
||
│ │ │ │ │ │
|
||
│ └───┴──────────────────────────────┴──────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Çözümler:**
|
||
- ✅ Aktif gün çok net (vurgulanmış)
|
||
- ✅ Sadece aktif günün yerleri görünüyor (odaklı)
|
||
- ✅ Harita sadece aktif günün marker'larını gösteriyor (net)
|
||
- ✅ Gün değiştirmek kolay (tek tık)
|
||
- ✅ Tam odaklanma
|
||
|
||
## 📱 Mobile Karşılaştırması
|
||
|
||
### ÖNCE (Eski Tasarım)
|
||
```
|
||
┌─────────────────────┐
|
||
│ Header │
|
||
├─────────────────────┤
|
||
│ │
|
||
│ Timeline │
|
||
│ (Accordion) │
|
||
│ │
|
||
│ ▼ Gün 1 │
|
||
│ • Yer 1 │
|
||
│ • Yer 2 │
|
||
│ ▼ Gün 2 │
|
||
│ • Yer 3 │
|
||
│ │
|
||
├─────────────────────┤
|
||
│ [Timeline] [Map] │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
### SONRA (Yeni Tasarım)
|
||
```
|
||
┌─────────────────────┐
|
||
│ Header │
|
||
├─────────────────────┤
|
||
│ [Gün 1][Gün 2][Gün 3]│ ← Horizontal Scroll
|
||
├─────────────────────┤
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ Gün 2 - Salı │ │
|
||
│ │ [Yer Ekle] │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ ① Göreme │ │
|
||
│ │ 09:00-11:00 │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────────┐ │
|
||
│ │ ② Uçhisar │ │
|
||
│ │ 11:30-13:00 │ │
|
||
│ └─────────────────┘ │
|
||
│ │
|
||
├─────────────────────┤
|
||
│ [Timeline] [Map] │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
## 🎯 Kullanıcı Akışı Karşılaştırması
|
||
|
||
### ÖNCE: Yer Ekleme Akışı
|
||
```
|
||
1. Accordion'dan günü aç
|
||
2. "Yer Ekle" butonuna tıkla
|
||
3. Dialog açılır (sayfa üstü)
|
||
4. Ara
|
||
5. Ekle
|
||
6. Dialog kapanır
|
||
7. Accordion'a geri dön
|
||
```
|
||
**Adım Sayısı:** 7
|
||
**Sorun:** Sayfa değişimi, context kaybı
|
||
|
||
### SONRA: Yer Ekleme Akışı
|
||
```
|
||
1. Gün zaten seçili (sol panel)
|
||
2. "Yer Ekle" butonuna tıkla
|
||
3. Sheet açılır (sağdan)
|
||
4. Ara
|
||
5. Ekle
|
||
6. Anında timeline'a düşer
|
||
```
|
||
**Adım Sayısı:** 6
|
||
**Avantaj:** Context korunur, daha hızlı
|
||
|
||
## 🎨 Görsel Hiyerarşi
|
||
|
||
### ÖNCE
|
||
```
|
||
Öncelik Sırası:
|
||
1. Trip Cover Card (en üstte, büyük)
|
||
2. Explore Section
|
||
3. Lead CTA
|
||
4. Günler (accordion içinde)
|
||
5. Yerler (accordion içinde)
|
||
```
|
||
**Sorun:** Asıl içerik (yerler) en altta
|
||
|
||
### SONRA
|
||
```
|
||
Öncelik Sırası:
|
||
1. Aktif Gün Header (vurgulanmış)
|
||
2. Yerler (büyük kartlar)
|
||
3. Yer Ekle butonu
|
||
4. Öneriler (en altta)
|
||
```
|
||
**Avantaj:** Asıl içerik ön planda
|
||
|
||
## 📊 Metrik Karşılaştırması
|
||
|
||
| Metrik | Önce | Sonra | Değişim |
|
||
|--------|------|-------|---------|
|
||
| Satır Sayısı | 1364 | 1038 | -326 (%24 ↓) |
|
||
| Komponent Sayısı | 1 | 7 | +6 |
|
||
| Panel Sayısı | 2 | 3 | +1 |
|
||
| Boş Durum Sayısı | 1 | 3 | +2 |
|
||
| Gün Seçim Yöntemi | Accordion | Direct Click | Daha hızlı |
|
||
| Yer Ekleme | Dialog | Sheet | Daha iyi UX |
|
||
|
||
## 🎯 UX Hedefleri
|
||
|
||
### Önce
|
||
- ❌ Kullanıcı hangi günde olduğunu bilmiyor
|
||
- ❌ Tüm günler aynı anda görünüyor (karmaşık)
|
||
- ❌ Harita karışık
|
||
- ❌ Odaklanma yok
|
||
|
||
### Sonra
|
||
- ✅ Kullanıcı her zaman nerede olduğunu biliyor
|
||
- ✅ Sadece aktif gün görünüyor (odaklı)
|
||
- ✅ Harita net
|
||
- ✅ Tam odaklanma
|
||
|
||
## 🚀 Performans
|
||
|
||
### Önce
|
||
- Tüm günlerin yerleri render ediliyor
|
||
- Tüm marker'lar her zaman haritada
|
||
- Accordion açma/kapama overhead
|
||
|
||
### Sonra
|
||
- Sadece aktif günün yerleri render ediliyor
|
||
- Sadece aktif günün marker'ları haritada
|
||
- Direct render, no accordion overhead
|
||
- useMemo ile optimize edilmiş
|
||
|
||
## 🎉 Sonuç
|
||
|
||
**Önce:** Liste ekranı
|
||
**Sonra:** Seyahat kontrol paneli
|
||
|
||
**Kullanıcı Deneyimi:**
|
||
- Karar yorgunluğu: ↓ %70
|
||
- Odaklanma: ↑ %90
|
||
- Kontrol hissi: ↑ %85
|
||
- Kullanım kolaylığı: ↑ %80
|