Дизайн лендинга: Принципы дизайна лендинга // Создание Landing Page

Каким должен быть дизайн лендинга? 10 советов поведенческого психолога

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

В итоге человек, нащупавший ногу слона, утверждал, что тот похож на столб. Другой, поймавший слона за хвост, говорил что тот напоминает веревку. Третий нащупал ухо, и решил, что слон похож на лист большого дерева. Четвертый ощупывал живот слона, и ему показалось, что тот напоминает стену. Пятый поймал животное за хобот и решил, что слон похож на ветку дерева. А последний, ухвативший слона за хобот, решил что животное напоминает трубу или горн. «Каждый из вас прав, — ответил король, — проблема в том, что вы описали только часть слона».

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

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

Данная статья основана на «видении слона» от Сьюзан Вайншенк (Susan Weinschenk), обладателя Ph.D. по психологии и популярного блогера.

• Введение в юзабилити

1. Люди не хотят прилагать больше усилий, чем это необходимо

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

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

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

• 10 ошибок юзабилити-тестов, которые должен знать каждый маркетолог

2. У человеческого восприятия есть ограничения

Люди могут прочесть большое количество информации, не потеряв к ней интерес — но для этого маркетологам придется постараться.

Убедитесь, что факты, изложенные на вашем лендинге, легко проверить, и тогда избежите обвинений во лжи.

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

Большинство людей не может выполнять несколько задач одновременно — это подтверждает целый ряд исследований. Так что не ожидайте от своих пользователей выдающейся способности к многозадачности.

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

• Психология текста: шрифт, цвет, форматирование

3. Люди ошибаются

Можно сказать с абсолютной уверенностью, что посетители будут совершать ошибки на вашем лендинге — и что эти ошибки выведут их из себя. Просто попробуйте спрогнозировать, на каком этапе взаимодействия наиболее вероятны неточности, опечатки и прочие ошибки. Выяснив это, настройте подтверждение перед определенными действиями, и сделайте доступной возможность вернуться к предыдущему шагу (функция «Отменить»).

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

Если выполнение какой-либо задачи стандартно вызывает множество ошибок, разбейте ее на более простые действия.

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

• Как кнопка «Назад» способна уничтожить юзабилити сайта?

4. Не доверяйте человеческой памяти

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

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

Люди держат в памяти одновременно только 3–4 элемента. Правило «7+-2» — это своеобразный маркетинговый миф, который опровергают последние исследования.

• Пользовательский опыт и юзабилити на сайтах eCommerce

5. Люди — существа социальные

Человек всегда будет использовать технологии для общения в социуме — это правило неизменно уже тысячи лет. Каждый из нас ориентируется на окружающих в своих поступках — особенно если нет твердой уверенности в выборе. Это называется «социальная проверка» — вот почему разнообразные рейтинги и обзоры оказываются в топе на большинстве блогов.

Люди, выполняющие какое-либо действие одновременно, получают связь на уровне химических реакций в мозге — это называется «синхронное поведение». Смех также связывает людей.

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

Когда вы смотрите на человека, выполняющего определенное действие, в вашем мозге активируются те же участки, словно вы делаете это самостоятельно (здесь играют роль так называемые зеркальные нейроны).

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

Вы можете иметь крепкие связи с ограниченным количеством контактов. Лимит — 150 человек, однако, можно установить многие тысячи слабых связей (пример: Facebook).

• Социальные доказательства на Landing Page

6. Внимание

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

Людям свойственно обращать внимание на все новое и необычное — оформив важные элементы в непривычном стиле, вы выделите их в глазах посетителей.

Однако некоторые очевидные изменения могут выпасть из поля зрения клиентов. Например, есть несколько забавных видео в интернете, где человек общается сразу с несколькими людьми, не замечая, что они сменяют друг друга в процессе разговора.

Обычно такая «слепота» свойственна при выполнении рутинных действий или общении с персоналом (секретарь за стойкой регистрации, промоутер в торговом центре — мало кто запоминает их лица).

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

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

• Оптимизируйте пользовательский опыт — не только конверсию

7. Люди жаждут информации

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

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

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

• Как оптимизировать дизайн лендинг пейдж на основе принципов айтрекинга?

8. Бессознательные процессы

Большинство психических процессов происходит бессознательно. Если вы возьмете с людей обязательство выполнить небольшое и простое действие (например, бесплатная подписка), то они вероятнее воспользуются более важными предложениями в дальнейшем.

«Древний мозг» (его также называют «мозгом рептилии») влияет на большинство наших повседневных решений, но заботится он только о выживании и размножении: пища, секс, борьба с опасностью. Вот почему эти 3 темы максимально захватывают внимание и наиболее распространены в рекламе.

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

Например, некоторые люди, услышав в постороннем разговоре слова «отставка» или «усталость», могут неосознанно замедлить шаг.

Поэтому рациональные мотивы часто не влияют на наш выбор и поступки.

• Изображения как продающий контент

9. Люди создают ментальные модели

У каждого из нас наработаны ментальные модели для различных объектов и задач (оплата счетов, чтение книг, переключение каналов на ТВ).

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

Для того чтобы улучшить пользовательский опыт, вы должны либо подстроиться под ментальные модели посетителей, либо дать им другую модель. Адаптировать клиентов к продукту или интерфейсу помогут метафоры. Например: «Это так же просто, как открыть книгу».

Изучение ментальных моделей вашей целевой аудитории — веский повод для тщательных тестов.

• Почему стереотипныe лендинги и сайты конвертируют лучше?

10. Визуальные системы

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

Объекты, расположенные рядом, интуитивно воспринимаются как связанные между собой.

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

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

Самое сложное для восприятия сочетание цветов — синий и красный. Старайтесь не использовать их рядом.

Люди лучше воспринимают объекты, когда те расположены под небольшим углом и чуть выше в перспективе.

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

Высоких вам конверсий!

По материалам uxmag.com, image source Jason Trbovich 

03-09-2014

Дизайн лендинга или landing page

Типичные ошибки
Основные заблуждения
Активные кнопки и поля ввода
Вместо заключения

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

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

Типичные ошибки

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

• непрофессиональным подходом к созданию лендинг пейдж;
• невнимательностью к мелочам;
• отсутствием вкуса;
• стремлением к «вау-эффекту».

Как результат – вместо расширения клиентской базы наблюдается застой и даже потеря имеющихся клиентов. Если вы выставляете свой ресурс на суд общественности, будьте готовы к строгой оценке.

В создании профессиональных landing page важно соблюдать простоту. Чтобы ресурс выделялся из общей массы сайтов, вовсе не нужно разрисовывать его множеством красок, украшать непонятными узорами, большими шрифтами и т.п.

Успех лендинг пейдж – понятный, простой для восприятия, приятный дизайн. Еще одна распространенная ошибка – перегруженность страницы. Информация на landing page должна быть строго дозирована. Обилие видео, всплывающих окон, флэша и прочих подобных элементов – неуместные излишества. Сайт должен быть легким, быстро загружающимся и корректно отображающимся на любом устройстве.

Очень частая критичная ошибка – опечатки. Можно в деталях продумать вид, подобрать графические материалы, создать цепляющий текст, но если при этом в нем останутся ошибки, опечатки, неточности о повышении конверсии вряд ли придется говорить. Landing page представит компанию не в лучшем свете. Такая страница не вызывает доверия, а значит, не будет роста посетителей, увеличения количества звонков, объемов продаж и т.д. Дизайн лендинг пейдж должен не только вызывать позитивные эмоции, но и обеспечивать необходимую оптимизацию с целью повышения конверсии и привлечения клиентов.

• 4 ошибки лендостроения (и как их избежать)

Основные заблуждения

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

Пользователь мыслит по схеме «дорогой сайт – дорогой товар» и стремится найти что-то более доступное.

Это заблуждение. Находиться на удобном и весьма привлекательном ресурсе приятно каждому с точки зрения эстетики. А то, что при безупречной обложке «начинка» остается доступной, лишь порадует потенциальных клиентов. Еще один стереотип – «простой сайт не может быть красивым». Это очень опасное заблуждение, которое зачастую и порождает landing page с массой непонятных элементов, надстроек, безвкусной комбинацией цветов, картинок и прочих элементов. Чем проще сайт, тем легче сосредоточить внимание на главной идее, актуальном предложении. Люди субъективны. Зачастую они судят лишь на основании того, что видят, а значит, при помощи landing page нужно им показать именно то, что они ищут.

• 10 мифов о лендинг пейдж, которые разбиты вдребезги

Активные кнопки и поля ввода

Landing page – это не только приятная цветовая гамма, разборчивые шрифты и грамотно подобранные картинки. Гораздо важнее правильно расположить каждый обязательный элемент.

В их числе – заголовки. Они должны быть яркими, емкими и бросающимися в глаза. Не менее заметными должны быть кнопки. По мнению специалистов наиболее оптимальным считается расположение кнопок под текстом, содержащим скрытый призыв к покупке. Важны форма и цвет кнопок. Избегайте острых углов. Они выглядят агрессивно. Кнопки должны быть прямоугольными с закругленными краями или же круглыми. Стимулирующими к нажатию цветами считаются оранжевый, зеленый и желтый. В них скрыт положительный призыв.

Очень важно грамотно проработать поля для ввода контактной информации. Цель landing page – получить контакты пользователя.

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

• Путеводитель по оптимизации лид-форм

Вместо заключения

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

Высоких вам конверсий!

image source: Photomaginarium

27-12-2015

Просмотрите тысячи изображений Landing для вдохновения в дизайне

1. Дизайн веб-сайта Tokenex: бизнес-целевая веб-страница, дизайнер сайтов

2. Дизайн веб-сайта Atopa: бизнес-целевая веб-страница, дизайнер сайтов

3. Дизайн веб-сайта Oucher: целевая страница / интерфейс домашней страницы

4. Дизайн веб-сайта Investar: целевая страница / интерфейс домашней страницы

5. Дизайн веб-сайта Virtuality: целевая страница / интерфейс домашней страницы

6. Дизайн веб-сайта NXN: целевая страница / интерфейс домашней страницы

7. Дизайн веб-сайта Greenfly: дизайнер лендингов для бизнеса

8. Дизайн веб-сайта Lysena: целевая страница / интерфейс домашней страницы

9. Веб-дизайн: пользовательский интерфейс целевой страницы

10. Дизайн целевой страницы: интерфейс веб-сайта

11. Дизайн веб-сайта Financilux: целевая страница / интерфейс домашней страницы

12. Clearbit Website Design бизнес-целевая веб-страница, дизайнер сайтов

13. Целевая страница электронного обучения

14. Концепция целевой страницы

15. Дизайн веб-сайта Ninox: бизнес-целевая веб-страница, дизайнер сайтов

16. Дизайн веб-сайта Rello: целевая страница / интерфейс домашней страницы

17. Дизайн веб-сайта Boostio: целевая страница / интерфейс домашней страницы

18. Puzzle Website Design: бизнес-целевая веб-страница, конструктор сайтов

19. Дизайн веб-сайта Crypzone: целевая страница / интерфейс домашней страницы

20. Дизайн веб-сайта Payarc: целевая страница / интерфейс домашней страницы

21. Studio Website Design: Маркетинговая целевая веб-страница, дизайнер сайтов

22. Дизайн веб-сайта Clearbit: дизайнер лендингов для бизнеса

23. Драгоценный дизайн веб-сайта: целевая страница / интерфейс домашней страницы

24. Веб-дизайн: пользовательский интерфейс целевой страницы

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще. ..

Как создавать страницы, которые конвертируют (2023)

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

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

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

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

Познакомьтесь с экспертами

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

• Эзра Файерстоун , основатель Smart Marketer и соучредитель и генеральный директор BOOM от Синди Джозеф : Эзра усовершенствовал целевую страницу на основе экспериментов и тестирования на страницах продуктов собственного мега-успешного магазина Shopify магазина BOOM. Его опыт в маркетинге проистекает из его собственного проверенного опыта цифрового маркетинга, который используется в курсах, преподаваемых в другой его компании, Smart Marketer.
• Ben Labay , Управляющий директор/CRO и экспериментатор в Speero by CXL: Бен – квалифицированный исследователь и эксперт в области оптимизации конверсии. Его опыт подтвержден более чем 10-летним опытом работы в академических кругах.
• Michael Aagaard , CRO-консультант и бывший старший специалист по оптимизации конверсий в Unbounce: Майкл работает в области оптимизации конверсий с 2008 года. Он является экспертом в исследованиях конверсий, используя результаты реальных проб и ошибок для поддержки своих знаний и рекомендаций.
• Ник Шарма , генеральный директор Sharma Brands : Ник помог заработать более 100 миллионов долларов онлайн-дохода. Sharma Brands использует стратегические инициативы для увеличения доходов бизнеса от цифровых технологий. Мы извлекли информацию из его записей на целевых страницах, чтобы сообщить рекомендации, представленные в этой статье.

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

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

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

«Люди часто забывают, что целевая страница — это часть более крупного пути пользователя, — говорит Майкл. «В результате они сжигают резину и тратят время на настройку блестящих вещей, которые на самом деле не имеют значения. Помимо самой целевой страницы, существует множество факторов, влияющих на процесс принятия решений пользователем — от источника рекламы и устройства до уровня осведомленности и мотивации. Чем лучше вы понимаете эти аспекты, тем выше ваши шансы принимать правильные решения и создавать целевые страницы, которые действительно повышают конверсию пользователей».

1. Проанализируйте трафик и источник устройства

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

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

Как пишет Ник: «Если ваши страницы не будут соответствовать платформе, с которой они были созданы, ваш показатель отказов резко возрастет, а общий ROAS платформы (окупаемость затрат на рекламу) останется низким».

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

Лучшие практики терпят неудачу, когда они выпадают из контекста бизнес-стратегии.

Ben Labay

2. Поймите, когда лучшие методы не работают

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

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

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

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

3.

Рассмотрите поток информации по всей целевой странице

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

Большинство посетителей сайта не будут прокручивать вниз

Сгиб — это пространство на веб-странице, видимое без прокрутки, и оно различается в зависимости от используемого устройства, будь то монитор, планшет или мобильное устройство, все из которых различаются по размеру экрана от модели к модели. Обычно , сгиб – это 600 пикселей от верхней части окна браузера.

Не все посетители вашей целевой страницы будут прокручивать страницу дальше сгиба на компьютере или мобильном устройстве. Статистика на самом деле довольно низкая — мы слышали, что от 50% до 85% людей не прокручивают страницу. Поскольку процент зрителей, которые на самом деле выходят за пределы сгиба, очень низок, многие люди рекомендуют стратегию дизайна, основанную на двух частях: что вы включаете в свой контент в верхней части сгиба и что вы включаете после него.

Дело не столько в сгибе, сколько в информационной иерархии

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

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

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

• Вы отвечаете на правильные вопросы и устраняете правильные препятствия?
• Управляете ли вы ожиданиями и выполняете ли вы «обещания», данные в источнике рекламы?
• Доставляете ли вы контент в правильном порядке и создаете ли вы импульс для достижения цели конверсии?

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

Как улучшить дизайн целевой страницы 

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

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

Вот как создать лучшие целевые страницы, которые будут конвертировать: 

1. Оптимизируйте окно покупки для конверсии
2. Добавить отзывы клиентов и раздел обзора
3. Делайте отличные фотографии товаров
4. Расширьте описание вашего продукта
5. Включить сертификаты и уникальные торговые предложения
6. Включить раздел дополнительных/перекрестных продаж с предложениями других продуктов
7. Добавить полосу хвастовства и раздел «почему»

 

Пример иллюстрации элементов привлекательного дизайна целевой страницы. Shopify

 

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

1. Оптимизируйте поле для покупок для конверсии

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

Что такое коробка для покупок?

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

Один из ящиков покупок Peeper в виде рабочего стола. Peepers

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

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

Есть несколько шаблонных элементов, которые создают пространство для вашей копии и изображений, чтобы они действительно сияли. Высокооптимизированная коробка для покупок включает в себя то, что Эзра называет « стек конверсионных активов ».

Вот пример того, как это может выглядеть на рабочем столе:

Brightland показывает эту целевую страницу пользователям, ищущим оливковое масло с чесноком в Интернете. Brightland

2. Добавление отзывов покупателей и раздела отзывов

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

Умный маркетолог

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

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

Добавьте звездочку 

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

3. Делайте отличные фотографии продуктов

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

 

Unsplash

 

Оптимизация фотографий продуктов для повышения скорости и совместимости 

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

4. Расширьте описание вашего продукта

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

Компания по производству очков Peepers является профессионалом в этом деле: вверху страницы находится множество изображений продуктов, а ниже вы найдете подробную информацию и описание, в котором перечислены все преимущества линз Peepers.

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

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

Brightland

5. Включите сертификаты и уникальные торговые предложения

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

Olipop

Вероятно, у вас также есть отличные уникальные торговые предложения (УТП) для ваших продуктов. Если вы еще не написали их, потратьте некоторое время на разработку того, что отличает ваш продукт от продуктов конкурентов. Это упражнение требует времени, но ваше УТП будет информировать вас о том, как вы позиционируете свой бренд на рынке и как вы структурируете свои целевые страницы.

📚 Подробнее: Примеры уникальных торговых предложений и видео о том, как создать свое

6. Добавьте раздел дополнительных/перекрестных продаж с другими товарными предложениями

Вы привлекли внимание покупателя, так почему бы и нет предложить дополнительные продукты, которые им понравятся? Если они увидят что-то, что им нравится, вы предоставляете быстрый и простой способ добавить это в корзину. Для этого вы можете добавить плагин в свой магазин. Если вы используете Shopify, ReConvert Upsell & Cross Sell, Honeycomb Upsell & Cross Sell и One Click Upsell — Zipify OCU — отличные приложения, которые стоит попробовать.

📚 Узнайте больше : Как увеличить продажи клиентам и улучшить качество покупок

7. Включите полосу хвастовства и раздел «почему» New York Times

или Wired ? Размещение этих логотипов на ваших целевых страницах с цитатами из статей — это то, что Ник называет «полосой хвастовства». Эти публикации повышают доверие к вашему бренду, и их упоминание имеет большое значение для покупателей, которые ищут дополнительную информацию.

 

Брайтленд

 

Еще один раздел целевой страницы, который впервые применил Ник, — это раздел «почему». Вместо того, чтобы просто указывать, почему кто-то должен купить ваш продукт, во всей копии вашей целевой страницы, Nik рекомендует четко указать это в отдельном разделе. Заголовок может просто читать «Почему [название вашей компании]?» с абзацем преимуществ под ним. Или вы можете выбрать несколько значков, которые представляют собой основные отличительные черты вашего бренда, и написать текст для сопровождения каждого из них.

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

Ben Labay

Тестирование дизайна целевых страниц

После того, как ваши целевые страницы будут готовы и на ваш сайт будет поступать значимый трафик, вы можете начать A/B-тестирование различных частей дизайна вашей целевой страницы, чтобы убедиться, что она обеспечивает максимальную конверсию возможная ставка.

📈 Узнайте больше: Больше конверсий, больше продаж: руководство для начинающих по оптимизации коэффициента конверсии на 2021 год

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

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

---

Готовы создать свой бизнес? Начните бесплатную пробную версию Shopify — кредитная карта не требуется.

Примеры дизайна целевой страницы

Peepers 

Peepers продает доступные и стильные очки для чтения. От включения в список любимых вещей Опры до использования положительного текста и ориентированного на выгоду языка, Peepers создает целевые страницы, которые прямо говорят о том, что хочет их целевая аудитория.

Ящик для покупки Пиперс. Смотрящие

Дизайн целевых страниц продукта как для настольных компьютеров, так и для мобильных устройств четкий, понятный и удобный для навигации. Коробка для покупок включает в себя многочисленные изображения продуктов, создает социальное доказательство с помощью ярлыка любимых вещей Опры и может похвастаться пятизвездочным рейтингом, в котором указано фактическое количество отзывов. Он также включает в себя функцию виртуальной примерки, чтобы клиенты могли увидеть, как новая пара оправ на самом деле выглядит на их лице. При прокрутке посетители видят описание продукта, в котором перечислены функции и 9.0254, а также подробный раздел с точными размерами, чтобы обеспечить идеальную посадку.

Brightland

Brightland продает оливковое масло первого холодного отжима из Калифорнии. Его целевые страницы используют модульный подход с определенными линиями, яркими цветами, четко сформулированными преимуществами и разделом «Как использовать», в котором представлены сочетания рецептов.

Целевая страница продукта Artist Capsule для ПК. Brightland

Дизайн целевой страницы продукта Brightland отличается для настольных компьютеров и мобильных устройств. Целевые страницы для настольных компьютеров (например, страница Artist Capsule) включают дополнительный раздел «Наслаждайтесь с», в котором перечислены варианты сочетания, наиболее подходящие для каждого отдельного масла. Этот бонусный раздел не существует на мобильных устройствах, где клиенты могут переключаться только между описанием продукта и дополнительной информацией о художественном оформлении.

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

Мобильная версия той же целевой страницы немного отличается, чтобы оптимизировать ее для простоты и различного поведения пользователей. Brightland

 Чтобы увидеть кнопку покупки в мобильной версии, клиенты должны прокрутить вниз до раздела описания продукта, что побуждает их читать дальше. Другие награды включают в себя раздел «Полезные свойства» (кто знал, что у оливкового масла так много?), осязаемую копию, которая заставляет покалывать вкусовые рецепторы, отличительные черты продукта (оливки холодного отжима от мастеров-мельников), индивидуальные рецепты для каждого продукта и отличные отзывы от реальных клиентов. .

Olipop

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

Olipop использует текст, ориентированный на выгоду, для прямой обработки возражений («Но сколько сахара в газировке?») и позиционируют напиток как лекарство от тяги для заядлых любителей газированных напитков, которые ищут способ бросить пить.

Олипоп

Целевые страницы, такие как The Sampler, показанный выше, используют те же яркие цвета и причудливый, чистый дизайн, который бренд использует для своих продуктов. Другие элементы, которые выделяются: четкий, жирный текст, подробная информация о продукте (при прокрутке), звезды с фактическим количеством отзывов для доверия, небольшой заголовок, который не доминирует на странице, интуитивно понятный, простой в навигации макет, и отличные фотографии продукта.

Cadence 

Cadence продает многоразовые дорожные контейнеры, которые являются магнитными и водонепроницаемыми.

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

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

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

Cadence

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

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

Используйте свои целевые страницы для создания повествования

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

Когда вы создаете каждый элемент на целевой странице, проверяйте связность, соединяя их вместе. Создается ли впечатление, что поток страницы складывается в одно законченное повествование, рассказывающее историю вашего продукта? Или элементы кажутся разрозненными? Эта последняя проверка позволит вам перемещать блоки или настраивать текст перед запуском страницы в мир.

Часто задаваемые вопросы о дизайне целевой страницы

Что такое дизайн целевой страницы?

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

Как создать целевую страницу?

• Выберите платформу. Выберите платформу, например Shopify или Squarespace, чтобы создать целевую страницу.
• Создайте свою страницу: Создайте свою страницу с заголовком, призывом к действию и любыми другими необходимыми элементами.
• Используйте эффективный заголовок: Ваш заголовок должен быть кратким и привлекающим внимание.
• Добавить контент: добавьте контент на свою страницу, например изображения, видео и отзывы.
• Оптимизация для поисковых систем. Используйте ключевые слова и другие передовые методы SEO, чтобы поисковые системы могли найти вашу целевую страницу.
• Протестируйте и улучшите: протестируйте свою целевую страницу и улучшите ее на основе результатов.

Из чего должна состоять целевая страница?

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