Interfeyslarda bosiladiganlik: belgilari va loyihalash tamoyillari

Bosiladiganlik nima

Bosiladiganlik — interfeys elementining foydalanuvchiga o'zaro aloqa qilish imkoniyati haqida vizual darajada xabar berishidir. UX terminologiyasida bu psixolog Jeyms Gibson tomonidan kiritilgan affordans tushunchasining bir qismidir.

Dizayner Don Norman affordans kontseptsiyasini interfeyslarga tatbiq etib ommalashtirdi. “The Design of Everyday Things” (2013) kitobida u ob'ektning shakli va ko'rinishi undan foydalanish usulini qanday taklif qilishi kerakligini tasvirlab berdi. Tugma tugmaga o'xshashi kerak — bu bosiladiganlik affordansidir.

UX Collective (2025) ma'lumotlariga ko'ra, foydalanuvchilarning 34% elementi bosiladigan ko'rinmasa, texnik jihatdan bosish ishlansa ham, uni bosmaydi. Bu interfeysda vizual teskari aloqaning muhimligini ta'kidlaydi.

Anti-namuna: bosilmaydigan tugmalar

Tagiga chizilmagan matn, yoritilmagan tekis ikonkalar, pointer kursori bo'lmagan kulrang elementlar — element interaktiv bo'lsa-da, ko'rinmasa klassik anti-namunalar. Foydalanuvchi bosiladigan zonalarni qidirishga vaqt sarflaydi, bu UXni yomonlashtiradi.

Bosiladiganlikning vizual affordanslari

Vizual affordanslar — interaktivlikni ko'rsatadigan tashqi belgilar. Ular bir necha toifaga bo'linadi: shakl, rang, soya, tekstura va animatsiya.

Odamlar evolyutsion jihatdan ma'lum vizual xususiyatlarga ega ob'ektlarni tegish yoki siljitish mumkinligiga o'rganib qolgan. Dizaynerlar intuitiv interfeyslar yaratish uchun bu tug'ma idrok namunalaridan foydalanadilar.

Eng kuchli affordans — soya (ko'tarilish effekti). Google-ning Material Designi fizik qatlamlar metaforasiga asoslangan bo'lib, har bir interaktiv element o'z balandligiga (elevation) ega. Foydalanuvchilar soyali kartani bosish mumkinligini intuitiv ravishda tushunadilar.

Interaktiv elementlarning holatlari

Har bir bosiladigan element kamida to'rtta holatga ega bo'lishi kerak: normal, hover, active, disabled. Holatlar orasidagi vizual farqlar foydalanuvchiga joriy vaziyatni tushunishga yordam beradi.

/* Interactive element states */
.btn {
    background: #4A90D9;
    transition: all 0.2s ease;
}

.btn:hover {
    background: #357ABD;  /* Darker on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.btn:active {
    transform: scale(0.97);  /* Press effect */
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

Normal holat — elementning tinch holatdagi asosiy ko'rinishi. Hover holati — kursorni olib kelishga reaksiya, elementning o'zaro aloqaga tayyorligini tasdiqlaydi. Active holati — bosish momenti, taktil teskari aloqa beradi. Disabled holati — element faol emas, vizual ravishda xira.

Google Material Design Guide (2024) ga ko'ra, sensorli qurilmalar uchun minimal bosish maydoni — 48x48 dp, optimal — 56x56 dp. Kichikroq o'lcham mobil qurilmalarda bosiladiganlikni kamaytiradi.

Kursor bosiladiganlik ko'rsatkichi sifatida

Kursor o'zgarishi — bosiladiganlikni ko'rsatishning eng qadimgi va samarali usullaridan biri. CSS cursor: pointer xususiyati o'qni ko'rsatuvchi qo'lga aylantirib, elementning interaktiv ekanligini bildiradi.

/* Standard cursor values */
.clickable {
    cursor: pointer;   /* Pointer for buttons and links */
}

.moveable {
    cursor: grab;      /* Grab cursor for drag */
}

.resizable {
    cursor: ew-resize; /* Resize cursor for width */
}

Ko'rsatuvchi barmoq qoidasi: cursor: pointer barcha bosiladigan elementlarda — tugmalar, havolalar, kalitlar, ikonkalarda ishlatilishi kerak. Interaktiv bo'lmagan elementlarda kursor standart o'q (cursor: default) bo'lib qolishi kerak.

Foydalanish xatolari: oddiy matnda cursor: pointer foydalanuvchilarni chalg'itadi. Bosishni qayta ishlamaydigan elementlarda pointer kursoridan foydalanmang — bu interfeysga ishonchni buzadi.

Tugma dizaynida Fitts qonuni

Fitts qonuni — maqsadga erishish uchun zarur bo'lgan vaqtni tavsiflovchi ergonomik qonun. Interfeyslar kontekstida: maqsad (tugma) qanchalik katta va yaqin bo'lsa, foydalanuvchi shunchalik tez unga erishadi.

Fitts qonuni formulasi: T = a + b * log2(D / W + 1), bu yerda T — erishish vaqti, D — maqsadgacha masofa, W — maqsad o'lchami. Tugma o'lchamini 2 barobar oshirish bosish vaqtini 15-20% qisqartiradi.

Apple Human Interface Guidelines (2024) ga ko'ra, sensorli maqsadning minimal o'lchami — 44x44 nuqta. Google Material Design 48x48 dp ni tavsiya qiladi. Amalda CTA tugmalari qulay o'zaro aloqa uchun kamida 56x56 dp bo'lishi kerak.

Ekran burchaklari — cheksiz maqsadlar

Ekran burchaklari va qirralari Fitts qonuniga ko'ra cheksiz maqsadlardir — kursor ekran chegarasidan o'tib keta olmaydi. Shuning uchun muhim tugmalar (menyu, yopish) ko'pincha burchaklarda joylashadi. Mobil interfeyslarda bosh barmoqlar tabiiy ravishda ekranning pastki qismiga tortiladi.

Bosiladigan elementlar namunalari

Barqaror namunalar bosiladiganlik o'nlab yillar davomida veb-dizaynda shakllangan. Ulardan foydalanish interfeysni foydalanuvchini o'qitmasdan intuitiv qiladi.

Soyali tugma namunasi — Material Design standarti. Tugma sirtdan yuqoriga ko'tariladi, soya olib kelganda kattalashadi va bosilganda yo'qoladi. Bu namuna millionlab ilova va saytlarda qo'llaniladi.

Yassi tugma namunasi — iOS 7 yangilanishidan so'ng soyasiz yassi dizayn mashhur bo'ldi. Bunday tugmalarda bosiladiganlik rang, ramka yoki ikona orqali uzatiladi. Yassi tugmalar yorqinroq rang urg'ularini talab qiladi.

Ghost-tugma namunasi — olib kelinganda rang bilan to'ladigan ramkali shaffof tugma. Asosiy CTA yonidagi ikkinchi darajali harakatlar uchun ishlatiladi.

• Platforma konvensiyalariga rioya qilish — iOS, Android va veb o'z bosiladiganlik standartlariga ega
• Barqarorlik — bir xil elementlar hamma joyda bir xil ko'rinadi
• Teskari aloqa — har bir bosish zudlik bilan reaksiyaga ega bo'lishi kerak
• Foydalanish imkoniyati — bosiladiganlik ekran o'qituvchisidan foydalanganda ham tushunarli bo'lishi kerak