S05B01 — Dijital Prototipleme
Dijital Prototipleme Nedir? Nasıl Yapılır?
Selamlar, ben Buse. Bu yazımda size Dijital Prototipleme konusundan bahsedeceğim, gelin bu konuyu hep birlikte öğrenelim. İsterseniz yazımı okuyarak, isterseniz de ITUX Topluluğu’nda bu konuyu anlattığım videoyu izleyerek bize katılabilirsiniz. Keyifli okumalar!
Tanım
Prototip, bir kavramı, süreci veya öğrenilecek bir örneği test etmek için üretilen bir ürünün erken bir örneği veya modelidir.
Dijital ürün için bir prototip, çeşitli farklı ortamlar kullanılarak yapılabilir. Örneğin; kağıt üzerindeki çizimler, tıklanabilir statik tasarımlar veya HTML, CSS ve JS ile yapılan daha gelişmiş prototipler.
Neden Önemli, Faydaları Neler?
Tasarım yaparken arayüz ekranlarının arasında kaybolabiliyoruz ve detaylarda kaybolarak genele bakıp hataları belirlemekte güçlük çekiyoruz. Ve bazen de yaptığımız tasarımın asıl kullanıcı kitlesi kendimizden çok uzak olabiliyor, gerçek kullanıcı gibi düşünmekte zorlanıyoruz. Bir prototiple kullanılabilirlik testlerinin önemi de burada ortaya çıkıyor. Bir dijital prototiple gerçek kullanıcıyı tasarım aşamalarında ürünle buluşturabiliyoruz.
Herhangi bir aracı kullanarak yaptığınız bir prototip, bir fikrin veya yeni bir tasarımın acı ve kazançlı yollarını, tüm normal üretim adımlarından geçmeden belirlemenin kolay bir yolu oluyor.
Son ürünü çıkarmadan, üründeki hataları bir prototiple test edip belirlemek hem maddi açıdan hem de zamandan tasarruf sağlıyor.
“Bir resim 1000 kelimeye bedelse, bir prototip 1000 toplantıya değer.” — IDEO
Tasarımcı ve yazılımcı arasındaki iletişimi kolaylaştırıyor. Örneğin, bir mobil app tasarladık, ekranlar arasında geçişleri ve butonların tıklandığı andaki değişimini yazılımcıya bir şekilde aktarmamız lazım. Yazılımcının aklımızdakini sözlü ifade ile kavrayabilmesi imkansız değilse bile çok zamanımızı alır. Bir dijital prototiple, hatta prototipin videosuyla, yazılımcı tasarladığımız geçişleri çok kolay bir şekilde kavrayabilir, tasarladığımız ürün ve yazıldıktan sonraki ürün arasında uçurumlar olmaz.
Nasıl Dijital Prototipleme Yaparım?
Nasıl wireframe yapacağımızı Arda’nın yazısından öğrendik, tekrar inceleyebilirsiniz. Dijital prototipleme yapmak da wireframe yapmanın aslında sadece bir tık ötesinde. En basitinden, bir kağıda elinizle çizdiğiniz wireframe şeklindeki ekranların fotoğraflarını çekip, bir prototip aracına aktarıp, çiziminizdeki butonları ekranlarınız arasında bağlayıp, çizim üzerinden bir dijital prototip yapabilirsiniz.
Bir ileri seviye olarak: Yaptığınız wireframeleri ya da ekranları UI Kit elementlerinizi kullanarak bir araç üzerinden çizip, son ürüne yakın olan ekranlarınızdaki butonları birbirine bağlayıp, bir dijital prototip yapabilirsiniz. Şimdi kağıt üzerine çizimlerin daha ötesinde bir dijital prototipleme yapmak istediğimizde kullanabileceğimiz bu araçları öğrenelim.
Dijital bir ürünü prototiplemek için:
gibi araçları kullanabilirsiniz.
Adım Adım Dijital Prototipleme
İTÜ Mobil uygulamasına yaptığımız re-design örneğinin Dijital Prototiplemesini Adobe Xd üzerinden adım adım oluşturmayı anlatmaya başlıyorum.
- Adım 1: Prototip Sekmesine Geç
Arayüz tasarımlarını yukarıdaki Adobe Xd ekranında gördüğümüz sol üstteki “design” kısmında yapıyoruz. Bu kısımda yaptığımız ekranları prototiplemek için “prototype” sekmesine tıklayıp geçiyoruz.
- Adım 2: İlişkilendirme
Prototiplemeye başlamaya hazırız. Bunu yapmak için de ilgili butonları tıklanınca gideceği ilgili ekranla ilişkilendirerek dijital prototiplemeye devam edebiliriz. Bunun için de butonu seçip üzerinde çıkan oku butona basınca gitmek istediğimiz sayfaya doğru çekip bırakarak kolayca yapabiliyoruz.
- Adım 3: Sayfalar Arası Geçiş Ayarları
Butonlarla ekranları ilişkilendirme sırasında ilişkilendirme yaptığımız ok seçili durumdayken sağ tarafta bu ekran geçişinin nasıl sağlanacağına dair ayarlar bulunuyor. Bu kısımdan sayfa yukarı, aşağı, sağa ya da sola kayarak geçsin diye seçimler ve ayarlamalar yapabiliyoruz. Kurcalamanızı öneririm.
- Adım 4: Önizleme
Yaptığımız her ilişkilendirmede ve geçiş ayarlarında her adımda ön izleyip nasıl olduğuna bakabiliriz. Geçiş ayarlarını kurcalarken her farklı ayarın ne olduğunu öğrenmek için her ayarda önizleyerek kolayca kavrayabiliriz.
Adobe Xd ve benzeri araçları kullanıp yaptığınız prototipi Kullanılabilirlik Testleri kısmında öğreneceğimiz gibi kullanıcılarla testler yaparak hataları belirleyip, hataları düzeltip, tekrar prototipleyip, tekrar test yaparak hedefimizdeki son ürüne ulaşana kadar bu döngüyü tekrarlayabiliriz.
Teşekkürler!
Yazının sonuna gelmiş bulunuyoruz, okuduğunuz için çok teşekkürler. Benimle Linkedin üzerinden bu konuda ve her konuda iletişime geçebilirsiniz.
