User flow diyagramı çizmek: adım adım yöntem ve örnek akış

Kullanıcı akışı nedir ve neyi gösterir?

Kullanıcı akışı (user flow), bir kişinin belirli bir hedefe ulaşmak için ürün içinde izlediği yolu adım adım gösteren diyagramdır. Başlangıç noktası, kullanıcının karşılaştığı ekranlar, verdiği kararlar ve sonunda vardığı sonuç aynı şemada görünür. Örneğin bir e-ticaret uygulamasında "ürünü sepete ekleyip siparişi tamamlama" bir akıştır; "şifremi unuttum" ise ayrı bir akıştır.

Akış diyagramı ekran tasarımı değildir. Düğmenin rengiyle ya da ikonun biçimiyle ilgilenmez, yalnızca sırayı ve mantığı gösterir: Hangi ekrandan hangisine geçilir, hangi koşulda yol ayrılır, hata olursa kullanıcı nereye döner? Bu yüzden akışlar genellikle wireframe çiziminden önce hazırlanır ve ekranların hangi sırayla, hangi içerikle tasarlanacağını belirler.

Akış ile bilgi mimarisi sık karıştırılır. Bilgi mimarisi ürünün içeriğinin nasıl gruplandığını ve etiketlendiğini anlatır, yani "neler nerede duruyor" sorusuna yanıt verir. Kullanıcı akışı ise "bu kişi hedefine nasıl ulaşır" sorusuna yanıt verir. İkisi birbirini besler: Mimari doğru kurulmamışsa akış gereksiz uzar, akış çizilirken ortaya çıkan eksik ekranlar da mimariyi düzeltmeye zorlar.

Çizmeden önce hazırlanması gerekenler

İyi bir akış çizimi çizim aracında değil, hazırlıkta başlar. Önce akışın kime ait olduğunu belirleyin: Aynı ürünü ilk kez kullanan biri ile her gün kullanan biri farklı yol izler. Persona ya da kullanıcı araştırmasından gelen bir profil seçmek, çizimi somut tutar.

Sonra tek bir hedef yazın. "Kullanıcı kayıt olur" iyi bir hedeftir; "kullanıcı uygulamayı kullanır" çizilemeyecek kadar geniştir. Hedefi bir cümleyle, kullanıcının ağzından ifade etmek işe yarar: "Yeni bir hesap açıp ilk siparişimi vermek istiyorum."

Üçüncü hazırlık, giriş noktalarını listelemektir. Aynı hedefe farklı yerlerden gelinebilir: reklamdan, arama sonucundan, e-posta bağlantısından ya da ana sayfadan. Her giriş noktası akışın başlangıcını biraz değiştirir. Son olarak bilinen kısıtları toplayın: Ödeme sağlayıcısının zorunlu adımları, yasal onay ekranları ve teknik sınırlar gibi unsurlar akışa baştan girer; sonradan eklenmeleri çizimi bozar.

Elinizde kullanıcı hikâyeleri varsa onları başlangıç malzemesi olarak kullanın. Her hikâye bir akışın ya da akışın bir parçasının ham halidir.

Adım adım akış nasıl çizilir?

Yöntem sade bir sıradır:

• Başlangıç ve bitiş noktasını yazın. Bitiş, hedefin gerçekleştiği ekran ya da durumdur, örneğin sipariş onay ekranı.
• Mutlu yolu çizin. Her şeyin sorunsuz gittiği en kısa yol önce çıkar. Bu, akışın omurgasıdır.
• Karar noktalarını ekleyin. "Kullanıcı üye mi?", "Kart doğrulandı mı?" gibi sorular çatallanma yaratır. Her çatalın tüm çıkışlarını gösterin; yanıtsız kalan bir karar eksik akış demektir.
• Hata ve istisna yollarını ekleyin. Bağlantı kopması, geçersiz giriş, stokta kalmamış ürün ve yarım bırakılan işlem gibi durumlar için kullanıcının nereye döneceğini çizin.
• Geri dönüş ve çıkış yollarını kontrol edin. Kullanıcı her noktada geri adım atabiliyor, vazgeçebiliyor mu?
• Gereksiz adımları ayıklayın. Her ekranın akışa ne kattığını sorun; kullanıcıdan yeniden istenen ve sistemin zaten bildiği bilgiler en sık fazlalıktır.

Çizerken sembolleri sade tutun. Genel kullanımda dikdörtgen bir ekranı ya da adımı, eşkenar dörtgen bir kararı, yuvarlatılmış kutu başlangıç ve bitişi gösterir. Takımın herkesi aynı sembol anlamını bilmelidir; bir köşeye küçük bir gösterge eklemek yeterlidir.

Ekran adlarını kullanıcının gözünden yazın. "Son_ekran_yeni" gibi kodlu adlar yerine "Ödeme bilgileri" demek, paydaşların diyagramı toplantıda yardımsız okumasını sağlar.

Kullanılan araçlar ve çıktı biçimleri

Akış için özel bir araç şart değildir. Beyaz tahta ya da yapışkan not ile başlayıp sonradan dijitale taşımak yaygındır, çünkü ilk taslakta hızlı silip yeniden düzenlemek önemlidir. Dijital tarafta tasarım ve beyaz tahta araçları, diyagram çizim uygulamaları ve ürün tasarımı yapılan araçlardaki bağlayıcı çizgiler akış için kullanılır.

Tasarım dosyasında çizmenin avantajı, akıştaki her kutuyu doğrudan ilgili ekran tasarımına bağlayabilmenizdir. Böylece diyagram ile ekranlar ayrı yerlerde eskimez. Bağımsız diyagram araçlarının avantajı ise tasarımcı olmayan paydaşların kolay yorum yapabilmesidir.

Detay düzeyini amaca göre ayarlayın. Üst düzey akış, yalnızca ana ekranları ve kararları içerir; yönetici sunumları ve kapsam konuşmaları için uygundur. Ayrıntılı akış, her ekranın durumlarını (boş, yükleniyor, hata) ve her koşulu içerir; geliştirme ekibiyle çalışırken gerekir. İkisini tek bir dev diyagramda birleştirmeyin, okunmaz hale gelir.

Teslimde diyagramı tek başına bırakmayın. Her akışın yanına hedefi, kapsamı ve varsayımları anlatan kısa bir not ekleyin. Geliştirici, diyagramdaki bir kararın arkasındaki kuralı sorabilmelidir.

Örnek: üyelik ve ilk sipariş akışı

Örneğin bir giyim mağazasının mobil uygulamasında yeni kullanıcının ilk siparişini ele alın. Hedef: "Hesap açıp ilk siparişimi vermek." Giriş noktası bir reklam bağlantısıdır ve kullanıcı doğrudan bir ürün sayfasına düşer.

Mutlu yol şöyle akar: Ürün sayfası, beden seçimi, sepete ekleme, sepet özeti, kayıt ya da üye girişi, adres bilgisi, ödeme, sipariş onayı. Çizim ilerledikçe sorular görünür. Kullanıcı kayıt zorunluluğu görünce uygulamayı terk ediyorsa misafir olarak devam seçeneği gerekir mi? Bu karar noktası akışa bir çatal ekler. Seçili beden stokta yoksa kullanıcı hangi ekrana döner? Bu da bir hata yolu olarak çizilir.

Diyagramı paydaşlarla gözden geçirdiğinizde genellikle ekran tasarımından önce değerli bulgular çıkar: Aynı bilginin tekrar tekrar istendiği yer, çıkış yolu olmayan ekran ya da tek bir gizli menüden ulaşılabilen kritik bir işlev. Bu bulguları kâğıt üzerinde düzeltmek, tasarım ve kod tamamlandıktan sonra düzeltmekten çok daha ucuzdur.

Akışı doğrulamak için kâğıt prototip ya da tıklanabilir prototip üzerinde birkaç kişiyle yolu yürütün. Kullanıcı diyagramda olmayan bir yöne giderse, akışın bir varsayımı yanlıştır.

Sık yapılan hatalar

• Tek akışa her şeyi sığdırmak. Kayıt, ödeme ve iade aynı diyagramda olursa kimse okuyamaz. Hedef başına bir akış çizin ve akışları birbirine bağlayın.
• Yalnızca mutlu yolu çizmek. Gerçek kullanıcılar hata yapar, vazgeçer, geri döner. Hata yolları çizilmeyen akış geliştirme sırasında sürprize yol açar.
• Kullanıcı yerine sistemi çizmek. "Sunucu isteği doğrular" bir sistem diyagramıdır. Akışta kullanıcının gördüğü ve yaptığı şey öne çıkmalıdır.
• Kuralları gizlemek. Karar noktasının ardındaki iş kuralı (örneğin hangi kullanıcıya hangi seçeneğin gösterildiği) not edilmezse akış tartışmalı kalır.
• Çizimi bir kez yapıp bırakmak. Ürün değiştikçe akış da değişir; güncel olmayan diyagram yanlış güven verir.
• Araştırmadan kopmak. Akışı yalnızca ekip içi varsayımlarla çizmek, gerçek kullanıcıların farklı yollar izlediğini gözden kaçırır. Kullanıcı görüşmeleri ve test gözlemleri akışı doğrular.

Öğrenme yolu: başlangıçtan ileri düzeye

Başlangıç düzeyinde birkaç basit akışı elle çizerek alıştırma yapın: kullandığınız bir uygulamadaki kayıt akışı, bir yemek siparişi ya da bir bilet alma işlemi. Her ekranı yazıya dökün ve karar noktalarını işaretleyin. Bu, ürünlere analitik bakmayı öğretir.

Orta düzeyde akışı bilgi mimarisi, kullanıcı hikâyeleri ve wireframe çalışmasıyla birleştirin. Bir ürün fikri seçip persona, hedef, akış ve düşük doğruluklu ekranlar zincirini baştan sona kurun. Çalışmayı portfolyoya vaka olarak eklemek için karar gerekçelerini yazılı tutun.

İleri düzeyde çoklu rol, çoklu cihaz ve koşullu akışlarla çalışırsınız: yönetici ile çalışan arasında paylaşılan onay süreçleri, web ile mobil arasında kesintisiz geçiş ya da kullanıcı gruplarına göre değişen deneyimler. Burada akışlar ürün stratejisi ve analitik verisiyle birleşir; ölçüm noktaları diyagrama işlenir ve terk edilen adımlar veriyle teyit edilir.

Mindset kataloğunda UI/UX Tasarım Temelleri programı "Bilgi Mimarisi ve Akış Tasarımı" modülünü içerir ve wireframe, prototip ile kullanılabilirlik testi modülleriyle aynı çizgide ilerler. UX/UI Bootcamp ise bilgi mimarisi, kullanıcı yolculuğu, tasarımdan koda geçiş ve gerçek müşteri projesi modüllerini kapsar. Ürün, tasarım ve analiz ekipleri akış çıktılarının ortak dili oluşturduğu çalışmaları bu modüllerle birlikte kurabilir.