Dizayn tizimlari

2017 yilda CTA tugmachasining anatomiyasi: ovoz va ohang, uslub va komponentning eng yaxshi usullari.

Bu erda men Dizayn Tizimi bitta interfeys elementidan foydalanib qanday ishlashini tushuntiraman: foydalanuvchini veb-sahifangizning asosiy harakatlariga yo'naltirish uchun javobgar bo'lgan CTA tugmasi.

Ushbu maqola harakatlar tarkibiy qismiga samarali qo'ng'iroqni ishlab chiqish bo'yicha ba'zi ko'rsatmalarni va jamoalar ushbu interfeys elementini birgalikda ishlashni qanday muvaffaqiyatli qilishlari mumkinligini ko'rsatishga qaratilgan.

Ovoz va ohang

Nega bu tugmani bosishim kerak?

a. Harakat fe'lidan boshlanib, birinchi shaxsda yozing

Sizning CTA tugmachangiz "Boshlash", "Olish" yoki "Yuklab olish" kabi fe'llardan boshlanishi kerak. Ular harakatlarga yo'naltirilgan.

Maykl Aagaard (Unbounce's Conversion Optimizer) tomonidan o'tkazilgan sinovda u CTA tugmachasining nusxasini ikkinchi shaxsdan birinchi kishiga o'zgartirish natijasida 90% ga bosish tezligi oshganligini aniqladi.

b. Kutish

Aksariyat veb-foydalanuvchilar Internetda taqdim etilgan narsalarni nominal qiymatda olishga ikkilanadilar. Tajribaga ko'ra, ularning ishonchi avval bepul xizmat ko'rsatishni va'da qilgan havolalar orqali yoqib yuborilgan, chunki ular xohlagan narsalarini olish uchun o'zlarining kredit kartalari raqamlarini taqdim etishlari kerak.

Kliklarning o'zgarishini oshirish va ishonchni oshirish uchun, foydalanuvchilarning shubhalarini taxmin qiling va ularga taqdim etgan harakatlaringiz orqali nimaga erishishingizni ayting. Amalga qo'ng'iroq qilish tugmachasini loyihalashda foydalanuvchilarning barcha savollari haqida o'ylang va ularga o'z vaqtida javob berganingizga ishonch hosil qiling.

v. Zudlik bilan ish tutish

Qalin, ishonchli va buyruqli so'zlarni ishlatib, jumlalarni tuzish foydalanuvchini idrokini o'zgartirishi mumkin, chunki ularni boshqa harakatlar kutmaslik kerakligi va harakat qilishni kutish jarima yoki jarimaga olib keladi. o'tkazib yuborilgan imkoniyat.

d. Qulaylik hissi

Ko'pincha, foydalanuvchini biron bir chora ko'rishga ikkilanishi, harakat qiyin, qimmatga tushishi yoki vaqt talab qilishi haqida o'ylashdan kelib chiqadi. Ushbu tashvishlarni e'tiborga olib, CTA tugmachangiz ko'proq konversiyalarga olib kelishi mumkin.

e. Trigger so'zlar

Tetik so'zlar - bu foydalanuvchini bosishga undaydigan so'z va iboralar. Ularda foydalanuvchilarni ko'rib chiqishni davom ettirishga turtki beradigan asosiy elementlar mavjud. Ularga o'zingiz xohlagan harakatni amalga oshirish uchun yaxshi sababni bering. Agar foydalanuvchi "rejalar" yoki "narxlar" ni qidirayotgan bo'lsa va sizning CTA tugmachangiz "rejalar" yoki "narxlash" ni aytsa, ular buni bosishadi. Shunday qilib, bu holda "rejalar" va "narxlar" iborasi so'zlar bo'lishi mumkin.

Qidiruv kalit so'zlari kabi trigger so'zlar haqida o'ylang!

Jared Spool maqolada yaxshi maslahatlarga ega: To'g'ri Trigger so'zlari.

Uslub

Qayerga chertishim kerak?

a. Shakl

Siz bilishingiz kerak bo'lgan birinchi narsa - bu CTA tugmachasining shakli. Ikkita eng mashhur tugma shakllari yumaloq va to'rtburchak qirralar bo'lib, siz uchun eng mos keladigan shakl asosan sinovga bog'liq bo'ladi. Ushbu omilni e'tiborsiz qoldirmang. Tugma shakli konversiya tezligiga ta'sir qilishi mumkin va ta'sir qiladi.

b. Hajmi

Veb-sahifalarda, elementning atrofidagi elementlarga nisbatan kattaligi uning ahamiyatini ko'rsatadi: element qanchalik katta bo'lsa, shunchalik muhimroq bo'ladi. Muayyan sayt harakatlarining ahamiyati to'g'risida qaror qabul qiling va tegishli ravishda CTA tugmachasini o'lchang.

v. Oq oraliq

CTA tugmasi atrofida bo'sh joydan (yoki bo'sh joydan) foydalanish uni juda ko'p elementlar mavjud bo'lgan joylarda ajratib ko'rsatishning samarali usuli hisoblanadi.

d. Joylashtirish

CTA tugmachasini joylashtirish tashrif buyuruvchilarning e'tiborini jalb qilish uchun juda muhimdir. Veb-sahifaning yuqori qismi kabi taniqli joylarda joylashtirish sahifaning yuqori ochilishini o'zgartirishi mumkin, chunki foydalanuvchilar CTA tugmachasini sezib, tegishli choralar ko'rishi mumkin.

Google Material Design standartlari asosida ishlab chiqilgan mobil ilovalardan foydalanadigan dizaynerlar birlamchi tugma (FAB - Float Action Button) ekranning pastki o'ng tomonida joylashganligini bilishadi. Joylashtirish masalalari!

e. Qarama-qarshi rang

CTA tugmachangiz uchun urg'u rangini belgilang va unga yopishib oling. Brendingizning asosiy yoki ikkinchi darajali ranglaridan foydalanmang.

Maykl Aagard shunday deydi:

Mening eng yaxshi maslahatim - ochilish sahifangiz tugmachalarini loyihalashda aql va qarama-qarshi ranglardan foydalanish. Yaxshi eski "qiyshiq test" doim yordam beradi. Sahifangizni bir joyga qo'ying, bir necha qadam orqaga burilib, ko'zingizni yuming va sizning tugmangiz turmasligini tekshiring. Men odatda to'q sariq yoki yashil tugma bilan tajriba o'tkazishni boshlayman, chunki ular ko'pincha sinovlarda yaxshi ishtirok etishadi. Menimcha, chuqur psixologik sabablar yo'q deb o'ylayman, ular oddiy dizayn tufayli juda ko'p ochilish sahifalarida ajralib turadiganga o'xshaydi. Shunga qaramay, bularning barchasi kontekstga tegishli va men binafsha rangli tugma ham yashil, ham to'q sariq rangga ega bo'lgan sinovlarni ko'rdim.

Tasavvur qiling, sizning CTA tugmachangiz ekranda deyarli anomaliya bo'lishi kerak. Buning uchun yaqinlik, o'xshashlik, uzluksizlik va umumiy mintaqa kabi ba'zi Gestalt prinsiplaridan qoching. Faqat bitta qonundan foydalaning: fokus. Buni amalga oshirish orqali sizning CTA tugmachangiz foydalanuvchi ko'rinishi ostida ajratib turadi.

Komponent

Interfeys elementlarini tarkibiy qismlarga aylantirish vaqti keldi!

a. Dizaynerlar va ishlab chiquvchilar uchun tarkibiy qism bo'ling

Dizaynerlar bozorda mavjud bo'lgan Sketch, Adobe XD, Figma va boshqalar kabi kerakli vositalardan foydalangan holda tarkibiy qismlarni o'ylab topadigan interfeyslarni yaratishi kerak. Ishlab chiquvchilar ham! React, Angular, Vue.js va boshqalar kabi komponentlashtirish uchun ba'zi old texnologiyadan foydalaning.

b. Dizaynerlar va ishlab chiquvchilar uchun teng nomli konventsiya

Endi biz tarkibiy qismlar bilan ishlayotganimizda, jamoalar bir xil tilda gaplashishlari kerak. Buning uchun biz Dizaynerlar va Ishlab chiquvchilar uchun komponentlar uchun bir xil nomlash konvensiyasiga ega bo'lishimiz kerak.

Javob misoli:

Eskiz belgilarining namunasi:
tugmasi / birlamchi tugmasi
tugmasi / ikkilamchi tugmasi

v. Birlik sinovlari uchun optimallashtirilgan

QA guruhi yanada samaraliroq ishlashi uchun har doim komponentingiz uchun identifikatorni e'lon qiling. Va tarkibiy qism qanday kontekstda qo'llanilishini aniqlang.

HTML misol:

  Hozir xarid qilish!

d. Tahlil uchun optimallashtirilgan

Shaxsiy ma'lumotlar atributlari sahifadagi tarkib haqida qo'shimcha ma'lumot olishning tezkor usulidir. Bu foydalanuvchilarning sayt tarkibini qanday boshqarishini yaxshiroq tushunishga yordam beradigan soddalashtirilgan echim. Maxsus ma'lumotlar atributlari bu HTML 5 spetsifikasidir va barcha asosiy veb-brauzerlarda keng qo'llab-quvvatlanadi. Haqiqiy HTML va HTML-ni bajarish juda qulay bo'lganligi sababli, uni aylantirishni yanada jozibador qiladi.

HTML misol:

  PDF-ni yuklab oling

Ma'lumot atributlarini amalga oshirish va ulardan foydalanishning bir qator afzalliklari bor:

e. A / B sinovlari uchun optimallashtirilgan

Yuqorida aytib o'tilgan Komponentlarni optimallashtirish bo'yicha eng yaxshi tajribalarni amalda qo'llang va Ovoz va Tone va Uslubning barcha maslahatlarini sinab ko'ring.

Javob misoli:
HTML chiqishi:
tugmasini bosing
  class = "boshlang'ich tugma - b"
  ma'lumotlar o'zgarishi = "b"
  data-campaign = "Avliyo Patrik kuni">
  Bugun pivo!
"Sinovning maqsadi ko'tarilish emas, balki ko'proq ma'lumot olishdir" - Doktor Flint MakGloglin, MECLABS

Optimallash - bu davom etadigan jarayon. Sinovning dastlabki natijalari ijobiy yoki salbiy bo'ladimi, muhim emasmi?

“Albatta, birinchi taymda uyga yugurishni urish egoga oson bo'ladi. Ammo optimallashtirishga jarayon sifatida murojaat qilsangiz - to'siqlar bilan suzishning bir martalik imkoniyati emas - yo'l bo'ylab bir necha poydevorda to'xtash ko'pincha o'yinni yutish uchun zarur bo'lgan narsani ko'rasiz »- Maykl Aagard, Unbounce

Eslamoq

Hech narsa toshda yozilmagan. Ko'p narsani sinab ko'ring. Hammasi kontekst haqida.

Kirish marketing

Ushbu maqolada keltirilgan barcha narsalar ba'zi bir kelgan marketing strategiyasi bilan birlashtirilishi mumkin. Quyidagi havolada nima borligi haqida ko'proq bilib oling:

Adabiyotlar