Правильный продающий сайт: 5 железобетонных правил

Нормально делай - нормально будет

РубрикаМатериал обновлен:
15.11.2020
Время на чтение9 минут

Ingredients

Directions

Правильный продающий сайт: 5 обязательных условий

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

1. Решайте проблему, а не хвалите себя

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

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

Правильно

Не совсем точный пример, но уже куда лучше, чем у 99% сайтов, продающих пластиковые окна.

Неправильно

Что даст клиенту информация о количестве производственных площадей? Станем ли мы больше ему доверять? Да нет. Эта информация поможет решить нашу проблему (установка окон)? Тоже нет. Абсолютно лишняя информация. Цифры — зло.

2. Оптимизируйте фоновое видео

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

  1. Используем формат видео webm. В сети полно конвертеров
  2. Ролик не должен быть длиннее 20 секунд. Лучше вообще ограничиться 10 секундами.
  3. Так как сжатие видео будет достаточно сильное,  будет неплохо сделать затемнение видео, чтобы лишние пиксели не бросались в глаза

Пример использования

Одна из ведущих веб-студий Украины Totonis иногда использует потоковое видео при демонстрации работ в портфолио. Пресейл-предложение студии можно посмотреть тут.  Например, нам очень нравится, как оформлен кейс кулинарного сайта Top Cheff. Если вы голодны, проскрольте это немедленно!

Что за формат .webm?

Данный формат контейнера для мультимедиа-файлов придумали в Гугле и показали широкой публике еще в 2010 году. Webm позволяет откручивать потоковую передачу видео через платформу HTML5. Видеопотоки этого формата сжимаются с использованием видеокодеков VP8 или VP9 (с полностью открытым исходным кодом). Поддерживается всеми современными десктопными и почти всеми мобильными.

Где брать такое видео?

Потоковое видео на фон можно присмотреть в сервисе Coverr.co, который предоставляет эту возможность совершенно бесплатно. Для примера в поиске введем Nature:

3. Никаких фотостоков

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

Делайте скрины приложения на реальных устройствах, покажите таблицы, графики — всё, что угодно, кроме кастомных и стерильных болванок с фотостоков. Фотосессия стоит не настолько дорого, сколько стоят потерянное доверие клиентов.

Правильно

Показан процесс работы в «боевых» условиях (запрос — «Пластиковые окна»). Люди реальные, локация реальная

Неправильно

Какой-то мужик в перефотошопленной комнате:

Классика жанра — счастливая, но абсолютно неестественная семья:

4. Используйте информационный стиль

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

Информационный стиль — это свод правил и рекомендаций редактирования текста для придания ему максимально лаконичного окраса, очищения от мусора и стоп-слов. Цель инфостиля — искоренение графомании и максимум полезной информации. Чтобы научиться писать текст в информационном стиле крайне рекомендуем воспользоваться проектом Максима Ильяхова — Главред (soviet.glvrd.ru/), где он буквально на пальцах объясняет, как нужно правильно подавать свой текст:

Как не переборщить с SEO-текстом?

Поисковые системы не любят переизбыток ключевых слов на сайте. Чтобы не попасть под фильтры, используйте сервис «Тургенев» (turgenev.ashmanov.com). Он поможет проверить текст на тошноту и указать на ошибки

Не забывайте про иллюстрации

Инфостиль придумали не зря, но и он не вывезет картину, если на странице не будет ничего, кроме этих ваших бесконечных заголовков. Разбавлять текст картинками — нормальная и хорошая практика. Покажите товар лицом. Советуем почитать блог visual-storytelling.ru или подписаться на рассылку design.glvrd.ru

5. Уберите слайдер

Люди не любят кликать. Это аксиома, с которой, волей не волей придётся смириться. Время слайдеров уже давно прошло и использовать их в 2021 году — это моветон. Оговоримся — мы имеем ввиду, именно продающие сайты (презентация продукта/сервиса и т.п.). К информационным сайтам это еще применимо. Во-первых, многие ставят таймер на слайдер, а пользователь должен(!) успеть ознакомиться с текстом. Оно ему надо? Во-вторых, элементы интерфейса (да-да, мы про «стрелочки») делают максимально незаметными и неудобными.

Правильно

Хотите оповестить клиента о скидках и акциях — сделайте это без надобности щелкать по едва видным стрелочкам

Неправильно

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

Обратите внимание СКОЛЬКО слайдов запихнули в карусель. У пользователя нет столько времени.

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