UX/UI dizayn — bu shunchaki «chiroyli qilish» emas
Menga keladigan brifning deyarli har ikkinchisi «eng muhimi, chiroyli bo‘lsin» degan gap bilan tugaydi. Chiroyli bo‘ladi. Lekin ish shundan boshlansa, sayt hech kim ochmaydigan jurnalning yaxshi muqovasiga o‘xshab qoladi.
Murodjon MaxmudovDizayner
Bir yil oldin bir mijoz Telegram’da menga uchta skrinshot yubordi: Apple sayti, qandaydir amerika startapining lendingi va Instagram’dagi gradiyentli post. Ostida: «Taxminan shunaqa xohlaymiz». Gap esa tashrif buyuruvchilarning 80 foizi telefondan, Telegram kanaldagi havola orqali kiradigan va bir daqiqada narx hamda manzilni bilmoqchi bo‘lgan biznes sayti haqida edi.
Men Apple’ga qarshi emasman. Ammo bu skrinshotlarning birortasi ham saytda odam nima qilishi kerak, degan savolga javob bermasdi. UI va UX o‘rtasidagi farq aynan shu. Bu haqda darsliksiz gapirmoqchiman.
Chiroyli va qulay — boshqa-boshqa vazifalar
UI (user interface) — siz ko‘radigan narsa: ranglar, shriftlar, tugmalar, ikonkalar, oraliqlar. UX (user experience) — odamning yo‘li: u qayerdan keldi, nimani qidiryapti, qayerda qoqiladi va nega chiqib ketadi.
Oddiy test. Maketdan barcha rang va rasmlarni olib tashlab, faqat kulrang to‘rtburchaklarni qoldiring. Qayerni bosish kerakligi tushunarli bo‘lib qoladimi? Agar yo‘q bo‘lsa, hech qanday gradiyent yordam bermaydi.
Men ikki yo‘nalishda ishlayman: logotip va brendbuklar chizaman, lekin saytlarda vaqtimning yarmidan ko‘pi mijoz oxir-oqibat ko‘rmaydigan narsalarga ketadi. Sahifalar tuzilmasi, bloklar tartibi, tugmalardagi matnlar, bosilgandan keyin nima bo‘lishi. Mijozga bu «tayyorgarlik»dek tuyuladi, holbuki asosiy ish aynan shu.
Figma’ni ochishdan oldin nima qilaman
So‘nggi ikki yilda jarayonim deyarli o‘zgarmadi. Faqat qadamlarning davomiyligi o‘zgaradi: lending uchun tadqiqot bir kun, platforma uchun bir hafta oladi.
- Egasi bilan suhbat. Ranglar haqida emas, odamlar haqida: kim keladi, qayerdan, qaysi tilda, qaysi qurilmadan. Toshkentda javob deyarli har doim «telefondan, Telegram yoki Instagram’dan».
- Boshqalarning saytlari. 5–10 ta raqobatchini, jumladan omadsizlarini ham ko‘rib chiqaman. Tashrif buyuruvchi sifatida meni nima jahlimni chiqarishini yozib boraman. Bu har qanday so‘rovnomadan tezroq.
- User flow. Yo‘lni strelkalar bilan chizaman: odam reklamadan keldi → narxni ko‘rdi → «Telegram’da yozish»ni bosdi. Agar yo‘l 3–4 qadamga sig‘masa, qayerdadir ortiqcha narsa bor.
- Vayrfreymlar. Uslubsiz kulrang bloklar. Bu bosqichda mijoz ko‘k rang yoqadimi-yo‘qmi haqida emas, mazmun haqida bahslashadi.
- Bosiladigan prototip. Uni bo‘lajak foydalanuvchilarga o‘xshagan 3–5 kishiga ko‘rsataman. Ko‘pincha bular mijozning qarindoshlari yoki xodimlari bo‘ladi, qo‘pol xatolarni topish uchun shuning o‘zi yetarli.
- UI. Faqat endi ranglar, tipografika, illyustratsiyalar, animatsiya. Va dizayn-tizim: tugmalar, maydonlar, kartochkalar, toki frontend dasturchi oraliqlarni taxmin qilib o‘tirmasin.
Mijozlar oltinchi qadamni ko‘proq yaxshi ko‘radi. Birinchi beshtasi esa ularning pulini tejaydi.
Platina: asosiysi o‘qish bo‘lgan yangiliklar sayti
Platina uchun (mijoz — Media Affairs) logotip, UX/UI va yangiliklar saytining o‘zini qildik. Rubrikalar: siyosat, iqtisodiyot, fan, madaniyat, sport. Yangiliklar ko‘p, har kuni yangilanadi va o‘quvchi tomosha qilish uchun emas, aniq bir xabarni o‘qish uchun keladi.
Asosiy qarorlar go‘zallik haqida emas edi:
- Bosh sahifadagi ierarxiya. Bitta bosh yangilik, keyin bir nechta muhimlari, keyin lenta. Hammasi bir xil o‘lchamda bo‘lsa, ko‘z qayerga qarashni bilmaydi.
- Uzun matn uchun tipografika. Satr kengligi, qatorlar orasidagi masofa, telefondagi shrift o‘lchami. Yangiliklar sayti uchun bu har qanday illyustratsiyadan muhimroq.
- Rubrikalar bezak emas, navigatsiya. Sport haqida o‘qiyotgan odam siyosatni varaqlamasdan, bir bosishda sportga o‘tishi kerak.
- Yangilik kartochkasi. Sana, rubrika, sarlavha, prevyu. Har bir element barcha ro‘yxatlarda bir xil joyda turadi, miya qayta moslashib o‘tirmasligi uchun.
Logotipni parallel ravishda qildik va uni oq varaqda emas, sayt shapkasi ichida hamda brauzer vkladkasidagi kichik ikonkada tekshirdik. Logotiplar haqida alohida batafsil yozaman.
PlanBaby: foydalanuvchi xavotirda bo‘lganda
PlanBaby — homiladorlikni rejalashtirish va ota-onalik haqidagi platforma, internet-do‘kon va klinikasi bilan. Bu yerda UX boshqa narsa haqida edi: ovulyatsiya yoki tahlillar haqida ma’lumot qidirayotgan odam ko‘pincha xavotirda bo‘ladi. Unga yorqin bannerlar va chegirmali qalqib chiquvchi oynalar kerak emas.
Nimalarni hisobga oldik:
- Avval mobil versiya. Maqolalarni kechqurun telefondan o‘qishadi, shuning uchun maketlarni 375 px kenglikdan boshladim, desktopni keyin kengaytirdim.
- Vositalar maqolalardan alohida. Ovulyatsiya kalkulyatori, chaqaloq ismlari bazasi, spermogramma tahlilini tushuntirish. Odamlar aynan shular uchun qaytib keladi, shuning uchun vositalarning menyuda o‘z bo‘limi bor.
- Hayot bosqichlari bo‘yicha rubrikalar. Rejalashtirish, homiladorlik, tayyorgarlik, emizish. Odam o‘zini murakkab kategoriyalar daraxtida emas, bitta so‘zda topadi.
- Do‘kon kontentni bosib ketmaydi. Katalog va savat bor, lekin maqolalar tovar reklamasiga aylanmaydi.
- Ikki til, bir tomonga og‘ishmasdan. O‘zbekcha va ruscha matnlar uzunligi har xil, tugmalar satrni buzmasdan ikkala variantga ham chidashi kerak.
Rostini aytaman: do‘kon bilan avvaliga oshirib yubordik. Birinchi maketlarda tovar bloklari deyarli har bir maqolada turardi va sahifa marketpleysga o‘xshab qolgandi. Jamoa bilan muhokamadan so‘ng yarmini olib tashladik. Bu to‘g‘ri qadam bo‘ldi.
“Dasturchi sifatida men uchun yaxshi maket — har bir holat uchun ekrani bor maket: bo‘sh ro‘yxat, xato, yuklanish, o‘zbekcha uzun ism. Bular bo‘lmasa, qarorni dasturchi qabul qiladi, dasturchi esa odatda tezroq verstka qilinadiganini tanlaydi.”
Yomon UX qanchaga tushadi
Yomon interfeys kamdan-kam hollarda shovqin bilan buziladi. U shunchaki jimgina odamlarni yo‘qotadi. Mana bizga redizaynga keladigan saytlarda eng ko‘p ko‘radigan belgilarim:
| Belgi | Biznes nimani yo‘qotadi | Odatda qanday tuzatamiz |
|---|---|---|
| «Bog‘lanish» tugmasi faqat footerda | Mobil arizalar, odam oxirigacha varaqlamaydi | Telefonda qotirilgan Telegram tugmasi |
| Narx yashirin yoki hamma joyda «so‘rov bo‘yicha» | Ishonch, odamlar narxi bor joyga ketadi | Hech bo‘lmasa asosiy xizmatlar uchun «…dan» oralig‘i |
| 10 ta maydonli forma | Oxirgi qadamdagi arizalar | Ism va Telegram, qolganini yozishmada aniqlaymiz |
| Rasm ustidagi matn | Qidiruv, tarjima, telefonda o‘qilishi | Matn rasm ustida alohida qatlam sifatida |
| 12 bandli menyu | Vaqt, odam keraklisini topa olmaydi | 5–6 band, qolgani ichki bo‘limlarda |
Bu muammolarning birortasi ham «xunuk» degani haqida emas. Hammasi foydalanuvchi yo‘lini oldindan hech kim chizmagani haqida.
Dizayner UX qilyaptimi yoki rasm chizyaptimi — qanday bilish mumkin
Agar dizayner yoki studiya tanlayotgan bo‘lsangiz, bir nechta savol bering. Javoblardan kim bilan gaplashayotganingiz darhol ko‘rinadi.
- Mijozlaringiz qayerdan va qaysi qurilmalardan kelishini so‘rayaptimi?
- Vayrfreymlarni ko‘rsatyaptimi yoki darhol tayyor yorqin maketnimi?
- Maketda mobil versiya bormi, «keyin» emas, darhol?
- Xatolar va bo‘sh ekranlar holatlari bormi?
- Nega blok aynan shu yerda turganini «shunisi chiroyliroq»siz tushuntira oladimi?
Dizayn narxi ham bunga ta’sir qiladi. Bizda UI/UX dizayn $600 dan boshlanadi va bu pulning katta qismi aynan tuzilma va prototipga ketadi. Agar sizga «sayt dizayni»ni $100 ga taklif qilishsa, katta ehtimol bilan ro‘yxatimdagi faqat oltinchi qadamni olasiz.
Agar bu matnni besh yil oldingi o‘zimga yozganimda, bitta narsani aytardim: birinchi maketga oshiq bo‘lib qolma. Avval kulrang to‘rtburchaklar, keyin mazmun haqida bahs, va faqat shundan keyin rang. Tayyor loyihalarda bu qanday ko‘rinishini Platina va PlanBaby keyslarida, interfeyslarni qanday qilishimizni esa UX/UI dizayn sahifasida ko‘rishingiz mumkin.
