• UI & UX

Кликнете: 8 съвета за ефективен дизайн на CTA

  • Felix Rose-Collins
  • 6 min read
Кликнете: 8 съвета за ефективен дизайн на CTA

Въведение

Достигането до първата страница на резултатите от търсенето в Google и привличането на вниманието на аудиторията е истинско предизвикателство, тъй като хората рядко кликват върху резултати на втора страница. Оптимизирането на сайта ви за SEO е задължително условие за постигането на тази цел.

Но това не означава, че мястото в първата десетка на класацията непременно ще ви осигури добър процент на конверсия по подразбиране. Вярно е, че можете да очаквате увеличаване на трафика на уебсайта, но има и друг елемент, който е от решаващо значение за конверсиите - ефективен призив за действие.

Основната роля на CTA е да насочи посетителите към следващата стъпка и да ги насърчи да предприемат действия - да се абонират за бюлетин, да изтеглят електронна книга, да закупят продукт или услуга или да се регистрират за пробна версия.

Въпреки това лошо проектираният CTA е толкова добър, колкото и никакъв, тъй като няма да успее да генерира кликвания и да улесни конверсиите.

В тази статия ще разгледаме най-добрите съвети за създаване на неустоими CTA, върху които потенциалните клиенти няма да могат да не кликнат. Прочетете, за да научите повече!

1. Използвайте лепкав CTA в страничната лента

С CTA се цели да се привлече вниманието на посетителите и те да кликнат.

Някои уеб страници, като началните страници или публикациите в блоговете, имат много съдържание и е лесно CTA да се слеят с всички останали елементи и да станат практически невидими.

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Въведете лепкав CTA в страничната лента.

Този плаващ бутон е фиксиран отстрани на уеб страницата и остава видим, докато потребителят скролира нагоре и надолу, без да е прекалено натрапчив или разсейващ. Не е нужно да се притеснявате дали потенциалният клиент няма да забрави за вашата страхотна оферта, докато чете статия или проверява мненията на клиентите.

ATH Sport дава 10% отстъпка от първата поръчка и популяризира този стимул на началната си страница и в целия си уебсайт, като прилага лепкав CTA в страничната лента, гласящ "Save 10%". По този начин на посетителите се напомня деликатно да предприемат действия и да поискат отстъпка.

Use a sticky sidebar CTA (Източник: ATH Sport)

2. Използване на негативното пространство

Една от най-големите грешки, които можете да допуснете с вашия CTA, е да го заровите в средата на огромен блок от текст. Това е сигурен начин посетителите да го пропуснат и да си тръгнат, без да го конвертират.

Не се страхувайте да се възползвате максимално от негативното пространство, т.е. областта от дизайна, която не е заета от текст или други елементи. Като обградите CTA с бяло пространство, можете да създадете визуална пауза, която да привлече вниманието на зрителя към бутона.

Колкото по-малко разсейващи елементи има около CTA, толкова по-удобно е да се кликне върху него.

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Flamingo дава достатъчно пространство на CTA на началната си страница и го отделя от останалите елементи, като по този начин привлича вниманието на посетителите към основната цел - добавянето на проследяващ устройства за отсъствия към Slack. Въпреки многото бяло пространство, дизайнът не изглежда празен или незавършен, така че постигането на правилния баланс е от ключово значение.

Leverage negative space (Източник: Flamingo)

3. Създаване на усещане за спешност

Спешността и недостигът са мощни фактори за конвертиране, затова трябва да включите тези психологически принципи в копието на CTA.

Вземете пример от Amazon и техния умен отказ "Останали са само 1/2/3 бройки", който подтиква дори нерешителните клиенти да поръчат продукта веднага, преди някой друг да го е взел.

Хората възприемат продуктите, които са дефицитни или са на път да бъдат разпродадени, като по-ценни, което от своя страна предизвиква страх от изпускане (FOMO).Можете да се възползвате от този феномен, като създадете CTA копие, което се върти около ограничената наличност на продукта.

За да подчертаете спешността, използвайте думи за време, като например "Сега", "Веднага" или "Днес".

CTA на началната страница на Bed Bath & Beyond е чудесен пример за съчетаване на спешност и оскъдност. Клиентите се приканват да "пазаруват сега", тъй като офертата е валидна до 8 януари, но този прозорец от възможности е допълнително сведен до минимум чрез добавянето на "До изчерпване на количествата". Фактът, че самото CTA е в рамките на голям червен банер, поставен над сгъването, го прави още по-поразителен и убедителен.

Create a sense of urgency - Bed Bath & Beyond (Източник: Bed Bath & Beyond)

Началната страница за януари включва CTA с малко по-различен подход към спешността. Внимателно изработената формулировка "Присъединете се към списъка на чакащите" създава оживление около приложението и генерира търсене, като предполага, че има и други потенциални клиенти, които с нетърпение очакват старта. Този прост, но интригуващ CTA работи, защото създава донякъде ексклузивна атмосфера - все едно влизате в списъка на VIP клуб.

Create a sense of urgency - January (Източник: януари)

4. Включете думи за сила

Както подсказва името им, силните думи са способни да предизвикват емоции у потенциалните ви клиенти. 95% от решенията за покупка са подсъзнателни, което означава, че чувствата играят важна роля в този процес.

Така че включването на мощни думи като

  • Безплатно
  • Удивително
  • Нов
  • Ефективен
  • Easy
  • Незабавно
  • Гарантиран
  • Няма риск
  • Сертифициран
  • Защитен
  • Тестван
  • Проверено
  • Допълнително

ще въздейства правилно на аудиторията ви и ще я накара да предприеме действия.

Както виждате, някои от тези думи целят да убедят клиентите, че е безопасно да кликнат върху бутона и да направят покупка или да се абонират за бюлетин. Други се фокусират върху подчертаването на стойностното предложение на вашата оферта.

Началната страница на Evernote обещава на потребителите, че ще могат да организират живота си с помощта на приложението, а CTA ги примамва да се регистрират безплатно. А кой би могъл да откаже такава примамлива оферта?

Include power words - Evernote (Източник: Evernote)

По подобен начин CTA на началната страница на BaseLang приканва потребителите да започнат с уроците по испански език "само за 1 долар", което е следващото най-добро нещо от предлагането на безплатна услуга. Цялостното послание на марката набира сила с помощта на други силни думи като "неограничен" или "all-you-can-eat", като и двете предават стойността на офертата, която потенциалните клиенти могат да изпробват за една седмица и да платят символична такса от 1 долар.

Include power words - BaseLang (Източник: BaseLang)

5. Направете своя CTA поп

Вероятно сте чували за правилото за 15-те секунди, според което имате само четвърт минута, за да привлечете вниманието на посетителите. Това не ви дава много възможности за маневриране, което означава, че трябва да действате бързо и да се уверите, че CTA е сред първите неща, които хората забелязват, когато попаднат на вашата уебстраница.

Напръскването на цвят е един от най-добрите начини за постигане на тази цел. Съществуват различни мнения за това кой цвят повишава конверсиите, но журито все още не се е произнесло по този въпрос. Въпреки това е сигурно да се заключи, че не става въпрос толкова за това дали ще изберете червено, зелено, синьо или жълто, а за създаването на контраст.

Например можете да използвате т.нар. допълващи се цветове, които се намират в противоположните страни на цветното колело. Ако уебстраницата ви е предимно синя, оранжев CTA ще създаде силен контраст.

Началната страница на Menlo Caoching е в бяло и сиво, така че дръзкото червено, което са избрали за CTA, я прави незабавно видима. Дизайнът също така се възползва от негативното пространство, което допълнително подчертава CTA бутона и го кара да изпъква на неутралния фон.

Make your CTA pop (Източник: Menlo Coaching)

6. Не бъдете неясни

Не очаквайте от посетителите си да направят изводи за това какво ще се случи по-нататък - кажете им.

Бутоните CTA с надпис "Кликни тук" или "Изпрати" само ще объркат хората, а това е най-лошото, което можете да направите.

Трикът е в това да съобщите ясно на посетителите си каква полза ще имат от предприемането на действия и да ги информирате за следващата стъпка.

Dropbox използва този подход "какво е за мен" на началната си страница, като казва на потенциалните си клиенти, че като кликнат върху бутона CTA, ще могат да намерят най-добрия план за себе си. Очевидно е, че на следващата страница те ще намерят подробности за плановете, функции и сравнения, които ще им помогнат при вземането на решение.

Don’t be vague (Източник: Dropbox)

7. Добавяне на социални доказателства

Когато става въпрос за конвертиране на потенциални клиенти, нищо не работи по-добре от социалните доказателства. 87% от решенията за покупка започват с онлайн проучване, а клиентите четат средно по десет отзива, преди да направят поръчка.

Но тъй като не искате потенциалните ви клиенти да напускат уебсайта ви, докато търсят отзиви и препоръки на клиенти, най-добре е да им покажете социални доказателства точно там, преди да им представите CTA.

По този начин ще изградите доверие и ще разсеете евентуалните им съмнения относно покупката.

Точно това прави Buffer на своята начална страница. Техните CTA са съчетани с цитати на щастливи клиенти, които подчертават как използването на платформата улеснява живота им. За да добави още едно ниво на достоверност, марката е включила имена и снимки на клиенти. Тази проста тактика е много полезна, тъй като поставя лице пред името и прави социалното доказателство по-автентично.

Add social proof (Източник: Buffer)

8. Поддържайте нещата прости

Всички съвети, които обсъдихме досега, може да ви създадат впечатлението, че вашите CTA трябва да са прекалено ярки, за да работят.

Но истината е, че простотата често се подценява.

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

В много случаи ще постигнете отлични резултати, ако запазите CTA прост както по отношение на дизайна, така и на процеса на преобразуване.

CTA на началната страница на Jira отговаря на всички изисквания със своя CTA "Продължи с Google". Дяволът се крие в детайлите и въпреки че на пръв поглед тук не се случва нищо особено, ефективността на този CTA се крие във факта, че прави нещата изключително прости за тези, които решат да се регистрират.

Вместо сложен процес на регистрация, Jira спестява време на потребителите, като им позволява да получат достъп до платформата чрез профила си в Google. Това отнема само няколко кликвания и няма досадно попълване на формуляри, което е причина за много изоставени регистрации и пазарски колички. Освен това копието съдържа онази вълшебна отворена седесарска дума - Free (безплатно), способна да убеди колебаещите се да кликнат и да продължат.

Keep things simple (Източник: Jira)

Приключване

Призивът за действие може да е най-малкият елемент от дизайна на вашата уеб страница, но значението му е огромно. Без него потенциалните клиенти няма да знаят какво очаквате да направят и каква да бъде следващата им стъпка. Затова обмислете внимателно дизайна на вашите CTA и не ги пренебрегвайте. Тези тактики ще ви помогнат да си гарантирате, че кликванията ще завалят.

Започнете да използвате Ranktracker... безплатно!

Разберете какво възпрепятства класирането на уебсайта ви.

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Different views of Ranktracker app