5 порад щодо розробки виграшної кнопки покупки
Якщо ви дизайнер, або інтернет-маркетингу, або ви просто потрапили на власний веб-сайт, де ви намагаєтеся продати щось, в якийсь момент ви будете мати, щоб розробити належний "купити кнопку". А потім, ви швидко дізнаєтеся, що просто кладете “придбайте зараз” Текст на синьому прямокутнику просто недостатньо, якщо ви сподіваєтеся на якісь хороші результати.
На щастя, проектування належної "кнопки покупки" не так складно, як тільки ви дізнаєтеся про деякі базові знання. Тут йде.
Перш за все, Найбільш важливим є текст на вашій кнопці, але є й інші особливості, які необхідно вирішити. Чому я кажу, що текст є найважливішим? Уявіть це - в чому сенс мати красиво оформлену кнопку, якщо текст на ньому написано “Йди до біса!”? Справу закрито. Хороша копія - де зроблено гроші.
У сьогоднішній статті ми обговорюємо 5 важливих рис належної "кнопки покупки". Давайте подивимося!
1. Загальний стиль
Це точка №1 у цьому списку не без підстав, оскільки це найважливіша риса.
Ти хочеш перетворіть кнопку у фіолетову корову. Це концепція, яку популяризував Сет Годін. Коротше кажучи, ви хочете, щоб він був чудовим; я маю на увазі те, що не можна не помітити. Щось на зразок пурпурової корови в середині пасовища.
Деякі дизайнери не дуже добре це роблять. Заманливо створити кнопку, яка гарно пов'язується з кольорами та стилем веб-сайту, на якому він знаходиться. Спочатку здається, що це дуже гарна ідея, тільки це не так.
Проблема в тому, що така кнопка далека від чудової. Ви не хочете, щоб ваша кнопка змішувалася; ви хочете, щоб він виділявся. Таким чином, вона повинна бути створена як абсолютно окремий елемент, який просто трапляється на якомусь веб-сайті, а не як щось, що має відповідати цьому веб-сайту..
Дозвольте мені просто дати вам прекрасний приклад пурпурової корови.
Mozilla Firefox
Так виглядає сторінка завантаження Firefox. Я хочу, щоб ви помітили одну річ. Кнопка ліворуч, кнопка завантаження, не виглядає нічого подібного на цій сторінці. Це єдина зелена річ. Це єдине місце, де представлений логотип Firefox. Це один з найбільших елементів. Він розташований над складкою.
Всі ці ознаки роблять цю кнопку надзвичайно помітною. Це фіолетова корова. Якщо ви говорите, що ви не бачите цього, ви просто намагаєтеся вразити когось.
Коротко: Прагніть мати чудову кнопку.
2. Зовнішній вигляд
Почнемо з колір.
Якщо ви хочете бути чудовим, скористайтеся кольором, який не використовувався ніде на сторінці. Так само, як хлопці Firefox роблять на своєму сайті. Ви можете використовувати інструмент, наприклад Color Scheme Designer, щоб знайти колір, який добре виглядає з поточною колірною схемою вашого веб-сайту, але все ще дуже відрізняється.
І “інший” тут ключове слово. Якщо ваш веб-сайт в основному синій, ви не хочете, щоб синя кнопка купувалася. Ви не хочете відтінку синього. Ви не хочете нічого, що виглядає блакитно. Ви хочете, рожевий, або помаранчевий, і т.д. Я впевнений, ви отримаєте точку.
Ще один трюк. Апельсин відомий як найбільш помітний колір відразу після червоного. Але, це не піднімає всі негативні емоції, що червоні (такі речі) “Стоп”, “пильнуйте!”, і “небезпеки”). Найпопулярнішу оранжеву кнопку в Інтернеті можна знайти на amazon.com.
Наступне, на що потрібно зосередитися - це розмір кнопки. Ну, що я можу сказати, він повинен бути ВЕЛИКИМ. Чим більше, тим краще. (Знову ж таки, приклад Firefox.)
“Чи можу я зробити це ще більшим?” це хороше запитання під час проектування. Робіть це багато.
Це має бути простий або кричущий? Кнопка не може бути занадто кричущою. Перегляньте ще раз кнопку Firefox. Він кричущий. На ній є оранжева лисиця, але вона все одно виглядає як кнопка. Це межа, яку ви не можете перетнути. Якщо ваша кнопка не схожа на одну, її ніхто не натисне.
Ось чому немає простої відповіді, на яку краще - кричущий або простий. Ви просто повинні самі з'ясувати. Завжди розділяйте тест. Створіть дві кнопки, одну кричущу і одну просту. Використовуйте обидва з них одночасно, і подивіться, який з них краще виконує. Оптимізатор веб-сайтів Google допоможе вам у цьому.
Лише короткий приклад простої кнопки.
Застереження
Як ви можете бачити, кнопка не використовує жодних оранжевих лисиць, але вона все ще дуже помітна. Насправді, ThemeFuse (преміальний тематичний магазин WordPress, яким я є частиною) надає трохи так званих шорткодів. Серед іншого, ці шорткові коди дозволяють легко створювати приємні для вигляду кнопки.
Наприклад, лише одним рядком:
[button link = "domain.com"] Натисніть тут, щоб купити мій чудовий продукт! [/ button]
Я отримую такий результат:
3. Шрифт
Шрифт без засічок є стандартним для всіх видів кнопок. Це тому, що шрифти без засічок дуже читаються для кожного використання в Інтернеті. (З іншого боку, шрифти із засічками краще для друкованих видань.)
Ви хочете, щоб копія на вашій кнопці була якомога зручнішою, оскільки це найважливіший фрагмент тексту на сторінці. All-caps не є гарною ідеєю. Змішаний корпус працює набагато краще. У змішаному випадку я маю на увазі першу букву кожного слова, що є символом верхнього регістру. (За винятком слів типу “для”, “”, “і”, і т.д.)
(Джерело зображення: Gomediazine)
Деякі безпечні шрифти, які можна використовувати, це: Arial, Helvetica, Franklin Gothic, Myriad або будь-який інший класичний шрифт без засічок.
Тепер про колір. Копія, звичайно, повинна бути в високій контрастності з кольором кнопки. Ви не хочете сірого кольору. Ви хочете чорно-білого або синьо-помаранчевого кольору.
Знову ж таки, текст має бути високо читаним.
4. Розміщення
Найкраще розміщення залежить від дизайну вашого сайту, що, мабуть, не дивно. Але є ще деякі правила, які варто дотримуватися.
Помістіть його в Найбільш очевидне можливе місце. Не намагайтеся бути творчими. Розміщення має бути очевидним для клієнта / користувача.
Кожен раз, коли хтось відвідує веб-сайт, вони очікують побачити певні речі в певних місцях. Такі речі, як: логотип у верхньому лівому куті, підсумок кошика у верхньому правому куті, положення про авторські права в нижньому колонтитулі тощо. Ваша робота полягає в тому, щоб спробувати з'ясувати, яке саме місце для кнопки купити і просто поставити її.
Звичайно, воно має бути найбільш помітним місцем одночасно. Це означає дві речі:
- Це абсолютно має бути розміщено над згином, і
- Не бійтеся пробілів. Whitespace - друг кожного хорошого веб-дизайнера. Пам'ятайте, що не має значення, скільки матеріалу можна розмістити на веб-сайті, важливо, скільки матеріалу можна видалити з нього.
Ви можете помістити стратегію розташування на стероїди, скопіювавши кнопку, а також розмістивши її внизу сторінки. Таким чином, коли хтось читає всю сторінку, вони все одно можуть діяти внизу.
5. Додаткові елементи
Це глазур на торті. Додаткові елементи ще більше покращують видимість вашої кнопки. Приклади елементів: стрілки, візки для покупок, збільшувальні окуляри, плюс знаки, або різні елементи брендингу.
Мій улюблений приклад - приклад Firefox - використовує один дійсно прохолодний додатковий елемент - оранжеву лисицю (так само їхній логотип).
Емпіричне правило - використовувати додаткові елементи підкреслити призначення кнопки. Наприклад, дві стрілки, спрямовані вниз, чудово підходять для кнопки завантаження. Піктограма кошика для покупок чудово працює з кнопкою додавання до кошика (наведений вище приклад amazon). Збільшувальне скло відмінно працює з кнопкою пошуку. І так далі.
Можна також використовувати деякі елементи брендингу. Наприклад: стандартна піктограма RSS з кнопкою підписки на канал, піктограма з птахом, кнопка з наступною програмою на Twitter, оранжева лисиця з кнопкою download-firefox, ваш власний логотип з покупкою кнопки.
Ось кілька прикладів.
Wakeinteractive
Commercialiq
Медіатема
Unlocking.com
Sofasurfer.eu
Uploadify
Потужність "Вільного"
Ще один трюк - використання найпотужнішого слова англійською мовою - БЕЗКОШТОВНО. Коли щось рекламується як вільне, люди починають діяти передбачувано ірраціонально (перевірте велику книгу Ден Аріелі, "Вгору ірраціональності", щоб дізнатися, що я маю на увазі.)
Інші приклади:
Свіжікниги
Wufoo
Freeagent.com
Що далі?
Якщо ви добре володієте Photoshop або іншим подібним програмним забезпеченням, ви можете просто створити хорошу кнопку прямо зараз. Іншим способом є стати щасливим власником будь-якої теми WordPress на ThemeFuse, як я вже згадував раніше на цій посаді.
Які ваші поради щодо створення великої кнопки "купити"? Я хотів би оновити цю публікацію з вашими думками.
