Mikro karz we fidbek

1) Mikro karz bermek näme

Mikro seslenme - ulgamyň ulanyjyny eşidendigini we netijä tarap hereket edýändigini tassyklaýan "signal-jogap" gysga siklleri.

1. Trigger (basmak, swipp, fokus, ulgam hadysasy).

2. Düzgünler (näme we nähili üýtgeýär).

3. Fidbek (wizual/ses/taktil/tekst).

4. / Meta düzgünleri (gaýtalamak, gutarmak, undo/redo).

Maksat: näbellilik we akyl ýüküni meseleden daşlaşdyrman azaltmak.

2) Dizaýn etmegiň ýörelgeleri

Manysy> täsiri. Täsir "näme boldy" we "indiki näme" diýip düşündirýär.
Pursatlylyk. Ilkinji jogap ≤ 100 ms (düwmeler/açarlar).
Birmeňzeşlik. Tapawutly ýagdaýlar: hover/focus/pressed/disabled/loading.
Tygşytlamak. Az häsiýetli, gysga möhletli, "salýutsyz".
Tutarlylyk. Hereketler birmeňzeş.
Elýeterlilik. Fidbek skrinrider bilen görýäris, eşidýäris we okaýarys; hereket/ses üçin alternatiwa bar.

3) Taýmingler we egriler

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

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

Inline-validasiýa: fokus ýitirilenden soň 100 ms ≤

Adaty egri: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; pressed üçin - çaltlaşdyrylan 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Mikrokreditleriň katalogy

4. 1 Düwmeler we açarlar

Derrew jogap: Tor soralanda wizual "basmak "/basmak + 'busy 'ýagdaýy.
Optimistik täzelenme: UI-ni derrew üýtgedýäris, ýalňyşlyk ýüze çyksa yzyna alýarys (undo bilen).
Iki gezek basmak :/timeout jogap berýänçä gaýtalanmagy bloklaýarys.

4. 2 Şekilleriň inline-tassyklamasy

Blur meýdanyna tassyklama; gysga we konstruktiw habarlar ("azyndan 8 simwol").
Status nyşany + reňk + tekst (bir reňkde däl).
Parollar üçin - "güýç" görkeziji (girmäge päsgel bermeýär).

4. 3 Tostlar/bannerler/snekbarlar

Blokirlemeýän tassyklamalar üçin ulanyň.
Uzynlygy 2-5 s, hower/focus-da arakesme, ýerlikli ýerinde Undo düwmesi.
Möhüm mazmuny we CTA-ny ýapmaň.

4. 4 Ösüş we skeletler

Eger prosesiň uzynlygy belli bolsa - progressbar; ýok bolsa - spinner ýerine skeleton.
Böküşsiz layout: fix. bloklaryň beýikligi.

4. 5 Nyşanlar/hasaplaýjylar

Sanlaryň garşylygy ≥ 4. 5:1; iň köp 99/999, kesilen '99 +'.
Inkrement animasiýalary - 40-60 ms batçaly gysga ädimler, maket "titremezden".

4. 6 Tooltip/Help

Hover/focus boýunça çykyş; 'aria-describedby' arkaly elýeterlilik.
Diňe tooltip-de möhüm maglumatlary gadagan ediň.

5) Ýalňyşlyklar, boş ýagdaýlar, undo

Hata: dogruçyl tekst, sebäbini we hereketini düşündirmek ("Gaýtala", "Kartany üýtget").
Boş ýagdaý: näme we nädip başlamaly; AA/AAA tekstiniň gapma-garşylygy.
Undo window: Yzyna gaýtaryp boljak hereketler üçin 5-10 s (aýyrmak, okdan öň stawkany ýatyrmak).

6) Multimodal fidbek

Ses: sessiz, gysga, wakanyň görnüşine bir nagyş (üstünlik/ýalňyşlyk/üns); sazlamalarda öçürýäris.
Wibro/haptika: metbugata aňsat jogap/üstünlik; 'prefers-reduced-motion' we ulgamlaýyn çäklendirmelere hormat goýýarys.
Wizual: diňe 'transform/opacity', massiwlerde agyr blur/kölegesiz.

7) Elýeterlilik (A11y)

Klawiatura üçin ': focus-visible'; blur bolmazdan fokus halkasy.
Tost üçin 'role =' status '/' alert '; diri sebitler 'aria-live = "polite/assertive"'.
Ses/hereket üçin alternatiwa; 'prefers-reduced-motion: reduce'.
Tekstiň we nyşanlaryň gapma-garşylygy - WCAG (adaty ≥ boýunça 4. 5:1).

8) Çykyş

100 ms ≤ jogap beriň: tora wizual jogap.
'transform/opacity' animasiýa; Köp elementde 'height/left/box-shadow' -dan gaça duruň.
Tor täsirleri - prefetç we optimizm bilen; retraýlar idempotentdir.

9) Mikrokreditleriň bellikleri (dizaýn ulgamy)

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) Amala aşyrmagyň snippetleri

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 we hil gözegçiligi

INP p75 <200 ms, Long Tasks paýy <5%.
First User Feedback (basmak → wizual jogap) ≤ 100 ms.
Yza çekilmegi bilen optimistik hereketleriň paýy <3% (başgaça - ynamsyzlyk).
UX-soraglar: ýalňyşlyk habarlarynyň düşnükliligi, tassyklamalaryň görünmegi.

QA-çek-sanawy

• Her interaktiwde 'pressed/busy/disabled' bar.
• Ýalňyşlyklar tekst we hereketler bilen bilelikde (Retry/Undo).
• Tostlar SR arkaly elýeterlidir we esasy mazmuny ýapmaýar.
• Inline-tassyklama girmäge päsgel bermeýär; habarlar anyk.
• Goldaw 'prefers-reduced-motion'; ses/titremeler öçürilýär.
• Böküşler we strobe ýok; 'transform/opacity' animasiýalary.

12) iGaming aýratynlyklary

Jedel/satyn almak: derrew 'pressed → busy', Undo bilen "Kabul edildi" tosty (eger düzgünnama rugsat berse), idempotent-açarlar; gijikdirilende> 1 s - "Tassyklamaga garaşýarys"....
Spin/Reveal: gysga press-fidbek, tükeniksiz yşyksyz tekiz başlamak/durmak; ýeňiş - 500 ms ≤ ýokarlanmak + okalýan tekst (AAA).
Durmuş koeffisiýentleri: batçlar bilen täzelenmeler, "bökmezden" wizual diff (ok/galyňlyk).
Tölegler/netijeler: ädimme-ädim ösüş (KUS → Barlag → Töleg), ret etmegiň sebäpleriniň aç-açan tekstleri.
Jogapkär oýun: ünsüni sowmaýan bildirişler; iň ýokary kontrast, aýdyň CTA "Çäk belläň".

13) Anti-patternler

Düwmä jogap bermezden ozal onlaýn jogaba garaşyň.
"Formasyz reňk": ýagdaýy diňe reňk bilen tapawutlanýar.
Tükeniksiz impulslar/çyralar, öçürilmezden ýiti sesler.
Klawiaturadan elýeterli bolmadyk möhüm mazmunly gural.
Spinner boşlukda> 1-2 s ösüş/skeletsiz.
Ýüzlerçe elementde inçe kölegeler/blur (gowşak enjamlarda lag).

14) Dizaýn-ulgamdaky resminamalar

"Micro-tokens": 'duration/easing', tost/nyşan/walidator presetleri.
"Patterns": düwmeler, şekiller, tostlar, ösüş, inline ýalňyşlyklar, undo.
"A11y & Motion": SR/HC/reduced-motion üçin düzgünler; ARIA mysallary.
"Do/Don 't": wagtlary, INP/First Feedback sanlary bolan gysga klipler.

Gysgaça gysgaça

Mikro-karz - ynam dili. 100 ms ≤ jogap beriň, düşnükli ýagdaýlary düzüň, howpsuz yza gaýdyp optimizmi ulanyň, diňe reňke bil baglamaň we ýeňil häsiýetleri janlandyryň. Elýeterlilige we öndürijilige hormat goýuň - onda önüm janly, dogruçyl we ygtybarly duýulýar, esasanam hakyky wagt ssenariýalarynda.