Dars xulosasi

• UX (User Experience) — foydalanuvchi tajribasi: odam maqsadiga qanchalik oson va yoqimli yetib boradi.
• UI (User Interface) — foydalanuvchi interfeysi: mahsulot qanday ko'rinadi (rang, tugma, shrift, ikon, joylashuv).
• UX savoli: «Qulaymi?». UI savoli: «Qanday ko'rinadi?».
• UX dizayner foydalanuvchi muammolarini o'rganadi, sketch, wireframe va prototip yaratadi, mahsulotni test qiladi.
• UI dizayner ranglar, shriftlar, ikonlar va umumiy vizual uyg'unlik bilan ishlaydi.
• Ikkalasi bir-birini to'ldiradi: chiroyli, lekin chalkash ilova ham, ishlaydi, lekin xunuk ilova ham yaxshi emas.
• UX/UI dizayn veb-saytlar, mobil ilovalar, dashboardlar, aqlli qurilmalar va boshqa IT-mahsulotlarda qo'llanadi.
• Yaxshi UX/UI mamnunlikni oshiradi, raqobatda yutishga va brendga ishonch uyg'otishga yordam beradi.

Qo'shimcha ma'lumot

Eshik misoli: nega UX ko'rinmaydi?

Siz do'kon eshigini itarasiz, u ochilmaydi. Tortasiz, ochiladi. Eshik ustida «Itarish» yozuvi bo'lmagan, tutqich esa tortishga o'xshamagan edi. Eshik chiroyli bo'lishi mumkin (UI), lekin odamni chalkashtirdi (UX). Yaxshi UX ni odatda sezmaysiz: hammasi «o'zi bo'ladi». Yomon UX esa darhol seziladi: g'azablanasiz.

Restoran o'xshatishi

UI — taom qanday bezatilgani, idish, stol bezagi. UX — menyuni tushunish oson bo'ldimi, ofitsiant tez keldimi, hisobni to'lash oson bo'ldimi. Chiroyli bezatilgan, lekin bir soat kutiladigan taom sizni qaytarmaydi. Shu sababli restoranlar ikkalasiga ham pul sarflaydi.

«UX = chiroyli dizayn» degan xato

Eng ko'p uchraydigan xato. Chiroylilik asosan UI ning ishi. UX undan kengroq: tezlik, tushunarlilik, qadamlar soni, xatodan keyin nima bo'lishi, hatto his-tuyg'u ham (ishonchmi, stressmi). Bitta UI elementi (masalan, tugma) ikkala tomonga ham tegishli bo'lishi mumkin: rangi UI, joylashuvi va tushunarliligi UX.

Dizayner ishining bir kuni

UX dizayner: foydalanuvchilar bilan gaplashadi, ularning muammosini yozadi, qog'ozda ekran sxemasini chizadi, prototipni sinab ko'rsatadi. UI dizayner: shu sxemaga rang, shrift va ikonlar beradi, hamma ekran bir uslubda ko'rinishini ta'minlaydi. Kichik jamoalarda bitta odam ikkalasini ham bajaradi. Katta kompaniyalarda ular alohida lavozimlar.

Atamalar lug'ati

Atama	Ma'nosi
UX (User Experience)	Foydalanuvchi tajribasi: mahsulot bilan ishlash qanchalik qulay va yoqimli
UI (User Interface)	Foydalanuvchi interfeysi: ko'rinadigan qismlar (rang, tugma, shrift, ikon)
Interfeys	Odam va dastur uchrashadigan joy: ekran, tugmalar, menyular
Foydalanuvchi	Mahsulotdan foydalanadigan odam
UX dizayner	Qulaylik, tadqiqot, tuzilma va prototiplar bilan shug'ullanadigan dizayner
UI dizayner	Rang, shrift, ikon va vizual uyg'unlik bilan ishlaydigan dizayner
Wireframe	Ekranning oddiy, rangsiz sxemasi (keyingi darslarda)
Prototip	Bosib ko'rish mumkin bo'lgan «jonli» model (keyingi darslarda)
Dashboard	Ma'lumotlar paneli (grafik, raqamlar bir ekranda)
Brend	Kompaniya nomi, belgisi va unga bo'lgan ishonch hamda taassurot

Bilasizmi?

• Dizayn qilingan narsalarning ko'pchiligini sezmaymiz: ular yaxshi ishlasa, e'tibor bermaymiz. Yomon ishlaganda esa darhol bilib olamiz.
• UX atamasi faqat ekranga tegishli emas: buyurtmani kutish, o'ram ochilishi, qo'ng'iroq xizmati ham tajribaga kiradi.
• Bir xil ilova turli mamlakatlarda turli UI ga ega bo'lishi mumkin (ranglar va belgilar madaniyatga moslanadi), lekin UX asosi o'xshash qoladi.
• Kichik startaplarda bitta dizayner ham UX, ham UI ni qiladi. Katta kompaniyalarda esa alohida jamoalar bor.
• Soha keng: veb-sayt va mobil ilovadan tashqari, aqlli qurilmalar (soat, televizor) ekranlari ham dizaynerlar tomonidan yaratiladi.

Topshiriqlar

Kerak bo'ladi: daftar yoki A4 qog'oz, qalam, rangli qalamlar. Kompyuter ixtiyoriy (Figma bepul, onlayn).

1. UX yoki UI? oson

Har bir gapni «UX» yoki «UI» ga ajrating: (a) tugma rangi ko'k; (b) to'lov 2 bosishda bajariladi; (c) shrift «Roboto»; (d) sahifa 1 soniyada ochiladi; (e) barcha ikonlar bir xil uslubda; (f) yangi foydalanuvchi qayerga bosishni darhol tushunadi.

Kutiladigan natija: 6 ta gapning har biri uchun belgi va bir jumlalik sabab.

2. O'z so'zlaringiz bilan oson

UX va UI ni 1–2 jumlada, atamalarni ishlatmasdan do'stingizga tushuntirib bering (o'xshatish ishlatishingiz mumkin: restoran, uy, eshik).

Kutiladigan natija: UX uchun 1–2 jumla va UI uchun 1–2 jumla.

3. Eshik ham UX, ham UI? oson

Maktabingizdagi yoki uyingizdagi bir narsani (eshik, svetofor, bankomat, domofon) tanlang. Uning UX tomoni va UI tomoni nima ekanini yozing.

Kutiladigan natija: tanlangan narsa nomi, bitta UX va bitta UI misoli.

4. Dizayner kim? oson

UX dizayner va UI dizayner ishlaridan 3 tadan misol yozing (darsdagi ro'yxatdan foydalanmasdan, eslab).

Kutiladigan natija: ikki ustun, har birida 3 ta ish.

5. Ilova tahlili o'rta

Telegram, Instagram, TikTok yoki sevimli o'yiningizni tanlang. Jadval to'ldiring: 2 ta yaxshi UX nuqtasi, 1 ta yomon UX nuqtasi, 2 ta UI elementi (rang, shrift, ikon) va ular nega mos kelgani.

Kutiladigan natija: to'ldirilgan jadval (daftar yoki skrinshotlar bilan).

6. Bu yerda nima muammo? o'rta

Tasavvur qiling: ilova juda chiroyli, rangli animatsiyalari bor, lekin «To'lash» tugmasi uchinchi menyuning ichida yashirin. Bu qaysi qismning muammosi? Uni qanday tuzatasiz? Yechim UX ni o'zgartiradimi yoki UI ni?

Kutiladigan natija: to'g'ri ajratilgan muammo (UX yoki UI) va 2–3 jumlalik tuzatish rejasi.

7. Variantlarni solishtiring o'rta

Yo'l ko'rsatuvchi 2 ta ilovani (masalan, Yandex Go va Google Maps) yoki 2 ta onlayn do'konni ochib solishtiring: qaysi birida kerakli ishni (manzil topish, mahsulotni savatga qo'yish) kamroq bosish bilan bajarasiz? Qadamlarni sanang.

Kutiladigan natija: har bir ilova uchun qadamlar soni va qaysi biri qulayroq ekani haqida xulosa.

8. Yomon UX kundaligi o'rta

Bir kun davomida o'zingizni g'azablantirgan 3 ta narsani (ilova, sayt, qurilma) yozib boring. Har biri UX ning qaysi jihati (tezlik, tushunmovchilik, qadam ko'pligi, xato xabari) bilan bog'liq?

Kutiladigan natija: 3 ta misol, har biriga sabab va «men qanday yaxshilardim» deb bitta g'oya.

9. Bir UX, ikki UI qiyin

Maktab oshxonasi uchun «Buyurtma» ekranini qog'ozda 2 xil UI da chizing (telefon ramkasi ichida). Qadamlar bir xil: taom tanlash → miqdor → «Buyurtma berish». Birinchisida bir uslub (rang, shakl), ikkinchisida butunlay boshqa uslub. Pastga yozing: nima o'zgardi va nima o'zgarmadi?

Kutiladigan natija: ikkita eskiz va 2–3 jumlali izoh (UI nima bilan farq qildi, UX nima uchun bir xil qoldi).

10. Chiroyli, lekin yomon qiyin

Qog'ozda atay yomon UX li, lekin chiroyli UI li ro'yxatdan o'tish ekranini chizing (kamida 3 ta UX xatosi bo'lsin). Keyin xatolarni qizil qalamda belgilab, yaxshilangan variantni chizing.

Kutiladigan natija: «yomon» va «yaxshilangan» eskizlar, xatolar qizil bilan raqamlangan.

11. Foydalanuvchi bilan gaplashing qiyin

Oila a'zosi yoki do'stingizdan (yoshi sizdan katta) bitta ilovadan foydalanishini so'rang va jim kuzating: qayerda to'xtadi, qayerda xato qildi? Hech narsa tushuntirmang.

Kutiladigan natija: kuzatuv qaydi: 3 ta kuzatuv, ularning qaysilari UX muammosi ekani va nima uchun.

12. Dizayner ish e'loni bonus

Intervyuda UX/UI dizayner talab qilinadigan bitta haqiqiy ish e'lonini toping (hh.uz, LinkedIn yoki Telegram kanallar). Talablarni UX va UI ga ajrating.

Kutiladigan natija: e'lon havolasi yoki skrinshoti va ikki ustunli ro'yxat.

O'zingizni tekshiring

1. UX va UI ning to'liq nomlari va ma'nosini ayting.
2. UX savolini va UI savolini bir jumladan yozing.
3. Chiroyli, lekin foydalanib bo'lmaydigan ilova qaysi qismi yomonligini tushuntiring.
4. UX va UI farqini restoran misolida tushuntiring.
5. UX dizayner va UI dizayner nima bilan shug'ullanadi?
6. UX/UI dizayn qanday mahsulotlarda qo'llanadi (kamida 4 ta)?
7. Yaxshi UX/UI nega biznes uchun foydali?

Uyga vazifa

O'zingiz kunda foydalanadigan bitta ilovada bitta yaxshi va bitta yomon UX nuqtasini toping (skrinshot yoki qisqa tavsif bilan) va ular nega shunday ekanini bir jumlada yozing. Vaqt: 20–25 daqiqa. To'liq matn: uyga-vazifa.md.