Системи за проектиране

Анатомията на CTA бутон през 2017 г.: най-добрите практики за глас и тон, стил и компонент.

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

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

Глас и тон

Защо трябва да щракна върху този бутон?

а. Започвайки с глагол за действие и пишете от първо лице

Вашият CTA бутон трябва да започва с глагол за действие като „Старт“, „Вземи“ или „Изтегляне“. Те са ориентирани към действие.

В тест на Майкъл Агаард (Unbounce's Senior Optimizer Conversion) той откри, че промяната на копието на бутона CTA от второ лице към първо лице доведе до 90% повишаване на честотата на кликване.

б. очакване

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

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

° С. Усещане за спешност

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

д. Усещане за лекота

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

д. Задействащи думи

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

Помислете за задействащи думи като ключови думи за търсене!

Джаред Spool има добри съвети в статията: Правилните тригерни думи.

стил

Къде трябва да щракна?

а. форма

Първото нещо, което трябва да знаете, е каква е формата на вашия CTA бутон. Двете най-популярни форми на бутони са заоблени и квадратни ръбове, а формата, която работи най-добре за вас, до голяма степен ще зависи от тестването. Не пренебрегвайте този фактор. Формата на бутоните може и оказва влияние върху степента на конверсия.

б. размер

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

° С. Бяло разстояние

Използването на бяло пространство (или мъртво пространство) около CTA бутон е ефективен начин да го изпъкне в области, където има много елементи.

д. поставяне

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

Дизайнерите, които използват мобилни приложения, създадени по стандартите на Google Material Design, вече знаят, че основният бутон (FAB - Float Action Button) ще бъде разположен в долната дясна част на екрана. Разположението има значение!

д. Контрастен цвят

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

Майкъл Агаард казва:

Най-добрият ми съвет е да използвате здрав разум и контрастни цветове, когато проектирате бутоните на целевата си страница. Добрият стар „тест за присвити“ винаги е от полза. Сглобете страницата си, направете няколко крачки назад, присвийте очи и вижте дали бутонът ви изпъква. Обикновено започвам с експерименти с оранжев или зелен бутон, просто защото те често се представят добре при тестове. Не мисля, че има някаква по-дълбока психологическа причина, просто изглежда, че те се открояват на повечето целеви страници поради средния дизайн. Отново всичко е свързано с контекста и видях тестове, при които лилав бутон е по-добър от зелено и оранжево.

Представете си, че вашият CTA бутон трябва да е почти аномалия на екрана. За целта избягвайте някои принципи на гещалт като близост, сходство, приемственост и общ регион. Използвайте само един закон: фокусна точка. По този начин вашият CTA бутон ще остане подчертан в изгледа на вашия потребител.

Компонент

Време е да преобразувате елементите на интерфейса си в компоненти!

а. Бъдете компонент за дизайнери и разработчици

Дизайнерите трябва да създават интерфейс мислене в компоненти, използвайки подходящите инструменти, налични на пазара като Sketch, Adobe XD, Figma и др. Разработчиците също! Използвайте някаква предна технология за компонентнизация като React, Angular, Vue.js и т.н.

б. Конвенция за еднакво име за дизайнери и разработчици

Сега, когато работим с компоненти, екипите трябва да говорят на същия език. За целта трябва да имаме еднакво споразумение за именуване на компоненти както за дизайнери, така и за разработчици.

Реагирайте пример:
Пример за символ на скицата:
бутон / първичен бутон
бутон / вторичен бутон

° С. Оптимизиран за тестване на единица

За да работи QA екипът по-ефективно, винаги декларирайте идентификатор за вашия компонент. И изяснете в какъв контекст се прилага компонентът.

Пример за HTML:

д. Оптимизиран за Google Анализ

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

Пример за HTML:

Има няколко предимства при прилагането и използването на атрибути на данни:

д. Оптимизиран за A / B тестване

Приложете на практика добрите практики за оптимизиране на компонентите, които бяха казани по-горе, и се наслаждавайте да тествате всички съвети на Voice & Tone и Style.

Реагирайте пример:
<Бутон
  value = "Бира днес!"
  име на класа = "първично-бутон - б"
  вариация = "б"
  кампания = "Ден на Свети Патрик"
/>
HTML изход:
<бутон
  клас = "първично-бутон - б"
  данни вариация = "б"
  data-kampanja = "Ден на Свети Патрик">
  Бира днес!
„Целта на един тест не е да се вдигнеш, а по-скоро да научиш“ - Д-р Флинт Макглафлин, MECLABS

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

„Разбира се, че удрянето на домакинството в първия замах е по-лесно за егото. Но когато подходите към оптимизацията като процес - а не еднократна възможност да се люлеете за оградите - ще видите, че спирането на няколко бази по пътя често е необходимо, за да спечелите играта “- Майкъл Аагард, Unbounce

Да помня

Нищо не е написано на камък. Тествайте много. Всичко е в контекста.

Входящ маркетинг

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

Препратки