Mikro-kredit və fidbek

1) Mikrokredit nədir

Mikrodalğalar - sistemin istifadəçini eşitdiyini və nəticəyə doğru irəlilədiyini təsdiqləyən qısa «siqnal-cavab» dövrləri.

1. Trigger (klik, swipe, fokus, sistem hadisəsi).

2. Qaydalar (nə və necə dəyişir).

3. Fidbek (vizual/səs/toxunma/mətn).

4. Cycle/meta-qaydalar (təkrar, bitmə, undo/redo).

Məqsəd: vəzifədən yayındırmadan qeyri-müəyyənliyi və idrak yükünü azaltmaq.

2) Dizayn prinsipləri

Mənası> effekti. Effekt «nə baş verdiyini» və «sonra nə olduğunu» izah edir.
Anlıq. İlk cavab ≤ 100 ms (düymələr/açarlar).
Aydınlıq. Fərqli hallar: hover/focus/pressed/disabled/loading.
Qənaət. Minimum xüsusiyyətlər, qısa müddət, «salam» olmadan.
Tutarlılıq. Eyni hərəkətlər eyni siqnallardır.
Əlçatanlıq. Fidbeck screenrider ilə görürük, eşidirik və oxuyuruq; hərəkət/səs alternativi var.

3) Tayminqlər və əyrilər

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: 180-240 ms giriş, 120-160 ms çıxış

Inline-validation: sahə fokus itirdikdən sonra ≤ 100 ms

Default əyri: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; pressed üçün - sürətləndirilmiş 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Mikrokreditlərin kataloqu

4. 1 düymələri və açarları

Dərhal cavab: şəbəkə sorğusu zamanı vizual «tıklama «/basma + 'busy 'vəziyyəti.
Optimist yeniləmə: Dərhal UI-ni dəyişdirin, səhv olduqda geri çəkin (undo ilə).
Debauns ikiqat klik: cavab/timeout əvvəl təkrar bloklamaq.

4. 2 Inline-validasiya formaları

Blur sahəsində validasiya; mesajlar qısa və konstruktiv («ən azı 8 simvol»).
Status ikonu + rəng + mətn (bir rəngdə deyil).
Parollar üçün - ani «güc» göstəricisi (girişə mane olmur).

4. 3 Tost/Banner/Snack

Bloklanmayan təsdiqlər üçün istifadə edin.
Uzunluğu 2-5 s, hover/focus, Undo düyməsi uyğun olduqda fasilə.
Vacib məzmunu və CTA-nı bağlamayın.

4. 4 Tərəqqi və skeletonlar

Prosesin uzunluğu bilinirsə - proqressbar; yoxdursa - spinner əvəzinə skeleton.
Heç bir atlama layout: fix. blokların hündürlüyü.

4. 5 nişanlar/sayğaclar

Rəqəm kontrastı ≥ 4. 5:1; '99 +' kəsilməsi ilə maksimum 99/999.
İnkrement animasiyaları - 40-60 ms batch ilə qısa addımlar, maket «titrəmədən».

4. 6 Tooltip/Help

hover/focus ilə görünüş; 'aria-describedby' vasitəsilə əlçatanlıq.
Yalnız tooltip-də kritik məlumatlara qadağa.

5) Səhvlər, boş hallar, undo

Səhv: dürüst mətn, səbəb və hərəkətlərin izahı («Təkrarla», «Xəritəni dəyişdirin»).
Boş vəziyyət: nə və necə başlamaq; səssiz illüstrasiya, AA/AAA mətn kontrastı.
Undo window: geri dönüş hərəkətləri üçün 5-10 s (aradan qaldırılması, güllə bahis ləğv).

6) Multimodal fidbek

Səs: sakit, qısa, hadisə növü üçün bir nümunə (uğur/səhv/diqqət); parametrlərdə söndürülür.
Vibro/Xaptika: mətbuata asan cavab/uğur; 'prefers-reduced-motion' və sistem məhdudiyyətlərinə hörmət edirik.
Vizual: yalnız 'transform/opacity', massivlərdə ağır blur/kölgələr yoxdur.

7) Mövcudluq (A11y)

': focus-visible' klaviatura üçün; blur olmadan focus ring.
Scrinrider: 'role = «status »/» alert»' tost üçün; canlı bölgələr 'aria-live = «polite/assertive»'.
Səs/hərəkət alternativi; 'prefers-reduced-motion: reduce'.
Mətn və simvolların kontrastı - WCAG (adi ≥ üzrə 4. 5:1).

8) Performans

100 ms ≤ üçün cavab verin: şəbəkəyə vizual cavab.
Animasiya 'transform/opacity'; bir çox elementdə 'height/left/box-shadow' -dan çəkinin.
Şəbəkə effektləri - prefetch və optimistika ilə; retrai idempotentdir.

9) Mikro əlaqə tokenləri (dizayn 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) Satış Snippets

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) Metrika və keyfiyyətə nəzarət

INP p75 <200 ms, Long Tasks payı <5%.
First User Feedback (klik → vizual cavab) ≤ 100 ms.
Geri çəkilmə ilə optimist hərəkətlərin payı <3% (əks halda - etibarsızlıq).
UX sorğuları: səhv mesajlarının aydınlığı, təsdiqlərin görünməsi.

QA-çek siyahısı

• Hər interaktivdə 'pressed/busy/disabled' var.
• Səhvlər mətn və hərəkətlərlə müşayiət olunur (Retry/Undo).
• Tostlar SR ilə mövcuddur və əsas məzmunu örtmür.
• Inline-validasiya girişə mane olmur; mesajlar konkret.
• Dəstəklənən 'prefers-reduced-motion'; səs/vibra söndürülür.
• Heç bir sıçrayış layout və strobe; 'transform/opacity' animasiyalar.

12) iGaming xüsusiyyətləri

Bahis/alış: ani 'pressed → busy', Undo ilə «qəbul» tost (reqlament imkan verərsə), idempotent-açarlar; gecikmə> 1 s - «təsdiq gözləyirik»....
Spin/Reveal: qısa press fidbek, sonsuz yanıb-sönmədən hamar start/stop; uduş - sıçrayış ≤ 500 ms + oxunaqlı mətn (AAA).
Həyat əmsalları: batch yeniləmələri, «atlama» olmadan vizual diff (ok/qalınlıq).
Ödənişlər/nəticələr: addım-addım irəliləyiş (KUS → Yoxlama → Ödəniş), imtinanın səbəblərinin şəffaf mətnləri.
Məsuliyyətli oyun: yayındırıcı effektlər olmadan bildirişlər; ən yüksək kontrast, açıq CTA «Limit müəyyən».

13) Anti-nümunələr

Klik cavabını göstərməzdən əvvəl şəbəkə cavabını gözləmək.
«Forma olmayan rəng»: vəziyyət yalnız çalarları ilə fərqlənir.
Sonsuz dalğalanma/yanıb-sönmə, açarsız kəskin səslər.
Tooltip klaviatura əlçatmaz kritik məzmun ilə.
Boşluqda Spinner> 1-2 s tərəqqi/skelet olmadan.
Yüzlərlə elementdə nazik kölgələr/blur (zəif cihazlarda laq).

14) Dizayn sistemində sənədləşmə

«Micro-tokens»: 'duration/easing', tost/nişan/validator presetləri.
«Patterns»: düymələr, formalar, tostlar, tərəqqi, inline səhvlər, undo.
«A11y & Motion»: SR/HC/reduced-motion üçün qaydalar; ARIA nümunələri.
«Do/Don 't»: vaxtlama, INP/First Feedback rəqəmləri ilə qısa kliplər.

Qısa xülasə

Mikrokredit əminlik dilidir. 100 ms ≤ cavab verin, başa düşülən vəziyyətləri düzəldin, təhlükəsiz geri dönüş ilə nikbinlikdən istifadə edin, yalnız rəngə güvənməyin və yüngül xüsusiyyətləri canlandırın. Əlçatanlığa və məhsuldarlığa hörmət edin - sonra məhsul canlı, dürüst və etibarlı hiss olunur, xüsusilə real vaxt ssenarilərində.