Как сделать техзадание на лендинг
Тз для лендинга: пример и объяснения
Леонид Родинский
Стадия составления технического задания для создания продающей страницы – этап, незаслуженно задвигаемый в сторонку и заказчиками сайтов, и разработчиками проектов. Первые просто не знают, с какой стороны подступиться к этому делу и относятся к написанию брифа, как ко второстепенной задаче. Вторые – исполнители – зачастую берут эту работу на себя, ограничивая участие клиентов заполнением листа с набором стандартных вопросов.
Польза такого подхода неоднозначна. С одной стороны, заказчик огражден от муторной работы по формулированию смыслов создания своего лендинга, а исполнитель не дожидается нужный для начала работы документ. С другой стороны, заказчик проходит мимо понимания, что техническое задание определяет весь ход дальнейших действий и служит существенным фактором качества создаваемого сайта. Если хотите, сравним это с искусственным оплодотворением – результат будет, но процесс, скажем обтекаемо, несколько неполный.
Рассмотрим пункты технического задания на создание продающего одностраничника и поясним их важность.
Решения для привлечения клиентов
Вам будет интересно
Сведения, включаемые в бриф на создание лендинга
Отдельно рассмотрим еще несколько вопросов, непосредственно влияющих на качество составления технического задания для продающего лендинга.
Система управления контентом (CMS). Пользователи, запускающие первый проект, часто забывают про движок сайта, а к нему нужно отнестись серьезно и продумать заранее. После сдачи лендинга на заказчика ложится обязанности его администрирования и здесь удобство CMS выйдет на передний план. Поэтому в техзадании его желательно указать.
Вторая деталь – доменное имя и хостинг. Не забудьте внести этот пункт. В противном случае размещать проект в сети будете самостоятельно, а это весьма специфическая работа.
И последнее. В техническом задании оговорите необходимость создания контента для посадочной страницы. Имеет значение все – тексты, анимация и видео, качественные изображения для получения которых желательно организовать отдельную профессиональную фотосессию.
Требования к изображениям для лендинга
Чем способен выделиться продающий сайт на фоне себе подобных, в достаточном количестве представленных в интернете. Торговое предложение – едва ли. Если, конечно, вы не производите авторские украшения и не имеете достойных конкурентов в своей нише. Уровень сервиса или других сопутствующих услуг – действительно, здесь можно найти свою «фишку» и привлечь покупателя (клиента). Но мы-то говорим о выделении сайта. Прежде чем оценить ваше предложение, посетителя следует заставить с ним ознакомиться, заинтересовать внешним видом. И здесь первостепенное значение играют элементы оформления сайта – дизайн, программные эффекты, цветовые решения и, конечно, фотографии.
Об изображениях для лендинга в следующей статье.
Как составить техническое задание для landing page?
На просторах всемирной сети можно найти несметное количество различных руководств по дизайну лендингов. Однако в большинстве случаев они представляют собой лишенные контекста изображения, либо, наоборот, сплошную теорию без наглядных примеров. Данное руководство представляет собой попытку совместить и то, и другое. Наличие надежного технического задания поможет сформировать четкое представление о вашей работе и обосновать идеи.
В качестве примера в этой статье будет рассмотрено создание ТЗ для лендинга компанией Verse для своего будущего мастер-класса по дизайну Process. Весь процесс разделен на 3 этапа — определение целей и конечного пользователя, нюансы реализации и итеративные изменения.
Содержание статьи
Цели и понимание пользователя
На этапе планирования вы определяетесь с целями, получаете представление о том, кто ваши пользователи и как вы можете быть им полезны. Эта информация будет служить вам своего рода путеводной звездой, которая не даст сбиться с верного пути.
1. Постановка целей и задач
В первую очередь, вы должны сформулировать свои цели. И не просто какие-то цели, а SMART-цели — те, которые отвечают следующим характеристикам:
Однако не все ваши цели обязаны быть SMART-целями, некоторые из них могут быть исключительно качественными. Например, хорошее сочетание — это 75% SMART-целей и 25% качественных целей.
Ниже приведено несколько примеров общих целей, которые были использованы Verse:
2. Кто ваши пользователи
Для того, чтобы пользователи заинтересовались вашим landing page, вы должны сперва понять, кто они, каковы их мотивации и потребности.
Ключевая аудитория подобных мастер-классов — это дизайнеры, занимающие различные должностные позиции и имеющие разные мотивации. Verse разделила аудиторию на две большие группы — основные и второстепенные пользователи, и выделила в каждой из них несколько портретов потенциальных клиентов:
Таблица 1. Основные пользователи
Таблица 2. Второстепенные пользователи
3. Уровень вовлеченности пользователей
Ваш лендинг будут посещать пользователи с разной степенью вовлеченности (engagement), и это тоже нужно учитывать при составлении технического задания. Что вы можете предложить людям для достижения поставленных вами целей?
Рассмотрим, как разделила своих пользователей компания Verse.
Пользователи с высокой степенью вовлеченности
Знают о Verse
Видели готовые работы на сайте компании
Являются частью сообщества
Что вы могли бы им сообщить и предложить?
Пользователи со средней степенью вовлеченности
Видели работы на Dribbble, Behance, Pinterest, Designspiration и т.д.
Не знакомы с сайтом Verse
Что вы могли бы им сообщить и предложить?
Пользователи с низкой степенью вовлеченности
Пользователи, не имеющие понятия, кто такие Verse и что это за курс
Что вы могли бы им сообщить и предложить?
Как вы можете видеть, чем меньше вовлечен пользователь, тем больше вам нужно общаться с ним.
Совет: если на вашей посадочной странице есть форма подписки, подумайте о том, чтобы предложить пользователям нечто ценное в обмен на их адрес электронной почты.
Итак, что вам понадобится, чтобы удовлетворить цели пользователя и ваши собственные:
4. Пользовательские истории
Пользовательские истории (user stories) похожи на образ покупателя, за исключением того, что они более конкретны и действуют как более функциональное требование. Однако ключевым отличием здесь является акцент на том, чего хочет пользователь, а не просто на том, каковы технические требования:
Можно сделать даже лучше, заменив пользователя определенной целевой аудиторией, например: как креативный директор, я хочу…, [потому что. ].
Техническая реализация
Итак, вы определились с целями и составили максимально четкий портрет потенциального клиента, а значит, подошло время работы на основной частью технического задания — нюансами реализации.
1. Поиск подходящего шаблона
Ищите все, что может оказаться вам полезным: шаблоны проектирования, вещи, которые работают, нравятся, могут иметь отношение к проекту. Сохраняйте себе все это и возвращайтесь по ходу работы. Это ваш источник вдохновения, который поможет вам в формировании ваших собственных идей. Платформа LPgenerator, помимо конструктора, открывает доступ к галерее готовых страниц, где представлены лендинги по целому ряду востребованных категорий.
2. Структура и взаимодействия
Продумайте структуру страницы, а также все пользовательские взаимодействия и компоненты, необходимые для достижения поставленных целей.
Разработайте схематичный макет и переходите к визуальной составляющей. Последовательность в случае с Verse следующей:
Несомненно, в ходе проектирования появлялись новые идеи и структура сайта менялась. В этом и состоит прелесть работы над собственным проектом: вы всегда можете вернуться назад и изменить его.
3. Визуализация
За основу лендинга была взята сетка (grid) и холст (canvas) сайта Verse, а также используемые в его дизайне шрифты Chronicle Display и Gotham.
Начните с проработки одной какой-то детали (в описываемом примере это была типографика) и, как только вы будете ей довольны, переходите к следующей, постепенно выстраивая все детали вокруг этого одного ключевого визуального элемента. Изначально холст выглядел примерно так:
Чтобы пользователь мог сразу увидеть, как выглядит курс, был добавлен скриншот:
Получилось довольно неплохо, но еще было над чем поработать. Акцент был сильно смещен влево и также не хватало динамичности:
Этот вариант показался Verse наиболее подходящим. Но поскольку прав на изображение macbook у авторов не было, они воссоздали нечто похожее с помощью векторных фигур.
Параллельно шла работа над остальной частью посадочной страницы. Были размещены несколько скриншотов из мастер-класса в виде карточек. Кроме этого, пользователю разъяснялось, что он получит из данного курса:
Получившийся в итоге вариант отнюдь не был окончательной версией. Сверившись с изначальными целями и задачами, авторы разработали новую версию страницы. По сравнению с первой она лучше передавала ценность курса. Кроме того, было добавлено больше интерактивных элементов, чтобы вовлечь пользователя и таким образом повысить количество расшариваний страницы.
Вот как выглядел лендинг в итоге:
Изменения и итерации
Вы подошли к тому моменту, когда вы, наконец, запускаете посадочную страницу. Ваш лендинг еще не идеален, но только поместив его в живую среду и получив обратную связь от пользователей, вы поймете, что может быть еще улучшено вами. Изменения и итерации (iterations) — ключ к успешным сайтам и продуктам.
Обратите внимание, что информация представлена здесь в виде линейного процесса лишь с целью более легкого ее восприятия и усвоения. На практике же в большинстве случаев приходится часто возвращаться назад, и, кроме того, многие шаги могут происходить одновременно.
Стремление к совершенству — это хорошо, но если исправление 1% по времени занимает столько же, сколько и выполнение 99% всего остального, лучше оставить все как есть. Даже если это не 1%, а все 10% — лучше запустить продукт и периодически совершенствовать его (подробнее про MVP-подход). Надо понять, что ничто никогда по-настоящему не бывает завершено, оно может считаться завершенным лишь на данный конкретный момент. Цифровое пространство постоянно меняется, и создаваемые вами продукты также должны меняться.
Оставаться открытым к изменениям и постоянная оптимизация — то необходимое, что вы должны делать, если хотите добиться высоких результатов. Определяйте цели своей кампании, изучайте аудиторию, а выбрать шаблон, персонализировать его под ваше техническое задание и протестировать изменения в ходе каждой итерации вам поможет наша платформа.
Составляем ТЗ для лендинга. Часть первая.
Практически у каждого образовательного проекта рано или поздно возникает потребность в лендинге. Целевая страница (landing-page) — это веб-страница, основной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге.
Сделать лендинг можно самому или передав его компетентному специалисту. И в том, и в другом случае вам понадобится составление Технического Задания. Да, да — не удивляйтесь! Даже тем, кто предпочитает делать все самостоятельно, без участия сторонних подрядчиков, ТЗ здорово облегчает жизнь.
Чаще всего ТЗ выглядит как длинный текст с кучей заголовков, схем и элементов. Для его создания чаще всего привлекают такие человеческие качества как импровизация, визуализация и воображение. Заказчик просто старается описать как должен выглядеть лендинг его мечты, зачастую не понимая, что исполнитель обладает техническим складом ума и быть на чувственной одной волне с заказчиком просто не умеет.
Во втором случае в ход идут шаблоны для составления ТЗ, обладающие определенной структурностью, но при этом не всегда обладающие именно той структурностью, которую вообразил себе будущий владелец лендинга.
Именно поэтому IBaza придумала альтернативное решение, которое поможет и той, и другой стороне понять друг друга и сделать все с минимальными затратами нервных клеток. Наш шаблон технического задания для лендинга сделан на основе таблицы в котором структура лендинга разделена на экраны, а экраны соотвественно на блоки, к которым вы можете добавить описание, детали и ссылки.
Работа с ним максимально проста и лаконична:
Скачать шаблон можно здесь, мы будем дополнять данный шаблон по мере поступления новой информации или изменения в трендах. Помните о том, что нужно расположить блоки в правильном для вас порядке.
А теперь давайте рассмотрим из чего состоит грамотный Landing-page и из каких блоков его можно собрать!
Любой лендинг делится на 2 простые части:
Задача первой части — вызвать у посетителя тотальный интерес. Нужно, воздействовать на оба полушария мозга, но прежде всего на то, которое отвечает за эмоции. Первый экран нужно сделать так, чтобы посетитель подумал: «Вау, как они это делают?».
Во второй части давим на полушарие, отвечающее за информацию с логикой. Важно убедить пользователя в вашем предложении, которое он увидел в первом экране. Наша цель — получить контакт, регистрацию или покупку продукта.
Выполнение цели второй большой части может занять много следующих экранов, обязывает приводить факты, цифры, знакомить с командой, продуктом и проектом, формировать блоки подтверждения выгод и закрытия возражений.
Первый экран: правило 3 секунд внимания
Первый экран — среднестатистическая высота экрана ваших посетителей, которая в 90% детскопного трафика составляет в среднем 700 пикселей. Каждый из нас сегодня представитель эпохи скроллинга, мы листаем источники информации интуитивно, проллистывая все, что может быть хоть несколько потенциально неинтересно. Вспомните, как вы ищете что-то в интернете?
Самые распространенные блоки, которые используются в этом экране:
Выбирая, что будет на первом экране обязательно задайте себе вопрос — какую информацию ваша целевая аудитория захочет увидеть в первый момент и не захочет искать ее на длинном лендинге?
Заголовок и подзаголовок.
Что это такое и с чем есть?
Самый важный элемент, который влияет на конверсию. Заголовок для лендинга отвечает за формирование интереса пользователя. Прочитав его, посетитель решает, смотреть ли сайт дальше.
3 самых популярных способа создания заголовков — это 4U и 3B и 2М.
1 способ — 4U
Usefulness (Полезность)
Напишите, какую выгоду получит человек, если совершит нужное вам действие. Почему именно с вами он решит свою проблему? Продавайте не дрель, а дырку в стене. Единственно, что нужно от вас – дать решение проблемы посетителя. Это 1U.
Urgency (Срочность или Актуальность)
Актуальность есть соответствие заголовка Landing Page и проблемы клиента. Если пользователь что-то начал искать, то, скорее всего, это нужно ему было вчера. Большинству горячих клиентов из рекламного трафика (например, Яндекс Директ, Google Adwords) нужно то, что они ищут, прямо сейчас. Поэтому актуальность и срочность это 2U.
Uniqueness (Уникальность)
Ваши посетители просматривают множество страниц. Согласно одному из докладов Тима Эша (профессиональный маркетолог и один из лучших специалистов по конверсиям), работает это так:
Если Ваш заголовок похож на тот, который уже где-то видели, вы теряете клиента и снижаете конверсию. Информацию даже изучать не будут. Уникальность обязательна! Все продают красный кирпич, а вы продавайте зеленые, фиолетовые, да хоть с бабочками. Дайте клиентам что-то новое. Покажите технологии или нечто такое, за счет чего вы эффективно решите его проблему, причем путь решения — лучший на рынке. Это 3U.
Ultra-specificity (Ультра-специфичность)
Конкретизируйте полезность в цифрах. Важно показать, как именно вы решите проблему пользователя. Продемонстрируйте, сколько, чего и где получит посетитель. Это 4U.
Пример: возьмем исходный заголовок «Дизайн интерьеров», который не представляет собой ничего цепляющего и примечательного и переделываем по технологии 4U— Профессионалы индивидуально разработают дизайн интерьера, в который Вы захотите возвращаться, сэкономив 30% бюджета за 2 недели.
Продающий заголовок: 3В
Речь идет о том, что можно просто комбинировать выгоду. Формула выглядит примерно так: Выгода + Выгода + Выгода = Успех.
– Зарабатывайте на 30% больше уже через 1 день после аудита вашего УТП
– Делайте молочные коктейли за 1 минуту у себя дома с блендером
– Увеличим прибыль вашего сайта в 2 раза с технологией создания заголовков по 4U
Технология 3. Создание заголовка: 2М
Сделай Минимальные усилия – получи Максимальные результаты.
– Как продать автомобиль за 3 часа на 10% выгоднее, не выходя из дома
– Как заработать 1000 рублей лежа на диване за 1 день
– Как увеличить конверсию в 2 раза за 10 минут без вложений
Итак, мы научились создавать крутые заголовки для первого экрана. Чек-лист хорошего заголовка:
– Заголовок: Зарабатывайте на 30% больше уже через 1 день после аудита сайта профессионалами.
– Подзаголовок: Все еще не хватает на новый Феррари? Звоните прямо сейчас, и мы увеличим ваши продажи.
Пример, как это может выглядеть:
Подзаголовок
По сути это тот же заголовок, который является дополнительным элементом. Он нужен, чтобы:
– описать подробнее, чем занимается компания, если предлагается сложный продукт или услуга;
– выделить еще одну значимую выгоду;
– усилить боль потенциального клиента.
– Заголовок: Зарабатывайте на 30% больше уже через 1 день после аудита сайта профессионалами.
– Подзаголовок: Все еще не хватает на новый Феррари? Звоните прямо сейчас, и мы увеличим ваши продажи.
Пример, как это может выглядеть:
Блоки для экранов
Данные блоки подойдут в первую очередь для первых экранов, но они подойдут и для вторых. Расположите выбранные блоки правильно в нашем шаблоне и опишите их как можно более подробно. В результате вы получите готовое ТЗ.
Логотип — фирменный товарный знак, оригинальное начертание, а также полное или сокращённое наименование фирмы, группы товаров этой фирмы и т. п. Он отнюдь не обязательный элемент лендинга для образовательного проекта\продукта, но очень хорошо, если он есть, ведь он формирует формирует зрительную узнаваемость компании, участвует в создании общего корпоративного стиля.
Помните, что кнопка «Заказать звонок» должна вести на лид-форму с заполнением контактных данных, обязательно пропишите это в ТЗ.
4. Меню — не обязательный, но желательный элемент лендинга. Меню на целевой странице не перекидывает на дочерние страницы, а переносит на необходимый блок. Если у вас нет желания делать меню, можете «прописать» навигацию другим способом: с помощью цветового выделения блоков к примеру.
6. СТА — кнопка + призыв к действию, если не углубляться, это все, что можно сказать о данном элементе. СТА должно гармонизировать со всей страницей.
На кнопке размещаем СТА или призыв к действию.
Когда вы выбираете слово для призыва к действию, подходите к этому со всем вниманием, не используйте шаблонные слова и помните, что вы обращаетесь к вашему клиенту, выбранное СТА должно подходить стилю общения с аудиторией и отвечать планке позиционирования проекта.
Хорошо:
– Начать зарабатывать больше
– Исполнить мечту
– Получить мой подарок
– Увеличить продажи
– Получить бесплатно
– Принять участие
— Проконсультироваться
— Поступить на курс
7. Лид-форма — блок, с помощью которого пользователь вносит нужные данные для регистрации. Форма состоит из следующих элементов:
Заголовок формы – это CTA, про которое вы читали выше. Чтобы определить текст заголовка: что я предлагаю посетителю? Ответьте на него и пишите в заголовок формы.
Подзаголовок формы – это подтверждение выгоды. Почему важно заполнить форму прямо сейчас? Что ценного получит пользователь? Подзаголовок не является обязательным элементом, если все уложилось в заголовок. Лишнее убирайте.
Поля – это данные которые критически необходимы для связи с потенциальным клиентом. Помните: чем больше полей, тем ниже конверсия. Лучше 1 поле, оптимально сделать 2 поля – e-mail или телефон + имя (как обращаться).
Поля контактов (телефон/e-mail/skype/профиль в социальных сетях) Что-то одно может быть обязательным к заполнению. Остальные поля должны быть не обязательными.
Кнопка – призыв к действию. Она покажет, что получит пользователь, если нажмет на нее, что произойдет после нажатия.
Подпись – последний шанс развеять сомнения пользователя. Что здесь стоит указать? Социальное доказательство (более 3000 подписчиков), сроки (перезвоним через 5 минут), выгоды (бесплатно), важные детали (14 дней бесплатный период).
7. УТП — выдающаяся характеристика продукта или бренда, на котором выстроена рекламная кампания образовательного бренда.
Расположение УТП в шапке лендинге — распространенный и действенный прием, который используют многие проекты edTech.
8. Акция — все знают о силе проведения акций. Что может быть лучше для продаж, нежели снижение цены?
9. Изображения\видео — в структуре любого лендинга всегда присутствует графика. Изображения крайне важны, они работают на эмоции и иллюстрируют предложение. У любой картинки должна быть цель. К фоновым изображениям это также относится. Нельзя просто так лепить все подряд для демонстрации работы над дизайном.
Основное в изображениях — это качество. Не обратили на него внимание, не устранили шумы, выбрали нечеткую картинку, видны пиксели, забыли про водяные знаки? Ваша конверсия мертва!
Главные характеристики картинки:
Видеозаписи не всегда стоит использовать на лендингах. Исключение составляют в основном отзывы, так как эмоции полноценно не передать через текст, и презентация продукта, если он из разряда «лучше один раз посмотреть».
Использовать видео, чтобы продемонстрировать закулисье вашего образовательного проекта — отличный прием, если ваша команда вкладывает много сил в проект и вы снимали биографические ролики его создания.
Если у вас длинный лендинг — видеоролик позволит не заскучать и не уйти от вас через пару минут, но стоит сделать упор как на качество контента, так и на его динамичность и информативность. Люди ценят напичканные информацией видео, так как посмотреть сейчас стало проще, чем прочитать.
Фоновые ролики тоже хороший способ не дать расслабиться и отвлечься глазам, но нужно учитывать особенности целевой аудитории, прежде чем это использовать.
Несколько советов для создания и использования видео для лендинга:
10. Идентификация
Этот раздел призван для того, чтобы показать посетителям лендинга насколько полезен и нужен им предлагаемый продукт. Вы определяете аудиторию, с которой работаете, и позволяете пользователю определить сходу, входит ли он в нее. Делается это в лоб, без объяснений и вычитывания лендинга. Клиентам не нужно разбираться. Экономьте их время, и они скажут вам «спасибо». Это сблизит вас с ними, поднимет продажи.