User Flow ve Task Flow: Fark ve Kullanım Rehberi
Seviye: Başlangıç
Kategori: UX Design
Son güncelleme: Ocak 2025
Giriş
"User flow çizer misin?" dedi lead designer. Figma'yı açtın, kutular çizdin, oklar ekledin. Ama aslında ne çizdiğinden emin değilsin. User flow mı, task flow mu, wireflow mu?
Bu kavramlar sıkça karıştırılıyor. Hatta bazen birbirinin yerine kullanılıyor. Ama her birinin farklı amacı ve kullanım alanı var.
Yanlış diyagram çizmek sadece zaman kaybı değil. Ekiple yanlış iletişime, eksik tasarımlara ve gözden kaçan senaryolara yol açar.
Bu yazıda user flow ve task flow arasındaki farkı, her birini ne zaman kullanacağını ve nasıl çizeceğini öğreneceksin.
Task Flow Nedir?
Task flow, tek bir görevin tamamlanması için gereken adımları gösteren lineer diyagramdır.
Özellikleri:
- Tek bir kullanıcı tipi varsayar
- Tek bir yol gösterir (dallanma yok)
- Karar noktaları içermez
- "Happy path" yani ideal senaryoyu gösterir
Task flow şudur: A noktasından B noktasına giden tek bir çizgi. Kullanıcının görevi tamamlamak için atacağı ideal adımlar.
Örnek: Şifre sıfırlama task flow [Giriş ekranı] → [Şifremi unuttum tıkla] → [Email gir] → [Gönder] → [Email kontrol et] → [Linke tıkla] → [Yeni şifre gir] → [Onayla] → [Başarılı]
Gördüğün gibi: Tek yol, tek senaryo, dallanma yok.
User Flow Nedir?
User flow, bir kullanıcının belirli bir hedefe ulaşmak için üründe izleyebileceği tüm yolları gösteren diyagramdır.
Özellikleri:
- Farklı kullanıcı tiplerini içerebilir
- Birden fazla yol gösterir
- Karar noktaları içerir (if/else)
- Alternatif senaryoları ve hata durumlarını kapsar
User flow şudur: Kullanıcının ürüne girişinden hedefe ulaşmasına kadar tüm olası yolların haritası. Dallanmalar, kararlar ve alternatifler dahil.
Örnek: E-ticaret satın alma user flow [Ana sayfa] ↓ [Ürün listesi] ←→ [Arama] ←→ [Kategori filtre] ↓ [Ürün detay] ↓ [Sepete ekle] ↓ [Sepet] → [Alışverişe devam] → [Ürün listesi] ↓ [Checkout] ↓ ┌─ [Üye mi?] ─┐ ↓ Evet ↓ Hayır [Giriş] [Misafir devam] veya [Kayıt ol] ↓ ↓ └─────────────┘ ↓ [Adres seç/ekle] ↓ [Ödeme yöntemi] ↓ ┌─ [Ödeme başarılı?] ─┐ ↓ Evet ↓ Hayır [Onay sayfası] [Hata → Tekrar dene]
Gördüğün gibi: Birden fazla yol, karar noktaları, alternatif senaryolar.
Temel Farklar
[TABLE] | Özellik | Task Flow | User Flow | |---------|-----------|-----------| | Yapı | Lineer (tek çizgi) | Dallanmalı (ağaç/ağ) | | Karar noktası | Yok | Var | | Alternatif yollar | Yok | Var | | Kullanıcı tipi | Tek tip varsayar | Farklı tipler olabilir | | Kapsam | Tek görev | Tüm yolculuk | | Detay seviyesi | Düşük | Yüksek | | Çizim süresi | Hızlı | Daha uzun | | Kullanım amacı | Adımları netleştirme | Tüm senaryoları görme | [/TABLE]
[COMPARISON] Task Flow: "Kullanıcı bu görevi nasıl tamamlar?" User Flow: "Kullanıcı bu hedefe ulaşmak için hangi yolları izleyebilir?" [/COMPARISON]
Hangisini Ne Zaman Kullanmalısın?
Task Flow Kullan:
- Tek bir özelliği veya görevi tasarlarken
- Ekibe basit bir akışı anlatırken
- Developer'a lineer bir süreci aktarırken
- İlk konsept aşamasında hızlıca fikir paylaşırken
Örnek senaryolar:
- Şifre sıfırlama
- Profil fotoğrafı değiştirme
- Bildirim ayarlarını güncelleme
- Tek bir form doldurma
User Flow Kullan:
- Yeni bir özellik veya ürün tasarlarken
- Tüm kullanıcı senaryolarını görmek istediğinde
- Edge case'leri ve hata durumlarını planlarken
- Stakeholder'lara kapsamlı sunum yaparken
- QA ekibine test senaryoları verirken
Örnek senaryolar:
- Onboarding deneyimi
- Checkout süreci
- Kayıt ve giriş akışları
- Çok adımlı form süreçleri
💡 Pratik kural: Eğer akışta "ya bu olursa?" sorusu soruyorsan, user flow çizmelisin. Tek bir "mutlu yol" yeterliyse, task flow yeter.
Nasıl Çizilir?
Task Flow Çizimi
Adımlar:
Görevi tanımla
"Kullanıcı şifresini sıfırlayacak"
Başlangıç noktasını belirle
Kullanıcı nereden başlıyor? (örn: giriş ekranı)
Bitiş noktasını belirle
Başarılı tamamlanma neye benziyor? (örn: yeni şifreyle giriş)
Adımları listele
Sırayla her adımı yaz
Oklarla bağla
Soldan sağa veya yukarıdan aşağı
Kullanılan şekiller: [Dikdörtgen] → Ekran veya sayfa (Oval) → Başlangıç/bitiş → → Akış yönü
User Flow Çizimi
Adımlar:
Kullanıcı hedefini tanımla
"Kullanıcı ürün satın alacak"
Giriş noktalarını belirle
Kullanıcı nerelerden gelebilir? (ana sayfa, reklam, email link)
Ana yolu (happy path) çiz
İdeal senaryo task flow gibi
Karar noktalarını ekle
"Üye mi?", "Ödeme başarılı mı?" gibi
Alternatif yolları çiz
Her karar için farklı dallar
Hata durumlarını ekle
Başarısız ödeme, geçersiz email vs.
Çıkış noktalarını işaretle
Başarılı tamamlanma, vazgeçme, hata
Kullanılan şekiller: [Dikdörtgen] → Ekran veya sayfa (Oval) → Başlangıç/bitiş <Baklava> → Karar noktası (evet/hayır) → → Akış yönü [Dikdörtgen kesik köşe] → Sistem aksiyonu
User Flow Sembolleri
Standart flowchart sembolleri kullanılır:
[TABLE] | Sembol | İsim | Kullanım | |--------|------|----------| | ⬭ (Oval) | Terminal | Başlangıç ve bitiş noktaları | | ▭ (Dikdörtgen) | Process | Ekran, sayfa, adım | | ◇ (Baklava) | Decision | Karar noktası (if/else) | | ▱ (Parallelogram) | Input/Output | Kullanıcı girişi, sistem çıktısı | | → (Ok) | Flow line | Akış yönü | | ⬡ (Altıgen) | Preparation | Hazırlık adımı | [/TABLE]
💡 Sembol ezberlemek zorunda değilsin. Önemli olan tutarlılık. Aynı proje içinde aynı sembolleri aynı anlam için kullan.
Araçlar
Dijital Araçlar
| Araç | Ücretsiz | En İyi Yön | |------|----------|------------| | FigJam | ✓ | Figma entegrasyonu | | Miro | Kısmen | İş birliği | | Whimsical | Kısmen | Hız ve basitlik | | Lucidchart | Kısmen | Profesyonel flowchart | | Overflow | ✗ | UI ekranlarıyla flow |
Analog
Kalem kağıt her zaman işe yarar. Özellikle beyin fırtınası ve ilk eskizler için whiteboard veya post-it kullan.
Sık Yapılan Hatalar
1. Her şeyi tek diyagrama sığdırmak
2. Hata durumlarını unutmak
User flow'da sadece happy path göstermek eksik kalır. "Ya ödeme başarısız olursa?", "Ya email zaten kayıtlıysa?" sorularını da kapsa.
3. Kullanıcı perspektifini kaybetmek
[COMPARISON] Sistem odaklı: "Veritabanı sorgusu → API response → Cache güncelle" Kullanıcı odaklı: "Ara butonuna tıkla → Sonuçları gör → Ürün seç" [/COMPARISON]
Flow diyagramı kullanıcının gördüklerini göstermeli, arka plan teknik süreçleri değil.
4. Detayda boğulmak
İlk aşamada her küçük adımı göstermeye çalışma. Önce ana akışı çiz, sonra gerekirse detaylandır.
5. Güncel tutmamak
Tasarım değişti ama flow aynı kaldı? Bu, ekibi yanıltır. Flow diyagramlarını tasarımla senkron tut.
Wireflow: Üçüncü Bir Seçenek
User flow ve wireframe'in birleşimi. Akış diyagramındaki her kutuya basit wireframe eklersin.
Ne zaman kullanılır:
- Akışı görselleştirmek istediğinde
- Stakeholder'lara sunum yaparken
- Geliştirme öncesi detaylı dokümantasyon için
Örnek: [Wireframe: Giriş ekranı] → [Wireframe: Email formu] → [Wireframe: Onay mesajı]
Dezavantajı: Hazırlaması daha uzun sürer.
Şimdi Sen Dene
20 dakika
Senaryo: Bir müzik streaming uygulaması için "Playlist oluşturma" özelliğini tasarlıyorsun.
Görev 1 - Task Flow: Playlist oluşturmanın en basit yolunu task flow olarak çiz. Sadece happy path, dallanma yok.
Görev 2 - User Flow: Aynı özellik için user flow çiz. Şu durumları da dahil et:
- Kullanıcı giriş yapmamışsa ne olur?
- Playlist ismi zaten varsa ne olur?
- Şarkı eklemeden playlist kaydedilirse ne olur?
Karşılaştır: İki diyagramı yan yana koy. Task flow kaç kutu? User flow kaç kutu? Fark ne kadar?
Özet
- **Task flow** tek bir görevi lineer olarak gösterir, dallanma yoktur
- **User flow** tüm olası yolları gösterir, karar noktaları ve alternatifler içerir
- Task flow hızlı iletişim için, user flow kapsamlı planlama için kullan
- Standart flowchart sembollerini tutarlı kullan
- Hata durumlarını ve edge case'leri unutma
- Büyük akışları parçalara böl, okunabilir tut
İlgili İçerikler
Önceki: Portfolio Case Study Nasıl Yazılır?
Sonraki: UX Nedir?
İlgili Roadmap: UX Designer Roadmap → Tasarım Çıktıları
Kaynaklar
Derinleşmek istersen:
- Task Flows vs User Flows - NNGroup (İngilizce, 8 dk)
- User Flow - IxDF (İngilizce, 10 dk)
- The Guide to User Flow Diagrams - CareerFoundry (İngilizce, 12 dk)