Kullanılabilirlik testlerinin neredeyse her birinde, katılımcının giriş ekranında duraksadığı, bir şeyler yazdıktan sonra başını kaldırıp 'doğru yapıyor muyum?' diye baktığı bir an vardır. Bu duraksama, prototipin gerçek bir uygulama olmadığının farkına varıldığının açık işaretidir. O noktadan sonra toplanan her veri, bu farkındalığın gölgesinde kalır. Özellikle finansal ürün testlerinde bu sorun daha keskindir. Finans kullanıcıları, bir bakiye tutarsızlığı veya herhangi bir girdiyi kabul eden bir alan gibi 'yanlış' hissettiren durumları hemen fark eder. Bir bankacılık prototipi gerçek kimlik doğrulamayı atladığında, kullanıcılar sadece ilgisizleşmekle kalmaz, oturumu yarıda kesip durumu işaret ederler. Ekip, gerçek bir ürünün değil, bir gösterimin nasıl kullanıldığına dair bulgularla ayrılır.
Çözüm, düşündüğünüzden daha dardır: Kullanıcı güveninin tesis edildiği anı belirleyin ve bu etkileşimi gerçek kılın. Bir bankacılık uygulamasında bu an, giriş ekranıdır. Bu eğitimde, kimlik bilgilerini doğrulayan, canlı hata durumu gösteren ve iOS'tan ayırt edilemeyecek şekilde zamanlanmış bir Face ID animasyonu içeren, kod gerektirmeyen bir giriş akışı oluşturacağız. Pie Bank adlı mobil bankacılık prototipi üzerinden ilerleyeceğiz. İhtiyacınız olanlar: Figma'dan bir giriş UI'ı, ProtoPie Studio (ücretsiz plan bu eğitim için yeterli), bir Face ID Lottie dosyası ve bitmiş Pie Bank prototip dosyası (referans olarak kullanmak için).
Adım 1: Figma'dan içe aktarırken 'Sahne' seçeneğini kullanın. Figma'da, giriş çerçeveniz seçiliyken ProtoPie eklentisini açın ve dışa aktarırken 'Sahne'yi seçin. 'Düzleştirilmiş' her şeyi tek bir görüntüde birleştirirken, Sahne katman hiyerarşinizi korur ve her öğe ProtoPie'de ayrı, hedeflenebilir bir katman olarak gelir. Devam etmeden önce her katmanı anlamlı bir şekilde yeniden adlandırın: 'Input Username' gibi, 'Rectangle 14' değil. Formüllerde bu adları kullanacaksınız; belirsiz adlar zaman kaybına yol açar.
Adım 2: Statik alanları gerçek metin girişi kabul eden alanlarla değiştirin. ProtoPie'nin yerel Giriş katmanı, gerçek klavye girişini destekler; katılımcılar bir yer tutucuya dokunmak yerine gerçek metin yazar. Metin > Giriş bölümüne gidin, bir Giriş katmanını tuvalinize sürükleyin ve kullanıcı adı alan grubunun içine yerleştirin. Görsel olarak eşleştirin: yer tutucu metin 'Username', arka plan dolgusu ve yazı tipi tasarımınıza uygun olmalıdır. Önizlemeye tıklayın, alana tıklayın ve yazın. Prototip, bir uygulamayı resmetmek yerine onun gibi davranmaya başlar. Bu katmanı 'Input Username' olarak yeniden adlandırın, kopyalayın ve kopyayı şifre alan grubunun içine yerleştirin.
Adım 3: Tek bir özellik değişikliğiyle şifreyi maskeleyin. Kopyalanan katmanda, yer tutucu metni 'Password' olarak değiştirin ve Tür'ü 'Text Password' olarak ayarlayın. ProtoPie maskelemeyi halleder; özel bir mantık gerekmez. Her iki alanı da önizleyin: kullanıcı adı metni gösterir, şifre noktalar gösterir. Henüz tek bir koşul yazmamış olsanız bile, bu zaten gerçekçi hissettirir.
Gelecekte Ne Bekleniyor?
Adım 4: Navigasyonu bağlamadan önce hedef sahneyi oluşturun. Yeni bir sahne ekleyin, hatta boş bir tane bile olabilir. ProtoPie'de en yaygın sıralama hatası, bir hedef var olmadan önce navigasyon yanıtını bağlamaya çalışmaktır. Önce hedefi oluşturun.
Adım 5: Butonu bağlayın: çalışır, ancak yine de herkesi içeri alır. 'Log In' butonunu seçin, bir Tap tetikleyicisi ekleyin, yanıt olarak Jump'ı ayarlayın, hedef olarak dashboard sahnesini seçin, geçiş olarak Slide in from right to left seçin. Önizleyin ve dokunun. Navigasyon çalışır, ancak hiçbir giriş olmasa bile. Prototip hala yalan söylemektedir. Sonraki iki adım düzeltmedir.
Detaylar ve Etkileri
Adım 6: Değişkenler ekleyerek prototipin yazılanları hatırlamasını sağlayın. ProtoPie'nin sol alt kısmında iki metin tipi değişken ekleyin: 'username' ve 'password'. Her birini ilgili giriş katmanına bir formülle bağlayın: input("Input Username").text ve input("Input Password").text. Hata ayıklama simgelerini etkinleştirin: yeşil yer paylaşımları, yazarken canlı değişken değerlerini gösterir. Tuş vuruşlarınızı gerçek zamanlı olarak gördüğünüzde bağlama onaylanmıştır.
Adım 7: Yalnızca geçerli kimlik bilgilerinin geçmesine izin veren bir koşul ekleyin. Giriş butonundaki Tap tetikleyicisine geri dönün. İki kuralı olan bir Koşul ekleyin, her ikisi de doğru olmalıdır: username, '[email protected]'a eşit VE password, 'ABC123'e eşit. Jump yanıtını bu koşulun içine taşıyın. Yanlış kimlik bilgileri, boş alanlar, hatalı biçim: hiçbiri geçmez. Katılımcılar artık gerçekten giriş yapmak zorundadır. Bu tek kısıtlama, sonraki her test oturumunun dokusunu değiştirir.
Sistem Güvenliği
Adım 8: Çoğu prototipin atladığı hata durumunu oluşturun. Hata mesajı katmanınızı bulun, 'Error Text' olarak yeniden adlandırın, başlangıç opaklığını 0 olarak ayarlayın. İkinci bir koşul ekleyin (birincinin tersi) ve bunun içine Error Text opaklığını 100 yapan bir Change Property yanıtı ekleyin. Yanlış kimlik bilgileri: hata görünür. Doğru kimlik bilgileri: dashboard. İki sonuç: İşte bu, prototipi sadece gösterilebilir değil, test edilebilir kılar.
Sonuç ve Değerlendirme
Adım 9: Face ID animasyonunu ekleyin. Test uzmanlarının 'Bu gerçek mi?' diye sormasını sağlayan detay. Medya bölümüne gidin, bir Lottie katmanını tuvalinize sürükleyin, Face ID dosyanızı yükleyin ve ekranın üst kısmına, görünmeyecek şekilde konumlandırın. Ardından, giriş butonuna başarılı bir girişten sonra tetiklenecek bir animasyon ekleyin. Bu küçük dokunuş, prototipin gerçekçiliğini katlanarak artırır.
Kaynak: smashingmagazine.com
