0fb547ec8ca4b9f2d348c99e09bc228616ffa9123df832eb91pimgpsh_fullsize_distr

Landing page: оружие массового поражения.

Landing page: оружие массового поражения.

Руководитель отдела Production Фурузон Рахматов и Senior Designer Давид Закарян рассказали все, что нужно знать о разработке эффективного landing page.

Взгляд дизайнера и копирайтера на правила работы с одностраничными сайтами: как найти клиентов и не переживать за конверсию.

screenshot_10

О чем мы будем говорить?

  1. Как увеличить продажи с помощью мультилендинга.
  2. С чего стоит начинать разработку лендинга.
  3. Как построить правильную структуру лендинга.
  4. Как писать убойные заголовки.
  5. Как дизайн поможет вам продавать.
  6. Что такое UX и UI.

Фурузон Рахматов:

Начнем мы, конечно же, с общего понимания принципов лендинга.

Практически все знают, что лендинг пейдж — это одностраничный сайт, направленный на совершение целевого действия.

Его основные элементы — продающий оффер, форма обратной связи и кнопки призыва к действию (CTA).

screenshot_11

Но есть и более сложная модель лендинга — мультилендинг.

Мультилендинг — это тот же самый лендинг, но имеющий свойство перестраивать свои блоки в зависимости от поискового запроса.

То есть, в зависимости от того, какой запрос сделал пользователь или из каких социальных сетей пришел, мультилендинг будет автоматически подбирать максимально релевантные скроллы.

Чтобы детально разобрать свойства мультилендинга, приведем пример.

Пакет услуг iD Home VIP от “Казахтелекома”.

Пакет включал в себя 9 услуг: интернет, ТВ, караоке, сериалы, родительский контроль и т.д.

Это был именно тот случай, когда простым лендингом нельзя обойтись.

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

screenshot_1

Это произошло по той простой причине, что когда пользователь вводил запрос в Google, например, “подключить телевидение”, и переходил по ссылке на лендинг, то  видел скролл, где сразу предлагалось подключить все девять услуг за достаточно большие деньги. Посетитель не понимал, зачем ему это, если он хотел подключить только телевидение. И, соответственно, закрывал вкладку.

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

screenshot_2

Формируйте правильное УТП! Все зависит от того, как вы предлагаете услугу человеку — предлагаете вы ему в лоб купить девять продуктов или говорите: “купи один и еще 8 получи в подарок”. Все любят получать подарки — это всегда приятно. У клиента появится чувство удовлетворения от совершенной покупки. Он заплатил за то, что ему было необходимо, а еще и получил бонус за это.

Это был яркий пример того, как продавать на одном лендинге несколько товаров. Что важно — продавать нужно только похожие между собой услуги. Нельзя на одном лендинге продавать совершенно разные вещи. Пользователь приходит по одному запросу, а видит совершенно другое, скроллит дальше и видит второй продукт, третий продукт. В итоге он просто путается и уходит с вашего лендинга, так и не оставив заявку.

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

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

Состоит этот этап из нескольких подэтапов:

screenshot_3

Разберем каждый этап по частям.

  • Маркетинговый анализ.

Состоит из нескольких шагов:

  • Понять целевую аудиторию.
  • Понять продукт — все плюсы и минусы товара, все преимущества.
  • Мониторинг конкурентов — всегда нужно знать какие условия, какие акции предлагают конкуренты.

Замечу, что лендинг начинается с брифа. Это является фундаментом успеха. При его заполнении не стоит использовать такие штампы, как “пять лет на рынке”, “опыт работы”, “гарантия”, “качественный” и т.д. Это есть везде. Это не ваши уникальные свойства. Такие слова используют все, и они не помогут вам выделиться.

Нужно писать только то, что конкретно отличит вас среди множества ваших конкурентов.

screenshot_12

Мониторинг конкурентов: вбивайте запрос в Google, открывайте платные ссылки (штук 10) и смотрите, что предлагают ваши конкуренты, какие у них офферы, какие акции, какие УТП.

И вот теперь можно начинать разработку структуры лендинга.

Давид Закарян:

Тело лендинга или его скелет — это определенный порядок стандартных элементов, которые выстраивают логическую цепочку доверия и приводят клиента к совершению целевого действия.

screenshot_13

Эта логическая цепочка доверия и называется структурой лендинга или его блочностью.

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

А кроме этого решаем, где расположить CTA-элементы (призыв к действию, кнопки).

От CTA-элементов зависит 50% успеха вашего лендинга. Представьте ситуацию: ваш пользователь прочитал какой-то блок, но не смог найти кнопку.  Тогда он обязательно найдет решение у вашего конкурента, у которого кнопка будет находиться в правильном месте.

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

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

Основные элементы лендинга делятся на две группы:

  • для малоизвестных брендов
  • для крупных брендов

Крупным брендам не нужно доказывать своим клиентам, что они крутые. Им не нужно рассказывать о себе, так как их все уже знают. Они просто предлагают продукт.

Для малоизвестных брендов все сложнее.

Самая шаблонная и рабочая схема выглядит примерно так:

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

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

  1. Доверие — отзывы, кейсы, лицензии.
  2. Футер — контакты, лицензии, ответы на вопросы, карта (не всегда нужна: вашему клиенту может быть вовсе и не нужно знать ваше местонахождение, а карта только увеличивает загрузку сайта).

Фурузон Рахматов:

Копирайтинг:

Основные задачи копирайтера при разработке лендинга.

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

Сбор информации — это то, о чем я говорил ранее. Продукт нужно понимать не так, как подали его в брифе. В брифе может быть только несколько слов, а все остальное не стоит высасывать из пальца. Запрашивайте максимальное количество информации по вашему продукту. Вычитывайте, ищите интересное.

Swot-анализ:  вы должны прекрасно понимать все преимущества и недостатки своего продукта.

screenshot_16

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

Далее УТП. Очень сложная часть, но она обязана быть. Продукт без УТП просто потеряется.

Уникальное торговое предложение должно соответствовать трем требованиям:

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

Разберем примеры.

Казахтелеком, landing page для услуги “Первый семейный тариф”.

Задача: формирование спроса на новую услугу.

Одним из пунктов выполнения этой задачи являлась разработка УТП.

“Первый семейный тариф” — это услуга, которая предоставляет комплексные телеком-услуги для всей семьи: интернет, связь, SMS.

Разработанный вариант:

Счастье семьи в заботе о каждом.

screenshot_17

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

Тариф “Твой Казахстан” — бесплатные, безлимитные междугородние звонки с городских телефонов.

Разработанное УТП: “Заговори всю страну”

screenshot_19

Мы выбрали из 25 вариантов. Но никак не могли найти настолько емкие, связанные между собой слова, чтобы четко подчеркнуть уникальные преимущества данной услуги.

А тут три слова — и все понятно. Никаких лимитов, никаких ограничений, разговаривай сколько хочешь.

Определение ЦА.

Зачем это нужно?

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

Инсайты.

Инсайт – это истинное и кристально точное понимание психологии потребителя. Это то, что им движет, какие у него боли и какие ожидания.

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

Приведу пример.

Некоторое время назад Halyk Bank проводил хакатон, и мы разработали лендинг для продукта «кредиты без залога».

Нам нужно было разработать что‑то, что цепляло бы за живое и привлекало внимание.

Подумайте, какие инсайты используют чаще всего для таких проектов? Возьми кредит на свадьбу, на машину и т. д. и т. п.

Мы решили пойти дальше, выбрали ЦА: людей ближе к 50 годам, а в качестве инсайта взяли нереализованные мечты.

В чем была наша идея?

С возрастом люди понимают, что у них не получилось достигнуть того, о чем они мечтали в молодости.

На этом инсайте мы разработали лендинг по принципу сторителлинга – использовали видео и голосовое сопровождение.

Мужчина рассказывает о том, что он мечтал полетать на параплане, мечтал забраться на вершины гор, побывать на разных уголках планеты, но не получилось. Годы прошли и осадок остался.

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

khalyk

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

Далее, оффер.

По-моему, самая важная часть на лендинге.

Дэвид Огилви говорил, что пользователи читают заголовки в пять раз чаще, чем основной текст. Не зацепит — потеряли.

Есть еще такая статистика, что пользователя можно заинтересовать в течение 5 секунд. Это все к тому, что нужно очень серьезно относиться к разработке оффера.

screenshot_20

Есть более 30 формул, все мы разбирать не будем, а отметим только две.

Оффтоп: кроме формул, есть еще один достаточно простой вариант. Можно открыть лендинги ваших конкурентов — штук 8 -10, и выписать офферы каждого из них. Затем из каждого выбрать самое интересное. Получается пазл, который вы собираете воедино и добавляете свою идею.

Формулы:

До — после- мост.

В нашем агентстве одна из самых распространенных формул.

До — вот твой мир.

После — представь как бы ты жил, если бы твоих проблем не было.

Мост — вот как в этот мир попасть.

screenshot_21

4U.

screenshot_22

Пример:

Первоначальный вариант: комплексный интернет-маркетинг.

Формула:

1U (полезность). Увеличение продаж вашего сайта.

2U (ультра-специфичность). Увеличение продаж с вашего сайта на 200%.

3U (срочность). Увеличение продаж с вашего сайта на 200% за 28 дней.

4U (уникальность). Увеличение продаж с вашего сайта на 200% за 28 дней с помощью комплексного интернет-маркетинга.

Итого: изначально было непонятно, что мы предлагаем. C помощью формулы 4U получилось рассказать человеку все, что он получит от комплексного интернет-маркетинга.

Важная составляющая, как уже и говорил Давид: кнопки призыва к действию — CTA- кнопки. С их помощью конверсию можно увеличить в 5 раз и больше.

screenshot_14

Проблема в чем? Проблема в том, что нельзя продавать в лоб.

Допустим, лендинг продает станки от 200 тыс. до 2-х млн. тенге. Если продавать их в лоб, конверсия будет низкой. Никто не доверит свои деньги сразу, не зная ничего о вас, т.е. не нажмет кнопку купить. А если вы напишите “получить КП бесплатно”, то посетитель оставит заявку, так как вы ни к чему его не обязываете. А дальше все дело в телемаркетинге.

То есть, вызвать бесплатного замерщика куда легче, чем заказать окна. Запросить ознакомительный каталог куда проще, чем сделать покупку. Сделать запрос на примерку проще, чем купить товар.

Когда вы не обязываете человека доставать деньги из своего кармана прямо сейчас, конверсия будет высокой.

screenshot_8

Дизайн лендинга.

Давид Закарян:

О дизайне можно говорить очень долго. Это очень интересная тема. Сфера дизайна развивается очень-очень быстро, а мы безумно отстаем от западных коллег.

Но буду краток. Каким должен быть дизайн?

В этом вопросе у всех своя правда, но для нашего дела есть только один правильный ответ — “Дизайн должен работать”.

На данный момент многие дизайнеры вдохновляются из самых популярных источников, таких как Dribbble, Pinterest, Behance и т.д. Это сайты портфолио. На них размещаются самые именитые ребята и выкладывают свои умопомрачительные работы с невероятными вижуалами и презентацией продуктов.Но! Эти лендинги не работают.

screenshot_23

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

С чего начинается рабочий дизайн?

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

Пример: лендинг “Казком. Без залоговое и залоговое кредитование”.

Все началось стандартно со шторминга, описали каждый продукт, каждый скролл, создали рабочий лендинг. Но в один момент мы подумали: “надо попробовать что-то новое”. В тот момент я увлекался сайтами моды с невероятными вижуалами и сочными бекграундами. И мы просто решили сделать что-то необычное. Основной идеей было поменять мнение людей о кредитовании — предоставить доказательства того, что кредитование помогает реализовать мечту, а не закапывает в могилу.

Мы взяли яркие приятные вижуалы, использовали нестандартные цветовые решения и мотивирующие тексты. Мы утверждали, что вы сможете реализовать все, что захотите.

screenshot_24

Давайте разберем понятия UI и UX.

UX — это то, как пользователь привык пользоваться сайтом, т.е. функционал сайта. UI — это то, как сайт выглядит.

И последняя, но самая важная вещь — это, конечно же, мобильная версия вашего лендинга, или адаптивность, если правильно выражаться.

В свое время соотношение мобильных и десктопных версий было 28% на 72%, а начиная с октября месяца мобильный трафик превзошел десктопный в соотношении примерно 51% на 49%.

Это значит, что если вы используете только одну версию вашего лендинга, вы теряете 50% ваших клиентов.

screenshot_9

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

На этом этапе есть своя UX-часть — анимация.

Какой-то период назад анимация полностью вымерла в разработке лендингов, так как все люди ее просто переиспользовали. Люди потеряли интерес к этому. Сейчас анимация возвращается и она стала гораздо умнее. Если вы знакомы с Google, то знаете, что они используют Material Design. На таких сайтах нет элементов, которые просто выскакивают, светятся. Анимация должна ложиться на дизайн и конкретно отвечать на действия клиента.

Получите бесплатный аудит вашего сайта
или рекомендации по оптимизации бизнеса

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *