Wireflow: Ekran Taslağı ve Kullanıcı Akışını Tek Belgede Toplamak

Wireflow, her adımın ekran taslağını ve o adımdan çıkan kullanıcı aksiyonunu aynı belgeye koyar. Statik wireframe'in söyleyemediği şeyi söylemek için: tıklamadan sonra ekranda ne değişti. Kazancı da sınırı da aynı yerden geliyor, çünkü belge ekran sayısıyla değil dal sayısıyla büyüyor.

Wireframe artı ok

Tarifi kısa. Düşük çözünürlüklü ekran taslakları, aralarında da hangi aksiyonun hangi ekrana götürdüğünü belirten oklar. Akış diyagramı süreci anlatır, ekranı göstermez. Wireframe ekranı gösterir, sırayı anlatmaz. İkisi yan yana geldiğinde “kullanıcı filtreyi değiştirdi, liste yenilendi, sonuç boş çıktı” cümlesi üç kutuyla okunur hale gelir.

Ayrım kâğıt üstünde küçük görünüyor, teslimatta değil. Sepet akışını yalnızca ekran tasarımlarıyla verdiğinizde geçişleri okuyan kişi kendi sırasını kurar, sonra “bu hata mesajı tam olarak nerede çıkıyordu” sorusu geri döner.

Dinamik arayüzlerde neyi çiziyoruz

Modal, sekme, filtre, sayfa yenilemeden gelen içerik. Bu tür arayüzlerde ekran sayısı az, durum sayısı çok. Peki ekran hiç değişmiyorsa çizilecek ne kalıyor? Değişen bölge kalıyor. Wireflow'un mobil uygulamalarda ve tek sayfalık web uygulamalarında karşılığı olmasının sebebi bu: kutular ekranı değil, ekranın o andaki durumunu temsil ediyor. Tam sayfayı her seferinde yeniden çizmek yerine yalnızca açılan paneli, dolan formu, yenilenen listeyi göstermek belgeyi hem küçültür hem okunur tutar.

Yüzlerce statik sayfadan oluşan bir içerik sitesinde aynı yöntem boşa kürek. Orada site haritası ve klasik wireframe daha fazlasını söylüyor.

Otuz iki diyagram sorunu

Wireflow anlatan metinler genelde iki şeyi birlikte söyler ve bu ikisi birbirini tutmaz: “çok sayıda alternatif yolu olan süreçler için idealdir” ve “az sayıda ana ekranı olan projelerde en verimlidir”. Alternatif yol sayısı, belgeyi şişiren şeyin ta kendisi.

Dört adımlı bir ödeme akışı düşünün. Kart reddi, stok tükenmesi, kupon geçersizliği, adres doğrulama, 3D Secure: birbirinden bağımsız beş koşul. Uçtan uca her kombinasyonu ayrı bir yol olarak çizerseniz 2⁵, yani 32 diyagram çıkar. O belgeyi kimse baştan sona okumaz, okunmayan belge de dokümantasyon sayılmaz.

Bunu genelde ana akışı tek şerit halinde çizip her koşulu oradan kopan iki kutuluk kısa bir dal olarak eklemekle çözerim. Altı küçük parça, otuz iki değil. Dalın nereye döndüğünü yazmak (aynı adıma mı, akışın başına mı) çoğu zaman dalın kendisini çizmek kadar iş görüyor.

Belgeyi okunur tutan birkaç alışkanlık

• Her adımda hangi arayüz ögesinin değiştiğini işaretleyin, okuyucu iki taslağı yan yana koyup fark aramasın.
• Okun üstüne aksiyonu yazın: “Kaydet'e bastı”, “dosyayı sürükledi”. Ok tek başına yön söyler, sebep söylemez.
• Hata ve boş durum ekranlarını ana akışla aynı belgede tutun. Ayrı dosyaya düştüklerinde geliştirmede en son yazılan, çoğu zaman da hiç yazılmayan kısım bunlar oluyor.

Araç ve ortak çalışma

Figma, Sketch ya da Adobe XD'de wireflow kurmak için özel bir eklentiye ihtiyaç yok, kutular arasına bağlantı çizebildiğiniz herhangi bir tuval yeterli. Uzaktan çalışan ekipler aynı işi Miro veya Lucidchart tarafında daha rahat yürütüyor. Erken aşamada beyaz tahtaya çizilmiş altı kutu, cilalı bir Figma dosyasından daha hızlı geri bildirim getiriyor; ürün yöneticisi de pazarlamacı da kâğıda itiraz etmeyi bitmiş görünen bir ekrana itiraz etmeye tercih ediyor.