Prototipiniz Kullanıcılarınıza Karşı Dürüst Değil (Ve İşte Bunu Nasıl Düzeltebilirsiniz)
Twitter'da paylaş, LinkedIn
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. 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.
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 gerekmez.
Detaylar ve Etkileri
Ne Geliştiriyoruz: Gönderilmiş Bir Ürün Gibi Davranan Bir Giriş
Bir mobil bankacılık prototipi olan Pie Bank'ın 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.
Sistem Güvenliği
İhtiyacınız olan şey:
Uzmanların Görüşleri
Figma'dan (veya desteklenen herhangi bir tasarım aracından) bir oturum açma arayüzü
Sonuç ve Değerlendirme
ProtoPie Studio — ücretsiz başlangıç, bu eğitimdeki her şey ücretsiz planda çalışır
, bu eğitimdeki her şey Face ID animasyonu için ücretsiz plan A Lottie dosyasında çalışır (bizim kullandığımız şey bu)
Teknik Analiz
Bitmiş Pie Bank prototip dosyası - 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çin
Önemli Gelişmeler
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ü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.
Gelecekte Ne Bekleniyor?
Adım 2: Statik Alanları Gerçekte Metni Kabul Eden Girişlerle Değiştirin
ProtoPie'nin yerel Giriş katmanı gerçek klavye girişini kabul eder: katılımcılar gerçek metni yazar, bir yer tutucuya dokunmaz. Metin → Giriş'e gidin, 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: tasarımınıza uyacak şekilde yer tutucu metin Kullanıcı adı, arka plan dolgusu ve yazı tipi.
Nasıl Önlem Alınmalı?
Önizlemeyi tıklayın. Alanı tıklayın. Tip. Bu, bir uygulamayı tasvir etmek yerine bir uygulama gibi davranmaya başlayan prototiptir.
Bu katmanı Giriş Kullanıcı Adı olarak yeniden adlandırın, 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 Şifre olarak değiştirin ve Tür'ü Metin Şifresi olarak ayarlayın. 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.
Adım 4: Navigasyonu Kablolamadan Önce Hedef Sahnesini Oluşturun
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 Veriyor
Oturum Aç'ı seçin, bir Dokunma tetikleyicisi ekleyin, Jump'a yanıtı ayarlayın, kontrol paneli sahnenizi hedefleyin, sağdan sola kaydırarak geçiş yapın.
Önizleyin ve dokunun. Gezinir: ancak hiçbir şey dahil olmak üzere herhangi bir giriş için. Prototip hala yatıyor. Sonraki iki adımlar düzeltmedir.
Adım 6: Prototipin Ne Yazıldığını Hatırlaması İçin Değişkenler Ekleyin
ProtoPie'nin sol alt kısmına iki Metin türü değişkeni ekleyin: 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").text
Hata 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.
7. Adım: Yalnızca Geçerli Kimlik Bilgilerinin Geçeceği Bir Koşul Ekleyin
Oturum açma düğmesindeki Dokunma tetikleyicisine geri dönün. İki kurallı bir Koşul ekleyin; her ikisi de doğru olmalıdır:
Kullanıcı adı eşittir [email protected]
eşittir şifre eşittir ABC123
Jump yanıtını bu koşulun içine taşıyın. 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şim
Hata mesajı katmanınızı bulun, Hata Metni olarak yeniden adlandırın, ilk opaklığı 0 olarak ayarlayın. İkinci bir koşul ekleyin (birincinin tersi) ve bunun içine, Hata Metni opaklığını 100 olarak ayarlayan Özelliği Değiştir yanıtı ekleyin.
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 ekleyin
Medya'ya gidin, bir Lottie katmanını tuvale sürükleyin, Face ID dosyanızı yükleyin ve onu ekranın dışına, iPhone çerçevesinin üzerine yerleştirin. Face ID ile Giriş Yap düğmenize, sırayla dört yanıt içeren bir Dokunma tetikleyicisi ekleyin (Tap Face ID olarak yeniden adlandırın):
Lottie konteynerini Y: 60'a taşıyın
: Lottie konteynerinden Oynatmaya : Arama: süre 0s (sıfırlanır, böylece her zaman baştan oynatılır)
: Ara: zaman (her zaman baştan itibaren oynatılacak şekilde sıfırlanır) Oynatma: Oynat : Lottie dosyası
: Lottie dosyası Git: kontrol paneline
Adım 10: Zamanlamayı Ayarlayın, Yerli Hissetmesini Sağlayan Şey Bu
Gecikme olmadan, dört yanıtın tümü aynı anda etkinleşir ve animasyon oynatılmadan önce sahne atlar. Ofsetler ekleyin:
Tepki Gecikmesi Hareket 0sn Ara 0sn Oynat 0,5sn Atla 1sn
Jump'ta Seçilen sahneleri sıfırla seçeneğini etkinleştirin: bu olmadan, geri gitmek, animasyonun Y: 60'ta takılı kalmasına neden olur.
Önizleme: Face ID'ye dokunun, animasyon devreye girer, oynatılır, ekran geçişleri. Gerçeğinden ayırt edilemeyen biyometrik bir giriş.
Pie Bank, Bölüm 1: Giriş Akışı'nı indirebilir ve özgürce keşfedebilirsiniz.
Bir Giriş Bu Gerçek, Prototipinizden Öğrenebileceklerinizi Değiştirir
Kimlik 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 blogundaki ProtoPie ile FinTech Prototipleme serisinin bir parçasıdır. 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.
