“Крутой” дизайн убивает продажи: как сохранить баланс между восторгом клиентов и маркетинговыми целями
Каждому дизайну — свое место
Есть 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.
Важно комбинировать цвета правильно: они обязательно должны быть контрастными, а не сливаться друг с другом. Даже при сильно уменьшенном изображении страницы глаз должен отличать одни элементы от других. Классические сочетания: красный-черный, красный-желтый, оранжевый-зеленый, желтый-красный, желтый-черный. Основной фон должен быть нейтральным — белым.
Но при этом всем…
Контент все равно король
Все наши предыдущие ухищрения должны подчеркнуть информационный посыл, а не перечеркнуть его.
Созданием продающего текста и его структуры занимается копирайтер. Задача дизайна — усилить текст, направить внимание читателя на главные элементы, подчеркнуть call to action, почти за руку довести до кнопки или формы заказа.
Важный момент — шрифты. Не переусердствуйте, используйте одну гарнитуру или максимум две: одну для заголовков, другую — для основного текста. И уж тем более лучше не заказывать разработку целого набора шрифтов у дизайнера, особенно если экономить придется на более важных вещах!
Дизайн плохой и хороший: 9 важных мелочей
- Первый экран должен содержать сильное торговое предложение и кнопку призыва к действию. Именно на этом этапе человек решает, скроллить ему дальше или нет.
Пример, как можно делать:
А это пример, как делать не надо:
Для неискушенного заказчика вопросов нет — смотрится, вроде, красиво. Но меню прячется на основном фоне, нет УТП и формы заказа или кнопки. Глаз теряется, конверсия падает.
- Кнопки призыва к действию должны сильно выделяться на фоне остальных элементов.
Бытует мнение, что самые высокие конверсии обеспечивают красные кнопки. Обычно так оно и есть, но только в случае, когда цвет сильно выделяется на фоне остального пространства. По этой причине желтые, оранжевые или зеленые кнопки иногда могут работать лучше, и наоборот.
Проверить просто: уменьшите изображение первого экрана по максимуму — если даже так видно кнопку, тогда все правильно.
Вот как выглядит “правильная” кнопка:
А здесь ребята перестарались: эффектно, но от желтого глаза разбегаются.
- Помните о шапке и меню: они важные, так как отвечают за перемещение клиента по странице. Сверху обязательно указывайте название компании и пояснение, чем вы занимаетесь. Это поможет избежать путаницы (особенно если картинка и заголовок подобраны неправильно).
А здесь меню отсутствует совсем:
- На первом экране используйте свои фото, а не стоковые — от них уже глаза болят, а клиентам это говорит еще и о ненадежности компании (особенно когда явно стоковые фото используют в отзывах). Продаете услуги — разместите фото своей команды за работой. Продаете товар — сфотографируйте его так, чтобы сразу возникло жгучее желание заказать.
Здесь фото хоть и обработанное, но реальное (и заголовок тоже оцените):
А от таких фотографий бегите подальше:
- Используйте видео для презентации товара или компании. При этом оно должно быть простым и весить как можно меньше. Отлично подходят рисованные ролики, где все объясняется простым языком. Важно также правильно подписать видео, чтобы сразу было понятно, о чем оно. Рядом можно разместить сопровождающий текст, который в общих чертах передает тот же посыл.
Вот здесь неплохой вариант: размещение посередине лендинга с дополнительным текстом.
А здесь видео есть, но к нему нет ни подводки в заголовке, ни объяснений. Да и само название ролика ни о чем не говорит. Шанс, что посетитель захочет посмотреть видео, невысоки. А если так — не окажется ли, что деньги на съемку были потрачены впустую?
- Визуально разделяйте блоки с информацией. Самые важные можно выделить контрастным цветом.
А здесь текст полностью сливается — нет разделения ни цветом, ни заголовками.
- Уберите все всплывающие окна — они сильно раздражают. Если на сайте это оправдано и дает увеличение конверсии, то на лендинге, наоборот, отвлекает от главного.
- Страница должна хорошо выглядеть на любом устройстве. Проверьте, отображается ли он правильно на смартфонах, чтобы не получить сюрприз чуть позже.
- Вставьте кнопку быстрой прокрутки вверх. Особенно, если страница весьма длинная — посетитель устанет скроллить туда-сюда вручную.
Подведем итоги
Дизайн — это второстепенная часть сайта, которая, однако, влияет на скорость работы и восприятие контента. Современные лендинги в основном визуально плоские — отход от объемных элементов позволил ускорить загрузку, сделать дизайн лаконичным и дорогим на вид.
Используйте правильные цвета и их сочетания, уделите внимание шрифтам, кнопкам и визуальному разделению блоков. Добавьте сюда удобную навигацию, выгодное предложение и яркую кнопку заказа — и клиенты не смогут устоять.
