Hata hiyerarşisi ve öncelik vurgulama

1) Neden bir hata hiyerarşisine ihtiyacınız var

• Neyin yanlış gittiğini açıklayın
• Neden önemli olduğunu göster,
• Bundan sonra ne yapılacağını önermek,
• Birkaç hata varsa öncelik verin.
• Hata hiyerarşisi bilişsel yükü azaltır, düzeltmeyi hızlandırır ve adım dönüşümünü artırır (kayıt, ödemeler, KYC).

2) Ciddiyet modeli

1. Bilgi - "Profil eksik, daha sonra tamamlanabilir. "Engellemiyor.

2. Uyarı - "Sınır neredeyse tükendi. "Eylem öneriyoruz.

3. Uyarı - "Format uyuşmazlığı, veriler kısmen kaydedildi. "Müdahale edebilir.

4. Hata - "Geçersiz biçim/gerekli alan boş. "Belirli bir eylemi engeller.

5. Kritik - "Ödeme Reddedildi/Güvenlik Riski. Senaryoyu engeller, acil bir adım gerektirir.

• Bir ekran - bir ana durum.
• Birden fazla hata için: yukarıdan kritik göster ve ilk hataya istikrarlı bir şekilde ilerle.

3) Öncelik vurgulama ilkeleri

1. Görsel hiyerarşi: Renk/simge/kalınlık/kontrast kritiklik ile artar.
2. Uzamsal yakınlık: Ait olduğu alanın/bölgenin yakınında bir hata.
3. Odaklanma ve kaydırma: otomatik olarak ilk hataya gidin + sorun alanına odaklanın.
4. Bir ana belirtme: kritik bir sorun + yerel istemler hakkında genel banner/uyarı.
5. Belirteç sırası: Bilgi/Uyarı/Hata için renkler/simgeler/yazı tipleri ürün boyunca değişmez.
6. Ömür: yerel hatalar - henüz düzeltilmedi; Afişler - kapatmadan/sabitlemeden önce.
7. Durumları karıştırmayın: "boş" ≠ "hata", "bekleme" ≠ "hata".

4) Görsel dil (UI belirteçleri)

• Bilgi - nötr mavi/gri,
• Uyarı - amber/sarı,
• Uyarı - turuncu,
• Hata - kırmızı,
• Kritik - zengin kırmızı + kontrast arka plan.
• Simgeler: bilgi ⓘ, bildirim, hata/, başarı.

• Alanın altındaki satır içi mesaj (minimum kare).
• Satır/kart başına satır belirtme.
• Sayfa uyarısı (banner) - genel/kritik için.
• Mikroanimasyonlar: düzeni "sarsmadan" yumuşak görünüm.

5) Hata metinleri: formül ve örnekler

Formül: Yanlış olan++ nasıl düzeltilir (Neden/kısıtlama).

"Geçersiz tarih biçimi. DD formatında girin. MM. YYYY"

"Dosya çok büyük (maks. 10 MB). Lütfen daha küçük bir dosya indirin"

"Yetersiz doğrulama seviyesi. KYC al - ~ 2 dakika sürer"

"Ödeme banka tarafından reddedildi. Başka bir yöntem deneyin veya bankanızla iletişime geçin"

Anti-kalıplar: "Hata 400", "Bir şeyler ters gitti", stresli adımlarla mizah.

6) Karmaşık formlarda hiyerarşi (kayıt/ACC/ödemeler)

1. Bulanıklaştırmada satır içi doğrulama: yerel hataları hemen yakalarız.
2. Gönderim için genel kontrol: "Doğru işaretli alanlar" başlığını ve liste/çapaları gösterin.

3. Hata gezinme: klavye/sekme, "# 1/# N hatasına git"

4. Düzeltme sırası: önce engelleme (Hata/Kritik), sonra Uyarı/Uyarı.
5. İçeriği Kaydet - Bir hata oluştuğunda girdi kaybolmaz.

7) Senaryoların özgüllüğü

7. 1 Ödemeler/para çekme

Kritik: sağlayıcı/banka tarafından reddedilme, şüpheli etkinlik.
Hata: Kart/IBAN alanı, miktar/frekans sınırları.
Uyarı: yavaş ağ/zaman aşımı.

Metin: "Ödeme banka tarafından reddedildi. Başka bir yöntem deneyin veya bankanızla iletişime geçin. Ücret tahsil edilmedi"

7. 2 CCS/güvenlik

Kritik: belge sahte/bloke ülke/çoklu hesap.
Hata: okunamayan belge/tarih uyuşmazlığı.

Metin: "Belgenin fotoğrafı bulanıktır. İyi ışıkta daha keskin bir görüntü yükleyin"

7. 3 Arama/filtreler

Bu bir hata değil, sıfır sonuçtur.

Metin: ""{query}" için sonuç yok "Provider: X" filtresini kaldırın veya "{alt}" seçeneğini deneyin. [Filtreleri Sıfırla]"

8) Kullanılabilirlik (A11y) ve özellikler

Hatalar eleyiciye bildirilir: aria-live = eleştirel için "iddialı", diğerleri için "kibar".
Hata içeren alanlar: aria-invalid =" true", mesaj başına aria-description.
Odak ilk hataya geçer; Sekme düzeni mantığı korur.
WCAG AA ile kontrast; Simge metnin yerini almaz.
Metin anlamını yitirmeden yüksek sesle okunmalıdır.

9) Yerelleştirme ve yasal doğruluk

Jargon ve kültürel metaforlardan kaçının.
Şartlar üzerinde anlaşın (sözlük): "ödeme reddedildi", "limit aşıldı", "doğrulama".
Yerel formatta şartlar ve kısıtlamalar belirleyin: "15 dakikaya kadar", para birimleri/tarihler.

10) Kalite metrikleri

Alana/adıma göre hata oranı.
Tamir zamanı.
Bir hatadan sonra bırakma (düzeltmeden ne kadar bıraktıkları).
Kullanıcı/oturum tarafından yinelenme.
Hata türüne göre destek çağrıları.
Hiyerarşideki değişikliklerden önce/sonra adım dönüştürme.

• Yalnızca renk/metne karşı otomatik kaydırma ve odaklama.
• Genel vs nedenin tam ifadesi.
• Arka ışık sırası (banner _ satır içi ilk) vs (yalnızca satır içi).
• Hatanın yanına Gereksinimleri Göster bağlantısı ekler.

11) Yayın öncesi kontrol listesi

• Her hatanın bir seviyesi vardır (Bilgi/Uyarı/Uyarı/Hata/Kritik).
• Renk/simge/konteyner seviyeye karşılık gelir.
• İlk hataya kaydırma ve odak kaydırma var.
• Mesaj ne/nasıl/neden açıklar.
• Terimler maç sözlüğü; yerelleştirme doğrulandı.
• Kullanılabilirlik: arya nitelikleri, kontrast, yüksek sesle okunabilirlik.
• Veriler hata ile kaybolmaz.
• "Sıfır sonuç've" bekleme "durumları hata olarak işaretlenmez.

12) Örneklerden önce/sonra

Tarih formu

Önce: "Hata 400"

Sonra: "Geçersiz tarih biçimi. DD kullan. MM. YYYY"

Ödeme

Önce: "Ödeme başarısız oldu"

Sonra: "Ödeme banka tarafından reddedildi. Başka bir yöntem deneyin veya bankanızla iletişime geçin. Ücret tahsil edilmedi"

KYC

Önce: "Belge kabul edilmedi"

Sonra: "Belge tanınamadı. Parlama olmadan bir fotoğraf yükleyin, köşeler ve metin görünür"

Sıfır arama (hata değil!)

Önce: "Hata: hiçbir şey bulunamadı"

Sonra: "Canlı rulet için sonuç yok ". "Yüksek limitli" filtreyi kaldırın veya ruleti deneyin. "[Filtreleri Sıfırla]"

13) Tasarım sistemi bileşenleri

''

Пропсы: 'mesaj', 'önem', 'ariaDescribedBy', 'kompakt'.
Oluştur: metin + simge, 'önem' derecesine göre renk.

''

Пропсы: 'başlık', 'açıklama', 'önem', 'eylemler []'.
Seçenekler: 'info | notice | warning | error | critical'.

''

Alanlara bağlantı içeren hataların listesi, klavye navigasyonu, "# 1'e git".

'' (mantık)

Alan/form/adım kuralları, öncelikler, şemalar (örneğin, JSON-Schema), ileti yerelleştirme.

14) Hızlı ifade desenleri

15) Süreç gömme

Metinleri doğrulama mantığı ile aynı anda tasarlayın.
Hatları i18n'de bileşenlerin yanında saklayın, versionize edin.
PR kontrol listesinde: seviye uyumluluğu, aria nitelikleri, doğru yerelleştirme.
Metrik hatalarını düzenli olarak gözden geçirin ve geri bildirimleri destekleyin.

Son hile sayfası

Seviyeleri dijitalleştirin: Bilgi - Kritik.
Önceliği görsel olarak ve odakta gösterin.
Düzeltmeyi kısaca ve özellikle açıklayın.
Boşluğa hata deme.
Ölçme ve geliştirme: hata oranı, Düzeltme Süresi, bırakma.