UX va UI dizayn: nima farq qiladi?

Bugun ilovalarga dizayner ko'zi bilan qarashni boshlaymiz

9-sinfUX/UI dizayn va Advanced Front-end1-hafta · 1-dars

Bugun nimani o'rganamiz?

UX nima?

Foydalanuvchi tajribasi: qulaymi?

UI nima?

Interfeys: qanday ko'rinadi?

Farqi va o'rni

Qayerda ishlanadi va nega muhim

Boshlaymiz: g'azablantirgan ilova

Qaysi ilova yoki sayt sizni oxirgi marta g'azablantirdi? Nega?

«Tugmani topolmadim» «Juda sekin» «Hammasi chalkash» «Reklama yopib qo'ydi»

Siz hozir UX muammolarini sanadingiz. Bugun shuni nomi bilan ataymiz.

UX: foydalanuvchi tajribasi

Odam maqsadiga qanchalik oson yetadi?

Eshik misoli: ko'rinmas muammo

UX (User Experience)

Foydalanuvchi tajribasi: u maqsadiga erisha oladimi va buni bajarish qanchalik oddiy yoki murakkab?

Maqsad

bosing

Kerakli ishni bajara oladimi

Tezlik

bosing

Qancha vaqt ketadi

Qulaylik

bosing

Nechta qadam, tushunarlimi

His-tuyg'u

bosing

Ishonch yoki g'azab

Bir maqsad, ikki yo'l

Maqsad bir xil, lekin tajriba butunlay boshqacha. Qadam qancha ko'p bo'lsa, odam shuncha tez ketib qoladi.

UX dizayner nima qiladi?

Muammoni o'rganadi

Sketch, wireframe, prototip

Test qiladi

Yaxshilaydi

Chuqurroq bilish uchun pastga ↓

UX faqat ekran emas

Kutish vaqti

Buyurtma qancha kutiladi

Aloqa

Yordam xizmati qanday javob beradi

Ilova

Biz kursda shu qismga e'tibor beramiz

UI: foydalanuvchi interfeysi

Mahsulot qanday ko'rinadi va qanday tuzilgan?

UI anatomiyasi: Google Maps

Telefon qismlarini bosing yoki ustiga olib boring.

UI (User Interface)

Interfeysning qanday ko'rinishi va qanday tuzilishi. Foydalanuvchi ko'zi bilan ko'radigan hamma narsa.

Ranglar

Kayfiyat va urg'u

Shriftlar

O'qish oson bo'lsin

Ikon va grafika

Bir uslubda

Uyg'unlik

Hamma ekran bir xil

UI dizayner asboblari

Farq va bog'liqlik

Ikkalasi ham kerak, lekin bir narsa emas

UI va UX farqi

UI dizayn	UX dizayn
Tashqi ko'rinishni tayyorlaydi	Umumiy tajribani shakllantiradi
Ranglar, tugmalar, shriftlar	Qulaylik, tezlik, hissiy tajriba
Ko'zga ko'rinadigan qismlar	Foydalanuvchining ichki his-tuyg'ulari

Restoran o'xshatishi

Bir sahifa: avval tuzilma

kafe.uz

Keyin ko'rinish qo'shiladi

kafe.uz

AXV Kafe

Bugungi menyu: 3 ta yangi taom

Buyurtma berish

Ikkalasi ham kerak

Odatiy xato

Noto'g'ri

«UX = chiroyli dizayn»

To'g'ri

Chiroylilik asosan UI. UX: tezlik, tushunarlilik, qadamlar, his-tuyg'u.

Chiroyli ilovani yomon UX bilan chiqarsangiz, uni foydalanuvchi o'chirib tashlaydi.

Qayerda va nega?

Dizaynerlar qayerda ishlaydi va nega bu muhim

Dizaynerlar qayerda ishlaydi?

Sizning telefoningizdagi hamma ilova kimdir dizayn qilgan. ↓

Hayotingizdan misollar

TelegramInstagramO'yinlarElektron jurnalTo'lov ilovalariAqlli soat

Nega bu muhim?

Qulay va chiroyli mahsulot

Foydalanuvchi mamnun

Raqobatda yutadi

Brendga ishonch

Qulay ilova qoladi. Qulay bo'lmagan ilova o'chirib tashlanadi.

Tezkor savol 1

«Tugma rangi ko'k» UX ga tegishlimi yoki UI ga?

UI: ko'rinish bilan bog'liq.

Tezkor savol 2

«To'lov 2 bosishda bajariladi» qaysi biriga tegishli?

UX: qulaylik va qadamlar soni.

Amaliyot 23 daqiqa

Oson6 ta gapni UX yoki UI ga ajrating (daftarda).

O'rtaTelegram yoki Instagram: 2 ta yaxshi UX, 1 ta yomon UX, 2 ta UI elementini jadvalga yozing.

QiyinMaktab oshxonasi «Buyurtma» ekranini qog'ozda 2 xil UI da chizing (UX bir xil).

Xulosa

Bugun o'rgandik

UX: tajriba va qulaylik. UI: ko'rinish. Ikkalasi bir-birini to'ldiradi. Dizaynerlar veb, ilova, dashboard va qurilmalarda ishlaydi.

Uyga vazifa

Kunda ishlatadigan ilovada 1 ta yaxshi va 1 ta yomon UX nuqtasini toping (20-25 daqiqa).

Keyingi darsda

Yaxshi UX nimadan iborat?

UX/UI tamoyillari

Yaxshi va yomon dizayn

3-darsdan boshlab biz foydalanuvchilarni o'rganamiz.