Foydalanuvchi interfeysi dizayni qiyin. Tartib, oraliq, tipografiya va rang bo’yicha tanlashning ko’p variantlari tufayli dizayn qarorlarini qabul qilish juda qiyin bo’lishi mumkin.
Mantiqiy qoidalar
● Badiiy qobiliyat yoki sehrli sezgi emas, oddiy qoidalar.
●Mantiqiy qoidalar tizimiga ega bo’lish sizga oqilona dizayn qarorlarini samarali qabul qilishga yordam beradi.
● Mantiqiy tizim bo’lmasa, siz shunchaki go’zal ko’rinmaguncha narsalarni harakatlantirish uchun ichak hissiyotidan foydalanasiz.
Keling, ushbu misolni mantiqiy qoidalardan foydalanib tuzataylik. Quyidagi 2 ta dizayn qisqa muddatli mulkni ijaraga berish ilovasining mulk tafsilotlari sahifasi uchundir. Birinchisi, original dizayn. Ikkinchisi, ba’zi mantiqiy qoidalar yoki ko’rsatmalarni qo’llash natijasidir.
Vizual yoki o’zaro ta’sirli dizayn tajribasiga ega bo’lmasangiz ham, original dizayn tartibsiz, murakkab va foydalanish qiyinligini sezasiz. Buning sababi shundaki, u foydalanish uchun xavf tug’diradigan ko’plab muammoli dizayn tafsilotlarini o’z ichiga oladi. Ehtimol, siz allaqachon bir nechtasini payqadingizmi? Keling, quyidagi mantiqiy qoidalar yoki ko’rsatmalardan foydalangan holda asl dizayndagi muammolarni birma-bir hal qilaylik:
1. Tegishli elementlarni guruhlash uchun bo’sh joydan foydalaning
Ma’lumotni o’zaro bog’liq elementlarning kichikroq guruhlariga bo’lish interfeysni tuzish va tartibga solishga yordam beradi. Bu odamlarning tushunishi va eslab qolishini tezroq va osonlashtiradi.Quyidagi usullardan foydalanib, tegishli elementlarni guruhlashingiz mumkin:
● Tegishli elementlarni bir xil idishga joylashtiring.Kosmos bilan bog’liq elementlar bir-biriga yaqin holda.
● Tegishli elementlarni o’xshash qiling
● Tegishli elementlarni uzluksiz chiziqqa tekislang
● Konteynerlardan foydalanish interfeys elementlarini guruhlash uchun eng kuchli vizual ishoradir, lekin u keraksiz tartibsizliklarni keltirib chiqarishi mumkin.
Boshqa guruhlash usullaridan foydalanish imkoniyatlarini izlang, ular ko’pincha nozikroq va dizaynlarni soddalashtirishga yordam beradi.Ayniqsa, bo’sh joydan foydalanish bog’liq elementlarni guruhlashning juda samarali va oddiy usuli hisoblanadi. Guruhlarni aniqroq ko’rsatishga yordam berish uchun siz guruhlash usullarini ham birlashtira olasiz.Bizning misolimizda, kontent o’rtasida bo’sh joy yo’qligi dizaynni chalkash va tushunishni qiyinlashtiradi. Bo’shliqlarni ko’paytirish kontentni aniq guruhlashga yordam beradi, uni yanada tartibli va tushunishni osonlashtiradi.
2. Barqaror bo’ling
UI dizaynidagi izchillik o’xshash elementlarning o’xshash ko’rinishi va ishlashini anglatadi. Bu sizning mahsulotingizda ham, boshqa yaxshi tasdiqlangan mahsulotlar bilan solishtirganda ham to’g’ri bo’lishi kerak. Bu bashorat qilinadigan funksionallik foydalanish qulayligini yaxshilaydi va xatolarni kamaytiradi, chunki odamlar ishlar qanday ishlashini oʻrganishni davom ettirishlari shart emas. Bizning misolimizda ikonka uslublari mos kelmaydi, chunki ba’zilari to’ldirilgan, boshqalari esa mos kelmaydi. Bu ba’zi odamlarni chalkashtirib yuborishi mumkin, chunki to’ldirilgan piktogrammalar ko’pincha element tanlanganligini ko’rsatadi. Barcha piktogrammalarning konturini 2 pt shtrixli va yumaloq burchaklar bilan belgilash izchillikni yaxshilaydi va har bir piktogrammaga oʻxshash vizual vazn beradi.
Odamlar nimani anglatishini tushunishlariga yordam berish uchun piktogrammalarga matn yorliqlari ham qo’shiladi, ayniqsa ekranni o’qiydiganlar (ko’ra olmaydiganlar uchun interfeysni tavsiflovchi, nutq yoki brayldan foydalanadigan dasturiy ta’minot).
3. O’xshash ko’rinishdagi elementlarning o’xshash ishlashini ta’minlang
Agar elementlar bir-biriga o’xshash bo’lsa, odamlar ularning xuddi shunday ishlashini kutishadi. Shunday qilib, bir xil funksionallikka ega elementlar uchun izchil vizual ishlov berishdan foydalanishga harakat qiling. Aksincha, turli funksionallikka ega elementlarning boshqacha ko’rinishini ta’minlashga harakat qiling. Bizning misolimizda, piktogramma konteynerlari “hozir kitob qilish” tugmachasiga o’xshash vizual uslubga ega. Bu ularni interaktiv ko’rinishga olib keladi, garchi ular bo’lmasa ham. Belgilardan ko’k rang va tugmalar uslubini olib tashlash ularni interfaol elementlar bilan adashmaslikka yordam beradi.
4. Aniq vizual ierarxiya yarating
Interfeysdagi barcha ma’lumotlar bir xil darajada ahamiyatga ega emas. Muhimroq elementlarni ko’proq ko’rinadigan qilib ko’rsatish orqali ma’lumotni muhimlik tartibida taqdim etishga intiling. Muhimlikning aniq tartibi yoki vizual ierarxiya odamlarga ma’lumotni tezda skanerlash va qiziqish sohalariga e’tibor berishga yordam beradi. Bundan tashqari, tartib hissi yaratib, estetikani yaxshilaydi. Hajmi, rangi, kontrasti, oralig’i, joylashuvi va chuqurligidagi o’zgarishlardan foydalanib, aniq vizual ierarxiya yaratishingiz mumkin. Mana, aniq vizual ierarxiyaga ega bo’lmagan veb-sayt qahramoni bannerining namunasi, undan keyin elementlar muhimlik tartibida aniq ko’rsatilgan.
Vizual ierarxiyangiz aniq yoki yo’qligini tekshirishning tez va oson usuli bu Squint Testidan foydalanishdir. Ko’zlaringizni qisib qo’ying va dizayningizga qarang. Shu bilan bir qatorda, siz ekrandan uzoqroqqa harakat qilishingiz yoki dizayningizni xiralashtirishingiz mumkin. Siz hali ham eng muhim elementlar nima ekanligini ayta olishingiz va interfeys nima uchun ekanligini tushunishingiz kerak.Keling, misolimizga Squint testini qo’llaymiz. Ko’rishimiz mumkinki, e’tibor uchun raqobatlashadigan shunga o’xshash kuchli obro’ga ega bo’lgan bir nechta elementlar mavjud. Shu bilan birga, pastki chapdagi asosiy harakat umuman ajralib turmaydi.
Asosiy harakat odatda interfeysning eng ko’zga ko’ringan elementi bo’lishi kerak. Unga yuqori kontrastli fon rangi va qalin shrift vaznini berish bunga erishishga yordam beradi. Bu, shuningdek, past kontrastli tugma bilan foydalanish imkoniyati muammosini hal qiladi, biz buni keyinroq ko’rib chiqamiz.
Yangilangan dizaynga Squint Testini qo’llash, asosiy harakat aniq eng muhim element hisoblanadi.
Vizual ierarxiya endi aniqroq, ammo yaxshilash uchun hali ham joy bor. Masalan, asosiy matn bloki hali ham muhimlik darajasiga nisbatan juda mashhur. Tez orada biz vizual ierarxiyani to’g’rilashga yordam beradigan ba’zi tez tipografiya ko’rsatmalarini bilib olamiz.
5. Keraksiz uslublarni olib tashlang
Keraksiz ma’lumotlar va vizual uslublar chalg’itishi mumkin va kognitiv yukni oshirishi mumkin (interfeysdan foydalanish uchun zarur bo’lgan miya quvvati miqdori). Oddiyroq, ko’proq yo’naltirilgan interfeys yaratish uchun keraksiz chiziqlar, ranglar, fon va animatsiyalardan saqlaning.
Bizning misolimizda tasvir atrofidagi oq bo’shliq va chegaralar keraksiz vizual murakkablikni oshiradi. Ular ma’lumot yoki guruh elementlarini etkazish uchun kerak emas, shuning uchun dizaynni soddalashtirish uchun ularni xavfsiz olib tashlashimiz mumkin.
6. Rangdan maqsadli foydalaning
Rangni tejamkor va maqsadli foydalaning. Rangni faqat bezak uchun ishlatmaslikka harakat qiling, chunki bu chalkash va chalg’ituvchi bo’lishi mumkin. Qora va oq rangdan boshlang va u ma’noni anglatuvchi rangni kiriting.Oddiy va samarali yondashuv – bu brend rangini matn havolalari va tugmalar kabi interfaol elementlarga qo’llashdir. Bu odamlarga nima interaktiv va nima bo’lmasligini o’rgatishda yordam beradi. Interaktiv bo’lmagan elementlarda brend rangidan foydalanmaslikka harakat qiling.Barcha interaktiv elementlarga rang qo’shish shart emas, chunki ba’zilarida allaqachon interaktiv ekanligini ko’rsatadigan vizual belgilar mavjud. Misol uchun, quyidagi misoldagi kartalar ko’k rangli havola bo’lgan yoki bo’lmagan holda interaktiv bo’lib qoladi.
7. Interfeys elementlari 3:1 kontrast nisbatiga ega ekanligiga ishonch hosil qiling
Kontrast – bu ikki rang o’rtasidagi yorqinlik farqining o’lchovidir. U 1:1 dan 21:1 gacha bo’lgan nisbat sifatida ifodalanadi. Masalan, qora fondagi qora matn eng past 1:1 kontrast nisbatiga ega, oq fondagi qora matn esa eng yuqori 21:1 nisbatga ega. Turli xil ranglar orasidagi kontrast nisbatlarini o’lchashga yordam beradigan ko’plab onlayn vositalar mavjud .Ko‘rishda nuqsoni bo‘lgan odamlar interfeys tafsilotlarini aniq ko‘rishiga yordam berish uchun hech bo‘lmaganda Veb-kontentga kirish bo‘yicha ko‘rsatmalar (WCAG) 2.1 darajasidagi AA rang kontrasti talablariga javob berishga intiling. Bu foydalanuvchi interfeysi elementlari, masalan, shakl maydonlari va tugmalar, kamida 3:1 kontrast nisbatiga ega bo’lishi kerakligini anglatadi.Bizning misolimizda o’q belgisi kontrasti juda past. Belgiga soya qo‘shish va tasvirning yuqori uchdan bir qismiga gradient qo‘shish piktogramma qanday tasvirda bo‘lishidan qat’i nazar, yetarlicha 3:1 kontrastini beradi.
Asl misoldagi asosiy tugma kontrasti ham juda past edi. Vizual ierarxiyaga murojaat qilishda biz buni avval tuzatgan edik, ammo bu erda ham eslatib o’tish kerak.
Past kontrastli tugma bilan xavf shundaki, ko’rish qobiliyati past odamlar tugma shaklini ko’ra olmasligi sababli uni tugma sifatida aniqlay olmaydi. Tugma kontrasti nisbatini 3:1 dan yuqoriga oshirish tugmani ochiq qiladi va vizual ierarxiyani tuzatishga yordam beradi.Ok va tugma kontrastini 3:1 dan yuqori nisbatga oshirish bizga quyidagi dizaynni beradi. Biz u erga asta-sekin yetib boryapmiz, lekin hal qilishimiz kerak bo’lgan muammolarimiz bor.
8. Matn 4,5:1 kontrast nisbatiga ega ekanligiga ishonch hosil qiling
Ko’rish qobiliyati zaif odamlar matnni aniq o’qiy olishiga yordam berish uchun u quyidagi WCAG 2.1 darajasidagi AA kontrasti talablariga javob berishi kerak:
● Kichik matn (18px va undan past) uchun minimal kontrast 4,5:1 boʻlishi kerak.
● Katta matn (qalin ogʻirligi bilan 18px dan yuqori yoki oddiy ogʻirligi bilan 24px dan yuqori) minimal kontrast 3:1 boʻlishi kerak.
Bizning misolimizda, fotosuratlarni hisoblash elementidagi kichik matnda kontrast etarli emas. Biz kulrang konteynerning shaffofligini oshirish va matn soyasini qo’shish orqali kontrast nisbatini 4,5: 1 dan oshiramiz.
Joylashuv matnining kontrasti ham juda past. Yupqa shrift og’irligi uni o’qishni yanada qiyinlashtiradi. Kulrangning quyuqroq soyasidan foydalanish matnni yanada qulayroq qilishga yordam beradi. Tez orada matnni yaxshilash uchun qo‘shimcha yangilanishlar kiritamiz.
9. Ko’rsatkich sifatida faqat rangga tayanmang
Rang ko’rligining ko’plab turlari mavjud va ular asosan erkaklarga ta’sir qiladi. Odatda, rangli ko’r odamlar qizil va yashil ranglarni farqlashda qiynaladilar, ammo ba’zilari umuman rangni ko’ra olmaydi.Interfeys ranglarni ko’r bo’lganlar uchun ochiq bo’lishini ta’minlash uchun ma’noni etkazish yoki vizual elementlarni ajratish uchun faqat rangga tayanib bo’lmaydi. Interfeys elementlarini farqlash uchun siz qo’shimcha vizual belgilardan foydalanishingiz kerak.Bizning misolimizda ko’k rang “sharhlar” matnida havola ekanligini ko’rsatish uchun ishlatiladi. Agar rang o’chirilsa, havola matni boshqa matn bilan bir xil ko’rinadi, shuning uchun rangli ko’r bu havola ekanligini aniqlay olmaydi. Bog’lanish matnining tagiga chizilgan bo’lsa, uni boshqa matndan rangi yo’qligi aniq ajratib turadi.
10. Bitta sans serif shriftdan foydalaning
Shrift – bu o’xshash uslub yoki estetikaga ega bo’lgan tegishli shriftlar to’plami. Helvetica – shriftga misol. Shriftlar og’irlik yoki o’lcham kabi shrift ichidagi o’zgarishlardir. Misol uchun, Helvetica qalin va Helvetica muntazam Helvetica shriftida 2 xil shriftdir.Interfeys dizayni uchun bitta sans serif shriftdan foydalanish xavfsizroq, chunki ular odatda eng tushunarli, neytral va sodda.Bizning misolimizda, sarlavhada o’qish biroz qiyin va ba’zilarni chalg’itishi mumkin bo’lgan batafsil serif shrifti qo’llaniladi. Shuningdek, u ushbu mulkni ijaraga berish ilovasidagi ba’zi fotosuratlarga mos kelmasligi mumkin bo’lgan shaxsiyatga ega. Uni sans serif shrifti yordamida soddalashtirish qulaylik va estetikani yaxshilashga yordam beradi.
11. Kattaroq kichik harflar bilan shriftdan foydalaning
Kattaroq kichik harflar va katta harflar oralig’i bo’lgan shriftlarni qidiring, chunki ular odatda kichik o’lchamlarda o’qilishi mumkin. Shriftdagi kichik harflarning balandligi x-balandligi deb nomlanadi.
Bizning misolimizda nisbatan past x balandligi bo’lgan Gill Sans shrifti qo’llaniladi. Shriftni x-balandligi kattaroq bo’lganiga o’zgartirish, masalan, Lato, o’qishni yaxshilashga yordam beradi.
Shrift Gill Sans’dan Lato’ga yangilangandan keyin bizning misolimiz qanday ko’rinadi.
12. Katta harflardan foydalanishni cheklang
Agar siz odamlarga baqirmasangiz, katta harflardan foydalanish uchun asosli sabablar ko’p emas. BU OVOZLI VA O‘QISHI QIYIN.
O’qiyotganingizda, har bir harfga emas, balki so’zning shakliga qaraysiz. Shakl so’zni tezroq tanib olishga yordam beradi. Katta harfli so’zlarning barchasi bir xil to’rtburchak shaklga ega. Bu sizni har bir harfni birma-bir o’qishga majbur qiladi.
Bizning misolimizda joylashuv matni bosh harfdan foydalanadi. Uni faqat birinchi so’z va tegishli otlar (odamlar, joy yoki narsalar ismlari) bosh harf bilan yozilgan jumla holatiga o’zgartirish o’qishni yaxshilashga yordam beradi.
13. Faqat oddiy va qalin shrift og’irliklaridan foydalaning
Shriftda juda ko’p shrift mavjud bo’lganligi sababli, ularning barchasini dizayningizda ishlatishingiz kerak degani emas. Turli xil shriftlardan foydalanish interfeysingizga shovqin va tartibsizliklarni keltirib chiqarishi mumkin. Bundan tashqari, har bir shrift òlchami izchil foydalanishni qiyinlashtiradi.Oddiy va qalin foydalangan holda dizayn tizimingizni sodda va ixcham saqlang.
Tez foydalanish bo’yicha maslahatlar:
● Sarlavhalarni ta’kidlash uchun qalin shrift og’irligidan foydalaning.
● Boshqa kichikroq matnlar uchun oddiy shrift vaznidan foydalaning.
● Agar siz juda nozik yoki qalin shrift og’irliklaridan foydalanishga qaror qilsangiz, ularni sarlavhalar va kattaroq matnlar uchun zaxiralang, chunki ularni kichikroq o’lchamlarda o’qish qiyin bo’lishi mumkin.
Bizning misolimizda joylashuv matni yengil shrift og’irligidan foydalanadi. Biz kontrastni kerakli 4,5:1 kontrast nisbatidan oshirgan bo’lsak ham, ba’zi odamlar uchun nozik belgilarni o’qish hali ham qiyin bo’lishi mumkin. Shrift og’irligini muntazam oshirish o’qishni yaxshilashga yordam beradi va dizaynni soddalashtiradi.
14. Sof qora matndan saqlaning
UI dizayni uchun sof qora rangdan qochish odatda xavfsizdir, chunki u oqga nisbatan juda yuqori kontrastga ega. Ushbu yuqori kontrast matnni o’qiyotganda ko’zni zo’riqishi va charchoqqa olib kelishi mumkin.Qora rangning yorqinligi 0%, oq rang esa 100% rang yorqinligiga ega. Rang yorqinligidagi katta farq ko’zlarimiz ko’proq ishlashiga olib keladi. Sof qora va oq rangdan voz kechish va uning o’rniga quyuq kulrangni tanlash eng xavfsizdir.Bizning misolimizda bir nechta elementlarda sof qora rang ishlatiladi. Uni quyuq kul rangga o’zgartirish o’qishni yaxshilashga yordam beradi. Ilgari vizual ierarxiyani ko’rib chiqayotganda, biz xususiyat tavsifi matni juda muhim ekanligini ta’kidladik. Interfeys elementlari muhimlik tartibida berilganligiga ishonch hosil qilish uchun biz xususiyat tavsifi matnining ahamiyatini kamaytirish uchun ochiqroq kul rangdan foydalanamiz.
15. Matnni chapga tekislang
Ingliz tili chapdan o’ngga, pastga qarab F shaklidagi naqshda o’qiladi. Shunday qilib, optimal o’qilishi uchun matnni chapga hizalagan ma’qul. Uzun asosiy matn uchun markazga tekislangan yoki tekislangan matndan qochish xavfsizroqdir. Ayniqsa, kognitiv nuqsonlari bo‘lganlar uchun o‘qish qiyinroq. Markazga moslashtirish sarlavhalar va qisqa matnlar uchun ishlashi mumkin, chunki u tezda o’qilishi mumkin. Biroq, markazga tekislash uzunroq matn matnini o’qishni qiyinlashtiradi, chunki har bir satrning boshlang’ich nuqtasi doimo o’zgarib turadi. Har bir chiziqning boshlang’ich nuqtasini topish uchun ko’zlaringiz ko’proq ishlashi kerak.
Bizning misolimizda xususiyat tavsifi matni markazga tekislangan. Matnni chapga tekislash o’qishni yaxshilaydi va yuqoridagi chapga tekislangan matnga ham mos keladi.
16. Asosiy matn uchun kamida 1,5 satr balandligidan foydalaning
Satr balandligi – matnning ikki qatori orasidagi vertikal masofa. Satrlar orasidagi bo’shliq odamlarga bir xil matnni qayta o’qishni oldini olishga yordam beradi. Shuningdek, u o’qish uchun qulayroq ko’rinadi va his qiladi.Foydalanish qulayligi va o’qilishi uchun, ayniqsa uzun matn uchun, satr balandligi kamida 1,5 (150%) bo’lishiga ishonch hosil qiling. Chiziq balandligini 1,5 va 2 oralig’ida saqlash odatda yaxshi ishlaydi.
Bizning misolimizda chiziq balandligi faqat 1 (100%). Uni 1,6 ga (160%) oshirish o’qishni yaxshilashga yordam beradi.
Bir nechta oddiy, ammo kuchli UI dizayni bo’yicha ko’rsatmalar yordamida biz namunaviy dizayndagi ko’plab muammolarni tezda topdik va tuzatdik. Ko’rsatmalar cheklovchidek tuyulishi mumkin, ammo ular sizning ijodingizni cheklash uchun mo’ljallanmagan. Buning o’rniga, ularni qurish, o’rganish va tajriba qilish uchun mustahkam poydevor deb o’ylang.
Umid qilamanki, siz UI dizayni unchalik qiyin bo’lmasligini ko’rishni boshlaysiz. Bu sehrli san’at turi bo’lib tuyulishi mumkin, lekin uning ko’p qismi biz o’rgangan mantiqiy qoidalar yoki ko’rsatmalardan iborat. Subyektiv fikrdan ko’ra obyektiv mantiqdan foydalanish intuitiv, qulay va chiroyli interfeyslarni loyihalashni tezroq va osonlashtiradi.
Manba :Medium.com
Eng ko’p o’qilgan maqolalar