Mikrokreditlash va fidbek

1) Mikro qarz olish nima

Mikro-qarama-qarshiliklar - tizim foydalanuvchini eshitganini va natijaga qarab harakatlanayotganini tasdiqlovchi «javob signali» qisqa tsikllari.

1. Trigger (klik, svayp, fokus, tizim hodisasi).

2. Qoidalar (nima va qanday o’zgaradi).

3. Fidbek (vizual/tovushli/taktil/matnli).

4. Sikl/meta qoidalar (takrorlash, tugash, undo/redo).

Maqsad: vazifadan chalg’itmasdan noaniqlik va kognitiv yuklamani kamaytirish.

2) Loyihalashtirish prinsiplari

Ma’nosi> effekti. Buning samarasi «nima bo’ldi» va «keyingi nima».
Tezlik. Birinchi javob ≤ 100 ms (tugmalar/kalitlar).
Aniq. Farqlanadigan holatlar: hover/focus/pressed/disabled/loading.
Tejash. Minimal xossalar, qisqa muddatli, «salyutlarsiz».
Konsistentlik. Bir xil harakatlar - bir xil signallar.
Foydalanish imkoniyati. Fidbek ko’rish, eshitish va skrinidan o’qish; Harakat/tovushga muqobil.

3) Tayminglar va egri chiziqlar

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: kirish 180-240 ms, chiqish 120-160 ms

Inline-validatsiya: maydon fokusini yoʻqotgandan keyin 100 ms ≤

Andoza egri chiziq:’cubic-bezier (0. 2, 0, 0. 2, 1)`; pressed uchun - tezlashtirilgan’cubic-bezier (0. 4, 0, 1, 1)`.

4) Mikrokreditlar katalogi

4. 1 Tugmalar va kalitlar

Zudlik bilan javob berish: tarmoq soʻrovida «bosish» + «busy» holati.
Optimistik yangilanish: biz darhol UIni o’zgartiramiz, xato yuz berganda (undo bilan).
Ikki marta bosish debaunsi :/timeout javobiga qadar takrorlashni bloklaymiz.

4. 2 Shakllarning inline-validatsiyasi

Blur maydoniga validatsiya; qisqa va konstruktiv xabarlar («kamida 8 ta belgi»).
Maqom belgisi + rang + matn (bitta rangda emas).
Maxfiy so’zlar uchun - «kuch» moment indikatori (kiritishga xalaqit bermaydi).

4. 3 Tost/banner/snekbar

Bloklamaydigan tasdiqlash uchun foydalaning.
Davomiyligi 2-5 s.
Muhim kontent va CTAni yopmang.

4. 4 Taraqqiyot va skeletonlar

Agar jarayonning uzunligi ma’lum bo’lsa - progressbar; agar yo’q bo’lsa - spinner o’rniga skeleton.
Layout: fix. bloklarning balandligi.

4. 5 Nishonchalar/hisoblagichlar

Raqam kontrastlari ≥ 4. 5:1; ko’pi bilan 99/999 bo’lib,’99 +’kesiladi.
Inkrement animatsiyalari - maketsiz 40-60 ms batchli qisqa qadamlar.

4. 6 Tooltip/Help

hover/focus bo’yicha paydo bo’lish; ’aria-describedby’ orqali foydalanish.
Faqat tooltip orqali tanqidiy maʼlumotlarni taqiqlash.

5) Xatolar, bo’sh holatlar, undo

Xato: halol matn, sababi va harakatlarini tushuntirish («Takrorlash», «Xaritani oʻzgartirish»).
Boʻsh holat: bu nima va qanday boshlash kerak; AA/AAA matnining qarama-qarshiligi.
Undo window: qaytariladigan harakatlar uchun 5-10 s (o’qqa qadar stavkani olib tashlash, bekor qilish).

6) Multimodal fidbek

Tovush: jim, qisqa, hodisa turiga bitta pattern (muvaffaqiyat/xato/e’tibor); moslamalarni oʻchirish.
Vibro/xaptika: press/muvaffaqiyatga oson javob; ’prefers-reduced-motion’ va tizimli cheklovlarni hurmat qilamiz.
Vizual: faqat’transform/opacity’, massivlarda og’ir blur/soyalarsiz.

7) Foydalanish imkoniyati (A11y)

’: focus-visible’ klaviatura uchun; blursiz fokus halqa.
Tostlar uchun’role = "status "/" alert’; tirik hududlar’aria-live = «polite/assertive»’.
Tovush/harakatga muqobil;’prefers-reduced-motion: reduce’.
Matn va ikonkalarning kontrasti - WCAG (oddiy ≥ 4. 5:1).

8) Spektakl

100 ms ≤ uchun javob bering: tarmoqqa vizual javob.
’transform/opacity’ ni jonlantiring; ’height/left/box-shadow’ dan qoching.
Tarmoq effektlari - prefetch va optimistik; retrai idempotentdir.

9) Mikro-qarama-qarshilik tokenlari (dizayn-tizim)

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) Sotish snippetlari

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 va sifat nazorati

INP p75 <200 ms, Long Tasks ulushi <5%.
First User Feedback (klik → vizual javob) ≤ 100 ms.
Qaytish bilan optimistik harakatlar ulushi <3% (aks holda - ishonchsizlik).
UX-so’rovlar: xatolar haqidagi xabarlarning tushunarliligi, tasdiqlarning ko’rinishi.

QA-chek-varaq

• Har bir interaktivda’pressed/busy/disabled’mavjud.
• Xatolar matn va harakatlar bilan birga keladi (Retry/Undo).
• Tostlar SR orqali mavjud va asosiy tarkibni qoplamaydi.
• Inline-validatsiya kiritishga xalaqit bermaydi; xabarlar aniq.
• Qoʻllab-quvvatlangan’prefers-reduced-motion’; ovoz/vibra o’chiriladi.
• Layout va strobe poygalari yoʻq; ’transform/opacity’ animatsiyalari.

12) iGaming xususiyatlari

Stavka/xarid: bir zumda’pressed → busy’, Undo bilan «Qabul qilindi» (agar reglament imkon bersa), idempotent-kalitlar; kechiktirilganda> 1 s - «Tasdiqlashni kutmoqdamiz»....
Spin/Reveal: qisqa press-fidbek, cheksiz miltillashsiz silliq start/stop; yutuq - ko’tarilish ≤ 500 ms + o’qish mumkin bo’lgan matn (AAA).
Hayot koeffitsiyentlari: batch bilan yangilanish, «sakrashsiz» vizual diff (o’q/qalinlik).
To’lovlar/xulosalar: bosqichma-bosqich taraqqiyot (KES → Tekshirish → To’lov), rad etish sabablarining shaffof matnlari.
Mas’uliyatli o’yin: chalg’ituvchi ta’sirlarsiz bildirishnomalar; «Limit belgilash» CTAning eng yuqori kontrastlari.

13) Anti-patternlar

Bosishga javob berishdan oldin tarmoq javobini kutish.
«Shaksiz rang»: holat faqat rang bilan ajralib turadi.
Cheksiz pulsatsiya/miltillash, o’chiruvchisiz keskin tovushlar.
Klaviatura bilan mavjud boʻlmagan tanqidiy tarkibga ega Tooltip.
Spinner bo’shliqda> 1-2 s progress/skeletsiz.
Yuzlab elementlarda ingichka soyalar/blur (zaif qurilmalarda lag).

14) Dizayn-tizimdagi hujjatlar

«Micro-tokens»:’duration/easing’, tost/beyj/validator presetalari.
«Patterns»: tugmalar, shakllar, tostlar, progress, inline xatolar, undo.
«A11y & Motion»: SR/HC/reduced-motion qoidalari; ARIA misollari.
«Do/Don’t»: tayminglar, INP/First Feedback raqamlari yozilgan qisqa kliplar.

Qisqacha xulosa

Mikro hamkorlik - ishonch tilidir. 100 ms ≤ javob bering, tushunarli holatlarni aniqlang, xavfsiz orqaga qaytish bilan optimistikadan foydalaning, faqat rangga tayanmang va engil xususiyatlarni jonlantiring. Arzonligi va unumdorligini hurmat qiling, shunda mahsulot jonli, halol va ishonchli tuyuladi, ayniqsa real vaqt stsenariylarida.