Her kullanılabilirlik testi oturumunda neredeyse bir an vardır: Katılımcı giriş ekranında durur, bir şeyler yazar ve başını kaldırıp 'Doğru yapıyor muyum?' der gibi bakar. Bu duraksama açık bir işarettir. Katılımcı, bunun gerçek bir uygulama olmadığını çoktan anlamıştır ve o andan sonra toplanan her veri, bu farkındalığın filtresinden geçer. Finansal ürün testlerinde bu sorun daha da keskindir. Finans kullanıcıları, bir şeylerin ters olduğunu hemen fark eder: tutmayan bir bakiye, her şeyi kabul eden bir alan. Bir bankacılık prototipi 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 sandığınızdan daha dardır: Kullanıcı güveninin kurulduğu anı belirleyin ve bu etkileşimi gerçek kılın. Bir bankacılık uygulamasında bu an giriş ekranıdır. Bu makalede, kimlik bilgilerini doğrulayan, canlı hata durumu gösteren ve iOS'taki kadar doğal hissettiren bir Face ID animasyonu içeren, kod gerektirmeyen bir giriş akışı oluşturacağız. Pie Bank adlı mobil bankacılık prototipi etrafında inşa edilen bu akış; işlevsel metin girişleri, maskelenmiş şifre alanı, kimlik doğrulama, canlı hata durumu ve iOS'tan ayırt edilemeyecek zamanlamada bir Face ID animasyonu içerir.
Neye ihtiyacınız olacak? Figma'dan (veya desteklenen herhangi bir tasarım aracından) bir giriş arayüzü, ProtoPie Studio (ücretsiz plan yeterli), Face ID animasyonu için bir Lottie dosyası ve tamamlanmış Pie Bank prototip dosyası (referans olarak kullanmak için). İlk adım, Figma'dan içe aktarma yaparken 'Scene' seçeneğini kullanmaktır. 'Flattened' tüm katmanları tek bir görüntüde birleştirirken, Scene katman hiyerarşinizi korur ve her öğeyi ayrı ayrı hedeflenebilir katmanlar olarak ProtoPie'ye getirir. Devam etmeden önce her katmanı anlamlı bir şekilde yeniden adlandırın: 'Rectangle 14' yerine 'Input Username' gibi.
Uzmanların Görüşleri
İkinci adımda, statik alanları gerçek metin girişi kabul eden alanlarla değiştirin. ProtoPie'nin Input katmanı gerçek klavye girişini destekler. Metin alanınızın içine bir Input katmanı sürükleyin, görsel olarak eşleştirin ve 'Input Username' olarak adlandırın. Ardından şifre alanı için kopyalayın ve Type'ı 'Text Password' yapın; ProtoPie maskeleme işlemini halleder. Üçüncü adımda, navigasyonu bağlamadan önce hedef sahneyi oluşturun. 'Log In' düğmesine bir Tap tetikleyicisi ekleyin, Jump yanıtı verin ve hedef olarak dashboard sahnesini seçin. Ancak bu haliyle herkesi içeri alır; bir sonraki adımlar düzeltmeyi sağlar.
Dördüncü adımda, prototipin yazılanları hatırlaması için değişkenler ekleyin. İki metin değişkeni (username ve password) oluşturun ve her birini ilgili giriş katmanına formüllerle bağlayın. Debug simgelerini etkinleştirerek canlı değerleri görebilirsiniz. Beşinci adımda, yalnızca geçerli kimlik bilgilerinin geçmesine izin veren bir koşul ekleyin. Tap tetikleyicisine bir Condition ekleyin: username '[email protected]'a eşit VE password 'ABC123'e eşit olmalı. Jump yanıtını bu koşulun içine taşıyın. Yanlış bilgiler veya boş alanlar geçemez. Altıncı adımda, hata durumunu oluşturun. Hata mesajı katmanının başlangıç opaklığını 0 yapın, ters koşulda opaklığı 100'e ayarlayın. Böylece iki sonuç elde edersiniz: yanlış girişte hata, doğru girişte dashboard.
Son adımda, Face ID animasyonunu ekleyin. Bir Lottie katmanı sürükleyin, Face ID dosyanızı yükleyin ve ekranın üstüne, görünmeyecek şekilde konumlandırın. Animasyonu tetiklemek için bir gecikme veya başka bir koşul ekleyin. Bu küçük detay, test kullanıcılarının 'Bu gerçek mi?' diye sormasına neden olur. Tüm bu adımlar, prototipinizin kullanıcılara yalan söylemesini engeller ve testlerden gerçek kullanıcı davranışına dair güvenilir veriler toplamanızı sağlar. Unutmayın, amaç sadece göstermek değil, test edilebilir bir deneyim sunmaktır.
Kaynak: smashingmagazine.com
