Kullanıcı deneyimi testlerinde sık karşılaşılan bir an: katılımcı giriş ekranında duraklar, bir şeyler yazar ve ardından size bakar. Bu bakış, 'Acaba doğru mu yapıyorum?' sorusunun yanıtını arar. İşte o an, prototipinizin gerçek bir uygulama olmadığını anladıklarının işaretidir. Bu andan sonra toplanan her veri, bu farkındalığın gölgesinde kalır. Özellikle finansal ürün testlerinde bu durum daha da belirgindir. Kullanıcılar, bir bakiye tutarsızlığı veya herhangi bir girdiyi kabul eden bir alan gördüklerinde hemen şüphelenirler. Gerçek bir kimlik doğrulama adımı olmayan bir bankacılık prototipi, kullanıcıların ilgisini kaybetmesine ve test oturumunun yarıda kalmasına neden olur. Sonuçta elde edilen bulgular, gerçek bir ürünü değil, bir demo deneyimini yansıtır.
Bu sorunun çözümü aslında düşündüğünüzden daha basittir. 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, giriş ekranıdır. Bu yazıda, kimlik bilgilerini doğrulayan, canlı hata durumu gösteren ve iOS'taki gibi hissettiren bir Face ID animasyonu içeren bir giriş akışını nasıl oluşturacağınızı adım adım anlatacağız. Hiçbir kod yazmanıza gerek yok. ProtoPie Studio ile bu işlemi ücretsiz olarak gerçekleştirebilirsiniz. İhtiyacınız olan şeyler: Figma'dan bir giriş arayüzü, ProtoPie Studio, bir Lottie dosyası ve örnek prototip dosyası.
İlk adım, Figma'dan sahne olarak dışa aktarmaktır. ProtoPie eklentisini kullanarak giriş karenizi seçin ve 'Scene' seçeneğiyle dışa aktarın. 'Flattened' seçeneği tüm katmanları tek bir görüntüde birleştirirken, 'Scene' katman hiyerarşinizi korur. Ardından, her katmanı anlamlı bir şekilde yeniden adlandırın. 'Input Username' gibi isimler kullanın, 'Rectangle 14' gibi genel isimlerden kaçının. Bu, daha sonra formüller kullanırken zaman kazandıracaktır.
Nasıl Önlem Alınmalı?
İkinci adım, statik alanları gerçek metin girişi yapabilen alanlarla değiştirmektir. ProtoPie'nin Input katmanı, klavyeden gerçek giriş yapılmasına olanak tanır. Text > Input bölümünden bir Input katmanı sürükleyin ve kullanıcı adı alanınızın içine yerleştirin. Görsel olarak eşleştirin: yer tutucu metin 'Username', arka plan rengi ve yazı tipi tasarımınıza uygun olsun. Önizleme yaparak alana tıklayın ve yazın. Artık prototip, bir uygulama gibi davranmaya başladı. Bu katmanı 'Input Username' olarak yeniden adlandırın, kopyalayın ve şifre alanınıza yerleştirin.
Sonuç ve Değerlendirme
Üçüncü adım, şifre alanını maskelemektir. Kopyaladığınız katmanda yer tutucu metni 'Password' olarak değiştirin ve Type'ı 'Text Password' olarak ayarlayın. ProtoPie maskelemeyi otomatik olarak halleder. İki alanı da önizleyin: kullanıcı adı metni gösterirken şifre noktalar halinde görünecek. Henüz tek bir koşul yazmamış olmanıza rağmen, prototip gerçekçi hissettirmeye başladı.
Dördüncü adım, navigasyonu bağlamadan önce hedef sahneyi oluşturmaktır. Yeni bir sahne ekleyin, boş olsa bile. ProtoPie'de en yaygın hata, hedef sahne olmadan navigasyon yanıtı oluşturmaya çalışmaktır. Beşinci adımda, 'Log In' düğmesine Tap tetikleyicisi ekleyin, yanıt olarak Jump'ı seçin, hedef olarak dashboard sahnenizi atayın ve geçiş efektini Slide in from right to left olarak ayarlayın. Önizleme yapın ve düğmeye tıklayın. Navigasyon çalışır, ancak herhangi bir girişte (boş dahil) çalışır. Prototip hala yalan söylüyor. Sonraki iki adım bu sorunu çözecek.
Altıncı adım, değişkenler eklemektir. ProtoPie'nin sol alt kısmında iki Text tipi değişken ekleyin: username ve password. Bunları ilgili giriş katmanlarına formüllerle bağlayın. Hata ayıklama simgelerini etkinleştirerek yazarken değişken değerlerini canlı olarak görebilirsiniz. Yedinci adımda, giriş düğmesindeki Tap tetikleyicisine bir Koşul ekleyin. İki kural belirleyin: username '[email protected]'a eşit olmalı ve password 'ABC123'e eşit olmalı. Jump yanıtını bu koşulun içine taşıyın. Yanlış kimlik bilgileri, boş alanlar veya hatalı format hiçbir şekilde geçişe izin vermez. Artık katılımcılar gerçekten giriş yapmak zorunda. Bu tek kısıtlama, sonraki her test oturumunun dokusunu değiştirecek.
Önemli Gelişmeler
Sekizinci adım, hata durumunu oluşturmaktır. Hata mesajı katmanınızı bulun, 'Error Text' olarak yeniden adlandırın ve başlangıç opaklığını 0 olarak ayarlayın. İlk koşulun tersi olan ikinci bir koşul ekleyin ve içine Error Text opaklığını 100 yapan bir Change Property yanıtı ekleyin. Yanlış kimlik bilgilerinde hata mesajı görünür, doğru bilgilerde dashboard'a gidilir. İki sonuç: test edilebilir hale gelen bir prototip. Dokuzuncu adımda, Face ID animasyonunu ekleyin. Media bölümünden bir Lottie katmanı sürükleyin, Face ID dosyanızı yükleyin ve ekranın üstünde, görünmeyecek bir konuma yerleştirin. Bu detay, test kullanıcılarının 'Bu gerçek mi?' diye sormasına neden olacak.
Kaynak: smashingmagazine.com
