Arayüzde gerçek geribildirim

1) "Gerçek geribildirim'nedir

Gerçek geri bildirim, kullanıcının ne olduğunu, şimdi ne olduğunu ve daha sonra ne olacağını anlamasına yardımcı olan zamanında, somut ve eylemle ilgili geri bildirimlerdir. Bilişsel yükü azaltır, hataları azaltır ve kontrol duygusunu arttırır.

• Belirsizliği ve beklentiyi azaltır.
• Hataları önleyin ve hızlı bir şekilde düzeltin.
• Başarıyı onaylayın ve bir sonraki adımı gösterin.

2) Geri bildirim türleri

Instant (≤100 -200 ms): hover/focus/pressed-state, etkin öğelerin vurgulanması.
Kısa (≤1 s): iplikçiler/iskeletler, mikro-onaylar, "Kaydedilmiş".
İlerleme (saniye-dakika): belirlemek/belirsiz-göstergeler, ETA/adımlar.
Onaylar: "Hazır'ı temizle + sonuç referansı/geri al.
Uyarılar: Nazikçe (göndermeden önce) zarar önlemek.
Hatalar: "Neyin yanlış gittiğini've" nasıl düzeltileceğini "açıklayın.
Sistem durumu: çevrimiçi/çevrimdışı, senkronizasyon, çakışmalar.
İçerik geri bildirimi: değişiklikleri vurgulamak, sürümleri karşılaştırmak, yeni rozet.

3) Yüksek kaliteli geri bildirim ilkeleri

1. Zamanındalık:

microsignal hemen; Uzun vadeli operasyonlar - ilerleme ile.

2. Bağlama bağlanma:

Etkinlik/alanın yanında ortak bir banner'da gizlenmeyin.

3. Özgüllük ve eylem:

"Şifre çok kısa (min. 8). Tamir etmek mi?" "Hata 400" yerine.

4. Geri döndürülebilirlik:

Değişiklik bildiriminde Geri Al/Yinele.

5. Öngörülebilirlik:

Ürün boyunca başarı/hata için aynı kalıplar.

6. Kullanılabilirlik:

Kontrast, sadece renk değil, ARIA canlı, odak kontrolü.

7. Dikkat tasarrufu:

Minimum yeterli sinyal; Gereksiz modeller ve "çığlık" olmadan.

4) "Canlı" geri bildirim kalıpları

4. 1 Öğelerin görsel durumları

Hover/focus/pressed/disabled - görünür hiyerarşi.
Tıklandığında "yükleniyor" düğmesi (tekrar tıklanamaz).

4. 2 Satır içi doğrulama (alanların sağında)

Odak kaybolduğunda veya giriş durakladığında sözdizimini denetleme (300-500 ms debounce).
Alanın altındaki ileti, durum simgesi, örnek/maske ("+ 38 (0XX) XXX-XX-XX").
Sipariş: önce önleyin, sonra düzeltin.

4. 3 İskeletler и Boş Durumlar

İçeriği "atlamak" yerine iskeletler.
Talimat/demo verileri ve CTA ile boş durumlar.

4. 4 İyimser UI (geri alma ile)

Hemen değiştirilen sonucu gösterir, sunucuya paralel olarak göndeririz.
Arıza durumunda - yumuşak geri alma + açık neden + "Tekrarla".
Geri alma günlükleri ve metrikleri gereklidir.

4. 5 Otomatik kaydetme ve göstergeler

"Kaydedildi 18: 42 "/" Senkronizasyon... "/" Çevrimdışı: yerel kopya "

Çakışmalar: fark göster ve sürüm/birleştirme değişikliklerini seç.

4. 6 Bildirimler ve gelen kutusu

Önemli olaylar, bir eylem düğmesi ile 3-5 saniye boyunca göze çarpmayan bir tosttur.
Arka plan görevleri için - bildirim merkezi/geçmiş.

5) Hatalar: sınıflandırma ve cevaplar

Doğrulama (kullanıcı): alanın yanında; nasıl düzeltilir; örnek.
İş kuralları: kuralı/eşiği açıklayın; bir alternatif önerin.
Teknik: ağ/sunucu - "İletişim sorunu. Tekrar mı?" + çevrimdışı modu.
Kritik: her şeyi bir modal ile kırmayın - bağlamı kaydedin, iyileşmeye bir yol verin.

Microcopyright hataları: Kısaca, konuşma dilinde, kod ve kullanıcı suçu olmadan.

6) Uzun işlemler ve kuyruklar

İlerlemeyi belirleyin: bilinen hacim - yüzdeleri/adımları gösterin.
Belirsiz: bilinmeyen - dalgalanma + derecelendirme "Genellikle 5-10 s".
Arka plan görevleri: görev listesindeki durum + push/tost hazır.
İptal/Duraklatma: uygun olduğunda - zorunlu.
İlerlemenin bileşimi: birçok adım - mini adımlar ("Adım 2/4: doğrulama"...).

7) Çevrimdışı, boşluklar ve çatışmalar

Bilgi: rozet "Çevrimdışı", "Bağlan"....
Yerel önbelleğe alma: ağ olmadan çalışma; Kuyruk gönder.
Sürüm çakışmaları: fark önizleme, seçim veya birleştirme stratejisi.
Zaman Aşımları: "30 saniye içinde başarısız oldu - tekrar deneyecek miyiz?" + "Daha sonra rapor verin".

8) Erişilebilirlik ve dahil etme

ARIA canlı bölgeler: Tost/hatalar için 'aria-live =' kibar/iddialı '.
Odak yönetimi: yanlışlıkla - alana odaklanın; Başarı ile - sonuca.
Sadece renk değil: simge/metin/desen.
Hareket tercihleri: respect 'prefers-reduced-motion'.
Ses/dokunuş (mobil): yumuşak dokunuş, seçeneği devre dışı bırakın.

9) Geri bildirim kalitesi metrikleri

TTF (Time-to-Feedback) - eylemden sonraki ilk sinyalden önceki zaman.
Hata Oranı/Düzeltme Oranı - ≤N saniye içinde başarıyla düzeltilen hataların yüzdesi.
Rage-Clicks/Dead-Ends: Etkin olmayan bölgelerde birden çok tıklama.
Geri Alma Oranı (iyimser): Geri dönüşlerin yüzdesi ve nedenleri.
Kabul Edilen Başarı: Açık "Hazır" onayların yüzdesi.
Destek Sinyalleri: Anlaşılmaz hatalar/eksik durum ile ilgili şikayetler.
Görev Tamamlama/TTFV: geri bildirimin görev tamamlama ve ilk değer üzerindeki etkisi.

10) Enstrümantasyon ve etkinlikler

ui_action {type, target_id, context}
ui_feedback_shown {type: success    warning    error    progress, target_id, latency_ms}
ui_error {category: validation    business    network    system, field, code, retriable}
sync_state {online    offline    syncing, queued_ops, conflicts}
optimistic_tx {entity, op, committed    rolled_back, reason}

Nitelikler: segment, cihaz, kanal, uygulama/derleme sürümü.

11) Kontrol listeleri

11. 1 Tasarım

• Her eylemin anında görsel bir yanıtı vardır.
• Hatalar - sorunun yakınında, bir düzeltme örneği ile.
• Başarı - açık onay + sonraki adım/bağlantı.
• Uzun işlemler - ilerleme/ETA/iptal.
• Çevrimdışı durumlar ve senkronizasyon açıklanmıştır.
• Güvenli geri alma ve günlükler ile iyimser UI.
• Kullanılabilirlik: kontrast, ARIA, odak, "yalnızca renk" yok.

11. 2 İçerik/Mikrokopiler

• Kısaca, durumda, teknik jargon olmadan.
• Kullanıcıyı suçlamayın; Bir iyileştirme yolu önerir.
• Tutarlı Desenler (Kaydedilmiş, Başarısız - Yeniden Deneme).

11. 3 Teknik

• Idempotency/CTA üzerinde veri tekilleştirme tıklayın.
• İptal/Yeniden Dene Gönder, Zaman Aşımı ve Geri Alma ile Retray.
• TTF günlükleri, hatalar, geri dönüşler ve çevrimdışı kuyruk.
• Zayıf ağ/uzun yanıt/çakışmalarla yapılan testler.

12) Mikro telif hakkı örnekleri

• "Kaydedilmiş 7:05 p.m. Kartı açmak istiyor musunuz

• "Şifre çok kısa - en az 8 karakter".

• "İletişim kayboldu. Değişiklikleriniz yerel olarak kaydedildi. Yeniden göndermek ister misin?"

• "Dosya işleme (adım 2/3)... Genellikle 30 saniye kadar sürer. İptal et"

• "Bu belgenin yeni bir versiyonu var. Karşılaştırın ve değişiklikleri seçin"

• "Değişiklik uygulanamadı. Eskisini iade ettim. Tekrar mı?"

13) Vakalardan önce/sonra

İstemsiz Form - satır içi doğrulama

Önce: sadece gönderdikten sonra hatalar; yüksek başarısızlık.
Sonra: yazarken istemler, örnekleri biçimlendirme, alan vurgulama - Tamamlama Oranı artışı ve Hata Oranı düşüşü.

Uzun yükleme> iskelet + ilerleme

Önce: spinner ile boş ekran; Öfke tıklıyor.
Sonra: iskeletler, deterministik ilerleme, çekilme - Rage-Clicks düşüş.

"Sessiz" kalmak - net başarı + bir sonraki adım

Önce: kullanıcı emin değil, tekrar tıklıyor.
Sonra: Kaydedilmiş + Açık bağlantı - daha az kopya ve hata.

Ağ dengesiz - çevrimdışı kuyruk

Öncesi: veri kaybı.
Sonra: yerel yedekleme, tekrar gönderme, durum rozeti - artan güven.

14) Uygulama süreci

1. Adım ve hata haritası: Geri bildirimin nerede gerekli olduğu ve ne tür olduğu.
2. Geri bildirim şablonları: başarı/hata/ilerleme/çevrimdışı - tek bir set.
3. Prototip ve testler: Yapay olarak artan gecikmeler; Uygunluk kontrolü.
4. Enstrümantasyon: olaylar, TTF, geri dönüşler, öfke tıklamaları.
5. Deneyler: Formülasyonlar ve desenler üzerinde A/B (inline vs post-submit).
6. Bayrak sunumu ve olay retrospektifi.

15) Özet

Gerçek geri bildirim, doğru zamanda doğru sinyaldir: anında yanıt, anlaşılabilir hatalar, dürüst ilerleme ve görünür bir son nokta. Geri bildirimi yerel ve etkili hale getirin, çevrimdışı ve geri dönüşleri koruyun, kullanılabilirliği gözlemleyin ve Hata Oranı ve Öfke Tıklamaları ile birlikte Geri Bildirim Süresini ölçün. Bu, arayüzü öngörülebilir hale getirir ve kullanıcı her eylemde kendine güvenir.