Fintech Uygulama Arayüzü Tasarımı: Finansal Görevleri Açık ve Sakin Kılın
Bakiye bağlamı, işlem durumu, finansal formlar, onay adımları, erişilebilir hata mesajları ve inceleme listelerini kapsayan pratik bir fintech uygulaması arayüz tasarımı rehberi.
Finans arayüzü, kişilerin küçük bir ekranda sayıları yorumlamasını ve önemli sonuçlar doğuran seçimler yapmasını ister. Bakiye doğru olsa da bağlam olmadan kafa karıştırabilir; para transferi formu basit görünse de ücretler, zamanlama veya son eylem konusunda belirsizlik bırakabilir. Yararlı fintech arayüz tasarımı mevcut durumu anlaşılır kılar ve girilen bilgileri gözden geçirme fırsatı verir.
Bu bir tasarım rehberidir; finans, yatırım veya hukuk tavsiyesi değildir. Örnekler varsayımsaldır ve arayüz kalıpları tek başına mevzuata uygunluğu veya güvenliği kanıtlamaz. Görevden başlayın, sade dil kullanın ve durum değişiklikleriyle sonraki adımların kolay bulunmasını sağlayın.
Önemli noktalar
- Bakiyeleri açık hesap adları, para birimi ve ilgili zamanlama veya kullanılabilirlik bağlamıyla birlikte gösterin.
- İşlem durumlarını sözcüklerle anlatın ve kişinin sonra ne yapabileceğini açıklayın.
- Finansal formları odaklı, görünür etiketli ve biçim ya da alan düzeltilmesi gerektiğinde yardımcı olacak şekilde tutun.
- Eylemden önce temel ayrıntıları gözden geçirtin ve sonrasında, sonuç belirsiz olduğunda da, açık geri bildirim verin.
- Anlamın yalnızca renge veya görsel konuma bağlı olmaması için metin, yapı ve erişilebilir denetimler kullanın.
Bakiyeleri bağlam içinde okunabilir kılın
Büyük bir sayı kendi kendini açıklamaz. Hangi hesaba ait olduğunu belirtin ve para birimini bilinen bir simge veya kodla gösterin. Ürün mevcut, kullanılabilir, bekleyen veya yatırıma yönlendirilmiş tutarları ayırıyorsa bu kavramları doğrudan etiketleyin ve gerektiğinde açıklayın. Farklı iki bakiye türünü tanım vermeden neredeyse aynı biçimde sunmaktan kaçının.
Bağlam, tutarın en son ne zaman güncellendiğini veya hangi işlemin hâlâ beklediğini de içerebilir. Süs olsun diye sayı eklemek yerine kişinin ekranı yorumlamasına yardımcı olan ayrıntıyı seçin. Rakamların, ondalık ayırıcıların ve eksi işaretlerinin kolay ayırt edilmesi için tutarlı sayı biçimlendirmesi ve yeterli boşluk kullanın. Uzun hesap adlarında yalnızca renk veya simgeye güvenmek yerine hesapları ayırmaya yetecek kadar metin koruyun.
- Tutarın yakınında açık hesap etiketi ve para birimi kullanın.
- “Kullanılabilir” veya “bekleyen” gibi özel terimleri sade dille açıklayın.
- Aynı tutar ve durumun büyütülmüş metin ve yardımcı teknolojilerle de anlaşılır kalmasını sağlayın.
İşlem durumunu değişen bir durum olarak gösterin
İşlem, geçmiş listesindeki bir satırdan ibaret değil, bir süreçtir. Uygun olduğunda her öğeye kısa durum, tarih, tutar ve karşı taraf veya hedef ekleyin. Durum etiketini metin olarak görünür tutun; renk veya simge bunu güçlendirebilir ama anlamı tek başına taşımamalıdır. Bekleyen, tamamlanan, reddedilen veya dikkat gerektiren işlemleri ürünün gerçek durumlarına göre ayırın.
Örneğin Alex'e yapılacak varsayımsal 45.00 EUR transferi önce “4 Kasım için planlandı”, sonra “İşleniyor”, ardından “Tamamlandı” olarak görünebilir. Gönderimden sonra bağlantı zaman aşımına uğrarsa kanıt olmadan başarı veya başarısızlık duyurmayın. Durumun henüz kullanılamadığını söyleyin, yeniden nasıl kontrol edileceğini açıklayın ve yeniden denemenin başka bir istek oluşturup oluşturmayacağını netleştirin. Tam ifadeler ve kullanılabilir eylemler ürünün gerçek işlem davranışına bağlıdır.
| Durum örneği | Ekranın açıklayabilecekleri | Yararlı sonraki adım |
|---|---|---|
| Planlandı | Planlanan tarih ve hedef | Ürün izin veriyorsa incele veya düzenle |
| İşleniyor | İsteğin hâlâ sürdüğü | Bekle veya ayrıntıları görüntüle |
| Tamamlandı | Kaydedilen sonuç ve tarih | Makbuzu veya işlem ayrıntılarını aç |
| Dikkat gerekiyor | Neyin tamamlanamadığı | Belirtilen sorunu incele veya yardım al |
Önlenebilir kafa karışıklığını azaltan finansal formlar tasarlayın
Görev için gerektiğinde bilgi isteyin ve ilgili alanları form mantıklı bir sırada okunacak biçimde gruplayın. “Alıcı” veya “Tutar” gibi kalıcı etiketler kullanın; yer tutucu bir örnektir, etiketin yerini tutmaz. Bir alan belirli biçim bekliyorsa girişten önce belirtin; örneğin tutarın kuruş kabul edip etmediğini veya alana hangi tanımlayıcının girileceğini açıklayın. Apple'ın veri girişi rehberi, istenen bilgiyi açık kılmayı, gereksiz girişleri azaltmayı ve değerleri kişi girdikçe doğrulamayı önerir.
Bilgiye uygun giriş denetimleri seçin ve kişilerin girdileri düzeltmesine izin verin. İsteğe bağlı alanları görünür biçimde isteğe bağlı, zorunlu alanları da ayırt edilebilir tutun. Bir seçimin sonuçları varsa kişilerin kısa kodlardan anlam çıkarmasını beklemek yerine seçenekleri sade dille açıklayın. Alan yönergesi, ekran yeniden düzenlendiğinde veya büyütüldüğünde anlaşılır kalacak kadar denetime yakın olmalıdır.
İşe yarar bir inceleme ve onay adımı sunun
Önemli sonuç doğuran bir eylemden önce kişinin göndermek üzere olduğu bilgileri özetleyin: kaynak, hedef, tutar, tarih ve akışla ilgili gösterilen ücretler veya zamanlama. Karar için en kritik ayrıntıları bir arada sunun ve düzenleme yollarını kolay bulunur kılın. Birincil eylem, belirsiz “Devam et” yerine “Transferi planla” gibi yapılacak işi anlatmalıdır.
Onay ekranı “Ne oldu?” ve “Şimdi ne yapabilirim?” sorularını yanıtlamalıdır. Referans veya makbuz görünümü sonradan bakmayı destekleyebilir. Düğmeye dokunulmasını alttaki işlemin başarılı olduğunun kanıtı saymayın; arayüz ürünün döndürdüğü gerçek sonucu yansıtmalıdır.
- Özeti girilen değerler ve seçilen seçeneklerle tutarlı tutun.
- Geri ve düzenle eylemleri mümkün olduğunda kullanıcının emeğini korusun.
- Gönderimden sonra isteğin alındığını, işlenmekte olduğunu veya doğrulanmış bir sonuca ulaştığını belirtin.
- Yanıt belirsizse yeniden gönderime davet etmeden önce mevcut durumun nasıl kontrol edileceğini açıklayın.
Hataları ve güncellemeleri erişilebilir kılın
Giriş hatası saptandığında alanı belirleyin ve sorunu metinle anlatın. “Geçersiz tutar”, kabul edilen biçimi veya eksik değeri açıklayan mesajdan daha az yararlıdır. Geçerli girdileri koruyun ki kişi baştan başlamadan tek sorunu düzeltebilsin. W3C'nin WCAG 2.2 rehberi, saptanan giriş hatalarının belirlenip açıklanmasını ve giriş gerektiğinde etiket veya yönerge sunulmasını öngörür.
Durum güncellemeleri de önemlidir. Sayfa odağı taşımadan “İşleniyor” durumundan “Tamamlandı” durumuna geçiyorsa güncellemeyi yardımcı teknolojilerin algılayabileceği biçimde sunun. WCAG 2.2, durum mesajlarını bağlam değişikliği gerektirmeden sonuçları, beklemeyi, ilerlemeyi veya hataları ileten değişiklikler olarak açıklar. Uyarıları ölçülü kullanın: her görsel yenilemede kişiyi kesmeden anlamlı değişiklikleri duyurun.
Uygulanan arayüzde kontrastı, metin büyütmeyi, klavye veya anahtarla erişimi ve ekran okuyucu adlarını kontrol edin. Açık başlık ve denetim etiketleri kullanın; başarıyı, hatayı veya işlem yönünü yalnızca renkle belirtmeyin. Apple'ın tasarım ilkeleri açık geri bildirim vermeyi ve kişilerin hatalardan toparlanmasını desteklemeyi vurgular; bunlar yararlı hedeflerdir, ancak gerçek erişilebilirlik ürünün tamamının değerlendirilmesini gerektirir.
Fintech arayüzü inceleme listesi
Başlangıç bakiyesinden son duruma kadar tipik bir görevi izleyin. Olağan yolu, bir düzeltmeyi ve yavaş bağlantı gibi bir kesintiyi kontrol edin. Farklı arayüzlerin bilgi ve eylemleri nasıl düzenlediğini görmek için kütüphanedeki ilgili mobil ekranları karşılaştırın; ardından kendi akışınızı ürününüzün gerçek davranışına göre değerlendirin.
- Kişi bakiyenin hangi hesap ve para birimine ait olduğunu anlayabilir mi?
- Bekleyen ve tamamlanan durumlar açıkça adlandırılıp metinle sunuluyor mu?
- Her alanın görünür etiketi ve gerektiğinde biçim yönergesi var mı?
- Kişiler göndermeden önce hedefi, tutarı ve zamanlamayı inceleyebiliyor mu?
- Hatalar sorunu belirleyip uygulanabilir bir düzeltme sunuyor mu?
- Güncelleme renk, keskin görme veya odağın taşınmasına bağlı olmadan algılanabiliyor mu?
- Sonuç belirsizse arayüz yeniden denemeden önce nasıl kontrol edileceğini açıklıyor mu?
