"UX/UI dizayner" iborasini vakansiyalarda ham, kurs e'lonlarida ham tez-tez ko'rasiz. Ikki qisqartma ko'pincha birga yoziladi, shuning uchun ko'pchilik ularni bitta narsa deb o'ylaydi. Aslida UX va UI mahsulotning ikki xil tomoni bilan shug'ullanadi. Ular bir-biriga chambarchas bog'liq, lekin savollari boshqa.
Bu maqolada UX va UI farqini oddiy misollar bilan tushuntiramiz, har bir yo'nalishda dizayner nima qilishini ko'rsatamiz va dizaynerlikni noldan qaysi tartibda o'rganish mumkinligini bosqichma-bosqich beramiz.
Oddiy o'xshatish: uy qurish
Tasavvur qiling, siz uy quryapsiz. Avval xonalar qanday joylashishini o'ylaysiz: oshxona ovqatlanish xonasiga yaqin bo'lsin, yotoqxona shovqindan uzoqroq bo'lsin, eshikdan kirgan odam adashmasin. Bu UX, ya'ni uyda yashash qulayligi.
Keyin devorlarning rangini, mebel uslubini, chiroqlarni va eshik tutqichlarini tanlaysiz. Bu UI, ya'ni uyning tashqi ko'rinishi va ko'zga tashlanadigan har bir detal.
Chiroyli bezatilgan, lekin hammomga faqat yotoqxona orqali o'tiladigan uyda yashash noqulay. Qulay rejalashtirilgan, lekin xira va tartibsiz bezatilgan uy esa kishini o'ziga tortmaydi. Yaxshi natija uchun ikkalasi ham kerak.
UX "foydalanuvchi o'z maqsadiga qanchalik oson yetadi?" degan savolga javob beradi. UI "bu yo'l ko'zga qanday ko'rinadi va qanday his uyg'otadi?" degan savolga javob beradi.
Ilova misolida
Endi real misol. Kompaniya ovqat buyurtma qilish ilovasini yaratmoqda.
UX dizayner avval foydalanuvchilar qanday buyurtma berishini o'rganadi. Masalan, ko'pchilik bir xil taomni qayta-qayta buyurtma qilishini payqaydi. Shundan kelib chiqib, bosh sahifaga "Oldingi buyurtmani takrorlash" tugmasini qo'yishni taklif qiladi. So'ng buyurtma jarayonini qadamlarga bo'ladi, ortiqcha ekranlarni olib tashlaydi va to'lovgacha qancha bosish kerakligini qisqartiradi.
UI dizayner esa shu jarayonni ko'rinishga aylantiradi. Tugma qaysi rangda bo'ladi, taom rasmlari qanday o'lchamda chiqadi, narx qaysi shriftda yoziladi, "Savatga qo'shish" bosilganda qanday animatsiya ko'rinadi, butun ilova bir xil uslubda bo'lishi uchun qaysi komponentlar ishlatiladi.
Natijada foydalanuvchi uchun hammasi oddiy ko'rinadi: ilovani ochdi, ikki marta bosdi, ovqat yo'lda. Bu soddalik ortida ikki xil ish turibdi.
UX dizayner nima qiladi
UX (user experience, ya'ni foydalanuvchi tajribasi) dizaynerining asosiy vazifasi foydalanuvchining muammosini tushunish va uni eng qulay yo'l bilan hal qilish. Uning ishi:
- Tadqiqot. Foydalanuvchilar kimlar, ular nimani xohlaydi va hozir qayerda qiynalyapti.
- Foydalanuvchi intervyulari. Real odamlar bilan suhbatlashib, ularning odatlari va muammolarini bilib olish.
- Foydalanuvchi oqimlari (user flow). Odam maqsadiga yetishi uchun qaysi qadamlardan o'tishini chizish.
- Wireframe. Ekranlarning rangsiz, sodda sxemasi: qaysi element qayerda turadi.
- Prototip. Bosiladigan, ishlayotgandek ko'rinadigan maket.
- Foydalanuvchi bilan sinov (usability testing). Prototipni real odamlarga berib, qayerda qotib qolishini kuzatish va dizaynni tuzatish.
UX dizayner ko'pincha chiroyli rasmlar bilan emas, balki savollar, sxemalar va kuzatuvlar bilan ishlaydi.
UI dizayner nima qiladi
UI (user interface, ya'ni foydalanuvchi interfeysi) dizaynerining vazifasi interfeysni tushunarli, chiroyli va izchil qilish. Uning ishi:
- Vizual ierarxiya. Ekranda eng muhim narsa birinchi ko'zga tashlanishi kerak. O'lcham, rang va joylashuv orqali ko'zni boshqarish.
- Rang. Brend ranglari, tugmalar va xabarlar uchun ranglar, matn yaxshi o'qilishi uchun yetarli kontrast.
- Tipografika. Shrift tanlash, sarlavha va matn o'lchamlari, qatorlar orasidagi masofa.
- Komponentlar. Tugma, kiritish maydoni, karta, menyu kabi qayta ishlatiladigan elementlar.
- Dizayn tizimi. Barcha komponentlar, ranglar va qoidalar to'plami. U butun mahsulot bir xil ko'rinishini va jamoa tez ishlashini ta'minlaydi.
- Holatlar va mikroanimatsiyalar. Tugma bosilganda, ma'lumot yuklanayotganda yoki xato chiqqanda nima ko'rinadi.
Taqqoslash jadvali
| UX dizayn | UI dizayn | |
|---|---|---|
| Asosiy savol | Foydalanuvchi maqsadiga oson yetadimi? | Interfeys qanday ko'rinadi va qanday his beradi? |
| Ish natijasi | Tadqiqot xulosalari, user flow, wireframe, prototip | Tayyor ekranlar, komponentlar, dizayn tizimi |
| Asosiy ko'nikma | Tahlil, savol berish, empatiya | Kompozitsiya, rang, tipografika |
| Muvaffaqiyat belgisi | Odamlar adashmaydi, vazifani tez bajaradi | Interfeys tushunarli, izchil va yoqimli |
| Ko'p ishlaydi | Foydalanuvchilar, mahsulot menejeri, analitik | Dasturchilar, brend va marketing jamoasi |
Nega ko'pincha bitta odam ikkalasini qiladi
Katta kompaniyalarda UX va UI alohida mutaxassislar bo'lishi mumkin. Lekin kichik va o'rta jamoalarda, startaplarda odatda bitta UX/UI dizayner ishlaydi: u foydalanuvchini ham o'rganadi, ekranlarni ham chizadi.
Buning mantiqiy sababi bor. Yaxshi UI UX'ga tayanadi: qaysi tugma asosiy ekanini bilmasangiz, uni to'g'ri ajratib ko'rsata olmaysiz. Yaxshi UX esa ko'rinishsiz to'liq bo'lmaydi: eng qulay oqim ham xira va chalkash ko'rinsa, odamlar undan foydalanmaydi. Shuning uchun boshlovchi dizayner uchun ikkala tomonning asoslarini bilish eng to'g'ri yo'l. Keyinchalik qaysi biri ko'proq yoqsa, o'sha tomonga chuqurlashish mumkin.
Asosiy vosita: Figma
Bugungi kunda interfeys dizaynining asosiy vositasi Figma. Unda wireframe va tayyor ekranlarni chizish, bosiladigan prototip yasash, komponentlar va dizayn tizimi yaratish mumkin. Figma brauzerda ishlaydi, jamoa bitta faylda birga ishlaydi, dasturchilar esa kerakli o'lcham va ranglarni to'g'ridan-to'g'ri fayldan oladi.
Boshlash uchun boshqa ko'p dastur shart emas. Figma'ni yaxshi o'zlashtirsangiz, qolgan vositalarni kerak bo'lganda tez o'rganasiz.
Qanday sifatlar yordam beradi
Dizayner bo'lish uchun rassom bo'lish shart emas. Chizish qobiliyatidan ko'ra quyidagilar muhimroq:
- Kuzatuvchanlik. Har kuni ishlatadigan ilovalaringizda nima qulay, nima noqulay ekanini payqash.
- Empatiya. O'zingizni boshqa odam o'rniga qo'yib ko'rish: yoshi kattaroq, shoshayotgan yoki texnikani yaxshi bilmaydigan foydalanuvchi o'rniga.
- Tartibga muhabbat. Bir xil masofalar, bir xil o'lchamlar, bir xil qoidalar.
- Fikr-mulohazani qabul qila olish. Dizayn doim tanqid va takomillashtirish orqali yaxshilanadi.
- Qarorini tushuntira olish. "Chiroyli bo'lgani uchun" emas, "foydalanuvchi shu yerda qotib qolgani uchun" deb asoslash.
Dizaynerlikni qayerdan boshlash kerak
Mana noldan boshlovchi uchun taxminiy ketma-ketlik:
- Dizayn asoslari. Kompozitsiya, rang, tipografika, bo'sh joy (whitespace) va tekislash. Bu har qanday interfeysning poydevori.
- Yaxshi ilovalarni o'rganing. O'zingiz yoqtirgan ilovalardan skrinshot oling va tahlil qiling: nega bu tugma shu yerda, nega bu sarlavha katta, ekranda nechta rang ishlatilgan.
- Figma'ni o'rganing. Frame, auto layout, komponentlar va prototip. Avval mavjud ekranlarni aynan qayta chizib mashq qiling, bu qo'lni tez o'rgatadi.
- Mavjud ekranni qayta loyihalang. Kundalik ishlatadigan biror ilovaning noqulay ekranini oling, muammosini yozing va o'z yechimingizni chizing. Muhimi, nima uchun o'zgartirganingizni tushuntira olish.
- Kichik to'liq loyiha qiling. Masalan, sartaroshxonaga yozilish ilovasi: tadqiqot, user flow, wireframe, UI va prototip. Iloji bo'lsa, 3-5 ta tanishingizga prototipni sinab ko'rishga bering.
- Portfolio yig'ing. Eng yaxshi 2-3 ta ishingizni tanlab, har birini "keys" sifatida rasmiylashtiring.
Portfolio bo'yicha maslahatlar
Portfolio dizaynerning asosiy hujjati. Uni ko'rib chiqadigan odam faqat chiroyli ekranlarni emas, sizning fikrlash jarayoningizni ham ko'rmoqchi bo'ladi.
- Kam, lekin sifatli. O'nta chala ishdan ko'ra ikki-uchta chuqur ishlangan loyiha yaxshiroq.
- Muammodan boshlang. Har bir keysda avval muammoni yozing, keyin tadqiqot, qarorlar va natijani ko'rsating.
- Jarayonni ko'rsating. Wireframe, qoralama variantlar, sinovdan keyin nima o'zgarganini qo'shing.
- Qisqa va tushunarli yozing. Har bir rasmga bir-ikki gapli izoh yetarli.
- Mobil va veb. Imkon bo'lsa, ikkala formatda ham ish ko'rsating.
Boshlovchilarning ko'p uchraydigan xatolari
- Faqat chiroyli rasm chizish. Kimning qaysi muammosini hal qilayotganingizni bilmasangiz, eng chiroyli ekran ham foydasiz bo'lib qoladi.
- Dribbble'dan ko'r-ko'rona nusxa olish. Ilhom olish foydali, lekin u yerdagi ko'p ishlar real foydalanuvchida sinalmagan konseptlar. Ularni nusxalashdan ko'ra, nega shunday qilinganini tahlil qiling.
- Fikr-mulohazadan qochish. Ishingizni boshqalarga ko'rsatmasangiz, xatolaringizni ko'rmaysiz. Tanqid dizayner uchun eng tez o'sish yo'li.
- Asoslarni tashlab ketish. Tipografika va bo'sh joyni tushunmasdan murakkab animatsiyalarga o'tish.
- Hamma narsani bir vaqtda o'rganishga urinish. Bir nechta vositani chala bilishdan ko'ra Figma'ni chuqur bilish ancha foydali.
Tizimli o'rganmoqchi bo'lsangiz
Mustaqil o'rganish mumkin, lekin buning uchun yo'nalishni o'zingiz belgilashingiz va ishingiz haqida fikr bildiradigan odamlarni o'zingiz topishingiz kerak bo'ladi. Tayyor tartib va mentor bilan o'rganmoqchi bo'lsangiz, Yangi Avlod Akademiyasining Dizayn (UX/UI) kursiga qarang. Kurs 4 oy davom etadi, boshlang'ich daraja uchun mo'ljallangan va onlayn, haftasiga 3 marta o'tadi. Dasturda dizayn asoslari, UX tadqiqot va foydalanuvchi oqimlari, Figma'da wireframe va prototip, dizayn tizimlari, mobil va veb interfeyslar hamda portfolio tayyorlash bor.
Xulosa
UX va UI bir tanganing ikki tomoni. UX foydalanuvchining yo'lini qulay qiladi, UI esa shu yo'lni tushunarli va yoqimli ko'rinishga keltiradi. Boshlovchi uchun ikkalasining asoslarini o'rganish, Figma'ni yaxshi o'zlashtirish va real muammoni hal qiladigan kichik loyihalardan portfolio yig'ish eng to'g'ri yo'l.
Birinchi qadam oddiy: telefoningizdagi eng ko'p ishlatadigan ilovani oching va undagi bitta noqulay joyni toping. Dizaynerning ishi aynan shu savoldan boshlanadi.
