Kullanıcı testlerinde sık karşılaşılan bir an vardır: Katılımcı giriş ekranında duraksar, bir şeyler yazar ve başını kaldırıp 'Doğru yapıyor muyum?' der gibi size bakar. O an, prototipin gerçek bir uygulama olmadığını anladığının işaretidir. O andan sonra toplanan her veri, bu farkındalığın filtresinden geçer. Finansal ürün testlerinde bu sorun daha da belirgindir. Finans kullanıcıları, bir şeylerin ters olduğunu hemen fark eder: Hesaplamayan bir bakiye, her şeyi kabul eden bir alan. Bankacılık prototipi gerçek kimlik doğrulamayı atlarsa, katılımcılar sadece ilgisiz kalmaz, 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 kurulduğu anı belirleyin ve bu etkileşimi gerçek yapın. Bankacılık uygulamasında bu an, giriş ekranıdır. Bu eğitim, kimlik bilgilerini doğrulayan, canlı hata durumu gösteren ve iOS kadar doğal hissettiren bir Face ID animasyonu içeren bir login akışı oluşturmanızı sağlar. Hiç kod yazmanız gerekmez.
İhtiyacınız olanlar: Figma'dan (veya desteklenen herhangi bir tasarım aracından) bir login UI'ı, ProtoPie Studio (ücretsiz plan yeterli), Face ID animasyonu için bir Lottie dosyası ve referans olarak Pie Bank prototip dosyası. Adımları takip etmek için prototip dosyasını indirebilir veya kendiniz oluşturduktan sonra karşılaştırma yapabilirsiniz.
İlk adım, Figma'dan sahne olarak içe aktarmaktır. 'Flattened' seçeneği her şeyi tek bir görüntüde birleştirirken, 'Scene' katman hiyerarşinizi korur ve her öğeyi ayrı bir hedef katman olarak getirir. ProtoPie'ye geçmeden önce her katmanı anlamlı bir şekilde yeniden adlandırın: 'Dikdörtgen 14' değil, 'Kullanıcı Adı Girişi'. Bu isimleri formüllerde kullanacağınız için anlamsız isimler zaman kaybettirir.
Statik alanları gerçek metin girişi yapabilen Input katmanlarıyla değiştirin. ProtoPie'nin Input katmanı klavyeden gerçek giriş alır: katılımcılar sadece yer tutucuya dokunmak yerine gerçek metin yazar. Kullanıcı adı alanınızın içine bir Input katmanı sürükleyin, görsel olarak eşleştirin ve yer tutucu metni 'Kullanıcı Adı' olarak ayarlayın. Önizleme yapın, alana tıklayın ve yazın. Şimdi prototip, bir uygulamayı resmetmektense gibi davranmaya başlıyor. Şifre alanı için de aynı işlemi tekrarlayın, ancak Türü 'Metin Şifre' olarak ayarlayarak karakterlerin maskelenmesini sağlayın.
Sonuç ve Değerlendirme
Navigasyon için önce hedef sahneyi oluşturun. Boş bir sahne ekleyin, ardından Giriş Yap butonuna bir Tap tetikleyicisi ekleyin, Jump yanıtı olarak hedef sahneyi seçin ve geçiş animasyonu ekleyin. Ancak bu haliyle her girdi kabul edilir. Bunu düzeltmek için değişkenler ekleyin: iki adet Metin türünde değişken oluşturun (kullaniciAdi ve sifre), bunları Input katmanlarına bağlayın. Ardından Giriş Yap butonunun Tap tetikleyicisine bir Koşul ekleyin: kullaniciAdi '[email protected]'a eşit VE sifre 'ABC123'e eşit olmalı. Jump yanıtını bu koşulun içine taşıyın. Yanlış bilgiler veya boş alanlar geçişe izin vermez. Hata durumu için, hata mesajı katmanının opaklığını başlangıçta 0 yapın, ters koşula (doğrulama başarısız) bir Değiştir (Change Property) yanıtı ekleyerek opaklığı 100 yapın. Son olarak Face ID animasyonu için bir Lottie katmanı ekleyin ve ekran dışına konumlandırın. Artık prototipiniz sadece doğru kimlik bilgileriyle giriş yapılmasına izin veriyor, hataları gösteriyor ve gerçek bir uygulama hissi veriyor.
Kaynak: smashingmagazine.com
