UI va UX dizayn: farqi nimada
Asoslar3 daqInnovialabs tahririyati
Qisqacha
UX dizayn mahsulot nima qilishini va foydalanuvchi maqsadga qaysi yo‘l bilan borishini belgilaydi, UI dizayn esa shu yo‘ldagi har bir ekran qanday ko‘rinishi va javob berishini. UI’siz UX — ishlaydigan skelet, UX’siz UI — hech kimga yordam bermaydigan chiroyli ekran.
Qisqa javob
UX dizayn (user experience) — bu yo‘l haqida: foydalanuvchining vazifasi qanday, u qaysi qadamlarni bosadi, qayerda qiynaladi va mahsulot har bir qadamda nima qilishi kerak. UI dizayn (user interface) — bu sirt haqida: shu yo‘ldagi har bir ekrandagi to‘r, tugmalar, shriftlar, ranglar, ikonlar, holatlar va animatsiyalar.
Oddiy qoida: UX «bu ishlaydimi va tushunarlimi?» degan savolga javob beradi, UI esa «bu aniq, bir xil va yoqimli ko‘rinadimi?» degan savolga.
Aniq misollar
Ovqat yetkazib berish ilovasini olaylik.
UX qarorlari:
- Menyuni ro‘yxatdan o‘tmasdan ko‘rishga ruxsat berish, telefon raqamini esa faqat buyurtma rasmiylashtirilayotganda so‘rash.
- Yetkazib berish narxini savatchadan oldin ko‘rsatish, oxirgi ekranda kutilmagan holat sifatida emas.
- Oxirgi manzilni eslab qolish, shunda takroriy buyurtma uch bosishda bajariladi.
- Buyurtma paytida restoran yopilib qolsa nima bo‘lishini o‘ylab chiqish.
UI qarorlari:
- «Buyurtma berish» tugmasi ekrandagi eng ko‘zga tashlanadigan element va pastda mahkamlangan.
- Taom kartochkalarida rasm nisbati, narx uslubi va bo‘shliqlar bir xil.
- Xatolar ikonka bilan qizil, muvaffaqiyatli amallar yashil rangda.
- Shriftlar, to‘r va bosish zonalari kichik telefonlarga mos.
E’tibor bering: birorta UX qarori rang haqida gapirmaydi, birorta UI qarori esa qadamlar tartibini o‘zgartirmaydi.
Ular qayerda kesishadi
Haqiqiy mahsulotda chegara noaniq va bu normal holat. Odatiy kesishish zonalari:
- Formalar. Nechta maydon so‘rash — UX; ular qanday guruhlanishi, nomlanishi va validatsiya vizual qanday ko‘rsatilishi — UI. Yomon bezatilgan forma yaxshi o‘ylangan ssenariyni buzishi mumkin.
- Navigatsiya. Bo‘limlar tuzilmasi — UX (axborot arxitekturasi); tab-bar, menyu uslubi va faol holatlar — UI.
- Qayta aloqa. To‘lovdan keyin tasdiq ko‘rsatish kerakligi haqidagi qaror — UX; bu tasdiq qanday ko‘rinishi va animatsiyasi — UI.
- Mikromatnlar. Tugmalardagi yozuvlar va xato matnlari ikkalasiga ham tegishli: ular ssenariy bo‘ylab yo‘naltiradi va vizual blokni shakllantiradi.
Yaxshi UI UX’dagi mayda kamchiliklarni bir muddat yashirishi mumkin, lekin noto‘g‘ri narsani noto‘g‘ri tartibda so‘raydigan ssenariyni tuzata olmaydi.
Kim nima bilan shug‘ullanadi
| Vazifa | UX | UI |
|---|---|---|
| Intervyular, so‘rovnomalar, analitika tahlili | ha | |
| Foydalanuvchi ssenariylari va axborot arxitekturasi | ha | |
| Vayrfreymlar (sxematik ekranlar) | ha | |
| Yuzabiliti-testlash | ha | yordam beradi |
| Vizual uslub, rang, tipografika | ha | |
| Batafsil maketlar va ekranlarning barcha holatlari | ha | |
| UI-kit va dizayn-tizim komponentlari | ha | |
| Interaktiv prototip | ha | ha |
| Maketlarni dasturchilarga topshirish | yordam beradi | ha |
Kichik jamoalarda ikkala rolni odatda bitta mahsulot dizayneri bajaradi. Yirik kompaniyalarda rollar ajratiladi: UX-tadqiqotchilar, UX-dizaynerlar, UI-dizaynerlar, ba’zan alohida moushn va kontent dizaynerlar.
Ko‘p uchraydigan xatolar
- Vizualdan boshlash. Ssenariy aniq bo‘lmasdan ranglarni tanlash ekranlarni qayta chizishga olib keladi.
- UX’ni «bezash» deb hisoblash. UX ekranning ko‘rinishi bilan emas, foydalanuvchi vazifani hal qila olishi bilan o‘lchanadi.
- Holatlarni unutish. UI faqat ideal ssenariy emas: bo‘sh, yuklanish, xato va nofaol holatlar ham ishning bir qismi.
- Testlamaslik. UX va UI farazlarini haqiqiy odamlarda, hech bo‘lmaganda bir nechta qisqa sessiyada tekshirish kerak.
Sizga nima kerakligini qanday bilish mumkin
- Foydalanuvchilar vazifani yakunlay olmaydi yoki ma’lum qadamda chiqib ketadi — UX’dan boshlang.
- Vazifalar hal bo‘ladi, lekin mahsulot bir xil emas yoki eskirgan ko‘rinadi — UI’dan boshlang.
- Mahsulot noldan yaratilmoqda — ikkalasi ham kerak: avval UX, keyin tekshirilgan ssenariylar ustiga UI.