E-Bülten listemize abone olun.

ABONE OL
Yükselen bir çıktı formatı: Wireflow

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.

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.

Kaynak: https://www.nngroup.com/articles/wireflows/

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.

Kaynak: https://www.nngroup.com/articles/wireflows/

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.

Referanslar

Bora Kılıç

UX Producer

‘85 İstanbul doğumlu. Sabancı Üniversitesi mezunu. Ocak 2017’den bu yana SHERPA’da.

6
  • Pingback: Yükselen bir çıktı formatı: Wireflow - GaleriHaber.com - Türkiyenin Haber Galerisi()

  • Pingback: Yükselen bir çıktı formatı: Wireflow - Habergaraj.com()

  • Onur Özgür Özkan

    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.