Як створювати візуально ефективні заклики до дії



Як зробити заклик до дії делікатним, але ефективним? Це стаття розкриває кілька простих секретів. Ми постаралися скористатися ними при створенні нового дизайну для нашого сайту. І заодно вирішили її перевести. Сподіваємося, ця стаття буде вам корисна.

Створювати ефективні посадочні сторінки — це непросте завдання. Це постійна боротьба між тим, що працює, а що ні. Це безперервний процес тестування, вимірювань і поліпшень.

Одна з найскладніших завдань, з якою я стикався в роботі, — це звернути увагу відвідувачів сайту на заклик до дії. І хоча головну роль у цьому процесі, швидше за все, грає текст, дуже важливо підкріпити його дизайном, який приверне увагу до вашого повідомлення.

Гарна новина полягає в тому, що поведінка людей досить передбачувано, і ми можемо це використовувати.


Людям дуже подобаються повторювані візуальні патерни. І вони дуже швидко помічають будь-яке відхилення від них. Саме це ми можемо використовувати, щоб привернути їх увагу.

Але як зробити це делікатно, без нав'язливих кнопок і знаків оклику?

Кожному заклику до дії потрібно увагу

Перш ніж ми перейдемо безпосередньо до дизайну, давайте поговоримо про те, як привернути увагу. Чому це так складно? І навіщо взагалі для цього потрібно використовувати якісь прийоми?

Мета більшості сайтів — це залучити цільову аудиторію і закликати їх до певної дії. Будь то підписка на розсилку, соціальне взаємодія або купівля товару.

Звичайно, саме по собі це дія зазвичай не так привабливо для тих, хто вперше потрапив на ваш сайт. Навряд чи ви зможете зацікавити ваших відвідувачів просто фразою: «Підписатися на мою розсилку!»

Тому що саме контент привертає вашу цільову аудиторію. Це може бути хороший текст, що продає, пости в блозі, інфографіка, безкоштовна електронна книга або щось ще.

Після того, як ви зацікавили відвідувачів сайту, ви можете направити їх далі, до наступного етапу вашої воронки конверсії.


Відвідувачі. Менше зобов'язань. Більше зобов'язань

Тепер, привернути увагу людини і спрямувати його до дії дуже складно. І чим більше витрат від нього вимагається, тим складніше це зробити. Для різних закликів до дії можуть знадобитися різні підходи.

Наприклад, запропонувати підписатися на розсилку в обмін на безкоштовну цінну інформацію набагато простіше, ніж попросити щось купити.

Заклик до дії, який не потребує великих витрат, може бути прямим. Його можна розмістити у поп-ап вікні або на великому банері вгорі сайту.

Але такий підхід не спрацює, якщо ви хочете щось продати. Вам потрібно підготувати ваших відвідувачів, просвітити їх, розвіяти сумніви і сформувати інтерес до продукту перш, ніж запропонувати його придбати.

Саме тому розташовувати заклик до дії потрібно більш стратегічно. Не варто робити це занадто рано, ваші відвідувачі можуть бути до нього ще не готові.


Розташування призову до дії для меншого і більшого зобов'язання

Спочатку визначте ваші візуальні патерни

Як я вже говорив, тільки дизайн не зможе переконати людину зробити якусь дію. Головну роль у цьому грає текст. Але з допомогою дизайну ви можете привернути увагу до вашого повідомлення, вказавши відвідувачам потрібний напрямок.

І це приводить нас до головної думки цього поста, яка полягає в тому, як ефективно порушувати візуальні патерни, щоб заволодіти увагою відвідувачів.

Візуальна айдентика вашого сайту визначається типографікою, кольорами, дизайном і елементами інтерфейсу. Всі разом вони створюють певні повторювані візуальні образи.


Типографіка, макет, елементи інтерфейсу

Постарайтеся зробити навігацію та перегляд вашого сайту передбачуваними. Ви хочете створити постійний і позитивний досвід взаємодії при читанні вашого контенту. Це має бути вашою основою.

Головне тут — постійність. Чим стійкіші ваші візуальні патерни, тим простіше їх порушити більш делікатним і елегантним способом.

Але навіщо вам порушувати ваш гарний дизайн? Для того щоб направити погляд відвідувача на вашу пропозицію на сторінці, переповненій контентом. Іншими словами, привернути його увагу туди, куди вам потрібно.

Щоб було простіше зрозуміти, уявіть, що вас запросили на вечірку, де всі одягнені, як вони хочуть. В такому різноманітті стилів і квітів вам буде дуже складно привернути до себе увагу. Це можливо, але необхідно буде прийняти радикальні заходи.



А тепер уявіть, що на вечірці всі одягнені в чорне і біле. Щоб виділитися, вам достатньо одягнути червону сорочку. Люди помітять вас, і для цього не потрібно бігати і кричати.

За аналогією, у всьому цьому є сенс, тільки якщо у вас є постійна основа. Без неї, коли все буяє, дуже складно виділити щось одне.

А тепер поруште ці патерни

У дизайні привернути увагу до заклику до дії можна легко за допомогою контрасту. Я говорю не тільки про контрасті в кольорі, але і в розмірі, виділення, білому просторі або навіть розташуванні.

Не всі техніки працюють однаково добре для різних людей. Тому краще всього комбінувати відразу декілька з них.

Наприклад, заклик до дії можна розташувати на контрастному тлі і виділити заголовок болдом. Додатково можна збільшити відступи навколо нього, щоб створити більш сильний контраст контенту і простору.



Додаткове біле простір — це відмінний спосіб виділення не робить дизайн гучним. Просто додаючи відступи навколо елемента, ви відокремлюєте його від іншого контенту. Це розділення і чітке порушення макета з легкістю привертає погляд.



Також ви можете порушити сітку, якщо вона у вас є.

Сітка широко використовується у веб-дизайні. І це тема для окремого посту. У двох словах, це сплетіння вертикальних і горизонтальних ліній, які повністю диктують ваш макет.

Розміщуючи всі елементи контенту на цих лініях, ви можете створити упорядковану і постійну структуру дизайну на вашій сторінці. Сітка допомагає створити візуальний патерн на сайті.

Порушивши сітку, ви зробите ваш заклик до дії більш помітним. Так, все так просто. Розташовуючи елементи не по сітці, ви надаєте їм більшого значення.



Наші очі люблять візуальні патерни і добре їх розпізнають. Будь-яке відхилення від ідеального дизайну обов'язково приверне погляд.

Саме так, друзі, і можна заволодіти увагою відвідувачів.

Читайте також:
Повний путівник по створенню лендингов, які продають
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.