Як створити візуальні ефекти, що закликають до дії - SkillsUp - зручний каталог уроків
Як зробити ваші Call-to-Action елементи ефективнішими.
Проектування сторінок конверсії є складною роботою. Це стала боротьба у спробах визначення того, що працює, а що ні. Це нескінченний процес тестування, вимірювання та внесення змін.
Одне з найскладніших завдань - це вказівка відвідувачам заклику до дії таким чином, щоб привернути увагу та інтерес до ваших пропозицій. Хороша новина полягає в тому, що людська поведінка в основному передбачувана і ми можемо використовувати це для нашої вигоди. Люди люблять повторювані візуальні образи. Вони також швидко знайдуть якісь відволікання від добре знайомої схеми. Ми можемо використовувати ці знання, щоб привернути їхню увагу.
Питання полягає в тому, як конвертувати ваш заклик до дії таким способом, який не буде надто дратівливим?
Кожен заклик до дії хоче трохи уваги
Бажана дія, як правило, не така приваблива для перших відвідувачів. Ви не можете просто запрошувати людей на свій сайт словами "прийди та підпишись на мою електронну розсилку!" Конверсія такого призову буде надто мізерною.
Тим не менш, той же підхід не буде добре працювати, якщо ви використовуєте його для вашої кнопки "купити" на сторінці продажу. Ви бажаєте підготувати своїх відвідувачів? Вирішити свої проблеми і створити інтерес, перш ніж просити їх купити ваш продукт.
Ось чому цей заклик до дії має бути розташований стратегічно. Ви повинні бути обережним і не намагатися конвертувати його зарано, адже відвідувач може бути зовсім не готовий до цього.
Спочатку визначте ваші візуальні патерни
Як ми говорили раніше, не можна переконати відвідувача зробити певну конверсію за допомогою одноготільки дизайн. Дизайн робить важку роботу, ви можете допомогти процесу, підкресливши повідомлення і вказавши деяким відвідувачам потрібні дії.
І це підводить нас до головної точки всієї цієї посади - спробуйте зруйнувати ваші візуальні патерни, щоб привернути увагу відвідувача.
Візуально сайт ідентифікується типографікою, кольором, макетом і всіма елементами інтерфейсу користувача. Поєднання цього створює певні візуальні образи, що повторюються.
Тепер послідовність є головним моментом. Чим послідовніше ваші візуальні патерни, тим легше буде розбити їх тонким та елегантним способом.
Чому потрібно "розбити" ваш гарний дизайн? Щоб привести очі ваших відвідувачів прямо на вашу пропозицію на завантаженій сторінці. Іншими словами, щоб привернути увагу ваших відвідувачів до місця, де вам це потрібно. Щоб краще пояснити, уявіть, що ви запрошені на вечірку, де кожен одягнений у те, що хоче. Отже, у вас є всі різні кольори та стилі. З такими вступними досить важко виділитися з натовпу, якщо ви хочете, щоб хтось звернув увагу на вас. Звичайно ж, це не неможливо, але ви повинні зробити деякі радикальні кроки.
Тепер уявіть, що ви збираєтесь на вечірку, де кожен одягнений у чорно-біле. Що б ви могли зробити, щоб виділитися з натовпу? Можна було б просто одягнути червону футболку! Так само і з CTA - робіть його контрастним.
Тепер, розірвіть ваші візуальні патерни
У вашому дизайні підкреслити заклик до дії можна за допомогою контрасту. Ми не говоримо тільки про простий колірний контрас, але також про контрас у розмірах, товщині шрифту, просторі і навіть позиції. Деякі методи працюють краще для деяких людей, але на іншу групу відвідувачів цеможе навіть не вплинути. Так, найкраща ідея полягає в тому, щоб об'єднати одразу кілька із них.
Наприклад, ваш заклик до дії може бути розміщений на контрастному тлі і шрифт заголовка виділений жирним. Крім цього, ви можете додати деякий додатковий простір навколо нього, щоб надати більше розмаїття.
Використання порожнього простору також є чудовим способом. Ви можете зробити щось важливіше, не додаючи більше шуму до вашого дизайну. Просто створюючи більше простору навколо чогось, ви відокремите цей елемент від решти вмісту. Цей розділ і ясний розрив макета може швидко привернути увагу користувача.
Ось так легко можна підвищити конверсію на ваших CTA елементах.