Dars xulosasi

• UI dizaynning 4C tamoyili: Control (nazorat), Consistency (izchillik), Comfortability (qulaylik), Cognitive Load (ortiqcha yuklamaslik).
• UX ning 7 tamoyili: foydalanuvchi markazida, qulaylik va intuitivlik, izchillik, oddiylik va aniqlik, feedback, moslashuvchanlik va accessibility, testlash va takomillashtirish.
• Yaxshi dizayn: o'zi tushunarli, bosishga javob beradi, xatoni qaytarish mumkin, ekran ortiqcha yuklanmagan.
• Wireframe — past aniqlikdagi skelet; mockup — rang va shriftli statik maket; prototip — bosiladigan, interaktiv model.
• Dizayn bosqichlari: tadqiqot, wireframe, UI, prototip, test va yana qaytib yaxshilash (iteratsiya).
• Design Thinking: Empatiya, Muammo, G'oya, Prototip, Test.
• Dizayn avval foydalanuvchi kimligini aniqlashdan boshlanadi: persona, maqsad, kontekst, ssenariy, user flow.

Qo'shimcha ma'lumot

Tamoyil nima va nega ularni bilish kerak?

«Menga yoqdi» yoki «yoqmadi» — shaxsiy fikr. Tamoyillar esa dizaynni o'lchaydigan chizg'ich. Ular bilan siz «bu ekran yomon, chunki Feedback yo'q» deb dalil bilan aytasiz. Xuddi shu orqali jamoada bahs qisqaradi va dizayner dasturchiga nima kerakligini aniq tushuntiradi.

Consistency: nega ikki marta uchraydi?

Qo'llanmada izchillik ham UI (4C), ham UX tamoyillari ro'yxatida bor. UI da u ko'rinish haqida: tugmalar, ranglar, belgilar bir xil. UX da u mantiq haqida: bir xil amal har joyda bir xil ishlaydi. O'xshatish: svetofor hamma shaharda qizil — to'xta, yashil — yur. Agar bir shaharda qizil «yur» desa, avariya bo'ladi.

Cognitive Load: miyaning «xotira o'rni» cheklangan

Har yangi tugma, banner, rang — miya uchun bitta mayda vazifa. Ularning soni ko'paysa, foydalanuvchi charchaydi va chiqib ketadi. Shuning uchun yaxshi ekranda bitta asosiy harakat bor. Qiyoslang: oddiy qidiruv sahifasida bitta katta qator bor; tartibsiz saytda esa o'nlab banner.

Feedback: tizim «jim» turmasin

Lift tugmasini bosdingiz va yorug'lik yonmadi: yana bosasiz, yana. Ilovada ham shunday: tugma bosilganda rang o'zgarishi, «Yuklanmoqda...» yozuvi yoki «Yuborildi» xabari foydalanuvchiga «men eshitdim» deydi. Odatiy xato: uzoq ish bajarilayotgani ko'rsatilmaydi, foydalanuvchi tugmani 5 marta bosadi.

Wireframe nega kulrang?

Agar birinchi chizmada rang va chiroyli rasm bo'lsa, hamma shularni muhokama qiladi, tuzilish esa e'tibordan chetda qoladi. Kulrang wireframe esa faqat bitta savol beradi: element joyi to'g'rimi? Bu uy qurishdan oldingi reja chizmasiga o'xshaydi: devorlar va eshiklar joyini rangsiz chizmada kelishib olasiz, bo'yoqni keyin tanlaysiz.

Foydalanuvchi — «men» emas

Dizayner o'zini «o'rtacha foydalanuvchi» deb o'ylasa, xatoga yo'l qo'yadi. 9-sinf o'quvchisi uchun qulay ilova 60 yoshli buvi uchun noqulay bo'lishi mumkin. Shuning uchun persona (tipik foydalanuvchi portreti) yaratiladi: kim, nima istaydi, qayerda va qaysi qurilmada foydalanadi, nima uni qiynaydi. Qo'llanmadagi misol: talaba Shaxnoza ilmiy maqola uchun elektron kitob izlaydi va yuklab oladi. Shundan ilovada qidiruv, ro'yxat, tafsilot sahifasi va yuklab olish tugmasi kerakligi kelib chiqadi.

Atamalar lug'ati

Atama	Ma'nosi
4C	UI tamoyillari: Control, Consistency, Comfortability, Cognitive Load
Control (nazorat)	Foydalanuvchi harakatini boshqara oladi, xatoni qaytara oladi (Undo, Back)
Consistency (izchillik)	Elementlar va mantiq hamma joyda bir xil
Cognitive Load	Foydalanuvchi miyasiga tushadigan ortiqcha yuk
Feedback	Tizimning foydalanuvchi amaliga javobi
Intuitiv	Tushuntirishsiz, o'zi tushunarli
Accessibility	Turli imkoniyatli (jumladan nogiron) odamlar uchun mosligi
Wireframe	Interfeysning past aniqlikdagi sxematik skeleti
Mockup (maket)	Rang, shrift, ikonli statik ko'rinish, bosilmaydi
Prototip	Bosiladigan, interaktiv model
Persona	Tipik foydalanuvchi portreti
User flow	Foydalanuvchining maqsadga erishish yo'li
Iteratsiya	Test asosida qayta takomillashtirish sikli

Bilasizmi?

• «Prototip» sinab ko'rish uchun yaratiladi: u yakuniy mahsulot emas, shuning uchun uni tashlab yuborish dizayner uchun normal hol.
• Qog'ozda chizilgan wireframe ham haqiqiy dizayn ishining bir qismi: ko'p jamoalar jarayonni aynan qalam bilan boshlaydi.
• UX dizaynerlari ishining muhim qismi chizish emas, kuzatish: ular odamlar ilovadan qanday foydalanishini ko'radi.
• Qo'llanmaga ko'ra, UX dizayn jarayoni hech qachon yakuniy bosqich bilan cheklanmaydi: mahsulot ishlayotganda ham yaxshilanadi.

Topshiriqlar

1. Tamoyilni toping oson

Holat: ilovada rasmni o'chirdingiz va ekranda «Bekor qilish» tugmasi paydo bo'ldi. Bu 4C ning qaysi tamoyiliga misol?

Kutiladigan natija: tamoyil nomi va bir jumlali izoh.

2. Haqiqat yoki yolg'on oson

To'g'ri/noto'g'ri ekanini aniqlang va noto'g'ri bo'lsa tuzating: (a) Wireframe doim rangli va chiroyli bo'ladi. (b) Mockup bosilganda sahifa almashadi. (c) Prototipni foydalanuvchiga sinab ko'rsatish mumkin.

Kutiladigan natija: uch band uchun «to'g'ri / noto'g'ri» va tuzatilgan jumlalar.

3. Mos juftlik oson

Juftlang: 1) bosganda tugma rangi o'zgaradi; 2) hamma sahifada tugmalar bir xil; 3) ekranda bitta asosiy harakat; 4) qulay masofa va o'qiladigan yozuv. Qaysi tamoyil: Consistency, Comfortability, Cognitive Load, Feedback?

Kutiladigan natija: to'rt juftlik.

4. Ta'rifni o'z so'zingiz bilan yozing oson

Do'stingizga 2–3 jumlada tushuntiring: wireframe, mockup va prototip nima va nimasi bilan farq qiladi.

Kutiladigan natija: 3 ta tushuncha, har biri uchun bitta aniq farq.

5. Ilova auditi o'rta

Kundalik ishlatadigan bitta ilova yoki saytni tanlang. 5 ta savolga «ha/yo'q» va dalil yozing: xatoni qaytarish bormi (Control)? Tugmalar bir xilmi (Consistency)? Yozuv va masofa qulaymi (Comfortability)? Ekran yuklanmaganmi (Cognitive Load)? Bosishga javob bormi (Feedback)?

Kutiladigan natija: 5 qatorli jadval (har birida qaysi ekran yoki tugmaga qarab xulosa qilgansiz) va 2 jumlali umumiy xulosa.

6. Yomon dizayn kolleksiyasi o'rta

Hayotdan (ilova, sayt, bankomat, maktab elektron jurnali, lift) 3 ta noqulay interfeys misolini toping. Har biri uchun qaysi tamoyil buzilganini va nega foydalanuvchi qiynalishini yozing.

Kutiladigan natija: 3 ta misol: nom, muammo, buzilgan tamoyil. Skrinshot yoki chizma ixtiyoriy.

7. Qog'oz wireframe o'rta

Maktab kutubxonasi uchun ilovaning bosh ekranini qog'ozda chizing: qidiruv qatori, kitoblar ro'yxati (3 ta), bitta asosiy tugma. Faqat to'rtburchak va chiziq, rang va bezak yo'q.

Kutiladigan natija: foto yoki skaner: telefon ramkasi ichida kamida shu uchta element.

8. Jarayon tartibi o'rta

Quyidagi bosqichlarni to'g'ri tartibga soling: test, wireframe, foydalanuvchini o'rganish, mockup (UI), prototip. Qaysi bosqichdan keyin qayerga qaytish mumkin va nega?

Kutiladigan natija: 5 bosqichli tartib va qaytish yo'lini 1–2 jumlada tushuntirish.

9. Qayta chizish qiyin

Tasavvur qiling: «Taksi chaqirish» ekranida 12 ta tugma bir xil o'lchamda, «Chaqirish» tugmasi sahifa pastida mayda yozuvda, bosilgandan keyin hech narsa o'zgarmaydi, bekor qilish yo'q. Kamida 4 ta muammoni toping va tamoyil bilan ataying, keyin yaxshilangan wireframe chizing.

Kutiladigan natija: muammolar ro'yxati (tamoyil bilan) va chizilgan wireframe; unda kamida 3 ta tamoyil bajarilganini belgilang.

10. Persona va ssenariy qiyin

Maktabingiz kafesi uchun «oldindan buyurtma» ilovasini tasavvur qiling. Bitta persona yarating (ism, yosh, maqsad, qurilma, qiyinchilik) va qo'llanmadagi Shaxnoza misoliga o'xshab 2–3 jumlalik ssenariy yozing. Ssenariydan kelib chiqadigan 4 ta ekran blokini sanang.

Kutiladigan natija: persona kartochkasi, ssenariy matni va 4 ta blok nomi.

11. User flow sxemasi qiyin

Oldingi topshiriqdagi ssenariy uchun user flow chizing: kamida 5 ta qadam to'rtburchaklarda va strelkalar bilan. Bitta joyda xato holatini qo'shing («Mahsulot tugagan» bo'lsa nima bo'ladi?).

Kutiladigan natija: 5+ qadamli sxema va bitta xato yo'li.

12. Do'stga sinov bonus

Oddiy qog'oz prototip yasang: 3 ta ekranni alohida varaqqa chizing. Do'stingizga «kitob toping» deb vazifa bering, ekranlarni almashtirib ko'rsating. U qayerda to'xtadi yoki adashdi? Yozib oling.

Kutiladigan natija: kuzatuv yozuvi: 2–3 ta joy, qayerda va nima uchun qiynalgan, va bitta tuzatish taklifi.

O'zingizni tekshiring

1. 4C ning har bir harfi nimani bildiradi?
2. «Consistency» nega ham UI, ham UX tamoyillari ro'yxatida uchraydi?
3. Feedback bo'lmasa, foydalanuvchi qanday xato qilishi mumkin?
4. Wireframe, mockup va prototip orasida asosiy farq nima?
5. Nega dizaynni avval qog'ozda chizish arzonroq?
6. Persona nima va u nega kerak?
7. User flow nimani ko'rsatadi? Kitob ilovasi uchun misol keltiring.
8. «Test va takomillashtirish» nima uchun tugamaydigan jarayon?

Uyga vazifa

Bitta ilovaning 3 ta ekranini tanlang va 4C bo'yicha baholang: har bir tamoyil uchun bitta dalil yozing (20–30 daqiqa). Aniq shartlar uyga-vazifa.md da.