Читайте весь гайд по CRO:
Коэффициент конверсии во многом зависит и от UX, а значит, подоплеку для него можно заложить уже на этапе разработки. Поэтому сегодня мы разберем, как добиться хорошего UX с нуля: с базового алгоритма разработки и до советов по оптимизации.
Любая разработка начинается с теории, в частности, перед работой с техническими аспектами важно закрыть все маркетинговые вопросы. Поэтому…
С маркетинговой точки зрения эффективный Landing Page содержит макро- и микро-цели, вписан эргономически в структуру и логику сайта, содержит триггеры конверсий. Это — модель пирамиды из книги «От кликов к продажам» Бенджи Рэбхэна.
С технической точки зрения Landing Page состоит из разных элементов, к которым есть определенные требования. В них давайте и разберемся.
Базово:
Заголовок:
Изображение (видео, картинка или гифка):
Кнопка:
Форма обратной связи:
Цена:
Кейсы:
Отзывы:
Имиджевые триггеры:
Микроконверсии:
Сравнение с конкурентами:
Футер:
Контент:
Формы связи:
Лицо компании:
Впечатление от бренда, желание совершить конверсию, удобство этой самой конверсии и общее мнение потребителя — все зависит от удобства сайта. Поэтому в первую очень нужно отталкиваться от потребностей потенциального клиента и проблем, которые он хочет решить при помощи проекта.
Чтобы понять их, нужно составить портрет целевой аудитории. В ней обычно есть ядро — самые «вкусные» клиенты, которые заказывают регулярно, требуют низких затрат ресурсов со стороны предпринимателя и приносят прибыль. Это ядро включает несколько групп.
Важно! Иногда маркетологи составляют один портрет — это решение подходит, если аудитория очень однородная, что редкость. В основном, чтобы охватить разные сегменты покупателей, лучше выделить несколько портретов.
Вот как выглядит целевая аудитория в общем на нашем проекте-примере:
Возраст: от 20 до 50 лет.
Пол: Женщины.
Характеристики:
Доход: средний и выше среднего (от 300 $/мес).
Болевые точки:
Мы создавали портреты в Google Таблицах, там легко упорядочить разноплановую информацию.
Сначала выделили основные параметры, которые нужны для анализа. Под каждый отведен свой 1 столбец:
Потом создали трех персонажей: у каждого свои особенности, проблемы и манера поведения.
Получилось так:
На этом этапе важно как можно детальнее описать общую целевую аудиторию и выделить персонажей. Подробно об этом этапе мы писали в статье «Целевая аудитория и персонаж покупателя: что, как, зачем» — почитайте ее, прежде чем продолжать.
Когда вы понимаете, кто клиент, можно думать о том, как он будет себя вести. Тут поможет ментальная (она же информационная) карта — Mind map. Майндмэппинг помогает моделировать разные сценарии поведения, которые дадут бизнесу конверсию, а пользователю — удобное получение желаемого.
Продумайте будущие страницы и их взаимодействие между собой: какими они должны быть, откуда куда будет переходить пользователь, в какой последовательности ему нужна информация для достижения макроконверсии. Составьте список микроконверсий, которыми вы сможете подвести пользователя к конверсии, если он не готов покупать сразу.
В процессе пригодятся сценарии, которые мы прописали для персонажей — там мы сформировали потребности, здесь мы формируем решения для закрытия этих потребностей.
Удобный инструмент для майндмэппинга — mindmup.com. Он бесплатный, с простым понятным интерфейсом и возможностью импорта карты на Google Диск. Вот как выглядит информационная структура для нашего проекта:
Дополнительно пропишите прогнозируемый путь от входа на сайт до закрытия сделки:
Многие этот этап игнорируют, а зря. Бумажный скетч интерфейса — самый бюджетный и быстрый способ продумать нюансы и не гробить время технических специалистов + деньги на реальные прототипы.
На этом этапе закладывается основа поведенческих факторов:
К сожалению, бумажных прототипов для WOW! Touch не сохранилось 🙁 Но вот как они могут выглядеть:
Заключительный этап базового UX-проектирования — создание интерактивного прототипа, то есть оцифровка того, что мы на прошлом этапе рисовали карандашиком на бумаге.
Для создания интерактивного прототипа рекомендуем десктопную программу Axure RP: у нее широкий функционал для web- и mobile-разработки и тарифы от 29$/месяц с 10-дневным бесплатным trial-периодом.
Вот как выглядит интерактивный прототип, на основе которого дальше будет создаваться сам сайт:
Слева отображается структура прототипа — вот она:
Если есть фокус-группа, можно уже давать ей прототип на тестирование. Так появится первый урожай фидбеков, чтобы поправить прототип до начала реализации конечного сайта.
Дальше материалы по UX-проектированию передаются UI-дизайнеру. Он отвечает за финальные физические характеристики проекта: условно говоря, какого цвета будет сайт, удобно ли будет кликать по кнопочкам и читать текст. UI-дизайнер доведет наработки «до кондиции» для начала реализации — но только от UX-проектирования зависит, каким будет «фундамент».
Даже самые многообещающие гипотезы по CRO абсолютно бесполезны, если сайт не будет открываться в определенных браузерах или выглядеть криво на мобильных. Потому базовая техническая гигиена — прежде всего.
Как и любые другие, тенденции CRO каждый год меняются, потому что меняется поведение и требования пользователей, на которые оптимизация коэффициента конверсий направлена. Чем больше люди привыкают к хорошему UX, тем сложнее их впечатлить лучшим UX. Уникальность, своевременность и детализированность — 3 принципа, которые определяют качество подхода к UX-проектированию. И вот лучшие способы применить эти принципы.
Исследование eyeviewdigital.com показало увеличение конверсии на 80% благодаря использованию видео на посадочной странице. Неплохая мотивация заморочиться со съемкой и добавлением на сайт, не так ли?
Если вы продаете косметику, покажите ее использование. Hunky Production снимают видео и показывают нарезку примеров работ, что сразу демонстрирует их уровень и качество. Genius Marketing проводят обучающие мероприятия и показывают съемку с конференции, которая передает масштабы действа. WOW!Touch продают бьюти-боксы с косметикой и показывают распаковку бокса: пользователь видит, на что он подписывается. Mobilunity «находят таланты, которые вы, возможно, не можете найти на локальном рынке» и показывают специалистов в неформальной обстановке с короткими подписями, кто и чем занимается. Alba создают интерьеры и показывают пример своей работы.
Конечно, далеко не все могут показывать именно свою работу (если вы занимаетесь пластической хирургией, вряд ли кому-то будет приятно смотреть видео с процессом операции), хотя обыграть можно практически любую тему.
Пара советов, чтобы видео действительно принесло успех:
Если вы развиваете екоммерс-сайт, вы сами знаете, что такое брошенные корзины и как много магазин может недополучать прибыли из-за уходящих в последний момент пользователей. С ними можно (и нужно) работать при помощи разных инструментов, тот же ремаркетинг никогда не устаревает. Но есть способы и «ближе к телу»: оптимизировать страницу чекаута.
По исследованию Baymard Institute, средний задокументированный коэффициент брошенных корзин в онлайне составляет 70%. Причин для брошенных корзин может быть масса: сложный процесс заполнения всех форм, неподходящие варианты оплаты (к примеру, только наличные курьеру с обязательной курьерской доставкой) или доставки (к примеру, доставка только Укрпочтой, брр), отсутствие безопасных платежей… Да что-только-не.
Упрощайте способы покупки и тот самый коэффициент трения, подключайте разные системы доставки и оплаты, если товар со скидкой — до последнего показывайте плашку, сколько человек экономит (в процентах и национальной валюте), не просите информации сверх необходимого. Обязательно используйте нормальные системы платежей — формат «Мы вам перезвоним и скажем номер личной карты», конечно, привычен для СНГ, но все дальше вызывает нотку разочарования у пользователей. И, конечно, делайте все с тестами. Тестирование — залог принятия правильных решений.
Чем более личный подход вы используете, тем больше шансы на конверсию. И в 2019 году есть масса инструментов добиться нужного уровня персонализации.
Самый простой способ, который был актуален и раньше, — сегментация групп объявлений и соответствующих посадочных страниц при помощи SKAg, чтобы таргетироваться на одиночные поисковые запросы. Кастомизация UX-страниц как минимум основывается на классической сегментации пользователей:
В наше время, чтобы впечатлить пользователя, нужно это и даже немного больше. Как кастомизация предложений на основе личной истории покупок пользователя, предыдущих конверсиях, желаемой цены за продукт.
Как это реализовать?
Вариант, который первым приходит на ум, — рекомендательные системы. По кейсам Dynamic Yield, разноплановая оптимизация на 15% увеличила средний доход с пользователя в компании LUISAVIAROMA, а компания Sephora достигла 6-кратного увеличения ROI от рекомендаций товаров на страницах, плюс повышения кликабельности на страницах на 4%. LaModa так вообще получила фантастические результаты в виде 35-кратного увеличения ROI, 15-миллионного (в долларах!) прироста валовой прибыли и 8-процентного увеличения прибыли/сессия как раз таки за счет автоматической персонализации. Даже если не замахиваться на такие масштабы, возможности рекомендательных систем однозначно пригодятся всем.
Еще одна интересная вещь — это автоматическая регуляция цен.
Поведение некоторых пользователей на сайтах может давать системам сигналы, что предпочтительной конверсией для этого пользователя будет предложение со скидкой. Системы типа Smart Price используют искусственный интеллект, чтобы показывать таким пользователям специальные предложения и, таким образом, повышать количество конверсий в магазине. Конечно, вариант не подойдет бизнесам с низкой наценкой, но правильный расчет окупаемости как раз поможет понять, как выгодно использовать этот инструмент, чтобы прирост более дешевых конверсий в итоге оборачивался и повышением общей прибыли магазина.
UGC — это User Generated Content, он же пользовательский контент — тот, который генерируется самими пользователям.
Тейлор Барнум, крупнейший американский шоумен 19 века, сказал замечательную фразу, которая максимально просто объясняет человеческую психологию: «Ничто не привлекает толпу так, как толпа». Воистину так!
Даже обычная публикация отзывов на странице — один из самых эффективных инструментов для повышения количество конверсий. А уж продвинутое социальное доказательство с UGC так вообще может привести к потрясающим результатам.
Если у вас есть база довольных клиентов, пусть они генерируют контент для вас. Это та толпа, которая привлечет к вам толпу.
Как это сделать?
Просто попросить.
Просто попросите пользователей предоставить фото, видео, рассказ о продукте — все, что придет в голову. Каждый тип UGC работает по-разному: что-то лучше, что-то хуже, что-то на одну часть аудитории, что-то на другую. Поэтому чем разнообразнее набор социальных доказательств, тем больше людей он будет охватывать, и тем лучше будут результаты.
Отличными площадками для генерации пользовательского контента стали Инстаграм и YouTube. Впрочем, не стоит забывать и про другие соцсети, а также форумы и системы рекомендаций типа Отзовика или iRecommend. Само собой, не так много пользователей захотят генерировать контент для еще не развитого бренда. Мотивируйте их плюшками: скидками, купонами, розыгрышами и так далее.
Пользовательский контент делает компанию более человечной, вызывает доверие, работает как сарафанное радио, привлекая новых потенциальных и реальных клиентов без финансовых вложений.
Если компания не может ответить на вопросы пользователя, почему он должен хотеть заплатить за ее продукт?
Важно понимать, что не все пользователи, в зависимости от их места в воронке, готовы сами прилагать усилия для поиска ответа: перебирать вопросы-ответы в FAQ, скачивать документы с пояснениями и так далее.
Чем тяжелее выполнить действие, тем меньше шансов, что оно будет выполнено. Это работает всегда.
Хорошее решение, не теряющее популярности последние пару лет, — чатботы. И есть сразу несколько причин, почему они отлично работают на улучшение UX:
1. Постарайтесь максимально сократить время загрузки страницы. Собственно, тут все очевидно. По тесту Walmart.com повышение скорости на каждую 1 секунду приносило 2-процентный рост конверсии. 1 секунда = 2% конверсии. Серьезно, не так ли? Чтобы сайт загружался быстрее, сократите JavaScript и CSS, включите кэширование, уменьшите количество запросов браузера и картинок; используйте сжатие gzip; обновите хостинг при необходимости.
2. Чистите дизайн. Ощущение беспорядка появляется, если элементы дизайна не уложены в модульную сетку или не согласовываются между собой; при переизбытке контента. Чистите дизайн, чтобы он помогал пользователям сфокусироваться на вашем предложении.
3. Не забывайте про пространство после второго экрана: там тоже должны быть кнопки и формы. Обычно первый экран называют самым важным и втискивают в него все. Но никто не делает покупку, увидев фон, пару фраз и кнопку с СТА. Мало того, иногда СТА ниже первого экрана конвертируют лучше: пользователи уже знают что-то о продукте, им проще принять решение про покупку/контакт, потому что они поняли, какую пользу вы принесете.
4. Используйте визуальные указатели. Невероятно просто, невероятно эффективно: в тему поставленная стрелочка, ведущая к конверсии, реально может повышать конверсионность.
5. Информационная структура содержимого должна помогать человеку принять решение. Мы считаем, что вся информация в любом случае подается не скопом, а с разбивкой на логические блоки. Поэтому сейчас речь именно о порядке этих блоков. Универсальная схема может выглядеть вот так: Боль → Решение → Как оно работает → Кому подойдет → Соцдоказательства. Но, как всегда, начинайте работу с анализа и подбирайте варианты, которые подойдут вашему бизнесу. А потом тестируйте их.
6. Проработайте схему читабельности. Есть много паттернов чтения контента в вебе: F-паттерн, паттерн многослойного торта, метки и пропуска, пятнистый паттерн, паттерн обязательности. То, как люди будут читать страницу, зависит от предложения: новости просматривают по одной схеме, бизнес-предложения — по иной. Но этот нюанс тоже важно учитывать. Кроме непосредственно схемы, важна и ширина строки: слишком широкие абзацы читать не удобно. Мы рекомендуем использовать ширину строки порядка 60-75 символов — это как обычный текст на листе А4 при стандартных отступах стандартным шрифтом (12 кегль или чуть крупнее).
7. Оптимизируйте страницу под мобильные устройства. Просто сделать адаптивный дизайн, чтобы страница не разваливалась на смартфоне — это хорошо. Но отлично, если вы учтете разницу поведения пользователей на разных устройствах и соответственно оптимизируете сайт. К примеру, картинки-схемы хорошо смотрятся на компьютере, но на мобильном на них нереально что-то рассмотреть без приближения. А это лишняя задача для пользователя. Экспериментируйте с содержимым страницы конкретно для мобильной версии — и выбирайте варианты, которые будут учитывать специфику устройства и поведения пользователя.
8. Будьте переборчивы с картинками. Особенно с фотографиями людей. Маша из фотостока — это хорошо, но лучше нет. Подписи к картинкам обычно хорошо читаются — используйте их, чтобы повторить важную мысль. Сжимайте изображения и уменьшайте их размер, чтобы они не так сильно сказывались на времени загрузки страниц. Следите, чтобы слишком насыщенное изображение не перетягивало на себя внимание от предложения. И, конечно, картинка должна быть релевантна странице. Как и все остальное.
9. Соотношение внимания должно быть 1 к 1 относительно ссылок. На посадочной странице одна цель — и должно быть только одно место для клика. Избегайте дополнительных ссылок, куда может захотеть уйти пользователь, избегайте дополнительных навигационных панелей. В западной практике на посадочной странице часто нет футера, чтобы пользователь, долистав страницу до конца, не мог уйти по ссылке в нем. А заодно часто нету и хедера, если бизнес монопродуктовый и покупку можно сделать только на одной странице. Чем больше у пользователя возможностей, тем больше шансов сделать не то действие (читай — не сделать конверсию). На практике Unbounce изменение соотношения внимания с 10:1 до 1:1 увеличило CTR на 31%. Если не можете убрать все ссылки, тестируйте, чтобы убрать самые отвлекающие.
10. Креатив — это хорошо, но кнопка с СТА должна выглядеть как кнопка — ее дизайн не должен вызывать сомнения в том, что нужно сделать.
11. Используйте «ленивые» СТА, которые говорят о результате. «Подписаться и получить бесплатный урок» (сложноооо) → «Получить бесплатный урок» (лениво и класс). «Попробовать надцатидневную демо-версию» → «Начать 15 дней демо». Упрощайте.
12. Сбор информации в формах — это угроза для пользователя, поэтому повышайте ее плавно. KlientBoost, которых мы советовали в подборке лучших англоязычных РРС-блогов, используют трехуровневую схему: на первом этапе узнают цели и места рекламирования; на втором — что нужно пользователю (лиды или продажи), месячный расход на РРС и сайт; и только потом — имя, email и номер телефона. Разогревайте аудиторию микроконверсиями до того, как попросить ее сделать тот-самый-последний-шаг и дать вам личную информацию.
13. Вызывайте правильные эмоции. Алвин Хугердийк еще в 2012 году провел потрясающий А/Б/С-тест с кодовым названием «Сила улыбки». Суть в том, что он сделал тестовые страницы с тремя вариантами своего фото: с серьезным выражением лица; с улыбкой; с улыбкой и указанием рукой на фото продукта. Версия с улыбкой повысила регистрации на 1,3%, продажи — на 9,9%, общую прибыль на 10,7%. И это одно фото! Потрясающе.
Вызывать эмоции можно не только при помощи изображений, но и при помощи цветов и их оттенков. Про цвета и их «эмоциональность» мы писали в статье «Брендинг в эпоху локальных марок».
14. Сегментируйте целевую аудиторию не только по ее демографике, психографике и локации, но и по тому, на каком этапе воронки продаж находится пользователь. Персонализируйте коммуникацию с людьми из разных групп или создавайте посадочную страницу, которая будет отвечать на вопросы пользователей с разных этапов воронки.
15. Используйте несколько сценариев для контакта: кроме кнопки контакта, добавьте на сайт номер телефона и всплывающее окно чата. Так люди на разных этапах воронки смогут выбрать подходящий способ взаимодействия: кто-то уже готов сделать звонок, а кто-то согласится только на безопасный онлайн-чат без вербального контакта.
16. Отделяйте свое предложение от негатива. В фразе «Получать рассылку, без спама» читатель в первую очередь видит слово «Спам». И пусть сознательно он смысл уловил, первая негативная реакция до момента осмысления — это ложка дегтя, которая может увести колеблющегося клиента. Убирайте все вещи, которые ведут к негативным ассоциациям, дальше от кнопки СТА, чтобы не создавать преграду на пороге конверсии.
17. Отвечайте на вопрос и не уходите в сторону. Поисковый запрос — это вопрос человека. Когда он кликает на ваше объявление, он как бы задает этот вопрос вам. Сделайте так, чтобы сразу после загрузки сайта он увидел ваш ответ и покажите, что делать дальше — дайте кнопку с СТА. Не заставляйте человека перерывать страницу в поисках ответа — он вряд ли это будет делать, скорее уйдет попытать счастья в следующем сайте из выдачи.
18. Используйте четкий заголовок. Говорите на языке своей аудитории, включайте уникальное торговое предложение, будьте понятны и прозрачны в описании того, какую ценность ваш продукт даст человеку.
19. Убедитесь, что заголовок реально нужен. Если он не полезен аудитории и сделать его полезным не получается, удалите его (но без фанатизма, сначала — тестирование). Бывает, что заголовок совпадает с СТА (или хуже — спорит с ним за внимание на странице). Это плохо, потому что отвлекает пользователя от конечной цели — получить нужное, конвертироваться. Если вы объективно видите, что заголовок не помогает достигать цели, протестируйте версию страницы без него. Возможно, он и правда лишний.
20. Будьте лаконичны и говорите о важном. Отличный пример — Netflix, который на каждой стартовой странице выдает минимум информации, но этот минимум содержит то самое важное, чего достаточно для принятия решения.
21. Объявление и страница должны быть связаны от и до. То есть важно не только то, чтобы они по смыслу совпадали (само собой), но и чтобы они несли один посыл, один месседж пользователю. Ключевые слова, тональность, речевые обороты, другие признаки должны совпадать. Если человек кликнул на объявление в креативном стиле, он явно не хочет видеть канцелярит на странице. И наоборот.
22. Проверьте грамотность всего текста. Дайте проверить ее редактору. И проверьте еще раз. Орфография и пунктуация — это не про снобизм граммар-наци, а про культуру речи и уважение к читателю. А еще про доверие читателя к вам. Сложно доверить деньги компании, которая пишет о себе как о “професионалах” и “высоко класных специалистах”.
23. Оптимизируйте страницу «Спасибо за заказ». Если ваш бизнес предполагает повторные обращения, пользовательский опыт после конверсии также важен. Потому что он влияет на то, вернется сюда человек еще раз или нет. Кроме этого, предусмотрите дальнейшие действия пользователя. Предложите ему подписаться на соцсети, посмотреть другие продукты, отправить чек на почту, почитать полезные статьи по теме… Все, что поможет наладить контакт для дальнейшего сотрудничества и показать, что вы еще можете быть полезны!
И самое главное: ВСЕГДА ВСЕ ТЕСТИРУЙТЕ. А/Б- или мульти-, но тесты нужны всегда. Всегда. Все. Тестируйте заголовки, подзаголовки, описания, копирайтинг, цвета, картинки, плашки, фоны, цвета кнопок, формы кнопок, надписи на кнопках, закругленные углы кнопки и нет, преимущества, характеристики, форматы отзывов, страницы выбора, страницы заказа, страницы благодарности…
Тестируйте все.
Вырабатывайте новые гипотезы и проверяйте их, получив результат — внедряйте и вырабатывайте новую теорию. Потому что только тестирование показывает, что на самом деле приносит конверсии.
Это нормально, когда гипотеза не подтверждается. Класс, можно порадоваться, вы выяснили ее неработоспособность в тесте, а не внедрив ее на постоянной основе.
Любой результат тестов — хороший результат.
Главное, чтобы они были.
Читайте весь гайд по CRO:
(2 votes, average: 5.00 out of 5)
Loading...
Пингвинья редакция
Главные по словам
Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи
Улучшить свой AdWords
Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords
ПодписатьсяВ версии 3.0.0
Основные комбинации
In version 3.0.0
Key combinations
В версии 2.0
In version 2.0:
Несколько шагов до работы в Penguin
Заполните форму
Несколько шагов до работы в Penguin
Заполните форму
