Koʻrsatish effektlari va interaktivlik

1) UXda yo’naltirishning roli

• «Bu interaktivmi?» (yo’naltirish/kursor/yoritish),
• «Qayerdaman?» (fokus uslubi),
• «Bosilganda nima boʻladi?» (holat va affordance),
• «Bu amalga oshdimi?» (active/pressed va keyingi feedback).

Printsip: ta’sirlar ma’noni kuchaytiradi, uning o’rnini bosmaydi. Asosiy ma’lumotlar va harakatlardan foydalanish faqat yo’nalish ortida yashirin bo’lmasligi kerak.

2) Holatlar modeli va semantika

Baza to’plami:’default’→’hover’→’focus’→’active/pressed’→’disabled’→’loading’(ixtiyoriy).
Bogʻlar uchun’visited’, kalitlar uchun’checked’qoʻshiladi.

• Holatlar o’rtasida - faqat rang emas, shakl/qalinlik/ikona o’rtasidagi vizual farq.
• Matn/ikonkalarning fonga qarama-qarshiligi: ≥ 4. 5:1 (oddiy matn), ≥ 3:1 (katta/yogʻli).
• Fokus koʻrsatilmasdan koʻrinadi (klaviatura/skrining).

3) Qurilmalar va media-so’rovlar

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• Tach moslamalarida harakatlarni aniqlash uchun muhim emas - aniq affordances: rang/ikona/ramka/maslahatdan foydalaning.
• Navigatsiya/boshqaruvlarni faqat hover ostida yashirmang.

4) Uzunliklar va egri chiziqlar

• Hover: 120-180 ms
• Focus: 120-180 ms
• Active/Pressed: 80–120 мс
• Ripple/ink (agar ishlatilsa): ≤ 240 ms, 1 tsikl

Andoza egri chiziq: ’cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - tezroq (’cubic-bezier (0. 4, 0, 1, 1)’), chiqish - yumshoqroq (’cubic-bezier (0, 0, 0). 2, 1)`).

5) Dizayn-tizim tokenlari (misol)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Tugmalar: etalon patterni

Default: oʻqiladigan matn ≥ 4. Quyishga 5:1.
Hover: − Δ L fon 0. 02–0. 04, engil soya,’pointer’kursori.
Active: yana − Δ L 0. 02–0. 04, qisqartirilgan soya/bosim (scale 0. 98), davom etadi. 80-100 ms.
Focus: 2-3 px blursiz kontrast halqa.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, hover effektlari yo’q.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Havolalar va matnli harakatlar

Faqat rangda emas: andoza chizish yoki hover/focus.
Yo’naltirish uchun: ta’sirni kuchaytirish (qalinlik/offset), ohangni osongina o’zgartirish.
’Visited’ - bir xil palitraning boshqa soyasi, kontrast saqlangan.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Kartochkalar, ro’yxatlar, jadvallar

• Hover: ramkaning yumshoq soyasi/yoritilishi, faqat butun kartochka bosilsa’pointer’kursori.
• Active: qisqa bosish, sarlavhani yoritish.
• Focus: kartochka atrofida ko’rinadigan halqa, nafaqat uning ichida.

• Hover-fon Δ L 0. 02–0. 04; aktiv satr - aniq ramka.
• Satr bo’yicha bosish faqat aniq affordance («→» belgisi, maslahat) da mumkin.

• Kaskadli kechikishlardan iborat 6-8 elementni (stagger 20-30 ms) sinchkovlik bilan cheklang.

9) Kirish shakli va maydonlari

Hover: ramkaning nozik yoritilishi (Δ L ~ 0. 05), blok o’lchamini o’zgartirmagan holda.
Focus: kontrastli halqa + ramka rangini oʻzgartirish; placeholder farqlanadi (3:1 ≥).
Xato: rang + ikona/matn; qisqa shake 6 px, ≤ 140 ms, bir marta ≤ mumkin.

10) Ikonkalar va kichik maqsadlar

Tugma zonasini 20 × 24 px bo’lsa ham 32-32 (desktop )/40 × 40 (mobile) gacha ko’paytiring.
Hover: 1-2 ta xossadan ortiq boʻlmagan shaffoflik/toʻldirish/qalinlikni oʻzgartirish.
Active: scale 0 uchun qisqacha «snap». 98.
Focus: tugma zonasining konteyneri boʻyicha halqa.

11) Foydalanish imkoniyati (A11y) va klaviatura

’focus-visible’ ni qoʻllab-quvvatlang (sichqoncha uchun fokus uslublarini koʻrsatmaymiz, klaviatura uchun koʻrsatamiz).
Hover maslahatlarini yaratuvchi elementlar fokus boʻyicha ekvivalentga ega boʻlishi shart (xuddi shu kontent Tab/Enter tugmasi orqali paydo boʻladi).
Aria atributlari: interaktivlarda vaziyat bo’yicha’role’,’aria-pressed ’/’ aria-expanded ’/’ aria-current’mavjud.
Prefers-reduced-motion: masshtab/siljishni minimal (opacity/fill) ga almashtiramiz, pulsatsiyalarni o’chiramiz.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Unumdorlik

Faqat’opacity’va’transform’ni jonlantiring; ’width/height/left/top’, ogʻir blur/soyalardan qoching.
O’rtacha’will-change’; o’tish tugagandan so’ng olib tashlang.
Roʻyxatlar/jadvallarda «global» repaint boʻlmagan minimal effektlar mavjud.

13) Hover-intent va «yopishqoqlik»

• Murakkab tooltip/menyu koʻrsatilishidan oldin kechikish chegarasi 80-120 ms.
• Kursorning «yopishqoqligi»: agar foydalanuvchi nuqtadan menyuga burchak ostida harakat qilsa, 200-300 ms «koridor» (Fitts uchburchagi) bering.
• Tach - hoverni press yoki aniq «yana» tugmasi bilan almashtiramiz.

14) Tooltip/menyu/dropdaunlar

Ochilishi: hover-intent (desktop )/press (tach), yopilishi - parvarish/blur/ESC.
Pozitsiya - manbaga, o’q tekislangan; max-width va koʻchirishlar yoqilgan.
Foydalanish imkoniyati:’role =’tooltip’, bogʻlaymiz’aria-describedby’; menyu uchun’role =’menu’+ strelkalarni boshqarish.

15) iGaming xususiyatlari

Koeffitsiyentlar/liderbordlar: hover satr/katakni yoritadi, lekin joylashish metrikasini o’zgartirmaydi («sakrashlarsiz»).
Turnir/bonus kartochkalari: hover ramka/ikonkani «jonlantirishi» mumkin, ammo matnli CTA va shartlar o’qishda qoladi (4- ≥. 5:1).
Mas’ul bildirishnomalar (18 +, limitlar): chalg’itish ta’sirisiz; yo’naltirilganda faqat havolalarni chizishga va aniq fokusga yo’l qo’yiladi.
Stavkalar/xaridlar tugmalari: active-feedback majburiy (vizual bosish/bosish) va jo’natilgandan so’ng aniq disable.

16) Interfeys retseptlari namunalari

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-patternlar

Xato/menyuni faqat hover uchun yashirish.
Nishonchaning oʻlchamini oʻzgartirish (layout poygalari).
Holatlarning farqlanishi uchun faqat rangga tayanish.
Matnlarda miltillash, cheksiz pulsatsiyalar, «kislotali» glow.
Focus uslublarining yo’qligi yoki ularning qorong’u mavzuda ko’rinmasligi.
’Pointer’ kursorini aktiv boʻlmagan elementlarga qaratish.

18) QA-chek-varaq

Foydalanish imkoniyati

• Barcha interaktivlarga klaviatura orqali erishish mumkin; fokusni ko’ramiz.
• Hover-kontent’focus ’/’ aria’orqali mavjud.
• Matn va piktogrammalarning qarama-qarshiligi WCAGga mos keladi.

Xulq-atvori

• Hover/active/disabled/visited shakli va ohangida farqlanadi.
• Javob kechiktirilmadi> 120 ms.
• Tachga alternativa bor.

Spektakl

• Faqat’transform ’/’ opacity’animatsiya qilinadi.
• Koʻp elementlarda ogʻir blur/soyalar yoʻq.
• Uzun roʻyxatlarda effektlar minimallashtirilgan.

19) Dizayn-tizimdagi hujjatlar

Bazaviy komponentlar uchun holatlar jadvali (tugmalar, havolalar, kartochkalar, maydonlar, jadvallar satrlari).
Uzunlik/egri/soyalar tokenlari va light/dark uchun kod namunasi.
«Hover vs Touch» bo’limi: muqobil qoidalar va misollar.
«Do/Don’t» qisqa kliplari va kontrast ko’rsatkichlari bilan.

Qisqacha xulosa

Yo’naltirish effektlari interfeys tilining yordamchi, ammo muhim qismidir. Ularni qisqa va oldindan aytib bo’ladigan qiling, klaviatura va tachni qo’llab-quvvatlang, kontrast va ko’rinadigan fokusni ta’minlang, faqat arzon xususiyatlarni jonlantiring. Shunda interaktivlik harakatlarning aniqligi va tezligini oshiradi, ularga xalaqit bermaydi.