Yoksa siz hiç wireframe, mockup ve prototip tanımlarının birbirinin içerisine geçtiği bir toplantıda bulunmadınız mı? Bizler bulunduk. Gelin doğrusunu öğrenelim...
Öncelikle, “Dijital tasarım ve UX ile ilgili günlük iletişimde en çok hata yapılan ve en çok hatalı terminoloji kullanımına sebebiyet veren kalıplar” başlıklı bir blog post yazmak istedim. Ancak daha başlıktan, bounce rate’te %80’i garantileyeceğimizi öngörerek, işte tam da o hatalı kullanımlarla karşılaştığımızda içimizde usul usul yankılanan sesi başlığım olarak atadım. Yoksa siz hiç wireframe, mockup ve prototip tanımlarının birbirinin içerisine geçtiği bir toplantıda bulunmadınız mı? Bizler bulunduk. Gelin doğrusunu öğrenelim…
Wireframe’lerimizin yaratım süreçlerinde severek kullandığımızı sanırım 3.kez not düştüğüm UXPin’deki meslektaşlarımızın hazırladığı Guide to Wireframing‘i okumadıysanız, hemen okuyun. Eğer tavsiyeme kulak verirseniz, blog post’un gerisini de okumanıza gerek yok. En alttaki kalbe basın, yazıyı eş dostla da (onlar da faydalansın diye) paylaşın ve geçin 🙂
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ş.
Aslında UX Booth‘un süreci özetlemek adına çizdiği aşağıdaki kullanıcı deneyimi tasarım süreci tüm yazıya özet teşkil edecek kadar zengin… Biz yine de wireframe, mockup ve prototipi ayrı ayrı tanımlayarak yola koyulalım…
Wireframe Nedir?
Her ne kadar bu konuda okurken göz kuruması garantili şöyle bir blog post yazmış olsam da bütünselliğe sadık kalmak adına kısa bir özet geçeyim istedim.
Wireframe’ler genelde* low-fidelity (yani bağımlı kalma zorunluluğumuz düşük olan), (renklerle hiyerarşi atamasını yapmamak adına) tercihen gri kutular ve yer tutucu içeriklerle sunulan örnek metinlerle hazırlanmış, stil bağımsız bilgi mimarisi eskizleridir. Bir wireframe çizmekte temel amaç neyin nerede konumlanacağına, estetik ve stil atamasındaki kaygılara kaynak harcamadan göz atabilecek bir iterasyon gerçekleştirebilmektir. Başarılı bir wireframe’in aşağıdaki özelliklere sahip olması beklenir:
içeriği nasıl grupladığını net anlatabilmek
bilginin yapı taşlarını doğru ve yine net bir şekilde organize edebilmek
en temel kullanıcı etkileşimlerinin (navigasyon gibi) eksiksiz konulandırmasını yapabilmek
*Genelde diye not düşmemin sebebi, low-fidelity wireframe yaratım süreçlerinin kaynak utilizasyonu konusundaki faydasından ibarettir. Bu açıklamamda high-fidelity wireframe yaratımının önerilmediği gibi bir sonuç çıkmasını arzu etmem.
Mockup Nedir?
Mockup ürünün, servisin ya da dijital varlığınıza nasıl bir isim veriyorsanız onun, son kullanıcısı tarafından görüntülenecek haline en yakın görünümüyle, sunulacak en temel fonksiyonalitenin (etkileşim senaryolarının) simüle edildiği çözümüdür. İşte bu noktada, görseller, tipografi ve tasarımınızın estetik kaygısını tanımlayacak unsurları devreye girer. Mockup’a bakıldığında -her ne kadar işlevselliği tam anlamıyla çalışmasa da- “Demek ki işin sonunda böyle bir şey göreceğim?!?” beklentisinin giderilmesi amaçlanır. Özetle Mockup, yüksek profilde hazırlanmış bir görsel tasarım sunumudur.
Wireframe temelleri atarken, Mockup ona bağlı kalarak görsel zenginliğin atamasını gerçekleştirir. Tasarım ve Geliştirme ekiplerinin besleneceği Tasarım Dokumantasyonu wireframe’lerle start verir ve Mockup’larla pekiştirilir. Mockup’lar Wireframe’lerden farklı olarak işin görsel estetiğini tanımlar ve tabii ki müşteri sunumlarındaki hayal gücü temassızlıkları ile çözümü algılama sorunlarını ortadan kaldırır. Wireframe’lerdeki gri kutulardan çok daha estetik oldukları da aşikardır.
Prototip, her açıdan ağır abidir. Fonksiyonaliteyi simüle etme zorunluluğu, daha fazla kaynak alokasyonu ve teknik bilgi birikimi gerektirir. Her ne kadar günümüz şartlarında hızla kendine taban bulan rapid prototyping araçları ile bu teknik bilgi gereksinimi minimum seviyelere doğru seyretse de prototip yaratımı şu ana kadar hiç değinmediğimiz IxD yani etkileşim kurgusunu şart koştuğundan, özellikle interaktif prototip hazırlama halen zor ve zahmetli iştir. Bana güvenin 🙂
Yukarıdaki tanımlamam, “Aman! Wireframe ve Mockup neyinize yetmiyor. Prototipten kaçının” sonucunu çıkartmamalı. Tam aksine, hızlı karar alabilmek, tasarım çözümünüzü test edebilmek ve hatta ileri seviye görsel referanslı bir prototip hazırlayıp, bitmiş iş yerine göstererek “Bakın, işi bitirdik” diye müşterilerinizi sevinç selinde boğabilmek mümkündür.
Yine çok severek kullandığımız araçlardan birisi olan Invision’ın prototip yaratım sürecini ne kadar basit bir düzleme çekebildiğini sergileyen aşağıdaki video ile bu yazıma da son vermek istiyorum.
