1. Mobil qurilmalar uchun dasturlar Ishlab chiqish muhiti

Mavzu: Foydalanuvchi interfeysini vizual tahrirlash
Reja:
1. Mobil qurilmalarni loyihalas
2. UI / UX Dizayn
Mobil qurilmalarni loyihalashda ko'plab omillarni hisobga olish kerak. Ishonchimiz komilki, ushbu keng qamrovli qo'llanma ilovalarni yaratishda sizni bosh og'rig'idan xalos qiladi.
Bugungi kunda odamlar har qachongidan ham muhim daqiqalarda o'z telefonlari bilan muloqot qilishadi. O'rtacha AQSh foydalanuvchisi kuniga 5 soat vaqtini mobil telefonda o'tkazadi . Bu vaqtning katta qismi ilovalar va veb-saytlarga sarflanadi.
Yaxshi dastur va yomon dastur o'rtasidagi farq odatda foydalanuvchi tajribasi (UX) sifatiga bog'liq. Yaxshi UX - bu muvaffaqiyatli ilovalarni muvaffaqiyatsizlardan ajratib turadigan narsa. Bugungi kunda mobil foydalanuvchilar ilovadan ko‘p narsani kutishadi: tez yuklash vaqtlari, foydalanish qulayligi va qiziqarli muloqot. Agar siz ilovangiz muvaffaqiyatli bo'lishini istasangiz, UXni nafaqat dizayningizning kichik jihati, balki mahsulot strategiyangizning muhim tarkibiy qismi sifatida ko'rib chiqishingiz kerak.
UI / UX Dizaynida onlayn amaliyot
99% amaliyot, mamlakatdagi yirik kompaniyalardan real topshiriqlar va orzu qilgan ishga kirish imkoniyati.
Qo‘shilish
Mobil ilovalarni ishlab chiqishda ko'p narsalarni hisobga olish kerak. Ushbu maqolada men dizaynlaringizga qo'llashingiz mumkin bo'lgan ko'plab eng yaxshi amaliyotlarni umumlashtirdim.
Kognitiv yukni minimallashtiring
Kognitiv yuklama ilovadan foydalanish uchun zarur bo'lgan aqliy qobiliyat miqdorini bildiradi. Inson miyasi cheklangan ishlov berish qobiliyatiga ega va dastur bir vaqtning o'zida juda ko'p ma'lumotni taqdim etsa, u foydalanuvchini haddan tashqari oshirib yuborishi va uni vazifadan voz kechishga majbur qilishi mumkin.
Ishlarni tartibga solish
Chalkashliklardan xalos bo‘lish Mobile UX Design-ning 10 ta bajariladigan va bajarilmaydigan eng yaxshi tavsiyalaridan biridir . Tartibsizlik yaxshi dizaynning eng yomon dushmanlaridan biridir. Interfeysni chalkashtirib yuborish orqali siz foydalanuvchilarni haddan tashqari ko'p ma'lumotlarga ega bo'lasiz: har bir qo'shilgan tugma, rasm va belgi ekranni murakkablashtiradi.
Kompyuter tartibsizliklari dahshatli, lekin mobil tartibsizliklar bundan ham yomonroq (shunchaki, bizda shaxsiy kompyuterlar va noutbuklarda bo'lgani kabi ko'p ekranli ko'chmas mulkimiz yo'q). Mobil dizaynda mutlaqo zarur bo'lmagan har qanday narsadan xalos bo'lish muhim, chunki tartibsizlikni kamaytirish tushunishni yaxshilaydi. Funktsional minimalizm texnikasi foydalanuvchi interfeysi muammosini hal qilishga yordam beradi:
Kontentni minimal darajaga tushiring (faqat foydalanuvchiga bilishi kerak bo'lgan narsalarni taqdim eting).
Interfeys elementlarini minimal darajada saqlang. Oddiy dizayn foydalanuvchiga mahsulot bilan muloqot qilishni osonlashtiradi.
Toza yorliq paneli (o'ngda) chigallashtirilgandan (chapda) ancha yaxshi. (Rasm: Apple)
Koʻproq variantlarni koʻrsatish uchun progressiv oshkor qilishdan foydalaning.
Interfeys o'zaro aloqadan keyin ko'proq imkoniyatlarni ko'rsatadi. (Tasvir: Ramotion)
Vazifalarni soddalashtiring
Dizaynda foydalanuvchi harakatini talab qiladigan har qanday narsani qidiring (ma'lumotlarni kiritish, qaror qabul qilish va h.k.) va muqobil yo'llarni qidiring. Misol uchun, ba'zi hollarda, foydalanuvchidan uni qayta kiritishni so'rash o'rniga, avval kiritilgan ma'lumotlarni qayta ishlatishingiz yoki aqlli standartni o'rnatish uchun allaqachon mavjud ma'lumotlardan foydalanishingiz mumkin.
Vazifalarni kichik bo'laklarga bo'ling
Agar vazifa foydalanuvchidan talab qilinadigan ko'plab qadamlar va harakatlarni o'z ichiga olsa, uni bir nechta kichik vazifalarga bo'lish yaxshiroqdir. Ushbu tamoyil mobil dizaynda juda muhim, chunki siz bir vaqtning o'zida foydalanuvchi uchun juda ko'p murakkablik yaratishni xohlamaysiz. Yaxshi misol - elektron tijorat ilovasida bosqichma-bosqich tekshirish jarayoni, bu erda dizayner murakkab tekshirish vazifasini bo'laklarga ajratadi, ularning har biri foydalanuvchi harakatini talab qiladi.
Vazifani qismlarga ajratish, ayniqsa foydalanuvchidan ko'p ma'lumot so'raganingizda, shaklni kamroq band qiladi. (Rasm: Murat Mutlu)
Bloklash ikki xil faoliyatni (ko‘rish va xarid qilish kabi) ulashga ham yordam beradi. Agar stsenariy bir-biri bilan mantiqiy bog'liq bo'lgan bir qator qadamlar sifatida taqdim etilsa, foydalanuvchi uchun uni bajarish osonroq bo'lishi mumkin.
Kino qidiring va kinoteatrga chipta sotib oling. (Rasm: Anton Skvortsov)
Tanish ekranlardan foydalaning
Tanish ekranlar foydalanuvchilar ko'p ilovalarda ko'radigan ekranlardir. Ishga kirishish, Yangilik va Qidiruv natijalari kabi ekranlar mobil ilovalar uchun amalda standartga aylandi. Ular o'z-o'zidan tushunarli, chunki foydalanuvchilar ular bilan allaqachon tanish. Bu foydalanuvchilarga o'qitishni talab qilmasdan ilova bilan oldingi tajribaga asoslanish imkonini beradi.
Quora ilovasi foydalanuvchi profili ekrani
Tanish ekranlar haqida ko'proq ma'lumot olish uchun. Maqolani o'qing " Ko'pgina muvaffaqiyatli mobil ilovalarda topadigan 11 ta ekran ".
Foydalanuvchi kiritishini minimallashtiring
Kichkina mobil ekranda yozish eng qulay tajriba emas. Darhaqiqat, ko'pincha xatoga yo'l qo'yiladi. Va foydalanuvchi kiritishning eng keng tarqalgan holati bu shaklni to'ldirishdir. Ushbu jarayonni soddalashtirish uchun ba'zi amaliy ko'rsatmalar:
Keraksiz maydonlarni olib tashlash orqali shakllaringizni iloji boricha qisqa tuting. Ilova foydalanuvchidan faqat minimal miqdordagi ma'lumotni so'rashi kerak.
Shakl dizaynidagi asosiy qoida shundaki, qanchalik qisqa bo'lsa, shuncha yaxshi bo'ladi. Bir nechta maydonlarni toʻldirish oson boʻlgan bitta maydonga birlashtiring. (Rasm: Luka V.)
Kirish maskalarini taqdim eting. Maydon maskalari foydalanuvchilarga kiritilgan matnni formatlashda yordam beradigan texnikadir. Niqob foydalanuvchi diqqatini maydonga qaratganda va maydon toʻldirilishi bilan matnni avtomatik formatlashda paydo boʻladi, bu foydalanuvchilarga kerakli maʼlumotlarga diqqatini qaratishga va xatolarni aniqlashga yordam beradi.
(Rasm: Josh Morony)
Avtomatik toʻldirish kabi aqlli funksiyalardan foydalaning. Masalan, manzil maydonini to'ldirish ko'pincha har qanday ro'yxatga olish shaklining eng muammoli qismidir. Manzilni avtomatik toʻldirish formasi kabi vositalardan foydalanish (foydalanuvchining aniq joylashuvi asosida aniq takliflarni taqdim etish uchun geografik joylashuv va manzilni oldindan toʻldirishdan foydalanadi) foydalanuvchilarga oddiy kiritish maydoniga qaraganda kamroq tugmalar bosish bilan oʻz manzillarini kiritish imkonini beradi.
Maydon qiymatlarini dinamik tekshirish. Ma'lumotni yuborganingizdan so'ng, orqaga qaytib, xatolarni tuzatishga to'g'ri kelsa, asabiylashadi. Iloji bo'lsa, foydalanuvchilar ularni bir zumda to'g'rilashi uchun ma'lumotlar kiritilgan zahoti maydon qiymatlarini tasdiqlang.
Inline tekshirish (Tasvir: Baymard)
Klaviaturani so'rov turiga moslashtiring. Telefon raqami so'ralganda raqamli klaviaturani ko'rsating va elektron pochta manzili so'ralganda @ tugmasini qo'shing. Ushbu xususiyatni faqat maxsus shakllar emas, balki ilovangiz davomida doimiy ravishda amalga oshirganingizga ishonch hosil qiling.
Kerakli matnni kiritish uchun klaviaturani tanlang. (Rasm: ThinkWithGoogle)
Foydalanuvchi ehtiyojlarini taxmin qilish
Foydalanuvchiga yordamga muhtoj bo'lishi mumkin bo'lgan sayohatdagi qadamlarni faol ravishda qidiring. Misol uchun, quyidagi skrinshotda foydalanuvchilar aniq ma'lumotlarni taqdim etishlari kerak bo'lgan qism ko'rsatilgan.
Foydalanuvchi shtrix-kodni qaerdan topishi aniq emas. Kirish maydoni yonidagi tezkor havola juda foydali bo'ladi. (Rasm: Hotjar)
Muhimligini ta'kidlash uchun vizual vazndan foydalaning
Ekrandagi eng muhim element eng ko'p vizual vaznga ega bo'lishi kerak. Shriftning og'irligi, o'lchami va rangini o'zgartirish orqali elementga ko'proq og'irlik qo'shish mumkin.
Katta ob'ektlar diqqatni tortadi va kichik narsalarga qaraganda muhimroq ko'rinadi. "Lyft so'rovi" tugmasi foydalanuvchi e'tiborini tortadi
Jargondan saqlaning
Har qanday mobil ilovada aniq muloqot doimo birinchi o'rinda turishi kerak. Ba'zi so'zlar yoki iboralar mos keladimi yoki yo'qligini aniqlash uchun maqsadli auditoriyangiz haqida bilganingizdan foydalaning.
Noma'lum atamalar yoki iboralar foydalanuvchiga kognitiv yukni oshiradi. (Rasm: ThinkWithGoogle)
Dizaynlaringizni izchil qiling
Muvofiqlik asosiy dizayn tamoyilidir. U chalkashlikni yo'q qiladi. Ilovangiz davomida umumiy izchil ko'rinish va hissiyotni saqlab qolish juda muhimdir. Mobil ilovaga kelsak, ketma-ketlik quyidagilarni anglatadi:
Vizual izchillik
Shriftlar, tugmalar va teglar butun dastur davomida mos kelishi kerak.
Funktsional ketma-ketlik
Interaktiv elementlar ilovangizning barcha qismlarida bir xil ishlashi kerak.
Dizaynning tashqi uyg'unligi
bir nechta mahsulotlar uchun mos bo'lishi kerak. Shunday qilib, foydalanuvchi boshqa mahsulotdan foydalanganda ilgari olingan bilimlarni qo'llashi mumkin.
Izchil dizaynni yaratish uchun ba'zi amaliy ko'rsatmalar:
Platforma standartlariga rioya qiling.
Har bir mobil OT interfeys dizayni bo'yicha standart ko'rsatmalarga ega: Apple inson interfeysi bo'yicha ko'rsatmalar va Google material dizayni bo'yicha ko'rsatmalar . Mahalliy platformalar uchun loyihalashda maksimal sifatni ta'minlash uchun OS dizayni bo'yicha ko'rsatmalarga amal qiling. Dizayn ko'rsatmalariga rioya qilish muhimligining sababi oddiy: foydalanuvchilar har bir OT ning o'zaro ta'sir qilish naqshlari bilan yaxshi tanish va ko'rsatmalarga zid bo'lgan har qanday narsa muammolarni keltirib chiqaradi.
Boshqa platformalardagi interfeys elementlariga taqlid qilmang.
Android yoki iOS uchun ilova yaratishda interfeys elementlarini boshqa platformalardan o'tkazmang. Belgilar, funktsional elementlar (kirish maydonlari, tasdiqlash qutilari, radio tugmalar) va shriftlar tabiiy ko'rinishi kerak. Odamlarni ilovangizga ishontirishi uchun iloji boricha mahalliy komponentlardan foydalaning.
Mobil ilova veb-saytga mos kelishiga ishonch hosil qiling.
Bu tashqi izchillikning namunasidir. Agar sizda veb-xizmat va mobil ilovangiz bo'lsa, ularning ikkalasi ham o'xshash xususiyatlarga ega ekanligiga ishonch hosil qiling. Bu foydalanuvchilarga mobil ilova va mobil sayt o‘rtasida muammosiz harakat qilish imkonini beradi. Dizayndagi nomuvofiqliklar (masalan, boshqa navigatsiya sxemasi yoki boshqa rang sxemasi) chalkashlikka olib kelishi mumkin.
Foydalanuvchiga boshqaruvni bering
Interfaol elementlarni tanish va bashorat qilish mumkin
Bashorat qilish UX dizaynining asosiy tamoyilidir. Ishlar foydalanuvchilar taxmin qilganidek amalga oshganda, ular kuchli nazorat tuyg'usini his qilishadi. Foydalanuvchilar element interaktiv yoki yo‘qligini tushunish uchun hover effektlaridan foydalanishi mumkin bo‘lgan shaxsiy kompyuterdan farqli o‘laroq, mobil telefonda foydalanuvchilar faqat elementni bosish orqali interaktivlikni sinab ko‘rishlari mumkin. Shuning uchun tugmalar va boshqa interaktiv elementlarning dizayni foydalanish imkoniyatini qanday etkazishi haqida o'ylash muhimdir. Foydalanuvchilar element tugma ekanligini qanday tushunishadi? Shakl funktsiyaga amal qilishi kerak: ob'ektning ko'rinishi foydalanuvchilarga undan qanday foydalanishni aytib beradi. Tugmachalarga o'xshagan, lekin bosilmaydigan vizuallar foydalanuvchilarni osongina chalg'itishi mumkin.
"Orqaga" tugmasi to'g'ri ishlashi kerak
Noto'g'ri yaratilgan orqaga tugmasi foydalanuvchilar uchun juda ko'p muammolarni keltirib chiqarishi mumkin. Ko'p bosqichli jarayonda "Orqaga" tugmasini bosish foydalanuvchilarni bosh ekranga qaytaradigan vaziyatlardan qoching.
Yaxshi dizayn foydalanuvchilarga qaytish va tuzatishni osonlashtiradi. Foydalanuvchilar o'zlari taqdim etgan ma'lumotlar yoki tanlagan variantlarni yana bir bor ko'rib chiqishlari mumkinligini bilsa, bu ularga osonlik bilan harakat qilish imkonini beradi.
Ma'lumot beruvchi xato xabarlari
Odamlar xato qilishga moyil. Xatolar odamlar ilovalar bilan o'zaro aloqada bo'lganda paydo bo'ladi. Ba'zan ular foydalanuvchining aybi bilan sodir bo'ladi. Ba'zan ular dastur ishdan chiqishi tufayli sodir bo'ladi. Xatoning sababidan qat'i nazar, uni hal qilish usuli UXga katta ta'sir ko'rsatadi. Xatolarni noto'g'ri ishlash foydasiz xato xabarlari bilan birgalikda foydalanuvchilarni xafa qilishi va foydalanuvchilarning ilovangizni tark etishiga olib kelishi mumkin. Misol sifatida Spotify-dan xatolik holati ekranini oling. U foydalanuvchilarga kontekstni tushunishga yoki “Bu haqda nima qilishim mumkin?” degan savolga javob berishga yordam bermaydi.
Spotify xato ekrani shunchaki "Xatolik yuz berdi" deb aytadi va muammoni qanday hal qilish bo'yicha konstruktiv maslahat bermaydi.
Foydalanuvchilar xato sababini mustaqil ravishda aniqlash uchun texnologiyani yaxshi bilishadi deb o'ylamang. Har doim odamlarga nima yomonligini oddiy tilda ayting. Har bir xato xabari foydalanuvchilarga quyidagilarni aytishi kerak:
nima noto'g'ri ketdi va nima uchun,
foydalanuvchi xatoni tuzatish uchun keyingi qadam qanday bo'lishi kerak.
Xatolarni qayta ishlash bo'yicha qo'shimcha ma'lumot olish uchun Mobil ilovalar uchun xato holatlarini qanday loyihalash mumkin bo'limiga qarang .
Foydalanish mumkin bo'lgan interfeysni loyihalash
Qulay dizayn turli xil imkoniyatlarga ega foydalanuvchilarga mahsulotlardan muvaffaqiyatli foydalanish imkonini beradi. Ko‘rish qobiliyati, eshitish qobiliyati yo‘qolishi yoki boshqa nogironligi bo‘lgan foydalanuvchilar ilovangiz bilan qanday munosabatda bo‘lishini ko‘rib chiqing.
Rang ko'rligini ko'rib chiqing
Dunyo aholisining 4,5 foizi rang ko‘rlari (bu 12 erkakdan 1 nafari va 200 ayoldan 1 nafari), 4 foizi (30 kishidan 1 nafari) va 0,6 foizi (188 kishidan 1 nafari) ko‘rdir. Biz ushbu foydalanuvchilar guruhi uchun loyihalashayotganimizni unutish oson, chunki aksariyat dizaynerlar bunday muammolarga duch kelmaydilar.
Sizga oddiy misol keltiraman. Mobil shakllardagi muvaffaqiyat va xato xabarlari ko'pincha mos ravishda yashil va qizil rangga ega. Ammo qizil va yashil ranglar rangni ko'rish etishmovchiligiga eng moyil bo'lgan ranglardir (bu ranglar deuteranopiya yoki protanopiya bilan og'rigan odamlar uchun farqlash qiyin). Shaklni to'ldirishda siz quyidagi xato xabarini ko'rgansiz: "Qizil rang bilan belgilangan maydonlar talab qilinadi"? Garchi bu unchalik katta bo'lmasa-da, bu xato xabari quyidagi misoldagi shakl bilan birgalikda ranglarni ko'rishda nuqsoni bo'lgan odamlar uchun juda xafa bo'lishi mumkin.
Shakl maydonining dizayni faqat qizil va yashil ranglarga tayanib, maydonlarni xato va xatosiz ko'rsatadi. Rangli ko'r odamlar qizil rang bilan belgilangan maydonlarni ajrata olmaydilar
Aytib o'tilganidek, W3C ko'rsatmalar , rang, ma'lumotlarni uzatish harakatni ko'rsatib, bir javob talab, yoki Visual elementini ajratib turadigan yagona vizual vositalar sifatida foydalanish mumkin emas. Foydalanuvchilar interfeys bilan o'zaro aloqada bo'lishini ta'minlash uchun boshqa vizual ko'rsatkichlardan foydalanish muhimdir.
Qaysi maydonlar xato ekanligini ko'rsatish uchun piktogramma va sarlavhalardan foydalanish rang ko'r odamga ma'lumotni yaxshiroq yetkazadi
Animatsiyalarni almashtiriladigan qilib qo'ying
Harakat kasalligidan aziyat chekadigan foydalanuvchilar ko'pincha OS sozlamalarida animatsiya effektlarini o'chirib qo'yishadi. Maxsus imkoniyatlar sozlamalarida Harakatni kamaytirish opsiyasi yoqilgan bo‘lsa, ilovangiz animatsiyalarni minimallashtirishi yoki yo‘q qilishi kerak.
Navigatsiyani osonlashtiring
Foydalanuvchilarga navigatsiya qilishda yordam berish har qanday ilova uchun ustuvor vazifa bo'lishi kerak. Barcha ajoyib xususiyatlar va jozibali kontent odamlar ularni topa olmasa, muhim emas. Bundan tashqari, mahsulotingizni qanday boshqarishni tushunish uchun juda ko'p vaqt yoki kuch talab qilinsa, foydalanuvchilarni yo'qotish ehtimoli bor. Foydalanuvchilar ilovani intuitiv ravishda o'rganishlari va barcha asosiy vazifalarni hech qanday tushuntirishsiz bajarishlari kerak.
Standart navigatsiya komponentlaridan foydalaning
Yorliqlar paneli (iOS uchun) va navigatsiya tortmasi (Android uchun) kabi standart navigatsiya naqshlaridan foydalanish yaxshiroqdir . Aksariyat foydalanuvchilar ikkala navigatsiya naqshlari bilan tanish va sizning ilovangizdan qanday foydalanishni intuitiv ravishda bilishadi.
Yon tortma (Android). (Rasm: Materiallar dizayni)
Tab paneli (iOS). (Tasvir: Ramotion)
Navigatsiya naqshlari haqida ko'proq ma'lumot olish uchun " Mobil navigatsiyaning asosiy naqshlari: afzalliklari va kamchiliklari " maqolasiga qarang .
Navigatsiya parametrlariga ustunlik berish
Foydalanuvchilarning ilovangiz bilan qanday munosabatda bo‘lishiga qarab navigatsiyaga ustuvorlik bering. Umumiy foydalanuvchi vazifalari uchun turli ustuvorlik darajalarini (yuqori, o'rta, past) tayinlang. Interfeysda ustuvor va tez-tez foydalanish yo'llari va manzillarini ajratib ko'rsatish. Navigatsiyangizni aniqlash uchun ushbu yo'llardan foydalaning. Axborot tuzilmangizni eng kam bosish, surish va ekranlar sonini talab qiladigan tarzda tashkil qiling.
Navigatsiya naqshlarini aralashtirmang
Ilovangiz uchun asosiy navigatsiya naqshini tanlayotganda, uni doimiy ravishda ishlating. Ilovangizning bir qismida yorliqlar paneli va boshqa qismida yon quti bo'lgan vaziyat bo'lmasligi kerak.
Navigatsiyani ko'rinadigan qilib qo'ying
Yakob Nilsen aytganidek , biror narsani tanib olish eslashdan osonroqdir. Harakatlar va variantlarni ko'rinadigan qilish orqali foydalanuvchi xotirasi yukini minimallashtiring. Navigatsiya har doim mavjud bo'lishi kerak va nafaqat biz foydalanuvchiga kerak deb hisoblaganimizda.
Joriy joylashuvingizni ulashing
Joriy joylashuvingizni ko'rsatmaslik ko'plab mobil ilovalar menyusida juda keng tarqalgan muammo hisoblanadi. "Men qayerdaman?" Muvaffaqiyatli navigatsiya qilish uchun foydalanuvchilar javob berishi kerak bo'lgan asosiy savollardan biridir. Istalgan vaqtda odamlar sizning arizangizda qayerda ekanligini bilishlari kerak.
Health ilovasi (Apple tomonidan) joriy bo'lim (navigatsiya opsiyasi "Tibbiy ma'lumotlar" ta'kidlangan) va kichik bo'lim ("Faoliyat" sarlavhasi tartibning yuqori qismida paydo bo'ladi) haqida ma'lumot beradi.
Navigatsiya o'tishlarini aniqlashtirish uchun funktsional animatsiyalardan foydalaning
Animatsiya holat o'tishlarini tasvirlash uchun eng yaxshi vositadir. Bu foydalanuvchilarga sahifa tartibidagi holat oʻzgarishini, oʻzgarishlarga nima sabab boʻlganini va agar kerak boʻlsa, oʻzgartirishni qanday qayta boshlashni tushunishga yordam beradi.
Funktsional animatsiya foydalanuvchi e'tiborini samarali tarzda yo'naltirishi va murakkab o'tishlarni tushunishni osonlashtirishi mumkin. (Rasm: Jae-seong, Jeong)