Tugmalar interfaol dizaynning muhim elementidir. Ular foydalanuvchi va tizim o'rtasidagi suhbatda asosiy rolni o’ynashadi. Ushbu maqolada men samarali tugmalar (inglizchada “button”) yaratish uchun bilishingiz kerak bo'lgan yettita asosiy tamoyilni ko'rib chiqaman.

Tasvir muallifi: Gal Shir

1. Tugmalarni tugmalarga o‘xshating

Foydalanuvchi interfeysi bilan o'zaro aloqada bo'lganda, foydalanuvchilar nimani "bosib ko‘rsa bo‘ladigan" va nimani bosib bo'lmasligini darhol bilishlari zarur. Dizayndagi har bir element foydalanuvchidan uni dekodlashi (ma’lumotni qayta ishlash) uchun kuch talab qiladi. Odatda, foydalanuvchilar interfeysni qancha uzoq dekodirovka qilsalar, ular uchun bu shuncha kam foydali bo‘layotgan bo‘ladi

Lekin foydalanuvchilar u yoki bu element interfaol yoki interfaol emasligini qanday tushunishadi? Ular foydalanuvchi interfeysi obektining mazmunini anglash uchun oldingi tajribalari va vizual ko‘rsatkichlardan(belgi) foydalanadilar. Mana nima uchun elementning tugmachaga o'xshab ko‘rinishi uchun tegishli vizual belgidan (masalan, o'lcham, shakl, rang, soya va boshqalar) foydalanish juda muhimligi. Vizual ifoda muhim ma'lumot qiymatiga ega - ular interfeysda qulayliklarni yaratishga yordam beradi.

Afsuski, ko'pgina interfeyslarda interaktivlik belgisi zaif va o'zaro harakatni talab qiladi(tugmaligini bilish uchun uni bosib ko’rishga majbur bo‘lasiz); oqibatda ularni payqalishi keskin ravishda sustlashadi.

Agar interfaollikning aniq imkoniyatlari yo'q bo'lsa va foydalanuvchilar nima "bosish mumkin" va nima bo'lmasligi bilan kurashadigan bo‘lsa, biz dizaynni qanchalik ajoyib qilishimizning ahamiyati yo‘qoladi. Agar ulardan foydalanish qiyin bo'lsa, foydalanuvchini asabiylashtiradi va oxir-oqibat buni ular yaroqsiz deb topadilar.

Zaif ko'rsatkichlar(belgilar) mobil foydalanuvchilari uchun yanada jiddiy muammodir. Alohida element interfaol yoki interfaol emasligini tushunishga urinishda stol kompyuteri(desktop) foydalanuvchilari kursorni elementga siljitishlari va kursor o'z holatini o'zgartirganligini tekshirishlari mumkin. Mobil foydalanuvchilarda bunday imkoniyat yo'q. Element interfaol yoki interfaol emasligini tushunish uchun foydalanuvchilar unga tegishi kerak — interfaollikni tekshirishning boshqa usuli yo‘q.

O'zingizning foydalanuvchi interfeysingizdagi (UI) biror narsani foydalanuvchilar uchun tushunarli qilib tuzildi deb o'ylashga shoshilmang!

Ko'pgina hollarda dizaynerlar tugmalarni ataylab interfaol elementlar sifatida urg‘u bermaydilar, chunki ular interfaol elementlar foydalanuvchilar uchun shusiz ham tushunarli deb hisoblashadi. Interfeysni loyihalashda siz doimo quyidagi qoidani yodda tutishingiz kerak:

Bosish mumkin bo'lgan belgilarni tahlil qilish qobiliyatingiz foydalanuvchilaringizdan farq qiladi, chunki siz o'zingizning dizayningizning har bir elementi nima uchun mo‘ljallangan ekanligini bilasiz.

Tugmalaringiz uchun tanish dizaynlardan foydalaning

Ko'pchilik foydalanuvchilarga tanish bo'lgan tugmalarning bir nechta misollar:

Kvadrat hoshiyali to‘ldirilgan(ing. filled) tugma
Dumaloq burchakli to'ldirilgan tugma
Soyali to’ldirilgan tugma
Sharpa tugmasi

Ushbu misollar orasida "Soyali to'ldirilgan tugma" dizayni foydalanuvchilar uchun eng aniq tushuniladigani hisoblanadi. Foydalanuvchilar obyektning o'lchamini ko'rganlarida, ular bosish mumkin bo'lgan narsa ekanligini darhol bilishadi.

Bo'sh joy haqida unutmang

Faqat tugmaning vizual xususiyatlari muhim emas. Tugma yaqinidagi bo'sh joy miqdori foydalanuvchilarga bu interfaol elementmi yoki yo'qligini tushunishni osonlashtiradi (yoki qiyinlashtiradi). Misolda, quyida ba'zi foydalanuvchilar sharpa tugmachasini biror ma'lumot joylashgan ramka bilan chalkashtirishlari mumkin.

Foydalanuvchi sifatida siz bu quti yoki tugma ekanligini ayta olmaysiz.

2. Tugmalarni foydalanuvchilar uni topishni kutayotgan joyga qo'ying

Tugmalarni foydalanuvchilar ularni osongina topadigan yoki ko'rishni kutadigan joylarda joylashgan bo'lishi kerak. Foydalanuvchilarni tugmalarni qidirishga majburlamang. Agar foydalanuvchilar tugmani topa olmasalar, uning mavjudligini bilishmaydi.

Iloji boricha an'anaviy maketlar(ing. layout) va standart UI naqshlaridan(ing. pattern) foydalaning

Tugmalarning an’anaviy joylashuvi uning oson topilishini yaxshilaydi. Standart maketlar orqali foydalanuvchilar har bir elementning maqsadini osonlikcha tushunib olishadi — hatto bu yaqqol belgilar tuzilgan tugma bo‘lsa ham. Standart maketni(layout) toza vizual dizayn va yetarlicha bo'shliq bilan birlashtirish maketni yanada tushunarli qiladi.

Foydalanuvchilar bilan" tugma ovi " o'yinini o'ynamang

Maslahat: Dizayningizni foydalanuvchilarga tushunarli ekanligini tadqiq qilib ko'ring. Foydalanuvchilar birinchi marta siz xohlagan ba'zi harakatlarni o'z ichiga olgan sahifaga kirganda, foydalanuvchi uchun mos tugmani aniqlash oson bo'lishi kerak.

3. Tugmalarning yorliq vazifasini belgilab bering

Umumiy yoki chalg’ituvchi yorliqli tugmalar foydalanuvchilaringiz uchun kuchli bezovta qilish manbai bo'lishi mumkin. Har bir tugma nima qilishini aniq tushuntirib beradigan tugma yorliqlarini yozing. Ideal holda, tugma yorlig'i uning harakatini aniq tasvirlab berishi kerak.

Foydalanuvchilar tugmani bosganlarida nima sodir bo'lishini aniq tushunishlari kerak. Sizga oddiy misol keltiraman. Tasavvur qiling-a, siz tasodifan o'chirib tashlash buyrug’ini bosib yubordingiz va endi siz quyidagi xato xabarini ko'rasiz.

Noaniq "OK" yorlig'i harakat tugmasi bajarilayotgan amal haqida haqida ko'p narsani tushuntira olmaydi

Ushbu dialog oynasida "OK" va "Bekor qilish" nimani ifodalashi aniq aks etmagan. Aksariyat foydalanuvchilar o'zlariga savol berishadi: "agar bekor qilish tugmachasini bossam nima sodir bo'ladi?»

Hech qachon dialog oynasi yoki formalarda istisno sifatida "OK" va "Bekor qilish"dan iborat tugmalarni yaratmang.

"OK" yorlig'ini ishlatish o'rniga "O'chirish" ni ishlatgan ma'qul. Bu ushbu tugma foydalanuvchi uchun nima qilishini aniqlab beradi. Bundan tashqari, agar "O'chirish" potentsial xavfli operatsiya bo'lsa, bu faktni bildirish uchun qizil rangdan foydalanishingiz mumkin.

"O'chirish" tugmasi foydalanuvchilar uchun nima qilishini aniqlaydi.

Ushbu interfeysdagi potentsial xavfli harakat bo’lgan "kartani o'chirish" tugmasi qizil rangda keltirilgan. Tasvi: Ramotion

4. Tugmalaringizning o'lchamini to'g'ri belgilang

Tugma o'lchami ekrandagi ushbu elementning ustuvorligini aks ettirishi kerak. Katta tugma muhimroq harakatni anglatadi.

Tugmalarga ustuvorlik berish

Eng muhim tugmani eng muhimidek ko'rsating. Har doim asosiy harakat tugmachasini yanada yaxshiroq ko’rsatishga harakat qiling. Uning o'lchamini oshiring (tugmani kattalashtirib, uni foydalanuvchilar uchun muhimligini ko'rsating) va foydalanuvchi e'tiborini jalb qilish uchun kontrast(qarama-qarshi) rangdan foydalaning.

Dropbox foydalanuvchi e'tiborini "Dropbox Business’ni bepul sinab ko'ring" CTA (ing. Call To Action - o’zb. Harakatga undash) tugmasiga qaratish uchun o'lcham va rang kontrastidan foydalangan.

Tugmalarni mobil foydalanuvchilarga barmoq bilan boshqarishga qulay qiling

Ko'pgina mobil ilovalarda tugmalar juda kichik. Bu ko'pincha foydalanuvchilardan ortiqcha sinchkovlik va diqqatni talab etadigan vaziyatga olib keladi.

Chapda: to'g'ri o'lchamdagi tugma. O’ngdai: tugmalar juda kichik. Tasvir: Apple

MIT Touch Lab tadqiqoti shuni ko'rsatdiki, barmoqlar uchun o'rtacha ko'rsatkichlar 10-14 mm va barmoq uchlari 8-10 mm. Bu 10 mm x 10 mm yaxshi minimal teginish nishoni hajmi ekanligini bildiradi.

Tasvir: uxmag

5. Mantiqiy tartib bilan joylang

Tugmalarning tartibi foydalanuvchi va tizim o'rtasidagi suhbatning xarakterini aks ettirishi kerak. O'zingizdan so'rang, foydalanuvchilar ushbu ekranda uni qanday tartibda bo'lishini kutishadi va shunga mos ravishda dizayn qiling.

Foydalanuvchi interfeysi - foydalanuvchilaringiz bilan suhbatdir

Masalan, sahifalashda “Oldingi/Keyingi” tugmalarini qanday tartiblash mumkin? Mantiqan siz u “Oldingi” tugmasi chap tomonda, “Keyingi” tugmasi esa o'ng tomonda bo'lishi kerak bo’ladi.

6. Juda ko'p tugmalardan foydalanishdan saqlaning

Bu ko'plab ilovalar va veb-saytlar uchun keng tarqalgan muammo. Agar siz juda ko'p variantlarni taqdim qilsangiz, foydalanuvchilaringiz hech narsa qilmaydi . Ilovangiz yoki veb-saytingizda sahifalarni loyihalashda foydalanuvchilaringiz amalga oshirishni xohlagan eng muhim harakatlar haqida o'ylab ko'ring.

Juddaaa ko'p tugmalaaaarrr!

7. Interfaollikda vizual yoki tovushli "javob"lar bering

Foydalanuvchilar tugma ustiga yo’nalganda yoki uni bosganda, foydalanuvchi interfeysi tegishli "turtki" bilan javob berishlarini kutishadi. Amaliyot turiga qarab, bu vizual yoki tovushli "javob" bo'lishi mumkin. Foydalanuvchilarga hech qanday "javob" qaytmasa, ular tizim ularning buyrug'ini olmagan deb hisoblashlari va harakatni takrorlashlari mumkin. Bunday xatti-harakatlar ko'pincha bir nechta keraksiz operatsiyalarni keltirib chiqaradi.

Nima uchun bu sodir bo'lmoqda? Odamlar sifatida biz obyekt bilan o'zaro aloqada bo'lganimizda qandaydir javob turini kutamiz. Bu vizual, audio yoki teginish aloqasi bo'lishi mumkin - bu uning o’zaro ta’sir interfeysda qayd etilganligini tasdiqlovchi belgisidir.

Tugma bosilishi foydalanuvchi interfeysida(UI) qayd etilganligi haqida vizual javob taqdim etadi. Rasm: Vadim Gromov

Yuklab olish kabi ba'zi operatsiyalar uchun nafaqat foydalanuvchi ma’lumotlarni kiritishini tasdiqlash, balki jarayonning joriy holatini ham ko'rsatish kerak.

Ushbu tugma operatsiyaning joriy holatini ko'rsatish uchun jarayon indikatoriga aylanadi. Tasvir: Kolin Garven

Xulosa

Tugmalardagi interfaollik dizaynining oddiy elementi bo'lishiga qaramay, ushbu elementni iloji boricha yaxshi qilish uchun katta e'tibor berish kerak. Tugmalarning UX dizayni har doim tanib olishga oson va ravshan bo'lishi kerak.

Rahmat!

Keyingi tarjimalarimizni o'tkazib yubormaslik uchun bizga obuna bo'lishni esdan chiqarmang!

Maqola manbai: 7 Basic Rules for Button Design

Telegram kanalimizga obuna bo'ling!