User flow (kullanıcı akışı) nedir, nasıl çizilir?

User flow nedir

User flow, bir görevin ürün içindeki yol haritasıdır. Kullanıcı nereden başlar, hangi ekranları görür, nerede karar verir ve nerede bitirir? Şema bu soruların cevabını oklarla bağlanmış kutularla verir.

Kate Kaplan, NN/g'deki 2023 tarihli yazısında user flow'u bir etkileşimler dizisi olarak tanımlar. Bu dizi, tek üründe sık yapılan bir görevin tipik ya da ideal adımlarını gösterir. Akışta iki şey yer alır: kullanıcının önemli eylemleri ve sistemin bunlara verdiği cevaplar.

Kaplan'a göre bir akış dakikalar, en fazla birkaç saat süren bir işi anlatır. Yazıdaki örnek, bir spor malzemeleri sitesinden tenis raketi almaktır. Şifre sıfırlama ya da randevu alma da bu türden işlerdir.

Kullanıcı yolculuğu haritası ve wireframe ile farkı

Bu kavramlar sık karışır, çünkü hepsi aynı ürünü anlatır. Fark, her birinin neye yakından baktığındadır.

Kullanıcı yolculuğu haritası geniş açıdır. Kaplan'ın karşılaştırmasına göre bu harita birkaç kanalı ve temas noktasını kapsar, günler ya da aylar sürebilir. Eylemlerin yanında duyguları ve düşünceleri de yazar.

User flow ise tek üründe kalır ve duygu yazmaz. Kaplan bunu açıkça söyler: akışlar adım dizileriyle sınırlıdır, kullanıcının duygu durumu hakkında bilgi taşımaz.

Kaplan ikisini birlikte kullanmanın çoğu zaman işe yaradığını da yazar. Akış, yolculuğun tek bir parçasına yakından bakar.

	Kullanıcı yolculuğu	User flow
Kapsam	Birden fazla kanal ve temas noktası.	Tek ürün içindeki etkileşimler.
Neyi yazar	Eylem, duygu, düşünce, kanal.	Kullanıcı eylemi ve sistem cevabı.
Süre	Günler, haftalar, aylar.	Dakikalar, en fazla saatler.
Çıktı	Kullanıcı yolculuğu haritası.	Wireflow, akış şeması, görev diyagramı.
Araştırma	Saha çalışması, günlük çalışması, görüşme.	Kullanılabilirlik testi, yanında analitik.

Wireframe başka bir soruya cevap verir: bir ekranda ne nerede duruyor? Page Laubheimer NN/g'deki yazısında wireframe'lerin yerleşimi iyi gösterdiğini ama etkileşimi iyi anlatmadığını yazar. Akış ise ekranlar arasındaki geçişi gösterir.

Bir de bilgi mimarisi var. Bilgi mimarisi ürünün haritasıdır: hangi sayfalar var ve nasıl gruplanmış. User flow o haritada tek bir rotadır.

Task flow, wireflow ve user flow

Bu üç terim kaynaktan kaynağa biraz farklı kullanılır. Ben aşağıdaki ayrımı kullanıyorum, çünkü ekipte kimin neyi kastettiğini netleştiriyor.

• Task flow (görev akışı): Tek bir hedefe giden adımlar. Overflow'un 2022 tarihli karşılaştırmasına göre çoğu görev akışı büyük ölçüde doğrusaldır ve sade görünür. Uzun bir sürecin yalnızca bir parçasını da anlatabilir.
• User flow (kullanıcı akışı): Aynı yazıya göre kullanıcının bir hedefe ulaşmak için izleyebileceği bütün olası yollar. Dallanır, kararlar ve hata yolları burada görünür.
• Wireflow: Laubheimer'ın 2016 tarihli yazısında tanımlanan biçim. Akış şemasındaki soyut kutuların yerine gerçek ekran taslakları durur. Ok, kullanıcının bastığı düğmeden çıkar ve sonucu gösteren ekrana gider.

Laubheimer'a göre wireflow, az sayıda temel ekranı olan ve içeriği kullanıcının eylemine göre değişen ürünlerde işe yarar. Mobil uygulamalar, web uygulamaları ve ödeme akışları bu gruba girer. Statik masaüstü sitelerinde ise dikkatli olmak gerekir, çünkü büyük ekran görselleri süreci gölgeleyebilir.

Pratikte ben önce sade bir akış şeması çizerim. Yollar netleşince önemli adımları wireflow'a çeviririm.

Mobil ve masaüstü sürüm farklı ilerliyorsa onları ayrı çizerim. iOS ve Android farkları da çoğu zaman akışı değiştirir.

User flow sembolleri

User flow'da kullanılan şekiller, genel akış şeması geleneğinden gelir. Wikipedia'daki akış şeması maddesine göre ANSI bu sembolleri 1960'larda standartlaştırdı, ISO da 1970'te benimsedi. Bugünkü standart, 1985'te yayımlanan ISO 5807'dir.

• Başlangıç ve son: oval ya da köşeleri yuvarlatılmış kutu. Her akışın bir girişi ve en az bir çıkışı vardır.
• Ekran ya da işlem: dikdörtgen. Genel akış şemasında bir işlemi anlatır. UX'te çoğu zaman bir ekranı ya da sayfayı temsil eder.
• Karar: eşkenar dörtgen. İçine evet ya da hayır diye cevaplanan bir soru yazılır. Wikipedia'ya göre karar, iki yoldan hangisinin izleneceğini seçer.
• Ok: adımların sırası. Okun üstüne kullanıcının ne yaptığını yazarsanız şema daha kolay okunur.

Herkes aynı sembolleri kullanınca şema bir ekipten diğerine kolayca geçer. Hata ekranlarını ayrı bir renkle göstermek ise kendi alışkanlığım.

User flow örneği: şifremi unuttum

Aşağıdaki akış kurgusal bir uygulamanın şifre sıfırlama adımlarını gösteriyor. Şemanın üstündeki düğmelerle mutlu yolu ya da hata yollarını vurgulayın. Bir adıma bastığınızda o adımın açıklaması altında açılır.

Bazı adımlar güvenlik kurallarından geliyor. OWASP'ın şifremi unuttum rehberi, adres kayıtlı olsa da olmasa da aynı mesajın gösterilmesini önerir. Sıfırlama bağlantısı tek kullanımlık olmalı ve uygun bir sürenin sonunda geçerliliğini yitirmelidir.

Aynı rehber, şifre değiştikten sonra kullanıcının otomatik olarak içeri alınmamasını ister. Kullanıcıya şifrenin değiştiğini bildiren bir e-posta gider. Bu e-postada şifrenin kendisi yer almaz.

Etkileşimli user flow

Hepsi: 13 adım. 2 başlangıç ve son, 5 ekran, 3 karar, 3 hata ekranı.

• Başlangıç ve son
• Ekran
• Karar
• Hata ekranı

1. 1 · BaşlangıçGiriş ekranında “Şifremi unuttum”a basar

   Kullanıcı şifresini hatırlamıyor ve giriş ekranındaki “Şifremi unuttum” bağlantısına basıyor. Akış burada başlar.

3. 2 · EkranSıfırlama isteği: e-posta alanı

   Başlık “Şifrenizi sıfırlayın”. Ekranda tek alan var: e-posta. Giriş ekranında yazılan adres varsa alan dolu gelir. Düğmenin adı “Bağlantı gönder”.

5. 3 · KararE-posta adresi doğru yazılmış mı?

   Sistem yalnızca yazımı kontrol eder: @ işareti ve alan adı var mı? Adresin kayıtlı olup olmadığına bu adımda bakılmaz.

   Hayır
   H1 · Hata ekranıAlan hatası, aynı ekran↩ Geri döner: 2. adım

   Ekran değişmez ve yazılan adres silinmez. Alanın altında “Geçerli bir e-posta adresi yazın, örneğin [email protected]” yazar. Kullanıcı düzeltip yeniden gönderir.

6. Evet
7. 4 · EkranGönderildi mesajı

   Mesaj şu: “Bu adres kayıtlıysa sıfırlama bağlantısını gönderdik.” Adres kayıtlı olsa da olmasa da aynı mesaj çıkar. Altında spam klasörü notu ve “Tekrar gönder” düğmesi durur.

9. 5 · EkranSıfırlama e-postası

   E-postanın konusu ürünün adını taşır. İçinde tek düğme var: “Yeni şifre belirle”. Bağlantının ne zamana kadar geçerli olduğu açıkça yazar.

11. 6 · KararBağlantı hâlâ geçerli mi?

    Sistem iki şeye bakar: bağlantının süresi dolmuş mu, bağlantı daha önce kullanılmış mı?

    Hayır
    H2 · Hata ekranıBağlantı geçersiz ekranı↩ Geri döner: 2. adım

    Mesaj şu: “Bu bağlantının süresi dolmuş ya da daha önce kullanılmış.” Tek düğme var: “Yeni bağlantı iste”. Düğme kullanıcıyı e-posta alanı dolu olarak 2. adıma götürür.

12. Evet
13. 7 · EkranYeni şifre ekranı

    Tek şifre alanı ve yanında “Göster” düğmesi var. Şifre kuralları alanın altında yazar ve yazarken tek tek işaretlenir. Düğmenin adı “Şifreyi kaydet”.

15. 8 · KararŞifre kurallara uyuyor mu?

    Sistem yeni şifreyi ürünün kurallarına göre kontrol eder, örneğin en az kaç karakter olması gerektiğine.

    Hayır
    H3 · Hata ekranıŞifre hatası, aynı ekran↩ Geri döner: 7. adım

    Ekran değişmez ve yazılan şifre silinmez. Mesaj hangi kuralın eksik kaldığını söyler. Kullanıcı şifreyi düzeltip yeniden kaydeder.

16. Evet
17. 9 · EkranOnay ekranı

    Mesaj şu: “Şifreniz değişti.” Düğmenin adı “Giriş yap”. Sistem kullanıcıyı kendiliğinden içeri almaz. Hesabın adresine şifre değişikliğini bildiren bir e-posta gider.

19. 10 · SonYeni şifreyle giriş yapar

    Kullanıcı giriş ekranına döner ve yeni şifresiyle giriş yapar. Hedefe ulaşıldı, akış biter.

JavaScript kapalı olduğu için filtre çalışmıyor. Bütün adımları ve açıklamalarını yukarıda sırayla görüyorsunuz.

Bu “şifremi unuttum” akışını ben kurguladım, gerçek bir ürüne ait değil. Gönderildi mesajı, bağlantının tek kullanımlık olması ve sıfırlamadan sonra otomatik giriş yapılmaması OWASP'ın önerilerine dayanıyor.

Giriş ekranının kendisini, şifre alanını ve sıfırlama bağlantısının yerini giriş ve kayıt ekranı kalıbında anlattım.

Mutlu yol ve hata yolları

Mutlu yol (happy path), her şeyin yolunda gittiği rotadır. Kullanıcı adresi doğru yazar, e-posta hemen gelir, şifre ilk denemede kurallara uyar. Yukarıdaki örnekte bu yol 10 adım sürüyor.

Hata yolları, bir karar "hayır" ile cevaplandığında açılan dallardır. Her hata yolu iki soruya cevap vermeli: kullanıcı ne görüyor ve nereye dönüyor? Örnekte üç hata yolu var ve üçü de kullanıcıyı yazdığı bilgiyi kaybetmeden geri götürüyor.

Çoğu ekipte mutlu yol tasarlanır, hata yolları geliştiriciye kalır. Ortaya "Bir hata oluştu" yazan ve kullanıcıyı ilk ekrana atan bir mesaj çıkar. Her "hayır" okunu bir ekrana bağlarsanız bu sorun baştan çözülür.

Mesajın kendisini nasıl yazdığımı hata mesajları sayfasında anlattım.

Akışı bitirdiğinizde şu kontrolü yapın: her eşkenar dörtgenden en az iki ok çıkıyor mu? Hiçbir kutu çıkmaz sokakta kalmıyor mu? Bu iki soru, eksik ekranların çoğunu tasarım başlamadan bulur.

User flow nasıl çizilir

Bir akışı kâğıtta da, bir tasarım aracında da çizebilirsiniz. Araçtan çok adımların sırası önemli. Ben şu sırayı izlerim:

1. Görevi ve kullanıcıyı seçin. "Kullanıcı şifresini sıfırlar" gibi tek cümlelik bir hedef yazın. Kimin için çizdiğinizi bir persona ile netleştirin.
2. Giriş noktasını yazın. Kullanıcı bu akışa nereden geliyor: giriş ekranından, bir e-postadan, bir reklamdan? Farklı girişler farklı ilk ekranlar gerektirebilir.
3. Önce mutlu yolu çizin. Başlangıçtan sona tek düz bir hat çekin. Her ekrana bir ad verin.
4. Her karara "hayır" dalını ekleyin. Yanlış veri, süresi dolmuş bağlantı, bağlantı kopması gibi durumları tek tek düşünün. Her dalın nereye döndüğünü yazın.
5. Sistemin cevabını yazın. Kaplan'ın tanımına göre akış, sistemin her adımda ne gösterdiğini de anlatır.
6. Akışı gerçek kullanıcıyla sınayın. Kaplan, akışlar için en uygun yöntem olarak kullanılabilirlik testini gösterir. Kullanıcının ilk nereye bastığını görmek için ilk tıklama testi de iyi bir başlangıçtır.
7. Sonra wireframe'e geçin. Akıştaki her dikdörtgen bir ekran taslağına dönüşür.

Akışı ne zaman çizeceğiniz de önemli. Sorun ve kullanıcı netleşmeden çizilen akış, yanlış görevi güzelce anlatır. Bu yüzden ilk akışları discovery fazının sonunda, tasarıma geçmeden önce çizerim.

Benim notum

Bence user flow, bir ürün ekibinin çizebileceği en ucuz belgedir. Kısa sürede çizilir ve tasarım ile kod arasındaki pek çok tartışmayı baştan bitirir. Geliştirici hangi hata ekranını yapacağını şemada görür.

Audit'lerde en sık gördüğüm eksik, hata yollarının hiç tasarlanmamış olmasıdır. Mutlu yol özenle çizilmiştir, ama süresi dolmuş bir bağlantıya basan kullanıcı boş bir sayfaya düşer.

Akışınızı birlikte çizmek ve ekranlarını kodla birlikte teslim etmek isterseniz Tasarla & Yayınla Sprinti tam bunun için. İki haftalık sprintte tasarımı ve kodu reponuza teslim ederim.