Главное Свежее Вакансии Образование
Выбор редакции:
1 044 2 В избр. Сохранено
Авторизуйтесь
Вход с паролем

“Крутой” дизайн убивает продажи: как сохранить баланс между восторгом клиентов и маркетинговыми целями

Вы сделали красивый, дорогой лендинг, потратили огромную сумму, но заявок нет? Неудивительно: возможно, вы просто зациклились на дизайне и забыли об остальном. Лучше разработать простое решение — часто оно оказывается более эффективным. Рассказываем и показываем на примерах, как убить двух зайцев сразу: и клиенту чтобы нравилось, и деньги чтобы приходили.

Каждому дизайну — свое место

Есть 3 главных момента, которые нужно учитывать:

  • Целевую аудиторию и нишу продукта.
  • Влияние цвета на восприятие вашего товара или услуги.
  • Дизайн — это не главное. Для человека, который просматривает ваш лендинг, польза наверняка окажется важнее красивостей и наворотов.

Поговорим о каждом пункте подробнее.

Целимся в ЦА

От продукта и целевой аудитории будет зависеть всё: длина лендинга, допустимые цветовые решения, глубина проработки темы, уместные элементы и “фишки” дизайна.

В маркетинге действует “теория поколений”: то, что важно для 20-летних, не играет роли для категории 40+. Разделите потенциальных покупателей на сегменты, подумайте, кому нужен ваш продукт в первую очередь и какую проблему он решает.

Если продукт новый, аналогов нет или мало и потенциальным клиентам приходится объяснять, что вообще вы предлагаете и зачем это нужно — лендинг будет длинным. Стоит добавить инфографику, демонстрацию в действии, возможны игровые элементы. Для типичного и несложного продукта хватит пары-тройки экранов с правильным оформлением, сильным УТП и формой заказа.

Сегодня более половины трафика приходит с мобильных устройств. Учтите, что клиенты весьма нетерпеливы: им некогда ждать, пока загрузятся слайды, крутящиеся иконки и другая крутая графика, которая влетела вам в копеечку. Простой дизайн сейчас в тренде. С момента, когда Apple начала использовать плоские элементы для оформления сайта, он только набирает обороты. Основные преимущества такого решения — высокая скорость загрузки, удобочитаемые шрифты sans serif (без засечек), лаконичность и дорогой вид.

Впрочем, если у вас сложный продукт, который долго выбирают, можно ориентироваться на десктопные версии и позволить себе пару интерактивных элементов. Но не перестарайтесь: бывало такое, что целевые посетители приходили на лендинг, игрались с его дизайном и в процессе забывали, зачем пришли.

Цвет решает, быть или не быть

И это не шутка. По данным Kissmetrics, во время запуска нового продукта 93% покупателей ставят его визуальную привлекательность на первое место. При этом 85% признают, что именно цветовая гамма сыграла главную роль в совершении покупки. Прибавьте к этому факт, что цвет прочно ассоциируется с брендом и повышает его узнаваемость на 80%... Сердце затрепетало?

Психологию цвета используют себе во благо все гиганты рынка: iHerb, McDonald’s, Nutella, Apple, Amazon и другие. Пройдемся по основным цветам.

Красный ассоциируется с любовью, возбуждает аппетит и подталкивает к спонтанным решениям. Именно поэтому этот цвет выбирают рестораны, производители фаст-фуда, игрушек, некоторые игровые, автомобильные бренды, производители электроники. В категорию “красных” попадают Lego, AVIS, Nintendo, Canon, Coca-Cola, KMart, Youtube.

Синий — цвет надежности, доверия и силы. Применяют его в отраслях, где доверие и опора являются главным посылом: юриспруденция, недвижимость, медицина, страхование, IT, производство техники. Примеры: HP, Dell, Walmart, Facebook, Вконтакте, Wikipedia, Ford, Intel, Pfeiser.

Зеленый успокаивает, вызывает ассоциации с природой, спокойствием и ростом. Его используют в разных отраслях: от экологии до саморазвития. В эту цветовую палитру попадают: кофейня Starbucks, Spotify, разработчик программного обеспечения Android, телевизионный канал Animal planet.

Желтый — это проводник оптимизма, ясности, теплоты. Часто его используют в сочетании с красным или черным. Примеры: Nikon, Ferrari, Chupa-Chups, IKEA.

Оранжевый взбадривает, дарит ощущение надежности и дружбы. Бренды, использующие этот цвет, стремятся быть с покупателем на “ты”: Fanta, Amazon, Mozilla Firefox, Nickelodeon.

h_Ufh2aL_DsT8xYSqnXU4X1ZAVeMs7L0PSSRiI8w

Источник

Важно комбинировать цвета правильно: они обязательно должны быть контрастными, а не сливаться друг с другом. Даже при сильно уменьшенном изображении страницы глаз должен отличать одни элементы от других. Классические сочетания: красный-черный, красный-желтый, оранжевый-зеленый, желтый-красный, желтый-черный. Основной фон должен быть нейтральным — белым.

Но при этом всем…

Контент все равно король

Все наши предыдущие ухищрения должны подчеркнуть информационный посыл, а не перечеркнуть его.

Созданием продающего текста и его структуры занимается копирайтер. Задача дизайна — усилить текст, направить внимание читателя на главные элементы, подчеркнуть call to action, почти за руку довести до кнопки или формы заказа.

Важный момент — шрифты. Не переусердствуйте, используйте одну гарнитуру или максимум две: одну для заголовков, другую — для основного текста. И уж тем более лучше не заказывать разработку целого набора шрифтов у дизайнера, особенно если экономить придется на более важных вещах!

b_5a65e873cf22e.jpg

Дизайн плохой и хороший: 9 важных мелочей

  1. Первый экран должен содержать сильное торговое предложение и кнопку призыва к действию. Именно на этом этапе человек решает, скроллить ему дальше или нет.

Пример, как можно делать:

GIKl4Vc7UjLQpidBadShkbPetdYdkrdO7_l1AD_2

А это пример, как делать не надо:

8a3gTM3HbuNWMxT6E3wjbUtN9b6HJT0qSpSlYCUV

Для неискушенного заказчика вопросов нет — смотрится, вроде, красиво. Но меню прячется на основном фоне, нет УТП и формы заказа или кнопки. Глаз теряется, конверсия падает.

  1. Кнопки призыва к действию должны сильно выделяться на фоне остальных элементов.

Бытует мнение, что самые высокие конверсии обеспечивают красные кнопки. Обычно так оно и есть, но только в случае, когда цвет сильно выделяется на фоне остального пространства. По этой причине желтые, оранжевые или зеленые кнопки иногда могут работать лучше, и наоборот.

Проверить просто: уменьшите изображение первого экрана по максимуму — если даже так видно кнопку, тогда все правильно.

Вот как выглядит “правильная” кнопка:

DllCdnkUvLa5F0IiWhhWjg-O6I16XVkQ9FbKvoeG

А здесь ребята перестарались: эффектно, но от желтого глаза разбегаются.

okcJfa_TXf4mashIkjZJy0Auz7OSjyykJsl3br2x

  1. Помните о шапке и меню: они важные, так как отвечают за перемещение клиента по странице. Сверху обязательно указывайте название компании и пояснение, чем вы занимаетесь. Это поможет избежать путаницы (особенно если картинка и заголовок подобраны неправильно).

Wt-CmqfayFz-vEEs5xKdssW5zTu9DYCxR4XdQqMZ

А здесь меню отсутствует совсем:

PdFmK360XwOvjR_TTa4oL8IhUznPIWTD5BgeZLs-

  1. На первом экране используйте свои фото, а не стоковые — от них уже глаза болят, а клиентам это говорит еще и о ненадежности компании (особенно когда явно стоковые фото используют в отзывах). Продаете услуги — разместите фото своей команды за работой. Продаете товар — сфотографируйте его так, чтобы сразу возникло жгучее желание заказать.

Здесь фото хоть и обработанное, но реальное (и заголовок тоже оцените):

DrcbhcjkUpIM7OmHOH0bH_CJ4tP6VWDv_8QRMmZm

А от таких фотографий бегите подальше:

nLpqC1W1UU9B9TgPUyYotef2fYHUPul_3OMdNyLX

  1. Используйте видео для презентации товара или компании. При этом оно должно быть простым и весить как можно меньше. Отлично подходят рисованные ролики, где все объясняется простым языком. Важно также правильно подписать видео, чтобы сразу было понятно, о чем оно. Рядом можно разместить сопровождающий текст, который в общих чертах передает тот же посыл.

Вот здесь неплохой вариант: размещение посередине лендинга с дополнительным текстом.

-pj4GDfbNoqo8vGbgnuDIK9T24XkNzvimT9PaH8a

А здесь видео есть, но к нему нет ни подводки в заголовке, ни объяснений. Да и само название ролика ни о чем не говорит. Шанс, что посетитель захочет посмотреть видео, невысоки. А если так — не окажется ли, что деньги на съемку были потрачены впустую?

tkEMlz_H6pEulGIXy-gSDKP9i3_b0_gFbuYqomYv

  1. Визуально разделяйте блоки с информацией. Самые важные можно выделить контрастным цветом.

F71M9rdlir7iPCEZ20jCjLLoyp1ulGPIunU8SjRI

А здесь текст полностью сливается — нет разделения ни цветом, ни заголовками.

3EfS4rk8uH_PPbQqffcWKGW_ulYE0mM4gHvxhtab

  1. Уберите все всплывающие окна — они сильно раздражают. Если на сайте это оправдано и дает увеличение конверсии, то на лендинге, наоборот, отвлекает от главного.
  2. Страница должна хорошо выглядеть на любом устройстве. Проверьте, отображается ли он правильно на смартфонах, чтобы не получить сюрприз чуть позже.
  3. Вставьте кнопку быстрой прокрутки вверх. Особенно, если страница весьма длинная — посетитель устанет скроллить туда-сюда вручную.

Подведем итоги

Дизайн — это второстепенная часть сайта, которая, однако, влияет на скорость работы и восприятие контента. Современные лендинги в основном визуально плоские — отход от объемных элементов позволил ускорить загрузку, сделать дизайн лаконичным и дорогим на вид.

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

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Кристина Бортникова
Мы кстати всплывающие окна не стали убирать, прирост от них небольшой, но есть. А вот кнопку прокрутки вверх обязательно поставим.
Ответить
Lena Yerina
Согласна почти со всем. Например остановившись только web-версии сайта , очень теряются продажи. Сейчас очень ритмичная жизнь и если с мобильного не удалось просмотреть страничку магазина или сервиса, значит выбор станет за нормально открывшимся сайтом на смартфоне.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.