SHERPA’da nasıl prototipleme yapıyoruz?

Aslında prototipleme olanakları gerçekten sınırsız. Birkaç kağıt ve kartonla dijital ekranlar için bile prototipleme yapabileceğiniz gibi, 3 boyutlu yazıcılar ve dokunmatik ekranlarla birlikte, basit bir devre kartlarını kullanarak basit ama çok geniş bir kullanım alanına sahip prototipler oluşturabilirsiniz. Prototipleme sürecinin en hassas noktası da bu aslında. Elinizdeki olanaklardan önce, hedeflerinizi nasıl karşılayabileceğinize ve en az eforu harcamaya odaklanmanız gerekiyor. Çünkü prototipleme süreçlerinin asıl hedefi en az eforla kullanıcılarınıza gerçek ürün deneyimine en yakın şeyi sunmak ve onlarda geri dönüş alabilmektir. Bu sayede asıl ürünü geliştirme eforuna girmeden önce sunduğunuz deneyimle ilgili kullanıcılarınızın davranışlarını gözlemleyerek çok önemli bilgiler almanızı sağlayacak. Bu da aslında kullanıcı araştırmalarının ne kadar önemli olduğu hatta ürün geliştirme sürecinde harcayacağınız efor etkisini, bunun maliyet açsından değerlendirmesine kadar çok kapsamlı bir etki alanı olduğunu gösteriyor.

Bu yüzden, biz de öncelikli olarak elimizdeki en basit prototipleme yöntemi olan çevrimi araçlara odaklanarak bunların ihtiyaçlarımızı karşılayamadığı noktaları tespit edip, bunları nasıl çözebileceğimize odaklandık.

Bu konuda 3 ana hedefimiz vardı:

1. Prototip oluşturma eforunu azaltmak,
2. Hazırladığımız arayüz tasarımlarını daha düzgün bir biçimde aktarabileceğimiz bir yöntem bulmak ve
3. Gerçek deneyime daha yakın prototipler oluşturmak.

Buradan hareketle, öncelikle prototipleme süreçlerinde karşılaştığımız problemlerden bahsedelim:

Güncelleme problemleri ve tekrar eden işleri ortadan kaldırmanın zorluğu

Online prototipleme araçlarında eklenen her bir element birbirinden bağımsız ve bu durum, ortak bir komponent (bileşen) yapısı kullanmanızı engelliyor. Eklediğiniz her element birbirinden bağımsız olarak sadece görsel elementlerden oluşuyor. Bunların kontrolünü sağlamak, ortak bir noktadan yönetip değiştirebilmek çok zor. Özellikle geniş kapsamlı bir prototip çalışmasında basit güncellemeler için çok vakit kaybetmenize sebep olabiliyor.

Gerçek kullanıcı aksiyonlarıyla ilgili karşılaşılan teknik kısıtlar

Prototipler her zaman basit UI çıktılarından ibaret olmayabiliyor. Aslında prototip hazırlama ihtiyacı doğuran tasarımlar çoğunlukla kullanıcı-bilgisayar etkileşiminin çok yüksek olduğu daha karmaşık sistemler üzerinde ortaya çıkıyor. Kullanıcı giriş ve kayıt formları, bir siparişi oluşturmak ya da iptal etmek ya da bir bulaşık makinesini bir programı seçerek çalıştırmak gibi kullanıcı için asıl problem noktalarını oluşturan noktalarda, araştırma sürecini yürütmek daha önemli bir oluyor.

Bu tip karmaşık kullanıcı aksiyonları için, kullandığımız çevrimiçi araçlar yetersiz kalabiliyordu. Testleri, ya bu araçlarda arka tarafta bazı değişikliklerle “mış” gibi yaparak ya da kullanıcıyı test sırasında bu adımlarla ilgili yönlendirerek yürütmek zorunda kalıyorduk.

Örneğin; bir sistemde giriş yap ve kayıt ol süreçlerini test etmek istiyorsunuz. Bu durumda genelde kullanıcıya bir test e-posta adresi ve şifre vererek test, yürütebiliyorsunuz. Ancak bu, normal bir kayıt olma süreci içerisinde kullanıcılarınızın karşılacağı bir çok sistemde karşınıza çıkabilecek validasyon mesajlarını görmemenize, kullanıcıların buna vereceği tepkileri ve yapacağı tercihleri aksiyonları gözden kaçırmanıza sebep olabiliyor.

Bu yöntemle ilerlemek, “Kullanıcınız sosyal medya hesaplarıyla kayıt olmayı mı tercih ediyor?”, “Etmiyorsa, bununla ilgili nasıl bir karar veriyor?” ya da “Şifresini belirlerken karşısına çıkan validasyon mesajlarını doğru bir şekilde algılayabiliyor mu?” gibi soruları — eğer testinizin amaçları özellikle bu konularsa — tamamen gözden kaçırmanıza sebep olabilir. Bu tip prototipleme araçlarıyla bu tip ek düzenlemeleri yapmak ya imkansız ya da çok fazla efor gerektiriyor.

Bazı özellikleri bilgisayarlar için kısıtlı da olsa kullanabiliyorsunuz ancak özellikle mobil cihazlarla ilgili bir prototip hazırlamak istediğinizde iş daha da zorlaşıyor. Mobil cihazlar için bunlar her ne kadar çok temel özellikler olsa da, neredeyse hiçbir varsayılan cihaz özelliğine erişemiyorsunuz.

Oysa bu özellikler HTML içerisinde varsayılan olarak gelen, farklı JavaScript eklentileriyle bile istediğimiz şekilde tasarıma göre özelleştirip uygulayabileceğimiz çok basit yapılar. Örneğin tarih seçimi ya da input tipini e-posta ya da rakam olarak belirlediğinizde buna göre özelleşen klavye görünümü gibi.

Bu yapıları oluşturmak da diğer prototipleme araçlarına göre çok daha kolay ve az zaman alıyor. Bu tip yapılar prototipleme araçlarında çoğunlukla sadece görüntü olarak eklenebiliyor ve kullanıcının bunlarla etkileşime geçmesi kısıtlamalar dahilinde olabiliyor ya da bazı durumlarda bunu da sağlayamıyorsunuz.

Ayrıca mobil cihazlarda, cihazın varsayılan input özelliklerini kullanamamak, yürütülen testlerde kullanıcıya gerçek ürün deneyimi sunabilmemizin de önüne geçebiliyor.

Kullanıcıya gerçek bir ürün hissiyatını verememek

Basit prototipleme araçlarında oluşturduğunuz prototipler aslında görsel öğeler ve bunların pozisyonlanmasıyla oluşturuluyor. Aslında Sketch ya da Figma gibi araçlarda hazırlanan tasarımlar, ekranlar arasındaki geçişler ve animasyonlar eklenmesinden ibaret. Ancak gerçek bir üründe en önemli kısım, kullanıcının bu tasarımla etkileşime geçtiği; kayıt olabildiği, formları doldurabildiği, talepte bulunduğu, satın alma gerçekleştirdiği aşama. Buna rağmen bu tip adımların prototipleme araçlarıyla yapılamaması, ortaya çıkardığımız bu prototipin gerçek ürün deneyiminden çok uzak bir noktada kalmasına neden olabiliyor.

Karşılaştığımız en belirgin kullanıcı davranışlarından bir tanesi de kullandığı cihazla ilgili bir problemle karşılaştığında bunu çözmek için farklı yollar denemeleri. Ancak sadece tıklanabilir basit prototiplerde pasif olarak eklediğimiz alanlar çoğaldıkça, kullanıcıların nasıl bir yol izleyerek karşılarındaki çıkmazdan kurtulabildiklerini tespit etmekte zorlanıyoruz — ki aslında kullanıcıların hareket alanını genişleterek yürüttüğümüz araştırmalarda bunları tespit edebilmek, davranışlar hakkında çok daha fazla veri elde edebilmemizi de sağlıyor.

Özellikle mobil cihazlarda bir uygulama üzerinde test yaparken, kullanıcınızın uygulamayı nasıl kullandığı, telefonu test sırasında normal yaşantısındaki gibi kullanıp kullanamadığı bile testin niteliği ve amaçları açısından bir değer taşıyor olabilir. Kullanıcınızın bir uygulamanın giriş ekranıyla nasıl karşılaştığı bile değerli bilgiler elde etmenizi sağlayabilir.

Prototipleme süreciyle ilgili nasıl bir yol izliyoruz?

Statik sayfalar ve basit etkileşimlere dayalı prototip ihtiyaçlarımız için çevrimiçi araçlar ihtiyaçlarımızı yeterli düzeyde karşılıyor. Bu yüzden sadece tıklanabilir basit arayüzlerle test yapma ihtiyacımız olduğu durumda InVision ve Figma gibi araçları kullanarak prototipleme süreçlerimizi yürütmeye devam ediyoruz.

Özellikle Figma’nın prototip aracı doğrudan tasarım çıktıları üzerinden bir prototip oluşturmak istediğinizde size çok ciddi zaman kazandırabiliyor. Hem kullanımı kolay hem de size sapladığı prototip için özel bağlantıyı doğrudan testleri gerçekleştirmek için kullanabiliyorsunuz. Farklı interaksiyonları da (swipe, touch, scroll vs.) kullanmanıza olanak sağlıyor

Daha karmaşık ve kullanıcı etkileşiminin çok daha fazla olduğu durumlardaysa HTML/CSS kullanarak oluşturduğumuz basit prototipleri kullanmaya başladık. Uzun süredir de bu şekilde yapmaya devam ediyoruz. Bu bize çok büyük bir esneklik sağladı ve karşılaştığımız birçok problemi daha hızlı çözebildik.

Daha hızlı aksiyon alabilmek için kullandığımız prototipleme araçlarını sınıflandırarak ihtiyaçlarımıza göre kullanabileceğimiz durumları belirledik:

HTML ve CSS

Basit veri akışı ve formların olduğu, form verilerinin herhangi bir kayıt ol veya giriş yapma zorunluğu olmayan prototipler için doğrudan HTML üzerinde oluşturduğumuz temel yapı üzerinde kullanıcıyı gerçekten ilgilendirmeyecek header ve footer ya da dikkate alınmayacak menüler gibi alanları birer görsel olarak ekleyip, testte odaklandığımız alanları doğrudan HTML/CSS ile oluşturduk. HTML ile oluşturduğumuz bu prototipler yukarıda da değindiğimiz varsayılan cihaz özelliklerine kolayca erişerek çok daha kullanışlı bir yapı oluşturmamızı sağladı. Ayrıca tekrarlanarak devam eden, ürün listeleri gibi ortak elementlerin üzerinde CSS’le çok hızlı bir şekilde değişiklik yapabilmemiz de bize zaman kazandıran önemli noktalardan birisi oldu.

Gerçek kullanıcı aksiyonları için ekleme ihtiyacımız olduğu durumlarda JavaScript en büyük yardımcımız oldu ve bize çok daha esnek bir çalışma alanı sağladı. Hemen hemen her konuda bulabileceğiniz bir JavaScript eklentisi mutlaka var. Bunları, hazırladığımız prototiplere hızlı bir şekilde entegre ederek çok hızlı bir şekilde sonuç alabildik.

Çerezler ve Local storage

Veri alış verişlerini ve kullanıcıların girdiği veriler üzerinden yaptıkları işlemlerde local storage ve cookie’leri kullandık. Böylelikle oluşturduğumuz testlerde kullanıcıların kendi girdikleri veriler üzerinden işlem yapabilecekleri bir ortam oluşturduk ve test oturumu boyunca bu veriler üzerinden testi devam ettirebilmeyi sağladık.

Bu verileri kullanabilmek, kullanıcıyı test sürecinde yönlendirmemiz gereken durumları da en aza indirmemizi sağladı. Özellikle uzaktan çalışma sürecinde yürüttüğümüz testlerde bunun çok fazla faydasını gördük. Kullanıcıyı başka bir URL’e yönlendirmek zorunda kalmadan paylaştığımız tek bir bağlantıyla gerçekten o ürünü kullanıyormuş gibi bir deneyimle testi tamamlayabilmelerini sağladık.

Bu tip prototipler, testi yürüten araştırmacının müdahale etmesi gereken noktaları en aza indirmemizi sağladığı için de testin güvenilirliğini olumlu açıdan etkiledi.

PWA (Progressive Web Apps)

Özellike mobil uygulama testleri yaparken bir başka mobil uygulama/web sitesi teknolojisi olan PWA (Progressive Web App)’leri kullandık. PWA’ler aslında bir web sitesini telefonunuzdan bir mobil uygulama gibi çalıştırabilmenizi sağlayan bir teknoloji. Biz bunu bir mobil web sitesi olarak hazırladığımız uygulama arayüzlerini PWA’le kullanıcıların bir mobil uygulaması içerisindeymiş gibi test edebilmelerini sağladık. Kamera ve diğer birçok native cihaz özelliğine de kolayca erişebildiğimiz için PWA’ler yukarıdaki özellikleri de kullanarak kapsamlı bir prototip geliştirmenize olanak sağladı.

Firebase

Veri akışı ve farklı formlarla birlikte giriş yap ya da kayıt ol gibi fonksiyonlara ihtiyacımız olduğu, hatta bir e-posta doğrulama ya da bildirim işlemlerine ihtiyacımız olacağı daha karmaşık prototipler için de Firebase’i kullanmaya başladık. Firebase ile basit bir kayıt olma ve giriş yapma sistemi oluşturmak çok kolay. Birkaç fonksiyonla bu tip karmaşık ve çok zaman harcamanız gereken işlemleri hızlıca yapabilmemizi sağladı. Hatta sosyal medya hesaplarıyla yapmak istediğiniz kayıt olma işlemlerini bile basit birkaç ayarlamayla hayata geçirmeniz mümkün.

Yine Firebase üzerindeki veritabanı sistemini kullanarak çok hızlı bir şekilde entegre edebileceğiniz bir veritabanına sahip olabiliyorsunuz. Bu veritabanı üzerinde yine önceden tanımlanmış basit firebase fonksiyonlarıyla bir çok işlemi yaptırabilir, gerçek veriler üzerinden testlerinizi yürütebileceğiniz bir prototip oluşturabilirsiniz. Firebase veya Google Spreedsheet’e aktardığınız verilerle Zapier gibi araçlar üzerinden kuracağınız bir kaç entegrasyonla bir çok farklı API’a erişebilir; bunları da oluşturacağınız prototipler için basit bir şekilde bir araya getirebilirsiniz.

Raspberry Pi ve Arduino

Fiziksel ürünler için yaptığınız tasarımlarla ilgili oluşturacağınız prototiplerde de Raspberry Pi ve Arduino gibi basit devre kartlarını kullanabilirsiniz. Bu, yazılım bilgisi gerektiriyor olsa da hemen hemen her yerden erişebileceğiniz dokunmatik ekranlar, çeşitli kontrol elemanları ve butonları bir araya getirerek bu tip kapsamlı yapılar için bile düşük maliyetle ve çok kısa bir süre içerisinde bu tip prototipleri hayata geçirebilmemiz mümkün.