Wireflow, akış şeması ve wireframe'in kombinasyonu olarak değerlendirilebilecek bir çıktı tipidir. İş akışlarının soyut semboller yerine wireframe'ler kullanılarak oluşturulması anlamına gelir. Wireflow çizerek, düzeni ya da içeriği dinamik olarak değişen sayfalardan oluşan mobil ya da web uygulamalarının iş akışlarını daha iyi ifade etmek mümkündür.
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.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Wireframe’ler, bir ekranın sayfa düzenini ve içeriğini estetik kaygı olmadan ortaya koyar. Gri kutular ve yer tutucu içeriklerle low ya da high-fidelity formatta sunulur.Akış şemaları, hem back-end süreçlerini tasvir etmek hem de kullanıcı iş akışlarını tasvir etmek için kullanılabilir. Akış şemalarında tasarıma dair ipucu bulmak mümkün değildir.
İş 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.
Bu wireflow’da mobil uygulama wireframe’lerinden oluşan bir iş akışı görüyoruz. Her wireframe ayrı bir ekrana değil tek bir ekrana karşılık geliyor. Her adımda ekranları birbirine bağlayan hotspot’ları görmek mümkün. Kullanılan oklar, arayüzde kullanıcının aksiyon aldığı noktaları ve etkileşim sonrasında oluşan yeni ekranda neyin değiştiğini gösteriyor. Ayrıca etkileşim sonucunda arayüzde beliren geri bildirimleri de görmek mümkün (onay pop-up’ı, renk değişimi, hata mesajı gibi). Kaynak: https://www.nngroup.com/articles/wireflows/
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.
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.
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.
Bir solukta okuduğum güzel bir yazı. Wireflow için önerdiğiniz yazılım var mıdır?
Bora Kilic
Onur Bey merhaba,
İlginiz için teşekkürler öncelikle. Daha pratik olması açısından ayrı bir yazılım kullanmak yerine wireflow’u wireframe’leri tasarlardığınız yazılım üzerinde oluşturabilirsiniz. Eğer wireframe tasarımları için Sketch kullanıyorsanız, “ArtBoardTitles” plugin’ine göz atmanızı öneririm. Bu plugin sayesinde wireflow için ihtiyacınız olan tüm artboard’ları içine alacak bir artboard oluşturup isimlendirme ve renk/boyut değişikliklerini pratik bir şekilde halledebilirsiniz.
Wireflow’u prototip haline getirerek sunmak isterseniz de Invision ya da Marvel SaaS’larını kullanabilirsiniz. Ayrıca flow çizmek için hazır bir flowkit de yardımcı olabilir. Umarım bu bilgiler yardımcı olur.
Bunlar da ilgini çekebilir
Senin İçin Öneriyoruz
DAM BİLGİ TEKNOLOJİLERİ A.Ş. | SHERPA BLOG SİTE KULLANIM KOŞULLARI
Demek şifreni unuttun.
Olsun, hangimiz unutmuyoruz ki... Yeni bir şifre oluşturmak için e-posta adresini girmen yeterli.
Bir solukta okuduğum güzel bir yazı. Wireflow için önerdiğiniz yazılım var mıdır?
Onur Bey merhaba,
İlginiz için teşekkürler öncelikle.
Daha pratik olması açısından ayrı bir yazılım kullanmak yerine wireflow’u wireframe’leri tasarlardığınız yazılım üzerinde oluşturabilirsiniz.
Eğer wireframe tasarımları için Sketch kullanıyorsanız, “ArtBoardTitles” plugin’ine göz atmanızı öneririm. Bu plugin sayesinde wireflow için ihtiyacınız olan tüm artboard’ları içine alacak bir artboard oluşturup isimlendirme ve renk/boyut değişikliklerini pratik bir şekilde halledebilirsiniz.
Wireflow’u prototip haline getirerek sunmak isterseniz de Invision ya da Marvel SaaS’larını kullanabilirsiniz.
Ayrıca flow çizmek için hazır bir flowkit de yardımcı olabilir. Umarım bu bilgiler yardımcı olur.