Bu makale sponsorluğundadırProtoPie
Neredeyse her kullanılabilirlik oturumunda bir katılımcının oturum açma ekranında durakladığı, bir şeyler yazdığı ve yukarı baktığı bir an vardır: "doğru yapıp yapmadıklarını" kontrol etmek. Bu duraklama açık bir işarettir. Bunun gerçek bir uygulama olmadığını zaten anladılar ve o andan sonra toplanan her veri noktası bu farkındalıkla filtreleniyor.
Finansal ürün testlerinde sorun daha keskindir. Finans kullanıcıları, bir şeylerin yolunda gitmediğini fark edecek şekilde eğitilmiştir: hiçbir anlamı olmayan bir denge, her şeyi kabul eden bir alan. Bir bankacılık prototipi gerçek kimlik doğrulamayı atladığında katılımcılar yalnızca bağlantıyı kesmekle kalmaz; oturumun ortasında bunu işaretlemek için dururlar. Ekip, gerçek bir üründe değil, bir gösteride kullanıcıların nasıl davrandığını yansıtan bulgularla oradan ayrılıyor.
Çözüm düşündüğünüzden daha dar. Katılımcının güveninin oluştuğu anı belirleyin ve bu etkileşimi gerçeğe dönüştürün. Bir bankacılık uygulamasında o an giriştir.
Bu öğretici bunu oluşturur: doğrulayan kimlik bilgileri, canlı bir hata durumu ve yerel hissettiren biyometrik bir animasyon; kod gerektirmez.
Ne Geliştiriyoruz: Gönderilmiş Bir Ürün Gibi Davranan Bir GirişBir mobil bankacılık prototipi olan Pie Bank etrafında oluşturulan oturum açma akışı, işlevsel metin girişlerini, maskelenmiş bir parola alanını, kimlik bilgisi doğrulamayı, canlı hata durumunu ve iOS'tan ayırt edilemeyecek şekilde zamanlanmış bir Face ID animasyonunu içerir.
İhtiyacınız olan şey:
- Figma'dan (veya desteklenen herhangi bir tasarım aracından) bir oturum açma arayüzü
- ProtoPie Stüdyosu — başlamak ücretsiz, bu eğitimdeki her şey ücretsiz planda çalışır
- Face ID animasyonu için bir Lottie dosyası (Bubizim kullandığımız şey bu)
- . Pie Bank prototip dosyasını tamamladı— takip etmek için indirin veya oluşturduktan sonra referans olarak kullanın
Adım 1: Figma'dan İçe Aktarın Düzleştirilmiş Değil Sahne SeçinFigma'da, giriş çerçeveniz seçiliyken ProtoPie eklentisini açın veSahneihracat yaparken. Düzleştirilmiş, her şeyi tek bir görüntüye daraltır; Scene, katman hiyerarşinizi korur, böylece her öğe ProtoPie'ye ayrı, hedeflenebilir bir katman olarak ulaşır.
Devam etmeden önce: her katmanı anlamlı bir şekilde yeniden adlandırın. “Dikdörtgen 14” değil, “Kullanıcı Adı Girin”. Bu isimlere formüllerde atıfta bulunacaksınız: belirsiz isimler birleşerek gerçek zamanın kaybolmasına neden olacak.
Adım 2: Statik Alanları Gerçekte Metni Kabul Eden Girişlerle DeğiştirinProtoPie'nin yerlisiGirişkatman gerçek klavye girişini kabul eder: katılımcılar gerçek metni yazar, bir yer tutucuya dokunmaz. GitMetin →Giriş, bir Giriş katmanını tuvalinize sürükleyin ve bunu kullanıcı adı alan grubunuzun içine yerleştirin. Görsel olarak eşleştirin: yer tutucu metinKullanıcı adıtasarımınıza uygun arka plan dolgusu ve yazı tipi.
Önizlemeyi tıklayın. Alanı tıklayın. Tip. Bu, bir uygulamayı tasvir etmek yerine bir uygulama gibi davranmaya başlayan prototiptir.
Bu katmanı yeniden adlandırınKullanıcı Adını Girin, kopyalayın ve kopyayı şifre alan grubunuza yerleştirin.
Adım 3: Bir Özellik Değişikliği Parolayı MaskelerÇoğaltılmış katmanda yer tutucu metnini şu şekilde değiştirin:Şifreve ayarlaTipileMetin Şifresi. ProtoPie maskeleme işlemini gerçekleştirir: özel bir mantığa gerek yoktur.
Her iki alanı da önizleyin: kullanıcı adı metni gösterir, şifre ise noktaları gösterir. Zaten gerçek gibi geliyor ve tek bir koşul yazmadınız.
Boş olsa bile yeni bir sahne ekleyin. ProtoPie'daki en yaygın sıralama hatası, bir hedef var olmadan önce bir navigasyon yanıtı bağlamaya çalışmaktır. Önce onu yaratın.
Adım 5: Düğmeyi Kablolayın: Çalışıyor Ama Yine de Herkesin Geçmesine İzin VeriyorSeçmeGiriş yapmak, ekleMusluktetiklemek, yanıtı ayarlamakZıplamak, kontrol paneli sahnenizi hedefleyin, geçiş yapınSağdan sola doğru kaydırınHer gün
Önizleyin ve dokunun. Gezinir: ancak hiçbir şey dahil olmak üzere herhangi bir giriş için. Prototip hala yatıyor. Sonraki iki adım düzeltmedir.
Adım 6: Prototipin Ne Yazıldığını Hatırlaması İçin Değişkenler EkleyinProtoPie'nin sol alt kısmına iki tane ekleyinMetindeğişkenleri yazın:kullanıcı adı ve şifre. Her birini bir formülle giriş katmanına bağlayın:
input("Kullanıcı Adını Girin").text
input("Şifreyi Girin").textHata ayıklama simgelerini etkinleştirin: yeşil katmanlar siz yazarken canlı değişken değerlerini gösterecektir. Tuş vuruşlarınızın gerçek zamanlı olarak göründüğünü gördüğünüzde bağlama onaylanmıştır.
Geri dönMuslukoturum açma düğmesinde tetikleyin. EkleDurumiki kuralla her ikisinin de doğru olması gerekir:
kullanıcı adıeşittir'alex.c@gmail.com'şifreeşittirABC123
TaşıZıplamakBu koşul içindeki yanıt. Yanlış kimlik bilgileri, boş alanlar, yanlış format: hiçbiri ulaşamıyor. Katılımcıların artık gerçekten oturum açması gerekiyor. Bu tek kısıtlama, takip eden her test oturumunun dokusunu değiştiriyor.
Adım 8: Hata Durumunu Oluşturun, Çoğu Prototipin Atladığı EtkileşimHata mesajı katmanınızı bulun, yeniden adlandırınHata Metni, başlangıç opaklığını şu şekilde ayarlayın:0. İkinci bir koşul ekleyin (birincinin tersi) ve içine birÖzelliği Değiştiryanıt ayarıHata Metniopaklık100Her gün
Yanlış kimlik bilgileri: hata görünüyor. Doğru kimlik bilgileri: kontrol paneli. İki sonuç: Bunu sadece kanıtlanabilir değil, test edilebilir kılan da budur.
9. Adım: Test Yapanların “Bu Gerçek mi?” diye sormasını sağlayan detay olan Face ID Animasyonunu ekleyinGitMedya, sürükleyinLottietuval üzerine katmanlayın, Face ID dosyanızı yükleyin ve onu ekranın dışına, iPhone çerçevesinin üzerine yerleştirin. senin üzerindeFace ID ile giriş yapındüğmesine basın, bir tane ekleyinMusluktetikleyici (yeniden adlandırın)Face ID'ye dokunun) sırayla dört yanıtla:
- Taşınmak: Lottie konteyneri
Y: 60 - Playback: Ara: zaman
0'lar(her zaman baştan oynatılacak şekilde sıfırlanır) - Oynatma: Oynat: Lottie dosyası
- Zıplamak: kontrol paneline
Gecikme olmadan, dört yanıtın tümü aynı anda etkinleşir ve animasyon oynatılmadan önce sahne atlar. Ofsetler ekleyin:
| Cevap | Gecikme |
|---|---|
| Taşınmak | 0'lar |
| Aramak | 0'lar |
| Oynamak | 0,5s |
| Zıplamak | 1s |
Olanak vermekSeçilen sahneleri sıfırlaJump'ta: bu olmadan, geriye gitmek animasyonun sabit kalmasına neden olurY: 60Her gün
Önizleme: Face ID'ye dokunun, animasyon devreye girer, oynatılır, ekran geçişleri. Gerçeğinden ayırt edilemeyen biyometrik bir giriş.
İndirebilirsinPasta Bankası, Bölüm 1: Giriş Akışıve özgürce keşfedin.
Bir Giriş Bu Gerçek, Prototipinizden Öğrenebileceklerinizi DeğiştirirKimlik doğrulama gerçekten işe yaradığında, hata durumu gerçek bir araştırma temas noktası haline gelir: Kullanıcılar mesajı anlıyor mu, yeniden deneyiyor mu, bunun yerine Face ID'ye mi ulaşıyor? Bunlar sahte bir girişin cevaplayamayacağı sorulardır.
Paydaş incelemelerinde akış kendini anlatıyor. Mühendislik aktarımında, etkileşim paneli davranışı (koşullu mantık, değişken bağlamalar, zamanlama) belgeleyerek mühendislerin yorumu değil amacı görmesini sağlar.
Bu nedenle FinTech ekipleri, oturum açma özelliği test edilen özellik olmasa bile oturum açma doğruluğuna yatırım yapar. Katılımcının güveninin oluştuğu yer burasıdır. Doğru anladığınızda, aşağı yöndeki her şey daha iyi sinyal üretir.
Bu eğitim,ProtoPie ile FinTech PrototiplemesiProtoPie blogundaki seri. Seri, Pie Bank'ı dört bölümden oluşan, kontrol panelini, para transferi mantığını ve kamera entegrasyonunu kapsayan sıfırdan inşa ediyor. Bu eğitim faydalı olduysa serinin geri kalanı daha da ileri gidecektir.
