Onboarding UX [OCD] ni yaxshilash uchun oddiy UI tokchasi

UI maketlari va eskizlari foydalanuvchi ma'lumotlari allaqachon mavjud deb taxmin qiladi. Masalan, quyida keltirilgan maqolada foydalanuvchi suhbatlashish uchun kontaktlar, bildirishnomalar va hatto suhbat mavzulari bo'ladi deb taxmin qilinadi.

Ushbu bepul eskiz manbasidan foydalanib qurilgan oddiy messenjer ui

Lekin foydalanuvchi hech qachon ro'yxatdan o'tganda bunday bo'lmaydi. Dastlab, ma'lumotlar yo'q, shuning uchun bo'sh kontaktlar ustuni va bo'sh suhbat oynasi.

Shiny UI dizayni ma'lumotni iste'mol qilishni osonlashtiradi va bu ma'lumotni qanday yaratishga e'tibor bermaydi.

Men bu qiyin usulni Dribbble dasturiga ko'prog'ini singdirganimda bilib oldim, b2b uchun dastur panelini loyihalashga qodir edim. Bu Sketch-da ajoyib ko'rinishga ega edi, ammo bizning mijozlarimiz bu yo'lni topa olmadilar.

Yomon UX daromadga bevosita ta'sir qiluvchi samolyot bortida va qo'llab-quvvatlash narxini oshiradi. Pikselingizning mukammal dizaynini iste'mol qilishga qiynalayotgan foydalanuvchini ko'rish ham yomon. Sizga muvaffaqiyatsiz bo'lganingizni eslatadi.

Mavjud echimlar

Bitta yechim interfeysga o'xshash slaydlardan foydalangan holda bortga chiqish vaqtini oshirish edi. Bu mobil ilovalar uchun standart bo'lib tuyuladi.

Slack-ga UX-ga asoslangan slayd

Slaydlarga yondashishda muammo kontekstning etishmasligi. Slaydlarda shunchaki ko'p narsalarni etkazishingiz mumkin (foydalanuvchi qancha ushlab turishi boshqa savol).

Mahsulot haqida umumiy ma'lumot berish uchun juda yaxshi, lekin mahsulot qanday ishlashini tushuntirishda unchalik foydali emas. Bu mening foydalanishim uchun ahamiyatsiz edi, chunki mahsulotning murakkabligi bir necha slaydga qaynatilishi mumkin emas edi.

Shuningdek, foydalanuvchini muayyan qadamlar bilan bosib o'tadigan vositalar to'plamiga asoslangan echim ham mavjud edi. Ushbu parametr veb-ilovalarda ko'proq mashhur. Ushbu oqimlarni yaratishda sizga yordam beradigan ko'plab yaxshi javascript kutubxonalari mavjud.

Introjs.com/ uchun internat-demoga asoslangan qo'llanma

Tizimlarga asoslangan echimga kelsak, men ularni zerikarli va deyarli har doim "qo'llanmani o'tkazib yuborishni" bosganimni ko'rdim. Garchi Canva singari yirik kompaniyalar internat asosida tayanch-harakat vositalaridan foydalanadilar. AppCues deb nomlangan mahsulot ushbu vositalarni uchini kodsiz, toza holda loyihalashtirishga imkon beradi.

Ko'pincha noto'g'ri tushunilgan xususiyatlar yoritilgan mayoqlar bilan belgilanadi, ular kerak bo'lganda tegishli ma'lumotlarni taqdim etadigan mayoq uslubidagi yondashuv mavjud.

Bu eng ko'zga ko'rinmaydigan usul. 17 qadamlik darslikni tomog'ingizga singdiradigan va kerak bo'lganda yo'q bo'lib ketadigan vosita ko'rsatmalaridan farqli o'laroq, ushbu kirish nuqtasiga asoslangan yondashuv tayyor bo'lganda ma'lumot beradi.

Shuni ta'kidlash kerakki, Slack barcha 3 shakllardan foydalanadi. Ularning foydalanuvchilari yopishib qolishgani ajablanarli emas. Bu, shuningdek, ushlab turish samolyotda o'tirish qulayligiga to'g'ridan-to'g'ri proportsional ekanligiga ishora qiladi.

OKB aka bortli dizayn

Men narsalarga nom berishni yaxshi ko'raman. Ismlar ongda g'oyalarni amalga oshirishga yordam beradi. Keling, bu onboarding dizaynini chaqiraylik.

Men echimni istadim:

  • Kontekstga mos edi
  • Zerikarli emas (xususiyat qanday ishlashini o'rganish uchun hech kim 17 qadam bosishni istamaydi)
  • Ko‘rinmas (mayoqlar kabi)
  • Iste'mol qilish oson (maslahatlar iste'mol qilish oson emas)

Natija

Men shunchaki shtatlar tuzishni boshladim. Ushbu maqolani o'qishni boshlaganingizda ko'rgan suhbat dizayni uchta holat bilan yaratilishi mumkin.

1-holat: hech qanday aloqa mavjud emas

2-holat: aloqalar mavjud, ammo hech qanday suhbat yo'q

3-holat: ikkala suhbat ham, aloqa ham mavjud

Har bir davlatning maqsadi - foydalanuvchini keyingi holatga o'tkazish. Foydalanuvchi 3 holatiga o'tganda, u muvaffaqiyatli taxtada. Suhbat chizmasini hisobga olsak, har bir davlatning maqsadi quyidagilar:

Shtatning 1-maqsadi: Kontaktni qo'shish uchun asosiy foydalanuvchi

Quyidagi mockup-da faqat bitta chaqiruv mavjud - foydalanuvchiga yangi kontaktni qo'shish imkonini beradigan ko'k plyus tugmasi. Grafika va matn ikkalasi foydalanuvchini ushbu harakatni amalga oshirishga majbur qiladi.

1-holat - foydalanuvchiga kontaktlarni qo'shish uchun bosh harf (undraw.co-dan rasm)

Kontakt qo'shilgandan so'ng, biz ikkinchi maqsadni boshlashimiz mumkin.

2-davlatning maqsadi: Suhbatni boshlash uchun asosiy foydalanuvchi

Quyidagi mockup suhbatni boshlash uchun grafik astarga ega. Unda mavjud xususiyatlar aniq ko'rsatilgan. Shunga qaramay, siz hozir qilishingiz mumkin bo'lgan bitta narsa bor, ya'ni xabar yuboring. Bundan tashqari, ushbu foydalanuvchi interfeysida qo'ng'iroq qilishingiz mumkin, ammo ikkalasi ham bitta maqsadga xizmat qiladi. Ular sizning foydalanuvchingizni 3-bosqichga olib boradilar.

2-holat - suhbatni boshlash uchun asosiy aloqa

3-sonli davlatning maqsadi: Hech kim, foydalanuvchi bortda - barcha gaplar yo'qolishi kerak

Va nihoyat, foydalanuvchi ushbu jarayonni bir necha marta takrorlaganida, uning foydalanuvchi interfeysi biz kutgan usulni ko'rishni boshlaydi.

3-holat - foydalanuvchi muvaffaqiyatli taxtada

Ushbu yondashuvning afzalliklari

  • 1-bosqichdagi slaydlar bilan taqqoslaganda, Onboarding Centric Design (OCD) tarkibni bo'limlarga taqdim etadi. Ma'lumot qaror qabul qilish joyida mavjud.
  • Ushbu yondashuv mobil va ish stolida ham ishlatilishi mumkin. Ushbu foydalanuvchi interfeysi oddiy, ammo murakkab interfeysi mavjud bo'lsa, siz KTAni ko'tarish uchun ulanish nuqtalari bilan OKB dan foydalanishingiz mumkin.
  • Ushbu yondashuv birinchi navbatda sizning UXingizni yaxshilaydi va foydalanuvchining sayohati haqida o'ylashga majbur qiladi.
  • Agar siz React-dan foydalanib oldingi sarlavhalaringizni yoza boshlasangiz, bu yondashuv uning tarkibiy arxitekturasiga juda mos keladi.

Shunday qilib, qoida tariqasida:

Shtatlar uchun mockuplarni loyihalash.
Har bir shtatda bitta maqsad bor - keyingi holatga o'tish.
So'nggi holat sizning foydalanuvchi bortingizda bo'lganida bo'ladi.

O'qiganingiz uchun rahmat :)

Salom, agar siz ushbu maqolani yoqtirgan bo'lsangiz va yangilamoqchi bo'lsangiz, menga kuzatib boring: O'rta, Github yoki Twitter

Men sust bir jamiyatni boshqaraman (uning tarkibida 2018 yil 6 oktyabrda 18 a'zosi bor), siz boshqalarga yordam berishingiz yoki umuman oldingi, orqa va rivojlanish sohalarida yordam olishingiz mumkin. Siz bu erga qo'shilishingiz mumkin.