UI/UX asoslari: komponent holatlari, Fitts va Hick qonunlari, qulaylik

Qisqacha: Interfeys "chiroyli" bo'lishi yetmaydi — u har holatda nima bo'layotganini aytishi kerak. Har komponentning holatlari o'ylanadi: oddiy, hover, fokus, bosilgan, nofaol, yuklanmoqda, shuningdek bo'sh, xato va muvaffaqiyat. Idrok qonunlari qarorlarni asoslaydi: Fitts — nishon qancha katta va yaqin bo'lsa, shuncha tez bosiladi; Hick — tanlov qancha ko'p bo'lsa, qaror shuncha sekin; Jakob — odamlar saytingiz boshqa saytlardek ishlashini kutadi. Bosish maydoni kamida 24×24 piksel (WCAG 2.2 AA), yaxshisi 44×44. Xato xabari nima bo'lganini va qanday tuzatishni oddiy so'z bilan aytadi.

Bu darsda

• Komponentning to'qqiz holatini sanaysiz va har biriga CSS selektorini topasiz.
• Affordance va javob (feedback) nima ekanini, javob tezligi chegaralarini tushuntirasiz.
• Fitts, Hick va Jakob qonunlarini manbasi bilan aytib, dizayn qaroriga aylantirasiz.
• Kichik elementning bosish maydonini ko'rinishini o'zgartirmasdan kattalashtirasiz.
• Bo'sh holat va xato xabarini yozasiz, sahifani Nielsen'ning 10 evristikasi bilan tekshirasiz.

Oldin bilishingiz kerak: Vizual ierarxiya, Holat pseudo-klasslari, O'lchamlar va bosish nishoni, Micro-interaktsiyalar, Tipografik shkala.

1. Nega bu kerak?

Juma kuni kechqurun Bobur «Bahor» saytida stol band qilyapti. Internet sekin. U "Yuborish" tugmasini bosadi — hech narsa o'zgarmaydi. Bosildimi? Yana bosadi. Uch soniyadan keyin sahifa ochiladi: ikkita bron qabul qilingan. Jasur aka endi bitta mehmonga ikkita stol ushlab turibdi.

Tugma chiroyli edi: yashil, yumaloq burchak, to'g'ri kontrast. Lekin u bitta savolga javob bermadi: "Hozir nima bo'lyapti?". Bu — UI va UX o'rtasidagi farq.

• UI (user interface — foydalanuvchi interfeysi) — nima ko'rinadi: rang, shrift, tugma shakli. Oldingi to'rt dars shu haqda edi.
• UX (user experience — foydalanuvchi tajribasi) — odam interfeys bilan ishlaganda nima his qiladi: tushunadimi, adashadimi, maqsadiga yetadimi.

Qulay interfeys — yaxshi ofitsiant kabi. Otabek buyurtmani olgach "yozib oldim, 15 daqiqada tayyor" deydi. Kechiksa, kelib aytadi. Taom tugagan bo'lsa, o'rniga nima borligini taklif qiladi. Mehmon hech qachon "meni unutishdimi?" deb o'ylamaydi.

2. Komponent holatlari

2.1 To'qqiz holat

Dizayner maketda tugmani bitta holatda chizadi — oddiy. Haqiqiy tugma esa kamida olti holatda yashaydi. Ma'lumot ko'rsatadigan blok (ro'yxat, forma) yana uchtasini qo'shadi:

Selektorlarning ko'pi sizga tanish: Holat pseudo-klasslari, Mantiqiy pseudo-klasslar, Mobil qurilma tuzoqlari (hover faqat sichqonchada). Yuklanish holatini JavaScript qo'yadi (aria-busy atributi) — tilni 08-qismdan, sahifadagi atributlarni almashtirishni 09-qismdan o'rganasiz; hozir CSS tomoni yetadi.

2.2 Holatlar yonma-yon

Professional jamoalar holatlarni holat matritsasi (state matrix) qilib bir joyda ko'radi. «Bahor» bron tugmasining olti holati:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .qator {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
  }
  figure { margin: 0; }
  figcaption {
    margin-top: 0.375rem;
    font-size: 0.8rem;
    color: #5b6660;
  }
  button {
    min-block-size: 2.75rem;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: 0.5rem;
    font: inherit;
    background: oklch(47.5% 0.1 147.7);
    color: #fffaf0;
  }
  .hover { background: oklch(42% 0.1 147.7); }
  .fokus {
    outline: 3px solid oklch(42% 0.12 143.1);
    outline-offset: 2px;
  }
  .bosilgan {
    background: oklch(35% 0.085 147.7);
    scale: 0.97;
  }
  button:disabled {
    background: oklch(90% 0.01 162);
    color: oklch(49.9% 0.016 162);
  }
  button[aria-busy="true"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  button[aria-busy="true"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
  }
  @media (prefers-reduced-motion: no-preference) {
    button[aria-busy="true"]::before {
      animation: aylan 0.8s linear infinite;
    }
  }
  @keyframes aylan { to { rotate: 1turn; } }
</style>
<div class="qator">
  <figure><button type="button">Yuborish</button>
    <figcaption>Oddiy</figcaption></figure>
  <figure><button type="button" class="hover">Yuborish</button>
    <figcaption>Hover</figcaption></figure>
  <figure><button type="button" class="fokus">Yuborish</button>
    <figcaption>Fokus</figcaption></figure>
  <figure><button type="button" class="bosilgan">Yuborish</button>
    <figcaption>Bosilgan</figcaption></figure>
  <figure><button type="button" disabled>Yuborish</button>
    <figcaption>Nofaol</figcaption></figure>
  <figure><button type="button" aria-busy="true">Yuborilmoqda</button>
    <figcaption>Yuklanmoqda</figcaption></figure>
</div>

Nimaga qarang: hover va bosilgan holat — shkalaning keyingi qadamlari (Rang nazariyasi: 600 → 700 → 800), yangi rang ixtiro qilinmagan. Fokusda tugma atrofida to'q halqa. Nofaol tugma kulrang — "bor, lekin hozir ishlamaydi". Yuklanishda so'z o'zgardi va yonida aylanuvchi belgi paydo bo'ldi (harakatni kamaytirish yoqilgan bo'lsa — belgi aylanmaydi, lekin so'z baribir aytadi). .hover, .fokus, .bosilgan — holatlarni "muzlatib" ko'rsatish uchun namoyish class'lari. Haqiqiy kodda ular :hover, :focus-visible, :active bo'ladi.

2.3 Holat tuzoqlari

• Yuklanishda tugma eni sakraydi. "Yuborish" → "Yuborilmoqda" — matn uzunroq, tugma kengayadi va yonidagi elementlarni suradi. Yechim: min-inline-size yoki matnni o'zgartirmasdan faqat belgi qo'shish. Bu mavzuni Tugmalar tizimi darsida to'liq quramiz.
• Nofaol tugma — sababsiz. Foydalanuvchi "nega bosilmayapti?" deb qoladi. Iloji bo'lsa tugmani faol qoldirib, bosilganda nima yetishmayotganini ayting. Nofaol qilsangiz — yonida sababini yozing ("Avval sanani tanlang").
• disabled va klaviatura. disabled tugmaga Tab bilan borib bo'lmaydi — ekran o'quvchi foydalanuvchisi uni umuman topmasligi mumkin. aria-disabled="true" esa tugmani fokusda qoldiradi, lekin bosishni skript to'xtatishi kerak.
• Hover — yagona signal. Telefonda hover yo'q (Mobil qurilma tuzoqlari). Muhim ma'lumot faqat hover'da ko'rinsa, telefon foydalanuvchisi uni hech qachon ko'rmaydi.

Tekshirib ko'ring: «Bahor» bron formasi bor-yo'g'i bitta "Yuborish" tugmasiga ega. Qaysi holatlar unga albatta kerak va qaysilari — ixtiyoriy?

3. Affordance va javob

3.1 Affordance

Affordance (inglizcha, "imkon berish") — narsaning o'zi qanday ishlatilishini "aytishi". Eshikdagi tutqich "torting" deydi, tekis metall plastinka — "itaring". Atamani psixolog James Gibson kiritgan, dizaynga Don Norman "The Design of Everyday Things" (1988) kitobi bilan olib kirgan. Keyingi nashrlarda Norman ko'rinadigan belgini alohida atadi: signifier (ishora belgisi) — "bu yerni bosish mumkin" degan ko'rinadigan ishora. Farqi oddiy: affordance — "bosish mumkin", signifier — "bosish mumkinligi ko'rinib turibdi".

Vebda signifier'lar:

• Havolaning tagidagi chiziq va o'z rangi.
• Tugmaning to'liq foni yoki ramkasi, yumaloq burchagi.
• Maydonning chegarasi (bo'sh to'rtburchak — "bu yerga yozing").
• cursor: pointer va hover'dagi o'zgarish (faqat sichqonchada).

"Tekis dizayn" (flat design) davrida ko'p saytlar bu belgilarni olib tashladi: havola chiziqsiz, tugma — oddiy rangli matn. Natijada foydalanuvchi nimani bosish mumkinligini qidirib yuradi. Vizual ierarxiya darsidagi uchinchi darajali harakat ham baribir havola kabi ko'rinishi kerak edi — shuning uchun tagiga chiziq qoldirdik.

3.2 Javob va vaqt chegaralari

Javob (feedback) — tizim har amalga ko'rinadigan reaksiya berishi. Jakob Nielsen "Usability Engineering" (1993) kitobida javob tezligining uchta chegarasini keltiradi:

1 soniyadan uzoq har amal — yuklanish holati bilan. 10 soniyadan uzoq — foiz yoki qadamlar ("2/3: to'lov tekshirilmoqda") va bekor qilish imkoni. Bobur voqeasidagi xato aynan shu: 3 soniya — hech qanday javob.

Micro-interaktsiyalar darsidagi tugma bosilishi (scale: 0.97) — 0.1 soniyadagi javob. Skeleton va spinner — 1–10 soniya uchun.

Tekshirib ko'ring: «Bahor» menyusidagi "Batafsil" havolasi oddiy qora matn, tagida chiziq yo'q, rangi atrofdagi matn bilan bir xil. Qaysi tushuncha yetishmayapti — affordance yoki signifier?

4. Idrok qonunlari

Bu qonunlar psixologiya tajribalaridan chiqqan. Ular aniq formulalar beradi, lekin interfeysda ulardan asosan yo'nalish olinadi: "kattaroq", "yaqinroq", "kamroq". Jon Yablonski'ning "Laws of UX" sayti (lawsofux.com) va shu nomli kitobi ularni dizayn tilida to'plagan.

4.1 Fitts qonuni

Paul Fitts 1954-yilgi tajribasida odam nishonga qo'lini qanchalik tez yetkazishini o'lchadi. Xulosa: vaqt nishongacha masofa oshgan sari o'sadi, nishon o'lchami oshgan sari kamayadi. Bugun ko'p ishlatiladigan shakli (MacKenzie, 1992):

T = a + b × log₂(D ÷ W + 1)

T — vaqt, D — nishongacha masofa, W — nishonning (harakat yo'nalishidagi) eni, a va b — tajribada o'lchanadigan sonlar. log₂ — "ikkini necha marta ko'paytirsa, shu son chiqadi": log₂8 = 3, chunki 2 × 2 × 2 = 8. Formulani yodlash shart emas. Muhimi — D ÷ W nisbati: nishonni ikki barobar kattalashtirish uni ikki barobar yaqinlashtirish bilan bir xil ta'sir qiladi.

Interfeysdagi xulosalar:

• Muhim tugma — katta. «Bahor»ning telefondagi "Stolni band qilish" tugmasi butun en bo'ylab (Mobile-first darsida o'lchagan edik: 344 × 45 piksel).
• Tegishli narsalar — yaqin. "Yuborish" tugmasi formaning oxirgi maydoni ostida, sahifaning boshqa burchagida emas.
• Telefonda — bosh barmoq zonasi. Telefonni bir qo'lda ushlaganda ekranning pastki qismiga barmoq oson yetadi. Asosiy harakatlar pastroqda qulay.
• Xavfli tugma — uzoqroq. "Bronni bekor qilish" "Tasdiqlash" yonida yopishib tursa, tasodifan bosiladi. Fitts qonunini teskari ishlatamiz.

4.2 Hick qonuni

William Hick (1952) va Ray Hyman (1953) tajribalari: tanlash vaqti variantlar soni bilan logarifmik o'sadi:

T = b × log₂(n + 1)

n — teng ehtimolli variantlar soni (har biri bir xil tez-tez tanlanadi). 3 ta variantdan 7 taga o'tish vaqtni ikki barobar emas, taxminan 1.5 barobar oshiradi (log₂4 = 2, log₂8 = 3). Lekin o'sish to'xtamaydi.

Xulosalar:

• Asosiy menyuda kam band. «Bahor» menyusida 4 ta havola: Menyu, Bron, Aloqa, Blog. 12 ta bo'lsa — har kirishda odam qaror qilishga ko'proq vaqt sarflaydi.
• Ko'p variant — guruhlarga. 40 ta taomni bitta ro'yxatda emas, "Issiq taomlar", "Salatlar", "Ichimliklar" bo'limlarida.
• Tavsiya etilgan variant. Ko'p tanlovda bittasini ajratish (masalan, "Eng ko'p buyurtma qilinadi") qarorni tezlashtiradi.

Diqqat: Hick qonuni oddiy tanlov uchun: odam hamma variantni biladi va bittasini tanlaydi. Uzun ro'yxatni ko'zdan kechirish (masalan, alifbo bo'yicha shaharlar ro'yxati) boshqacha ishlaydi — u yerda qidiruv va tartib yordam beradi. Qonunni "menyuda 5 tadan ortiq band bo'lmasin" degan qat'iy raqamga aylantirmang.

4.3 Jakob qonuni

Jakob Nielsen 2000-yilda shunday yozgan: foydalanuvchilar vaqtining ko'p qismini boshqa saytlarda o'tkazadi. Demak ular sizning saytingiz ham o'zlari biladigan saytlardek ishlashini kutadi. Bu Jakob qonuni nomi bilan tarqalgan.

Xulosa — konventsiyalarni buzmang:

• Logotip — chap yuqorida, bosh sahifaga havola.
• Havola — tagi chizilgan yoki aniq ajralgan rangda.
• Savat — o'ng yuqorida.
• Qidiruv maydonida lupa belgisi.
• Formadagi * — majburiy maydon.

«Bahor» saytida "yangicha" menyu o'ylab topish mumkin — masalan, ekran chetida aylanadigan g'ildirak. Lekin Jasur akaning mehmonlari har kuni Telegram va Instagram'da boshqa menyularni ko'radi. Tanish naqsh o'rganishni talab qilmaydi. Yangilik — mazmunda (osh, xizmat), navigatsiyada emas.

Tekshirib ko'ring: Dizayner «Bahor» telefon versiyasida "Stolni band qilish" tugmasini sahifaning eng tepasiga, logotip yoniga kichik ikonka qilib qo'ymoqchi. Qaysi ikki qonun bunga qarshi?

5. Bosish maydoni

5.1 Raqamlar

O'lchamlar darsida asosni qo'ygan edik, endi hammasini bir joyga yig'amiz:

pt va dp — CSS'dagi px bilan bir ma'noda (Spacing tizimi). Kursdagi qaror o'zgarmaydi: talab — 24, maqsad — 44. Portfolio menyusi Flex naqshlari darsida 21 dan 32 pikselga ko'tarilgan edi — talabdan o'tadi, maqsadga yetmaydi. Asosiy tugmalar esa 44 (min-block-size: 2.75rem).

5.2 Ko'rinishni o'zgartirmasdan kattalashtirish

Ba'zan element ko'rinishda kichik bo'lishi kerak: jadvaldagi kichik "×" (o'chirish) belgisi, footer'dagi ijtimoiy tarmoq ikonkasi. Bosish maydonini kattalashtirishning ikki yo'li:

1. Padding — element kattalashadi, lekin foni bo'lmasa, ko'zga farq sezilmaydi (Flex naqshlari menyusi shunday).
2. Pseudo-element — elementning ustiga ko'rinmas, kattaroq "qatlam" qo'yiladi:

<style>
  body { font-family: system-ui, sans-serif; }
  .qator { display: flex; gap: 3rem; padding: 1.5rem; }
  a.belgi {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #2f6b3a;
    color: #fffaf0;
    font-size: 0.75rem;
    text-decoration: none;
  }
  a.belgi::before {
    content: "";
    position: absolute;
    inset: -0.75rem;
  }
  .korsat::before { outline: 2px dashed #b4461a; }
</style>
<div class="qator">
  <a class="belgi" href="https://t.me/sizning_kanal"
    aria-label="Telegram">T</a>
  <a class="belgi korsat" href="https://t.me/sizning_kanal"
    aria-label="Telegram (bosish maydoni ko'rsatilgan)">T</a>
</div>

Nimaga qarang: ikkala belgi ko'rinishda bir xil — 20 piksellik yashil doira. O'ngdagisida qizg'ish punktir bilan bosish maydoni ko'rsatildi: inset: -0.75rem uni har tomondan 12 pikselga kengaytirdi, jami 44 × 44. Chrome'da tekshirdik: doiradan 10 piksel chetga bosish ham havolani ochadi, chunki ::before havolaning bir qismi. position: relative shart — usiz ::before boshqa ota-elementga nisbatan joylashib ketadi (position).

Diqqat: Kengaytirilgan maydonlar bir-birini yopmasin. Ikki qo'shni ikonka 24 piksel oraliqda tursa-yu, har birining maydoni 12 piksel chiqsa — ular ustma-ust tushadi va keyingisi oldingisini "yutadi". gap ni maydonga qarab tanlang.

Tekshirib ko'ring: Ikonka 20 piksel, ::before da inset: -0.75rem (12 piksel). Bosish maydoni eni: 20 + 12 + 12 = piksel. Ikonka 16 piksel bo'lsa-yu, maydonni 44 ga yetkazmoqchi bo'lsangiz, har tomonga necha piksel kerak?

6. Bo'sh holat

Bo'sh holat (empty state) — ko'rsatadigan ma'lumot yo'q payt: savat bo'sh, qidiruv hech narsa topmadi, bugun bron yo'q. Ko'p saytlar bu yerda oq ekran yoki "Ma'lumot yo'q" deb qo'yadi. Foydalanuvchi esa "buzilganmi?" deb o'ylaydi.

Yaxshi bo'sh holat uchta narsani aytadi:

1. Nima bo'ldi — "Savatingiz hozircha bo'sh".
2. Nega (kerak bo'lsa) — "Siz hali taom tanlamadingiz".
3. Keyin nima qilish kerak — tugma: "Menyuni ochish".

CSS'da bo'sh holatni :has() bilan ko'rsatish mumkin — ro'yxatda element qolmasa, xabar chiqadi:

<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .savat {
    max-width: 20rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
  }
  .savat h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
  .savat ul { margin: 0; padding-left: 1.25rem; }
  .bosh-holat { display: none; margin: 0; text-align: center; }
  .savat:not(:has(li)) ul { display: none; }
  .savat:not(:has(li)) .bosh-holat { display: block; }
  .bosh-holat a {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    background: #2f6b3a;
    color: #fffaf0;
    text-decoration: none;
  }
</style>
<section class="savat">
  <h2>Buyurtmangiz</h2>
  <ul></ul>
  <p class="bosh-holat">Savatingiz hozircha bo'sh.<br>
    <a href="menyu/">Menyuni ochish</a></p>
</section>

Nimaga qarang: ul da bitta ham li yo'q — shuning uchun ro'yxat yashirindi, o'rniga xabar va yashil tugma chiqdi. "Tahrirlab ko'rish" bilan ul ichiga <li>Osh</li> yozing: xabar yo'qoladi, ro'yxat paydo bo'ladi. .savat va .bosh-holat — faqat namoyish class'lari; «Bahor»da savat hozircha yo'q.

Bo'sh holat — bir martalik "salomlashish" ham: yangi foydalanuvchi ilovani birinchi ochganda ko'radigan narsa. Yaxshi yozilgan bo'sh holat qo'llanmaning o'rnini bosadi.

7. Xato xabarlari

Nielsen Norman Group'ning xato xabarlari bo'yicha tavsiyalari qisqacha: xabar ko'rinadigan (xato joyi yonida), tushunarli (texnik kodsiz), aniq (qaysi maydon, nima noto'g'ri) va yo'l ko'rsatuvchi (qanday tuzatish) bo'lsin. Foydalanuvchini ayblamang.

CSS tomonida Holat pseudo-klasslari darsidagi :user-invalid bor: xato faqat foydalanuvchi maydon bilan ishlab bo'lgach ko'rsatiladi, sahifa ochilganda hamma maydon qizarib turmaydi. «Bahor» bron formasida har maydon yonida yordam matni bor (id="<maydon>-yordam", 04-qismdan). Xato bo'lganda aynan shu matnni xato rangiga o'tkazish — eng sodda va to'g'ri yo'l: foydalanuvchi qoidani oldindan ham, xatodan keyin ham bir joyda o'qiydi. Buni portfolio qadamida qilamiz.

Xato matnini ekran o'quvchi ham eshitishi kerak. aria-describedby (Qulay va accessible forma) yordam matnini maydonga bog'laydi. Dinamik xabarlar (serverdan kelgan xato) esa JavaScript va aria-live bilan e'lon qilinadi — buni forma validatsiyasi darslarida ko'rasiz.

Tekshirib ko'ring: Nega "Faqat qizil chegara" yomon xato xabari hisoblanadi, chegara ko'rinib turgan bo'lsa ham?

8. Nielsen'ning 10 evristikasi

Jakob Nielsen 1990-yilda Rolf Molich bilan birga interfeysni tekshirish qoidalarini tuzgan, 1994-yilda ularni 10 ta evristika (tajribadan chiqqan qoida) qilib yakunlagan. NN/g saytidagi maqola 2024-yilda yangilangan, lekin muallifning aytishicha, qoidalarning o'zi 1994-yildan beri o'zgarmagan. Ular bilan har qanday sahifani 15 daqiqada "ko'rikdan" o'tkazish mumkin:

Evristikalar — ro'yxat, ball emas. Ular bilan har sahifani ko'rib chiqib, "buzilgan" joylarni yozasiz: qaysi evristika, qayerda, qanchalik jiddiy. Bu usul evristik baholash (heuristic evaluation) deb ataladi va foydalanuvchi testidan arzonroq, tezroq.

9. Ko'p uchraydigan xatolar

9.1 Faqat oddiy holat

Maketda bitta tugma — kodda ham bitta holat. Fokusda hech narsa ko'rinmaydi, yuklanishda javob yo'q. Tuzatish: holat matritsasi — har komponent uchun to'qqiz holat jadvali.

9.2 outline: none

"Chiroyli emas" deb fokus halqasi o'chirilgan. Klaviatura foydalanuvchisi qayerdaligini bilmaydi. Tuzatish: :focus-visible bilan o'z halqangizni chizing — CSS'da accessibility darsida to'liq.

9.3 Kichik bosish maydoni

16 piksellik ikonka, atrofida hech narsa. Tuzatish: padding yoki ::before bilan kamida 24, maqsad 44.

9.4 Javobsiz amal

Tugma bosildi — hech narsa. Tuzatish: 0.1 soniyada ko'rinadigan o'zgarish (:active), 1 soniyadan uzoqda — yuklanish holati.

9.5 Ayblovchi xato matni

"Siz xato qildingiz!" Tuzatish: nima noto'g'ri va qanday tuzatish — neytral ohangda.

9.6 Konventsiyani buzish

Havola chiziqsiz va matn rangida, logotip bosilmaydi. Tuzatish: Jakob qonuni — tanish naqshlar.

10. Mashqlar

1-mashq (oson): holatlar jadvali

«Bahor» bosh sahifasidagi "Stolni band qilish" havolasi (.bron-havola) uchun holatlar jadvalini yozing: har holat uchun CSS selektori va nima o'zgaradi. Qaysi holatlar havolaga kerak emas?

Ishora: "To'qqiz holat" jadvali. Havola — a, button emas: unda disabled atributi yo'q.

2-mashq (o'rta): xato xabarlarini qayta yozing

«Bahor» bron formasining eski xabarlari: "Error!", "Maydon noto'g'ri to'ldirilgan", "Sana xato", "Siz juda ko'p odam yozdingiz". Har birini "Xato xabarlari" bo'limidagi qoidalar bo'yicha qayta yozing.

Ishora: bron formasining maydonlari va chegaralari — ism, telefon, email, odam (≤ 20), sana, vaqt (ish vaqti 7:00–23:00).

3-mashq (qiyin): Fitts va Hick bilan menyu

«Bahor» telefon versiyasida pastki panel (bottom navigation) qilinmoqchi. Dizayner 7 ta bandni taklif qildi: Bosh sahifa, Menyu, Bron, Aksiyalar, Blog, Aloqa, Biz haqimizda. Ekran eni 360 piksel.

1. 7 ta bandning har biri necha piksel keng bo'ladi? Material Design tavsiyasiga mosmi?
2. Hick qonuni bo'yicha nima taklif qilasiz?
3. Qaysi band pastki panelda eng qulay joyda turishi kerak — Fitts qonuni va bosh barmoq zonasi bo'yicha?

Ishora: "Bosish maydoni" jadvali; "Hick qonuni" bo'limidagi guruhlash g'oyasi.

4-mashq: Portfolio qadami — aloqa formasining holatlari

Portfolio'ning aloqa sahifasini holatlar bo'yicha tekshiring va bo'shliqlarni to'ldiring:

1. Holat jadvalini tuzing: button, maydonlar (input, textarea), radio tugmalar, details[name="savollar"] ning summary si. Har biri uchun: hover, fokus, bosilgan, xato — bormi?
2. Tugma hover'i yo'q — qo'shing (faqat sichqonchali qurilmada).
3. Xato faqat rangda — hozir :user-invalid maydonga qizg'ish chegara, yorlig'iga qizg'ish rang beradi. Maydon ostidagi yordam matni (span[id$="-yordam"]) xato bo'lganda ham xato rangida, boshida belgi bilan chiqsin. Belgi ekran o'quvchida "Xato:" deb o'qilsin.
4. summary — sichqonchada bosiladigandek ko'rinsin (rang va kursor).

Ishora: :has() bilan maydonning ota-p sini topasiz (Mantiqiy pseudo-klasslar). content ning muqobil matni — Pseudo-elementlar. Tugmaning bosilgan holati Micro-interaktsiyalar darsida qo'shilgan edi.

/* Holatlar (UI/UX asoslari darsi) */
@media (hover: hover) {
  button:hover {
    background-color:
      color-mix(in oklch, var(--rang-asosiy), black 10%);
  }

  details[name="savollar"] summary:hover {
    color: var(--rang-asosiy);
    cursor: pointer;
  }
}

/* Xato: rang + belgi + so'z */
p:has(> :user-invalid) span[id$="-yordam"] {
  color: var(--rang-urgu);
}

p:has(> :user-invalid) span[id$="-yordam"]::before {
  content: "⚠ " / "Xato: ";
}

11. Real ishda

• Dizayn tizimlari har komponent sahifasida holatlar jadvalini beradi: Material'da "States" bo'limi (hover, focus, pressed, dragged, disabled), GitHub Primer'da har tugma variantining holatlari. Figma'da holatlar — komponent variantlari (Figma dasturchi uchun 2).
• Kod ko'rigi. "Loading holati qani?", "Bo'sh ro'yxatda nima ko'rinadi?", "Klaviatura bilan sinab ko'rdingmi?" — frontend kod ko'rigidagi odatiy savollar.
• UX tadqiqot. Katta kompaniyalarda UX tadqiqotchilar foydalanuvchi testlarini o'tkazadi. Dasturchi esa evristik baholashni o'zi qila oladi — 10 evristika va shu darsdagi holatlar yetarli boshlanish.
• Intervyuda so'raladi: "Tugmaning qanday holatlari bor?", "Fitts qonuni nima deydi?", "disabled va aria-disabled farqi?", "Yaxshi xato xabari qanday bo'ladi?".

Xulosa

• UI — ko'rinish, UX — tajriba; qulay interfeys har payt "nima bo'lyapti?" savoliga javob beradi.
• To'qqiz holat: oddiy, hover, fokus, bosilgan, nofaol, yuklanmoqda, bo'sh, xato, muvaffaqiyat — har biri uchun CSS selektori bor.
• Javob: 0.1 s — darhol, 1 s — ishora, 10 s gacha — yuklanish belgisi (Nielsen, 1993).
• Fitts — katta va yaqin nishon tez bosiladi; Hick — kam tanlov tez qaror; Jakob — tanish naqshlar.
• Bosish maydoni: talab 24×24 (WCAG 2.5.8), maqsad 44×44; ::before bilan ko'rinishni o'zgartirmasdan kengaytirish.
• Bo'sh holat va xato xabari: nima bo'ldi, nega, nima qilish kerak — ayblovsiz.

Keyingi dars: CSS'da accessibility: kontrast, fokus va yashirin matn — WCAG kontrast qoidalarini, fokus halqasi dizaynini va ekran o'quvchi uchun yashirin matnni to'liq o'rganamiz.

Manbalar

• Paul M. Fitts: "The information capacity of the human motor system in controlling the amplitude of movement", Journal of Experimental Psychology, 47(6), 1954
• I. Scott MacKenzie: "Fitts' law as a research and design tool in human-computer interaction", Human-Computer Interaction, 7(1), 1992
• W. E. Hick: "On the rate of gain of information", Quarterly Journal of Experimental Psychology, 4(1), 1952; R. Hyman: "Stimulus information as a determinant of reaction time", Journal of Experimental Psychology, 45(3), 1953
• Jakob Nielsen: "10 Usability Heuristics for User Interface Design" (1994, yangilangan 2024) — nngroup.com; "Response Times: The 3 Important Limits" (1993) — nngroup.com
• Jon Yablonski: "Laws of UX" — lawsofux.com
• Donald A. Norman: "The Design of Everyday Things" (1988; qayta ishlangan nashr 2013)
• W3C: "Understanding SC 2.5.8: Target Size (Minimum)", "Understanding SC 2.5.5: Target Size (Enhanced)" — w3.org/WAI/WCAG22/Understanding
• Apple: "Human Interface Guidelines — Accessibility"; Material Design: "Accessibility — touch targets"