CTA (Call-to-Action) tugmasi β bu foydalanuvchini keyingi qadamga undash uchun mo'ljallangan tugma. \"Sotib oling\", \"Bepul sinab ko'ring\", \"Tariflar\", \"Bog'laning\" β barchasi CTA. Bu kichik element, lekin biznes natijasini sezilarli belgilaydi. Yaxshi dizayn qilingan CTA β konversiya 2-5x oshishi mumkin. Yomon β foydalanuvchi bosmaydi va sahifa konversiyasiz qoladi.
CTA matni
CTA tugmasi matni eng muhim. Aniq qiymat ko'rsatish va harakat ko'rsatish.
Yomon CTA matni: \"Yuborish\" (nima yuborilyapti?), \"Click here\" (qaerga?), \"OK\" (nima qabul qilinmoqda?), \"Davom etish\" (qaerga?).
Yaxshi CTA matni: \"Bepul hisobni yarating\" (aniq qiymat), \"Hostingni darrov sotib oling\" (aniq harakat), \"30 kun bepul sinash\" (aniq taklif), \"Tezda bog'laning\" (urgency).
Action verb ishlatish
CTA matni harakat fe'li bilan boshlanishi: \"Yarating\", \"Sotib oling\", \"Boshlang\", \"Sinab ko'ring\", \"Yuklab oling\", \"Bog'laning\", \"Ko'ring\".
Passive matn ishlatmaslik: \"Hisob yaratiladi\" β yo'q. \"Hisobni yarating\" β ha.
Vizual dizayn
CTA tugmasi yorqin va ko'rinarli bo'lishi shart. Sahifaning umumiy ranglaridan ajralib turishi shart β kontrast.
Strategiya: brand rangi yashil bo'lsa, CTA to'q sariq yoki qizil. Brand ko'k bo'lsa, CTA to'q sariq yoki yashil.
Yaxshi rang: to'q sariq, qizil, yashil β bularning hammasi action ranglari.
Tugma o'lcham
CTA katta bo'lishi shart β foydalanuvchi ko'rishi va tap (mobile'da) qilishi oson.
Minimal o'lchamlar: width 200px+, height 48px+ (tap target). Mobile uchun bundan kattaroq.
Lekin haddan ortiq katta β yomon look. Balance kerak.
Padding va shape
Padding β tugma matn atrofidagi bo'sh joy. Yetarli padding β tugma \"o'zini his etadi\". 12-16px horizontal padding ideal.
Shape: rounded corners (5-10px border-radius) modern. Sharp corners β klassik. Fully rounded (pill shape, 50% border-radius) β playful.
Hover state
Tugma hover bo'lganda nima sodir bo'ladi? Bu microinteraction foydalanuvchi tajribasini sezilarli yaxshilaydi.
Variants: rang to'qroq, kichik shadow, kichik scale (1.05), kichik animation. Subtle, lekin sezilarli.
CSS: .btn { transition: all 0.2s ease; } .btn:hover { background: #darker; transform: translateY(-2px); }
Active state
Tugma bosilganda nima sodir bo'ladi? Active state β visual feedback foydalanuvchiga \"siz bosdingiz\" ko'rsatadi.
Misol: kichik scale (0.95), to'qroq rang, kichikroq shadow.
Loading state
Form yuborilayotganda CTA loading state'ga o'tishi shart. \"Yuborilmoqda...\" matni, spinner, disabled tugma. Bu foydalanuvchi ikki marta bosishini oldini oladi.
Disabled state
Form to'liq to'ldirilmagan bo'lsa, CTA disabled bo'lishi mumkin. Och rang, cursor not-allowed, klick ishlamaydi.
Yoki strategiya: tugma har doim aktiv, lekin click bosilganda \"Form to'liq emas\" xato ko'rsatish.
CTA joylashish
Hero'da CTA β eng muhim. Yuqorida \"above the fold\" (scroll qilmasdan ko'rinadigan joyda).
Sahifa pastida β yana CTA. Foydalanuvchi blog post o'qib bo'lgach, keyingi qadam.
Sticky CTA β sahifa scroll bo'lganda yon panel'da turadi. Foydalanuvchi har vaqt ko'radi.
Multiple CTA strategiyasi
Sahifada bir nechta CTA bo'lishi mumkin, lekin bitta asosiy. Hero'da \"Bepul sinab ko'ring\" (asosiy), \"Demo ko'rish\" (yon).
Bitta asosiy CTA β sahifaning butun strategiyasi. Foydalanuvchi har vaqt o'sha harakat'ni esda saqlasin.
Urgency va scarcity
Vaqt cheklov: \"Bugun 50% chegirma\", \"30 daqiqada tugaydi\". Foydalanuvchi tezroq qaror qiladi.
Miqdor cheklov: \"Faqat 5 ta qoldi\", \"100 ta foydalanuvchi qoldi\". Scarcity effect.
Lekin haddan ortiq ishlatmaslik β ishonchsizlikka olib keladi.
CTA A/B test
CTA β A/B test uchun eng samarali element. Kichik o'zgartirish β katta konversiya farqi.
Test elementlari: matn (\"Sotib oling\" vs \"Bepul sinab ko'ring\"), rang (yashil vs to'q sariq vs qizil), o'lcham, shape, joylashish, urgency text.
HubSpot tadqiqotiga ko'ra, A/B test CTA konversiyani o'rtacha 22% oshiradi.
Mobile CTA
Mobile'da CTA alohida e'tibor: katta o'lcham (48x48px minimum), pastida sticky bo'lishi (foydalanuvchi har doim ko'radi), oson tap (ortiqcha element atrofida bo'lmasin).
Mobile-first dizayn: CTA mobile uchun yaxshi bo'lsa, desktop'ga kengaytirish oson.
Tarqalgan xatolar
1. Generic CTA matni (\"Yuborish\"). 2. Past kontrast β tugma fonga to'g'ri kelmaydi. 3. Juda kichik β tap qiyin. 4. Ko'p CTA β foydalanuvchi qaror qila olmaydi. 5. Loading state yo'q. 6. Mobile'da yashirib qolish.
Sayt.uz CTA strategiyasi
Sayt.uz asosiy CTA β yorqin yashil (#22c55e), brand ko'k'dan ajralib turuvchi. Padding katta, border-radius 8px (modern).
Matn: \"Tariflar\" (hero), \"Bepul sinab ko'ring\" (form), \"Hozir sotib oling\" (mahsulot sahifa). Aniq harakat va qiymat.
Hover: rangi 10% to'qroq, shadow va translateY(-2px) animation. Microinteraction professional ko'rinishi.
A/B test natija: \"Bepul sinab ko'ring\" β \"Hisob yarating\"dan 35% yaxshi konversiya. Yashil rang β ko'kdan 18% yaxshi. Bu kichik o'zgartirishlar yiliga minglab qo'shimcha foydalanuvchi keltirdi.