Yükselen bir çıktı formatı: Wireflow
Wireflow’un ne olduğunu anlatan en eğlenceli tanım şu olabilir: Wireframe ve akış şeması (flowchart) evlenip çocuk yapsa, ismi wireflow olurdu.
Daha resmi bir tanım yapmak gerekirse; wireflow’lar, wireframe ve akış şemalarının bir kombinasyonudur diyebiliriz. Bu kombinasyon iş akışlarını ve ekran tasarımlarını birlikte dokümante ederek projeye dair kuşbakışı bir görünüm sunar.
Baştan başlayalım
Dilerseniz çocuktan önce anne ve babayı kısaca tanıyalım. Wireframe’ler kullanıcı deneyimi çalışmalarında yüksek frekansta sunulan çıktılardan biridir. Wireframe tasarlamanın temel amacı, estetik ve stil atamasına kaynak ayırmadan bilgi mimarisini eskiz olarak oluşturmaktır. Akış şemaları ise kullanıcı iş akışlarının dokümante edilmesinde kullanılır. Bu dokümantasyonun amacı, üzerinde çalıştığınız süreci başkasına aktarmak, kullanıcının yolculuğunu daha iyi anlamak ya da süreçteki eksiklikleri ortaya çıkarmak olabilir.
İş akışlarını göstermenin yeni yolu
Her ne kadar wireframe ve akış şemaları sıkça kullanılan araçlar olsa da, özellikle sayfa düzeninin ya da içeriğinin kullanıcı etkileşimi sonucu dinamik olarak değiştiği sayfalardan oluşan web ya da mobil uygulamaların tasarımlarının gösterilmesinde yetersiz kalabiliyorlar. Bu duruma bir çözüm olarak ortaya çıkan wireflow’lar akış şemalarına tasarımı entegre ediyor. Diğer bir deyişle, iş akışları soyut semboller ile değil direkt olarak wireframe’ler kullanılarak çiziliyor.
İş akışlarının semboller yerine wireframe’ler kullanılarak oluşturulması, odağın kullanıcıların etkileşime gireceği ürün üzerinde olmasını sağlar.
Wireflow’lar ilk olarak mobil uygulama tasarlayan ekipler tarafından kullanılmaya başlandı. Bunun sebebi de mobil ekranların görece daha küçük olması ve akış şemasındaki sembollerin yerine rahatlıkla geçebiliyor olmasıydı. Ancak bu, wireflow’ların sadece mobil tasarım süreçlerinde kullanılabileceği anlamına gelmiyor. Desktop ürünlerinde de, sayfanın tamamı yerine etkileşim sonucu değişen bölümleri wireflow’lara yerleştirilebilir. Örneğin; e-ticaret sitelerinin sepet ve ödeme ekranları bu şekilde gösterilmeye uygundur.
Yeni bir çıktı tipine ihtiyacımız var mı?
Yeni çıktı formatları çoğunlukla kuşkuyla karşılanır çünkü paydaşlar yeni formatı tam olarak nasıl okumaları gerektiğini bilemezler ve alıştıkları doküman tiplerine tutunurlar. Ancak wireflow’lar daha önce wireframe ve akış şeması görmüş herkes tarafından rahatlıkla okunabilir ve sunduğu avantajlar sayesinde statükocu kişileri bile ikna edebilir.
Wireframe’ler sayfa yerleşimini göstermek için çok iyi bir araçtır ancak etkileşimi ifade etmekte yetersiz kalabilirler. Özellikle de içeriğin ya da sayfa düzeninin AJAX ya da benzeri teknolojilerle dinamik olarak değiştiği modern web ve mobil uygulamalar söz konusu olduğunda. Örnek olarak; seçilen filtrenin sayfadaki ürünleri değiştirdiği bir e-ticaret sitesini veya sunduğu araçlar ya da kontrol parametreleriyle etkileşime geçildiğinde sayfa düzeninin radikal şekilde değiştiği kompleks uygulamaları verebiliriz. Bu gibi durumlarda wirefirame’ler, oluşabilecek farklı sayfa düzenlerini ve sistemin kullanıcıya vereceği geribildirimleri resmetmekte yetersiz kalır.
Etkileşim sonucu içeriği değişen ekranların ilgili bölümleri wireflow’lar üzerinde dokümante edilebilir.
Akış şemaları ise, birçok adım ve yoldan oluşan kompleks iş akışlarını dokümante etmekte başarılı olan bir araçken bunu tasarım bağlamından uzak, tamamen soyut bir düzlemde yapar ve etkileşim senaryolarının arayüze görsel anlamda nasıl yansıyacağını tasvir edemez.
Wireflow’lar etkileşimi dokümante eder
Instagram’da bir arkadaşınıza mesaj göndermek için izlemeniz gereken adımları düşünün. Bu adımları dokümante etmek klasik (aynı zamanda ideal) bir wireflow use case’idir. Sürecin her adımı basit bir wireframe ya da hi-fi bir mock-up ile gösterilir.
Wireflow’lar mobil uygulama tasarımı süreçlerinde daha sık kullanılsa da desktop ve web uygulamalarının kompleks iş akışlarını dokümante etmek için de oldukça kullanışlıdır. Her adımda desktop ekranının tamamını kanvas üzerinde göstermek yer kaybına neden olacağı için ekranın sadece değişen bölümlerini göstermek yerinde olacaktır.
Ekip içi iletişim için önemli bir araç
Projenin farklı paydaşlarıyla iletişim kurma aracı olmanın ötesinde, wireflow’lar ekip üyelerinin birlikte çalışmasını da kolaylaştıran bir araç olabilir. Özellikle de agile tasarım anlayışını benimseyen kullanıcı deneyimi profesyonelleri için.
Tasarımın yükünün tek bir kişinin omuzlarında olmadığı, ekibin iş birliği içinde olduğu iteratif bir şekilde ilerleyen agile süreçlerde, proje özelinde tasarım atölyeleri gerçekleştirilerek ekip üyelerinin wireflow’lar üzerinden alternatif iş akışlarını ve farklı sayfa düzeni opsiyonlarını tartışmaları sağlanabilir. Bunun için kusursuz wireflow’lar hazırlamaya gerek yoktur. Tam tersine, kağıt ya da whiteboard üzerine hızlı bir şekilde çizim yapmak ve çizimin kalitesinden çok etkileşim senaryolarına odaklanmak daha sağlıklı olacaktır.
Kıssadan hisse
Wireflow’lar hem mobil hem de web uygulamaları için kullanıcı iş akışlarını ve kompleks etkileşimleri dokümante etmekte kullanılan, yıldızı yükselen bir UX çıktı formatıdır. Özellikle sayfa düzeni ya da içeriğin dinamik olarak değiştiği, bir ya da birkaç sayfadan oluşan dijital ürünlerdeki akış ve geribildirimleri tasvir etmekte çok kullanışlıdır. Wireframe ve akış şemalarının bir araya gelerek oluşturduğu bu kombinasyon, ekip çalışmalarının verimliliğini artırma potansiyeli de taşımaktadır.
