Mikro etkileşimler ve geri bildirimler

1) Mikro etkileşim nedir

Mikro etkileşimler, sistemin kullanıcıyı duyduğunu ve sonuca doğru ilerlediğini doğrulayan kısa sinyal ↔ yanıt döngüleridir.

1. Tetik (tıklama, kaydırma, odaklama, sistem olayı).

2. Kurallar (ne değişir ve nasıl).

3. Fidbeck (görsel/ses/dokunsal/metin).

4. Döngü/meta kuralları (tekrar, son kullanma, geri alma/yineleme).

Amaç: Görevden uzaklaşmadan belirsizliği ve bilişsel yükü azaltmak.

2) Tasarım ilkeleri

Anlamı> etkisi. Etki'ne olduğunu've "sırada ne olduğunu" açıklar.
Anlık bir şey. İlk yanıt 100 ms ≤ (düğmeler/anahtarlar).
Belirsizlik. Ayırt edilebilir durumlar: hover/focus/pressed/disabled/loading.
Tasarruf. Minimum özellikler, kısa süreler, havai fişek yok.
Tutarlılık. Aynı eylemler aynı sinyallerdir.
Erişilebilirlik. Fidbek bir ekran okuyucu tarafından görülür, duyulur ve okunur; Hareket/ses için bir alternatif var.

3) Zamanlamalar ve eğriler

Hover/Odak: 120-180ms

Basılı/Geçiş: 80-120 мс

Tost/Araç ucu: giriş 180-240ms, çıkış 120-160ms

Satır içi doğrulama: Alan odağının kaybından sonra ≤ 100 ms

Varsayılan eğri 'cubic-bezier (0. 2, 0, 0. 2, 1)`; preslenmiş için - hızlandırılmış 'kübik-bezier (0. 4, 0, 1, 1)`.

4) Mikro etkileşim kataloğu

4. 1 Düğmeler ve anahtarlar

Anında yanıt: ağ tarafından sorgulandığında görsel tıklama/girinti + meşgul durumu.
İyimser güncelleme: Kullanıcı arayüzünü hemen değiştirin, hataya geri dönün (geri alma ile).
Tartışmayı çift tıklayın :/timeout yanıtlanana kadar tekrarlamayı engelleyin.

4. 2 Formların satır içi doğrulaması

Bulanıklaştırma alanlarında doğrulama; Mesajlar kısa ve yapıcıdır ('en az 8 karakter ").
Durum simgesi + renk + metin (tek renk değil).
Parolalar için - anlık bir "güç" göstergesi (girişe müdahale etmez).

4. 3 Tost/afiş/atıştırmalıklar

Engellemeyen onaylar için kullanın.
Süre 2-5 s, hover/focus'da duraklat, uygun olduğunda Geri Al düğmesi.
Önemli içerikleri ve CTA'ları kapatmayın.

4. 4 İlerleme ve iskeletler

İşlemin uzunluğu biliniyorsa, ilerleme çubuğu; Değilse, spinner yerine iskelet.
Düzen sıçraması yok: düzelt. blok yükseklikleri.

4. 5 Rozetler/sayaçlar

Rakam kontrastı ≥ 4. 5:1; Kesme '99 +'ile maksimum 99/999.
Artım animasyonları - "titreyen" düzen olmadan 40-60 ms'lik kısa adımlar.

4. 6 Araç ipucu/Yardım

Hover/focus ile görünüm; 'aria-describedby' aracılığıyla erişilebilirlik.
Kritik bilgileri yalnızca ipucunda yasaklayın.

5) Hatalar, boş durumlar, geri al

Hata: dürüst metin, sebep ve eylemin açıklaması ("Tekrar", "Kartı değiştir").
Boş durum: ne olduğu ve nasıl başlanacağı; İllüstrasyon sessiz, metin kontrastı AA/AAA.
Geri al penceresi: Geri alınabilir eylemler için 5-10 s (kaldırma, mermiden önce bahsin iptali).

6) Multimodal geri bildirim

Ses: sessiz, kısa, olay türü başına bir desen (başarı/hata/dikkat); Ayarları kapatın.
Vibro/haptika: kolay basın yanıtı/başarı; 'prefers-reduced-motion've sistem sınırlamalarına saygı gösterin.
Görsel: sadece 'transform/opacity', dizilerde ağır bulanıklık/gölgeler yok.

7) Kullanılabilirlik (A11y)

Klavye için ': focus-visible'; Bulanık olmadan odak halkası.
Ekran koruyucu: 'role =' status'/' alert '' tost için; Yaşayan bölgeler 'arya-canlı =' kibar/iddialı ''.
Ses/harekete alternatif; 'prefers-reduced-motion: reduce'.
Metin ve simge kontrastı - WCAG (normal ≥ 4. 5:1).

8) Performans

100ms ≤ yanıt verin: ağa görsel yanıt.
'Dönüştürme/opaklığı' canlandırın; Birden çok öğe üzerinde 'yükseklik/sol/kutu-gölge'den kaçının.
Ağ etkileri - prefetch ve iyimserlik ile; Retrai idempotenttir.

9) Mikro etkileşim belirteçleri (tasarım sistemi)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) Uygulama parçacıkları

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) Metrikler ve kalite kontrolü

INP p75 <200 ms, Uzun Görevler payı <%5.

İlk Kullanıcı Geribildirimi klik ^ vizualnyy ≤ 100ms

UX anketleri: hata mesajlarının netliği, onayların görünürlüğü.

QA kontrol listesi

• Her interaktif 'basılı/meşgul/devre dışı' vardır.
• Hatalara metin ve eylemler eşlik eder (Retry/Undo).
• Tostlar SR'de mevcuttur ve anahtar içeriği çakışmaz.
• Satır içi doğrulama girişe müdahale etmez; Mesajlar özeldir.
• 'prefers-reduced-motion' desteklenir; Ses/titreşim kapalı.
• Hiçbir düzen ve strobe atlar; 'transform/opacity' üzerindeki animasyonlar.

12) iGaming'in özellikleri

Bet/purchase: anında 'preslenmiş - meşgul', Undo ile 'Kabul Edildi' tostu (düzenlemeler izin veriyorsa), idempotent anahtarları; gecikmede> 1 s - "Onay bekleniyor"....
Spin/Reveal: kısa basın geribildirimi, sonsuz yanıp sönmeden pürüzsüz başlangıç/durdurma; Win - patlama ≤ 500 ms + okunabilir metin (AAA).
Canlı katsayılar: Toplu güncellemeler, "sıçramalar" olmadan görsel diff (ok/kalınlık).
Ödemeler/sonuçlar: adım adım ilerleme (KUS - Proverka - Vyplata), reddetme nedenlerinin şeffaf metinleri.
Sorumlu oyun: dikkat dağıtıcı etkileri olmayan bildirimler; Daha yüksek kontrast, açık "Set Limit" CTA'ları.

13) Anti-desenler

Bir tıklatmaya yanıt göstermeden önce bir ağ yanıtı bekleyin.
"Şekilsiz renk": durum sadece gölgede farklılık gösterir.
Sonsuz titreşimler/yanıp sönmeler, anahtarsız keskin sesler.
Klavyeden erişilemeyen kritik içeriğe sahip araç ipucu.
Boşlukta spinner> 1-2 s ilerleme/iskelet olmadan.
Yüzlerce öğede ince gölgeler/bulanıklık (zayıf cihazlarda gecikme).

14) Tasarım sistemindeki belgeler

"Mikro belirteçler": 'süre/hareket hızı', tost/rozet/doğrulayıcıların ön ayarları.
"Desenler": düğmeler, şekiller, tostlar, ilerleme, satır içi hatalar, geri alma.
"A11y & Motion": SR/HC/reduced-motion için kurallar; ARIA örnekleri.
"Yap/Yapma": zamanlamaları olan kısa klipler, INP/İlk Geri Bildirim numaraları.

Kısa Özet

Mikro etkileşimler bir güven dilidir. ≤ 100 ms'de bir yanıt verin, anlaşılabilir durumları yakalayın, güvenli geri alma ile iyimser kullanın, yalnızca renge güvenmeyin ve ışık özelliklerini canlandırın. Kullanılabilirliğe ve performansa saygı gösterin - o zaman ürün, özellikle gerçek zamanlı senaryolarda canlı, dürüst ve güvenilir hisseder.