Первое впечатление
Дизайн сайта – это инструмент коммуникации потенциального потребителя с вашим товаром, услугой, бизнесом. Довольно расхоже заблуждение – «дизайн вторичен», первичны – звонки, конверсии, продажи, лиды. Однако, дорогой читатель – все эти так называемые «целевые действия» и есть следствие качественного, с душой и с сердцем сделанного дизайна. Существенный вес в структуре эффективности лэндинга имеют тексты, техническое исполнение, настройка контекстной рекламы, но дизайн, как способ организации и подачи информации – основа основ.
Именно дизайн – оказывает первое впечатление на сознание и подсознание клиента, которое формируется менее чем за 1 секунду. Согласно исследованиям лаборатории Google в этот промежуток времени (в среднем 50 мс) пользователь решает вопрос о том, вызывает ли ресурс доверие и стоит ли оставаться на нем.
Специалисты университета Стэнфорда выяснили, что среднестатический пользователь придает большее значение визуальному аспекту ресурса – нежели его содержанию. Почти половина посетителей сайта – не утруждала себя детальным изучением предоставленной информации, ориентируясь на графическую составляющую, в которую входили шрифт, компоновка страницы, цветовое решение.
Создавая дизайн landing page, мы сталкиваемся с переченем сложно разрешаемых не специалистом дилемм, который призван преодолеть проектировщик или непосредственно разработчик графики.
- Как размещать информацию на странице?
- Какую цветовую гамму использовать?
- Как средствами дизайна определить тематику сайта и особенности продукта?
- Какие выбрать шрифты?
Базируясь на результатах проведенного исследования, специалисты по юзабилити сделали следующие выводы:
Пользователи сайтов предпочитают «чистый» (clean) дизайн – нагроможденному и неструктурированному, а также с большим доверием относятся к знакомым визуальным элементам. Высокую значимость играет релевантность страницы ожиданиям пользователя.
Таким образом, создавая дизайн landing page – нужно вдумчиво и внимательно разрабатывать структуру, прорабатывая возможные пользовательские сценарии. Настойчиво «запихивать» на сайт все возможные существующие варианты «триггеров» в вариативных исполнениях – не нужно.
Хороший дизайн – вызывает доверие потенциального клиента и желание остаться на странице. В тоже время не достаточно качественно исполненный дизайн – снизит конверсию сайта и время, проведенное посетителями на ресурсе.
Первое впечатление – создает основу для дальнейшей коммуникации.
Главенство первичного опыта сохраняется на протяжении длительного периода: то есть негативное отношение может перенестись на всю компанию и ее продуктовую линейку в целом и существовать долгие годы
Визуальный аспект имеет большой удельный вес для любой страницы. Нет смысла экономить на дизайне – так как он во многом может определить отношение и успех коммуникации с потенциальными клиентами. О существенности графического исполнения говорит тот факт, что по результатам вдумчиво проведенного редизайна конверсия сайта вырастет – в несколько раз.
Дизайн landing page — для разных типов посадочных страниц
Существует негласная классификация целевых (посадочных) страниц согласно их функциональному назначению. В глобальном смысле цель любого лендинга – привлечь пользователя совершить целевое действие, на основании которого lp классифицируются следующим образом
Презентация продукта (информационная страница)
Задача этой страницы – максимально эффектно и доступно презентовать продукт, проинформировав потенциального потребителя о его преимуществах. Целевое действие в данном случае – переход на сайт интернет-магазина. Такой подход часто используют производители, которые не осуществляют розничную дистрибуцию товара и перенаправляют потенциальных покупателей продукта на сайты партнеров. Особенности такого лендинга – насыщенность информацией.
Генерация лидов (страница сбора контактных данных)
Такой тип лэндинга можно условно назвать «продающим». Целевое действие пользователя – отправка контактной информации (сотового телефона или электронного адреса). Потенциальный клиент проявляет интерес к предложению и отправляет заявку для согласования информации о доставке и оплате услуги.
Страницы такого типа характерны для дорогостоящих товаров, и потребительских услуг (от кредитов до уборки и написания дипломов) – которые требуют обязательного уточнения деталей сделки от второй стороны. Есть две особенности дизайна этого вида лендинга: захватывающая внимание презентация (для реализации этой задачи могут использоваться большие фотографии, видео, музыка, динамические эффекты, качественные иллюстрации, 3д-графика) и максимально простая и доступная в любой части сайта форма заявки.
Страница подписки (сбор электронной почты)
В качестве отдельного вида лэндинга можно выделить страницу подписки. Ее задача – собрать тематическую базу относительно лояльных потенциальных потребителей продукта. Механика такой страницы – сбор контактных данных. В структуре страницы всегда присутствует форма для сбора электронного адреса (телефона) с указанием того, что обработка контактной информации выполняется в соответствии с действующим законодательством, и оффер (предложение получить подарок или скидку в обмен на подписку). Визуальное исполнение такой страницы должно быть максимально понятным, доходчивым и вызывающим доверие: слишком навязчивое оформление снизит конверсию лэндинга.
Продающая страница
Поимо качественной презентации, работы с ценовым сопротивлением и другим триггерами – этот лэндинг содержит корзину и форму для оплаты заказа. Такой вариант подходит для одностраничного сайта в формате каталога, который представляет собой «мини» интернет-магазин.
Вирусная страница
Красивый и эффектный одностраничник, вызывающий определённые эмоциональные переживания – позитивные или негативные (экзистенциальные) – зависит от вложенного в сообщение смысла. Особенности этой страницы – принципиально оригинальный контент (классные эффекты, уникальные изображения, вирусное видео) и кнопки шаринга в социальных сетях.
Задача такого сайта – информировать посетителей, повышать внимание к проблеме или доверие к бренду. Механика работы: пользователи должны делиться, делиться и еще раз – делиться информацией – отправляя ссылку в соц. сети, мессенджеры.
Дизайн landing page: как увеличить конверсию
Поскольку дизайн – это способ организации и подачи информации, он во многом определяет конверсию посадочной страницы. Следующий «чек-лист» поможет систематизировать особенности работы с дизайном лендингов.
Большой объем информации
Для того чтобы максимально компактно и доступно разместить информацию о продукте, которая будет полезна и интересна только части аудитории – лучше использовать подсказки, лайтбоксы, всплывающие окна, раскрывающиеся блоки, Sidecar-блок. Этот прием упрощает навигацию по сайту и делает восприятие проще.
Минимум слов (больше дела)
Пользователи редко читают весь текст, размещенный на сайте, поэтому сообщение должно быть легким, понятным и доходчивым. Основную ставку стоит делать на заголовки, которые должны доносить до посетителя основную суть предложения. Ключевое значение в описании предложения будет иметь простота: сделать презентацию можно с помощью короткого видеоролика, интерактивной анимации. Человек способен удерживать в памяти 5-7 объектов, поэтому при создании описаний – эффективнее всего ориентироваться на простоту и лаконичность.
Простота — залог успеха
При проектировании целевых страниц – убирайте все лишние элементы, которые будут восприниматься посетителем как назойливый цифровой шум – градиенты, контрастные плашки, обводки, неуместное форматирование текста. Такой подход позволит вам сосредоточить внимание на наиболее значимых вещах.
Дизайн лендинга – не имеет универсального рецепта. Здорово, когда визуальная составляющая создается на базе ключевых принципов коммуникации компании – есть шанс создать уникальный, запоминающийся и хорошо работающий одностраничный сайт.
50% процентов успеха составляет ответственный подход исполнителя – использование авторских иллюстраций и оригинальных графических решений. Весомое значение имеет хорошо проработанная и логичная структура, постепенно раскрывающая преимущества продукта и грамотно подводящая потребителя к моменту принятия решения.
Большинство людей имеет довольно искаженные представления о дизайне, полагая, что работа дизайнера во всем ее величии должна воплощаться в нагромождении красивых ярких блоков, плашек, завитушек. На самом деле – сделать минималистичный дизайн, где каждый элемент хорошо выполняет свою функцию — куда сложнее.
Дизайн landing page в концепции минимализма
Посадочные страницы, сделанные в минималистичном стиле – как правило, содержат следующие компоненты:
- Призыв к действию (оффер)
- Презентацию товара
- Альтернативные предложения
Визуальная иерархия
Когда визуальных элементов мало – необходимо максимально грамотно и логично выстроить их визуальную иерархию. На что быстрее всего обращает внимание посетитель сайта?
- большие по объёму элементы;
- элементы, расположенные в верхней части страницы и слева;
- блоки, содержащие цветовой контраст;
- сложные для восприятия элементы;
- «воздух» — расстояние вокруг блока придаст ему больший визуальный вес.
Бриф на дизайн лендинга
Для качественного результата – необходимо максимально вдумчиво подойди к процессу создания страницы и составить бриф на дизайн landing page. Он позволит воедино собрать всю необходимую информацию и выстроить наиболее оптимальную решающую задачи заказчика концепцию.
В техническом задании – определите:
- какие задачи будет решать сайт (лиды, прямая покупка)
- на какую аудиторию будет рассчитан (разработайте пользовательские сценарии для разных групп посетителей)
- каким образом будет привлекаться траффик
Затем сформулируйте пожелания по визуальному оформлению страницы: приложите логотип, желаемую цветовую гамму, приведите ссылки на сайты, выступающие в качестве примера или эталона.
Результат по проекту — дизайн landing page представляет собой согласованный макет в формате исходника (psd), подготовленный для верстки (элементы должны располагаться по слоям, часть из них – растрирована), шрифты. Макет должен включать в себя страницу в «спокойном состоянии» и отрисванные активные элементы (кнопки, ссылки, окна, формы обратной связи) – так, как они должны выглядеть при наведении. Желательно графически проработать поведение лендинга при различных пользовательских сценариях (заявка отправлена, подписка оформлена). Так, лэндинг будет выглядеть более целостно и оставлять после работы с ним приятно впечатление.