Fintech ve Bankacılık Uygulamaları İçin UI/UX Tasarım
Transfer, onay, doğrulama ve itiraz ekranları bir uygulamanın en çok stres yaratan yerleridir. Bu akışları önce hata senaryolarıyla çiziyor, sonra güven veren bir görsel dille kuruyor; uyum metinlerini kullanıcının gerçekten okuyabileceği biçime getiriyoruz.
- Figma kaynak dosyaları sizin
- Hata ve boş durum ekranları teslimata dahil
- Erişilebilirlik (WCAG 2.1) gözetilerek tasarım
- Testlerde gerçek müşteri verisi kullanılmaz
Uygulama çalışıyor; kullanıcı yine de tereddüt ediyor.
Fintech arayüzlerinde şikâyetlerin çoğu çökmeden değil, belirsizlikten doğuyor. Aşağıdakiler, transfer ve başvuru akışlarını incelediğimizde en sık karşımıza çıkan tablolar.
- Tutar ve alıcı son anda doğrulanmıyorOnay ekranı IBAN'ı küçük punto ile gösteriyor, tutarı kuruşuyla ayırmıyor. Kullanıcı yanlışı ancak dekontta fark ediyor.
- Hata mesajı ne olduğunu söylemiyor'İşlem gerçekleştirilemedi' diyen bir ekran, kullanıcıyı çağrı merkezine yönlendirmekten başka bir iş yapmıyor. Nedeni ve bir sonraki adım yazmıyor.
- Doğrulama adımı nedensiz görünüyorBeklenmedik anda çıkan SMS veya biyometrik doğrulama, neden istendiği açıklanmadığında güvensizlik yaratıyor; kullanıcı işlemi bırakıyor.
- Uyum metinleri okunmuyorAydınlatma, rıza ve ücret bilgilendirmesi tek bir uzun bloğa sıkıştırılınca kimse okumuyor. Sonra 'bunu bilmiyordum' itirazları geliyor.
- Geri dönüş yolu belirsizKullanıcı üçüncü adımda bir şeyi düzeltmek istediğinde baştan başlamak zorunda kalıyor; yarım kalan işlemin ne olduğu görünmüyor.
- Bekleme anları boş bırakılıyorOnay bekleyen transferde ekran sessiz kalıyor. Kullanıcı para gitti mi gitmedi mi anlamadığı için ikinci kez deniyor.
Önce 'nerede yanlış yapar', sonra 'nasıl güzel görünür'.
Fintech projelerinde tasarım sürecini hata senaryosundan başlatıyoruz. Görsel dil, akış güvenli hâle geldikten sonra üstüne geliyor — tersi olduğunda güzel ama riskli ekranlar çıkıyor.
- Akış envanteri ve risk sıralamasıUygulamadaki para hareketi, limit değişikliği ve kimlik doğrulama akışlarını listeliyor; geri alınabilirlik ve kullanım sıklığına göre sıralıyoruz.TeslimKritik akış listesiRisk sıralamasıÖlçüm planı
- Hata senaryosu haritasıHer adımda kullanıcının ne yanlış yapabileceğini, sistemin nerede reddedebileceğini ve o anda ne göstermesi gerektiğini çıkarıyoruz.TeslimHata durumu matrisiMikro metin taslağıGeri dönüş noktaları
- Akış ve ekran tasarımıAdımları sadeleştiriyor, doğrulama ekranını okunur kuruyor, doğrulama ve onay anlarını görsel olarak ayırıyoruz.TeslimKullanıcı akışlarıYüksek çözünürlüklü ekranlarBileşen kütüphanesi
- Prototip ve stres testiTıklanabilir prototipte hatalı IBAN, yetersiz bakiye ve yarım kalan işlem gibi senaryoları temsilî veriyle deniyoruz.TeslimTıklanabilir prototipTest senaryolarıBulgu raporu
- Uyum metinlerinin yerleşimi ve teslimUyum biriminizin metinlerini katmanlı biçimde yerleştiriyor, ardından geliştirici teslim dokümanını hazırlıyoruz.TeslimMetin yerleşim planıHandoff dokümanıTasarım desteği
Kritik akışınız hatayı ne kadar önlüyor?
Bir akış seçin, bugün ekranınızda gerçekten olan önlemleri işaretleyin. Araç, ağırlıklandırılmış bir hata önleme puanı ve eksik kalan önlemleri önem sırasıyla gösterir. Hiçbir veri kaydedilmez; hesap tarayıcınızda yapılır.
Akış şu hâliyle kullanıcıyı büyük ölçüde kendi dikkatine bırakıyor. Önce doğrulama ve hata mesajı tarafındaki boşlukları kapatmak, görsel yenilemeden çok daha hızlı geri dönüyor.
- Onay ekranında alıcı adı ve IBAN büyük punto ile tekrar gösteriliyorOnay ekranını ayrı bir adım yapın; alıcı ve tutar en büyük iki öğe olsun.
- İlk kez para gönderilen alıcı ayrıca uyarılıyor'Bu alıcıya ilk kez gönderiyorsunuz' rozeti ekleyin ve doğrulamayı bir kademe artırın.
- Hata mesajları nedeni ve sonraki adımı söylüyorHer hata kodunu 'ne oldu + ne yapmalı' biçiminde iki cümleye çevirin; kod numarası ikinci planda kalsın.
- Tutar binlik ayraçla ve kuruş kısmı ayrışacak şekilde yazılıyorTutarı 12.500,00 biçiminde, kuruşu küçülterek gösterin; yanlış basamak okumasını bu tek değişiklik büyük ölçüde azaltır.
Puanınız ve işaretlemediğiniz önlemler, keşif görüşmesinin gündemini doğrudan oluşturur. Görüşme ücretsizdir ve sizi bağlamaz.
Bu denetim, benzer akışlarda sık karşılaştığımız önlemlerden oluşan bir kontrol listesidir; sektörel bir standart veya mevzuat denetimi değildir. Ağırlıklar tasarım tarafındaki hata önleme etkisine göre verilmiş örnek değerlerdir. Uygulamanızın hukuki uyumu, sizin hukuk ve uyum biriminizin değerlendirmesine tabidir.
Fintech projelerinde tasarım masasına ne geliyor?
Aşağıdakiler bir paket değil, bir menü. İlk fazda genellikle tek bir kritik akış ve onun etrafındaki bileşenler ele alınıyor; kalanı aynı sistemin içine ekleniyor.
- ÇekirdekKritik akış yeniden tasarımıTransfer, başvuru veya limit değişikliğinden biri uçtan uca: adımlar, doğrulama, onay ve sonuç ekranları.
- ÇekirdekHata ve boş durum kütüphanesiHer hata sınıfı için ekran ve metin; tasarımın en sık atlanan ama en çok aranan parçası.
- GüvenOnay ve doğrulama kalıplarıTek adımlı, çok adımlı ve biyometrik doğrulama için tutarlı ve erişilebilir kalıplar.
- UyumUyum metinlerinin yerleşimiAydınlatma, rıza ve ücret bilgilendirmesinin katmanlı sunumu; metnin içeriği sizin uyum biriminizden gelir.
- DilMikro metin (UX yazarlığı) rehberiButon, uyarı ve hata metinleri için ton ve kalıp rehberi; ekipler aynı dili konuşur.
- ErişimErişilebilirlik gözden geçirmesiKontrast, dokunma hedefi, klavye sırası ve ekran okuyucu davranışı için tasarım tarafı kontrolü.
- SistemBileşen kütüphanesi ve token'larRenk, tipografi, spacing ve durum varyantları; yeni ekranlar şablondan üretilir.
- TeslimGeliştirici teslimiÖlçüler, durum tabloları, davranış notları ve handoff toplantısı.
Süreç Figma merkezli ilerliyor: ekranlar, varyantlar ve tıklanabilir prototip tek dosyada duruyor, siz yorum yazarak sürece dahil oluyorsunuz. Teslimde Figma Dev Mode üzerinden ölçü ve token'lar, ayrıca durum tablolarını içeren bir handoff dokümanı veriyoruz. Tasarımı uygulayacak ekip sizde değilse mobil yazılım geliştirme ve web yazılım geliştirme tarafında da aynı ekiple devam edebilirsiniz.
Arayüz güvenliği tasarımla bitmiyor: kimlik doğrulama, oturum ve API tarafındaki kontrollerin ayrıca sınanması gerekiyor. Bu konuda güvenlik ve sızma testi hizmetimiz ve sızma testi rehberimiz süreci nasıl kurguladığımızı anlatıyor. Mimari kararlarda bağımsız bir görüş isterseniz teknik danışmanlık tarafına bakabilirsiniz.
Tek kritik akış için örnek bir 7 haftalık ilk faz
Aşağıdaki plan, tek bir para hareketi akışının yeniden tasarlandığı tipik bir ilk faz için hazırlanmış örnektir. Sizin planınız kapsam netleştikten sonra çıkar ve teklifte yazılı hâle gelir.
| Hafta | Ne yapılır | Hafta sonunda elinizde ne olur |
|---|---|---|
| 1. hafta | Akış envanteri ve risk sıralaması | Kritik akış listesi, öncelik kararı |
| 2. hafta | Hata senaryosu haritası | Hata durumu matrisi, mikro metin taslağı |
| 3. hafta | Akış ve wireframe | Adım adım akış, düşük çözünürlüklü ekranlar |
| 4–5. hafta | Arayüz tasarımı ve bileşenler | Yüksek çözünürlüklü ekranlar, bileşen kütüphanesi |
| 6. hafta | Prototip ve kullanıcı testi | Tıklanabilir prototip, bulgu raporu |
| 7. hafta | İterasyon ve teslim | Düzeltilmiş ekranlar, handoff dokümanı |
İlk faz kapandığında ortaya çıkan kalıplar bileşen kütüphanesine giriyor; sıradaki akışlar aynı sistemin içinde daha kısa sürelerle ele alınabiliyor.
- HizmetUI/UX TasarımHizmetin tamamı: araştırma, akış, prototip, design system ve teslim.
- HizmetMobil Yazılım GeliştirmeTasarımı iOS ve Android tarafında uygulamaya dönüştürme.
- HizmetGüvenlik & Sızma TestiKimlik doğrulama, oturum ve API tarafının bağımsız sınanması.
- HizmetTeknik DanışmanlıkMimari ve teknoloji kararlarında bağımsız değerlendirme.
- ProjeTuğra AI arayüzüAbonelik, kredi ve hesap akışlarını sadeleştirdiğimiz kendi ürünümüz.
- RehberSızma testi nedir: süreç ve rapor rehberiGüvenlik testinin nasıl planlandığı ve raporun nasıl okunduğu.
- RehberMobil uygulama geliştirme süreciNative ve cross-platform kararının deneyime etkisi.
- RehberYazılım firması seçerken dikkat edilmesi gerekenlerTeklif karşılaştırırken sorulacak sorular ve kırmızı bayraklar.
Sık sorulanlar
Süreç, mevzuat sınırları, test yöntemi ve teslimat hakkında en çok sorulanlar.
En riskli akışınızı birlikte açalım
Bize uygulamanızın en çok itiraz aldığı ekranı gösterin; ilk görüşmede hata senaryolarını birlikte çıkaralım ve gerçekçi bir ilk faz kapsamı belirleyelim. Keşif görüşmesi ücretsizdir ve sizi bağlamaz.
- ✓ Keşif görüşmesi ücretsiz
- ✓ Kapsam netleşmeden fiyat vermiyoruz
- ✓ Figma kaynak dosyaları sizde
Güven, görselden önce akışta kurulur
Kritik akışın hata senaryolarıyla başlıyor, prototipte test ediyor, bileşen kütüphanesiyle teslim ediyoruz. Nereden başlayacağınızı birlikte belirleyelim.