UX kılavuzu ve arayüz standartları
1) İlkeler
Güzellikten önce berraklık. Anlam ve eylem 1-2 saniye içinde açıktır.
Ekran başına bir hedef. Diğer her şey ikincil veya gizlidir.
Tutarlılık. Aynı modeller = aynı beklentiler.
Varsayılan kullanılabilirlik. Kontrast, odaklanma, klavye, seslendirme.
Bağlamsallık. İpuçları ve metinler tam olarak ihtiyaç duyulan yerlerdir.
Önce yerelleştirme. Çizgi uzunlukları, formatları, kültürü - başlangıçta tasarımda.
Geri döndürülebilirlik. Herhangi bir riskli eylem iptal edilebilir/onaylanabilir.
Ölçülebilirlik. Her kural bir metrik ile (adım dönüştürme, zaman, hatalar).
2) Izgara, girintiler ve ritim
Izgara: 4/8-pt pitch; Sütunlar: 12 (masaüstü), 6 (tablet), 4 (mobil).
İç bileşen girintileri: 4'ün katları; Harici - 8/ 12/16/24.
Vertical rhythm (Dikey ritim): title - subtitle - action content (CTA).
Sınırlar ve bölücüler: ekonomik; "Hava've tipografi hiyerarşisini tercih eder.
3) Tipografi
Pin ölçeği: 12/14/ 16/20/24/32/40 (vücut 16).
Satır yüksekliği: 1. 4–1. Metin için 6, 1. 2–1. Başlıklar için 3.
Satır uzunluğu: 45-75 karakter (masaüstü), 35-55 (mobil).
Vurgulama: anlamsal vurgular için kalın; Büyük harfler - sadece etiketlerde.
Yüksek sesle okunabilirlik: metinler doğal görünmelidir.
4) Renk ve kontrast
Anlambilim: 'başarı/bilgi/uyarı/hata/nötr'.
Kontrast: WCAG minimum 2. 1 AA (metin/arka plan ≥ 4. 5:1; büyük ≥ 3:1).
Renk tek sinyal ≠. Bir simge/metin/form ekleyin.
Odak halkası: her zaman görünür (CSS'de devre dışı bırakmayın).
5) Navigasyon ve bilgi mimarisi
Kullanıcı yolu: "Neredeyim? Burada ne var? Şimdi ne yapmalı?» - belli ki.
Menü hiyerarşisi: Ana navigasyonda 2 düzey ≤.
Breadcrumbs: derin bölümler için.
Arama: karmaşık dizinlerde küresel olarak kullanılabilir; kısayol tuşu'/'.
Gezinme durumları: Etkin sekme/sayfa belirteçlerle vurgulanır.
6) Bileşenler ve desenler
Tasarım sisteminin bileşenlerini kullanıyoruz ('ev yapımı "olmadan).
Ekran başına bir birincil-CTA; Diğerleri ikincil/üçüncül.
Durumlar: varsayılan/hover/focus/active/disabled/loading - her etkileşimli için zorunludur.
Boş durumlar: bağlam + değer + CTA (+ ikincil bağlantı).
Ortak uyarılar: ekran başına bir sayfa uyarısı + yerel satır içi istemleri.
7) Formlar, doğrulama ve hatalar
Etiket zorunludur. Yer tutucu bir biçim örneğidir, değiştirme değil.
Bulanıklaştırma için satır içi doğrulama, gönderme için özet hataları.
Hata mesajı: yanlış olan nedir++ kısıtlama/format nasıl düzeltilir.
Otomatik kaydırma ve ilk hataya odaklanma; 'aria-invalid', 'aria-description by'.
Maskeler ve biçimler: istemi, ancak girişi kırmayın (paist mümkündür).
Veri güvenliği: Yeniden başlatma/hata sırasında hiçbir şey kaybetmeyin.
8) Koşullar ve geri bildirim
Başarı: tost 2-4 s, nötr-pozitif ton, CTA "sırada ne var".
Bilgi/uyarı: yumuşak banner/type, akışı engellemez.
Uyarı/Hata/Kritik: görsel/anlamsal olarak hiyerarşi; kritik - açık eylem ile modal/banner.
Yükleme: iskelet> spinner; Bekleme süresinin değerlendirilmesi> 3 s.
9) İçerik ve mikrokopi
Üç cevap kuralı: ne oluyor? Neden? Sonra ne yapmalı?
CTA: action verb + object ("Değişiklikleri kaydet", "Doğrulamayı geç").
Sayılar/tarihler/para birimleri: yerel formatlar.
Ton: cana yakın; Stresli adımlarda (ödeme/güvenlik) - nötr.
10) Kullanılabilirlik (A11y)
Tam klavye navigasyon; mantıksal sekme sırası.
Roller ve etkileşimli için 'aria-', tost/durumları için canlı bölgeler.
Kontrastlar, odak halkaları, etkileşimli boyutlar ≥ 44 × 44 piksel.
Simgeler/resimler için metin alternatifleri; 'th'/' scope' içeren tablolar.
Kontroller: ekran okuyucunun otomatik (linter/tarayıcı) + manuel komut dosyaları.
11) Yerelleştirme ve uluslararasılaştırma
Tüm dizeler i18n tuşları bağlamındadır.
"Uzun diller" testi (DE/TR), RTL modları.
Sayılar/para birimleri/zamanlar - biçimlendirme yardımcı programları.
Ton haritası: Senaryoya göre formalite/duygu derecesi (onboarding/ödemeler/güvenlik).
12) Duyarlılık ve †
Kesme noktaları: 360/768/1024/1280 +.
Mobil öncelikli: Tek elle kullanılabilen kritik yol, başparmak alanında CTA.
Hareketler ve klavye: hareketler düğmelerle çoğaltılır; masaüstünde - kısayol tuşları.
Yoğunluk: masaüstünde - "hava", mobilde - tıklanabilirlikten ödün vermeden dikey tasarruf.
13) Karanlık tema
WCAG ile kontrast korunur; Arka plan için "saf siyah'dan kaçının (koyu gri).
Işıma/gölgeler - zayıflamış; odak halkası kontrastı.
Çizimler ve logolar - ters çevrilmiş versiyonlarla.
Geçiş politikası: Kullanıcının seçimini kaydedin (sistem/açık/karanlık).
14) Animasyonlar ve hareket
Süre: 120-200 ms (küçük), 200-300 ms (geçişler).
Hızlanma fonksiyonları doğaldır (hafif yavaşlama ile kübik-bezier).
Animasyonlar akışı engellememeli ve okunabilirliği bozmamalıdır.
Saygı 'prefers-reduced-motion'.
15) Performans
LCP ≤ 2. 5s, yeşil TTI/TBT; kod ekleme; Tembel medya yükleme.
Uzun listelerin sanallaştırılması; veri önbelleğe alma.
Hız algısı için iskelet; Düzen "önemsiz" minimize.
16) UI'de güvenlik ve gizlilik
Taleplerin nedenlerinin net açıklamaları (kamera, KYC, geo).
Şeffaf son tarihler/komisyonlar/limitler; Gecikmeler mümkünse "anlık" olmadan.
Gizli veriler - maskeleme, açık "göster/gizle".
Geri dönüşü olmayan eylemler için onaylar; Etkinlik Günlüğü/Giriş Bildirimleri.
17) UX Kalite Metrikleri
Adım dönüştürme ve tamamlanma zamanı.
Alanlara/adımlara ve Düzeltme Zamanına göre hata oranı.
CTA tarafından CTR ve senaryo tekrarlanabilirliği.
Hatadan sonra bırakma/yüklendikten sonra> N saniye.
Konuya göre destek çağrıları (değişikliklerden önce/sonra).
Serbest bırakma için A11y-defects (hedef - 0 kritik).
18) Kontrol listeleri
Yayın öncesi ekran
- Bir birincil hedef ve bir birincil-CTA.
Navigasyon ve nerede-ben-im durumu bellidir.
- Kısa içerik: Blok başına 1-2 cümle.
- Durumlar: yükleme/boş/hata/başarı kapsamındadır.
- A11y: AA kontrast, odak görünür, etkileşimli 'aria-'.
- Yerelleştirme: dize uzunlukları/formatları/RTL kontrol edildi.
- Performans: Gereksiz yere'ağır "bloklar yok.
Yayın Öncesi Formu
- Etiketler ve örnek formatlar mevcuttur.
- Satır içi doğrulama + göndermek için özet.
- İlk hataya ilerleyin, kutuya odaklanın.
- Mesajlar: ne/nasıl/neden; Kullanıcı için 500/400 kodları olmadan.
- Veriler hatalar/yeniden başlatma sırasında kaybolmaz.
19) Anti-desenler
Anlamsal adımlarda CTA olarak "Tamam".
Etiket yerine yer tutucu.
Tek durum sinyali olarak renk.
Zaman tahmini ve alternatifi olmayan iplikçiler.
Odak tuzağı ve ESC kapatma olmadan modal pencereler.
Stilleri/simgeleri karıştırma, bileşenleri tasarım sistemi dışında çoğaltma.
Kritik senaryolarda mizah/emoji (ödeme/güvenlik).
20) Örneklerden önce/sonra
Form hatası
Önce: "Hata 400"
Sonra: "Geçersiz tarih biçimi. DD kullan. MM. YYYY"
Boş durum
Daha önce: "Burası boş"
Sonra: "İlk ikmalden sonraki operasyonların tarihi burada görünecek. [Kontör]"
Başarı mesajı
To: "Bitti"
Sonra: "Ödeme kabul edildi. Denge güncellendi. [Tarihi görüntüle]"
Navigasyon
Önce: Kullanıcının nerede olduğu belli değil
Sonra: etkin sekme + ekmek kırıntıları + açık sayfa başlığı
21) Tasarım İncelemesi için Şablonlar
Ekran çerçevesi
Başlık - kısa açıklama - içerik/liste - geri bildirim/durumlar - eylemler.
Kalıp çerçevesi
Üstbilgi: Komut istemi: Alan (label + helper + error): CTA: İkincil eylemler: Notlar.
Mikrokopi şablonu
Başlık (eski)
1-2 cümle: bağlam + sonraki adım
CTA: eylem + nesne
İkincil bağlantı: yardım/kurallar
22) Prosesler ve standartların bakımı
Bitti (UX) tanımı: düzen + metinler + durumlar + A11y + i18n + metrikler.
PR'de UX incelemesi: 18-21 bölümlerinden kontrol listesi.
Dokümantasyon: Her özellik wiki/Storybook'a bir kılavuz ekler/günceller.
Üç ayda bir denetim: içerik, A11y, performans, tutarlılık.
Son hile sayfası
Bir hedef, bir ana CTA.
Durumlar ve geri bildirimler önceden tasarlanmıştır.
A11y ve yerelleştirme - sıfırdan,'daha sonra'değil.
Daha az renk - daha fazla semantik ve ritim.
Ölçü: dönüşüm, hatalar, zaman, geri dönüşler.
Tüm tasarım sistemi boyunca: aynı kurallar - aynı beklentiler - öngörülebilir UX.
Bu kılavuzu anahtar senaryolarınız (kayıt/CUS, para yatırma/çekme, bonuslar/turnuvalar) için hazır şablonlarla destekleyebilir ve inceleme süreciniz için kontrol listeleri toplayabilirim.