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

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

Анализ лендинга

Пару месяцев назад меня попросили провести анализ этого лендинга: Алекс Юсфин&Школа капитана Флинта. Именно его мы и будем разбирать.

Основные ошибки

Ошибка 1 — Количество текста.

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

Решение: нужно сократить все тексты и отказаться от лишней информации, которая не несёт никакого смысла для клиента. В замену текстовым Блокам стоит добавить больше картинок, иконок, фотографий и других интерактивных элементов. 

Ошибка 2 — Отсутствие иерархии в размере шрифтов.

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

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

Ошибка 3 — Отсутствие единого стиля. 

Здесь мы видим сразу три активных цвета:

• Ярко желтый
• Красный
• Синий

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

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

Разбор каждого экрана сайта

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

На лендинге есть:

1. Шапка, с навигацией по странице
2. Видео-презентация курса
3. Блок, закрывающий возражения
4. Структура курса
5. Рассказ о преподавателе
6. Пакеты со стоимостью
7. Отзывы 

Каких блоков не хватает:

1. УТП — уникальное торговое предложение
2. Форма захвата, где клиент может оставить свои данные
3. Цифры и факты
4. Для кого этот курс
5. Блок с контактами

А теперь давайте пройдемся по каждому из этих элементов лендинга и разберём их поподробнее. 

Шапка с навигацией

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

Первое, что мы привыкли видеть в левой части шапки сайта — это логотип и краткое описание самого сайта. Этот элемент сразу даёт понять, туда ли мы попали и это ли мы искали.

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

Мы учли все эти моменты, преобразили шапку и сейчас она выглядит так:

Видео-презентация курса

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

Наши преимущества

Это один из самых удачных экранов лендинга. Здесь есть заголовки у абзацев и текст разбавлен иконками, все смотрится интересно. Единственное, что здесь не так — это объем текста, его очень много. Поэтому мы решили сократить все абзацы без потери смысла и заменить заголовки на более конкретные.

Структура курса

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

О нас

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

И после наших изменений:

Экран с ценами

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

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

Отзывы

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

УТП ➖ уникальное торговое предложение

УТП — это самый крупный заголовок на лендинге. Чаще всего это 1-2 предложения. Расположено на видном месте, написано самым крупным текстом. Помогает клиенту понять кто Вы с первых секунд знакомства. В  данном случае заголовок дополнен описанием, которое написано шрифтом поменьше. Это хорошая практика, если в основном заголовке что-то не уместилось.

На нашем лендинге УТП выглядел так. Давайте разберем, какие здесь есть плюсы и минусы.

Минусы:

1. Заголовок на английском, предназначенный для аудитории, которая не знает английский. Это минус, так как часть людей просто не поймет его.
2. Размытые формулировки, такие как “короткий срок”. Нет четких цифр.
3. Много воды и повторяющихся элементов.
4. Отсутствует призыв к действию, без которого нет никакого смысла в УТП.

Плюсы:

1. Есть направленность на аудиторию путешественников (“english for travellers” переводится, как английский для путешественников).
2. Указаны выгоды, которые получит клиент: комфортное пребывание общение в любой стране.

На обновленном варианте сайта УТП выглядит так:

Что мы сделали для улучшения УТП:

1. Мы решили указать, что курс базовый. Это дает понять, что Вы не освоите язык в совершенстве, но изучите основы для свободного общения за границей.
2. Оставили ориентированность на путешественников, но написали это на русском языке.
3. Заменили размытую фразу — “короткие сроки” на  точную — “через 2 недели”. 
4. Добавили призыв к действию и сразу же под ним активные кнопки “Начать обучение” и “Подробнее”.

Форма захвата, где клиент может оставить свои данные

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

Структура формы очень проста, главное, что должно быть здесь — призыв к действию (“оставьте заявку” или “оставьте номер телефона”).  Так выглядит форма, которую мы добавили на лендинг:

Цифры и факты

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

И количество времени, необходимое для его прохождения:

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

Для кого этот курс

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

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

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

Блок с контактами 

Ранее контакты можно было найти в шапке сайта. Они были практически не видны, а это важный элемент лендинга. 

Поэтому мы предложили создать отдельный экран с призывами позвонить или написать по указанному адресу.

А так-же добавили все контакты и ссылки в футер:

Итоги

Так выглядит итоговый результат лендинга созданный мной. И для сравнения посмотрите два варианта сайта ДО и ПОСЛЕ:

Основная работа, которую мы проделали:

• Убрали всю воду
• Сократили лендинг в 1,5 раза
• Разработали единый стиль, который прослеживается на всей странице

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

Анализ Вашего лендинга совершенно бесплатно!