Hemen her kullanılabilirlik testi oturumunda bir an vardır: Katılımcı login ekranında duraksar, bir şeyler yazar ve başını kaldırıp 'Doğru yapıyor muyum?' der gibi bakar. Bu duraksama, katılımcının bunun gerçek bir uygulama olmadığını fark ettiğinin açık işaretidir. O andan sonra toplanan her veri, bu farkındalığın süzgecinden geçer. Özellikle finansal ürün testlerinde bu sorun daha keskindir. Finans kullanıcıları, bir şeylerin ters gittiğini hemen anlar: tutmayan bir bakiye, her şeyi kabul eden bir alan. Bankacılık prototipleri gerçek kimlik doğrulamayı atladığında, kullanıcılar sadece ilgisizleşmez; oturumu durdurup durumu bildirirler. Ekip, gerçek bir ürünü değil, bir gösterimi yansıtan bulgularla ayrılır.
Çözüm, düşündüğünüzden daha dardır. Kullanıcı güveninin oluştuğu anı belirleyin ve bu etkileşimi gerçekçi hale getirin. Bir bankacılık uygulamasında bu an, login ekranıdır. Bu eğitimde, kimlik bilgilerini doğrulayan, canlı hata durumu gösteren ve iOS'taki hissiyatıyla birebir örtüşen bir Face ID animasyonu içeren bir login akışı oluşturacağız. Üstelik hiç kod yazmadan.
Ne inşa ediyoruz? Pie Bank adlı mobil bankacılık prototipi üzerinde, fonksiyonel metin girişleri, maskelenmiş şifre alanı, kimlik doğrulama, canlı hata durumu ve iOS'ten ayırt edilemeyecek zamanlamada bir Face ID animasyonu içeren bir login akışı. İhtiyacınız olanlar: Figma'dan bir login arayüzü (veya desteklenen herhangi bir tasarım aracı), ProtoPie Studio (ücretsiz plan yeterli), Face ID animasyonu için bir Lottie dosyası ve referans olarak kullanabileceğiniz tamamlanmış Pie Bank prototip dosyası.
Adım 1: Figma'dan Scene olarak içe aktarın. Flattened seçeneği her şeyi tek bir görüntüde birleştirir; Scene ise katman hiyerarşisini korur. Adım 2: Statik alanları gerçek metin girişine dönüştürün. ProtoPie'nin Input katmanı, klavyeden gerçek giriş kabul eder. Adım 3: Şifre alanını maskelemek için Type özelliğini Text Password yapın. Adım 4: Navigasyonu bağlamadan önce hedef sahneyi oluşturun. Adım 5: Butona Tap tetikleyicisi ve Jump yanıtı ekleyin. Ancak bu haliyle herkesi içeri alır.
Adım 6: Değişkenler ekleyerek prototipin yazılanları hatırlamasını sağlayın. İki metin değişkeni (username ve password) oluşturun ve her birini input("Input Username").text formülüyle ilgili giriş katmanına bağlayın. Adım 7: Sadece geçerli kimlik bilgilerinin geçmesine izin veren bir koşul ekleyin. Tap tetikleyicisine, username = [email protected] ve password = ABC123 olacak şekilde iki kural ekleyin. Jump yanıtını bu koşulun içine taşıyın. Yanlış girdilerde hiçbir şey olmaz.
Sonuç ve Değerlendirme
Adım 8: Hata durumunu oluşturun. Hata mesajı katmanını bulun, başlangıç opaklığını 0 yapın. İkinci bir koşul (ilk koşulun tersi) ekleyin ve içine Change Property yanıtı ile opaklığı 100'e ayarlayın. Artık yanlış şifre girildiğinde hata mesajı görünür. Adım 9: Face ID animasyonunu ekleyin. Media'dan Lottie katmanı sürükleyin, Face ID dosyanızı yükleyin ve ekran dışına konumlandırın. Doğru kimlik bilgileri girildiğinde, Lottie katmanının konumunu ekranın ortasına kaydıracak ve oynatacak bir animasyon tetikleyin. Bu küçük detay, test kullanıcılarının 'Bu gerçek mi?' diye sormasına neden olur.
Bu adımları uyguladığınızda, prototipiniz sadece bir demo olmaktan çıkar. Kullanıcılar, gerçek bir uygulama ile etkileşime girdiklerini hisseder ve davranışları da buna göre şekillenir. Topladığınız veriler, gerçek kullanım senaryolarını yansıtır. Unutmayın, prototip ne kadar gerçekçi olursa, kullanılabilirlik testlerinden elde ettiğiniz içgörüler de o kadar değerli olur.
Kaynak: smashingmagazine.com
