21 правило для создания идеального продающего сайта

1. Быстрая загрузка страницы (менее 5 секунд)

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

На десктопе (компьютеры и ноутбуки) страница должна загружаться – 2-3 секунды, на мобильных устройствах – 4-5 секунд. Это усредненные показатели. Конечно, все зависит от размера сайта. Если у вас большой многостраничный сайт, он может грузиться 5-6 секунд, а обычный лендинг – 2 секунды.

Чтобы ускорить время загрузки страниц, вам нужно:

- уменьшить вес изображений (сжать при помощи специальных сервисов, например imagecompressor.com),
- внедрить Lazy Load (отложенная загрузка изображений)
- перенести видео на внешние платформы. Видео очень много весит, поэтому, его надо загружать не на сайт, а на внешнюю платформу, например – dropbox.
2. Главный экран сразу показывает, чему посвящен сайт

Любой человек, попавший на ваш сайт, должен в течение 3 секунд понять чем вы занимаетесь. Если через 3-5 секунд посетитель не понял что вы продаете, он закроет страницу.

Как сделать:

- На первом экране должен быть заголовок, дескриптор (описание вашей деятельности), оффер (выгодное предложение) и изображение.
3. "Правильное" изображение (видео) на первом экране

Я выделил в отдельный пункт изображение на первом экране, поскольку именно оно влияет на настроение клиента и вызывает желание ознакомиться с сайтом, и сделать целевое действие (купить, оформить заявку, подписаться и т.д.)

Ваша главная задача – переместить клиента из точки А в точку Б. Точка А – то, где он сейчас (у него есть потребность и он еще не воспользовался вашим товаром или услугой), точка Б – то, куда он попадет.

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

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

Меню сайта не должно мешать восприятию информации и забирать внимание на себя. Не делайте большой шрифт. Меню должно помещаться в одну строку. Если не помещается – сделайте боковое меню.

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

Правильная последовательность блоков на странице – от самого важного к второстепенному.

Блоки – Услуги/Товары, акции, преимущества должны быть вверху страницы, менее значимые блоки (о компании, наши сотрудники, отзывы) - внизу страницы.
6. Выравнивание всех элементов по сетке

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

Частая ошибка новичков – элементы расположены хаотично. Логотип на одной высоте, меню со ссылками чуть ниже, номер телефона где-то сбоку.
7. Цветовая гамма

Оптимальное количество цветов – 3-5. Основные цвета – черный, белый и тот, который передает настроение вашего сайта. Дополнительных – 1-2. Не надо делать огромное количество цветов и оттенков.

Не используйте ядовитые цвета, такие как ярко-желтый и кислотно-зеленый.

Чек-лист для проверки сайта

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

8. Шрифт

Количество шрифтов на сайте не должно быть более 3. Как правило – 1-2. Чтобы понять, какой шрифт подойдет вашей тематике, прикладываю картинку с начертанием шрифтов

9. Мобильная и планшетная версии сайта.

Сайт должен хорошо отображаться на всех устройствах: на мобильных, планшетах и ПК.

Доля мобильного трафика уже превосходит долю трафика с компьютеров. Поэтому, мобильной версии нужно уделить особое внимание.
10. Анимация элементов.

Чтобы сайт был более динамичным и захватывал внимание посетителя, сделайте анимацию элементов.

Какие есть варианты анимации?

- поэтапное появление контента при пролистывании сайта
- изменение цвета и размера при наведении на элемент
- параллакс. Это когда элемент на сайте двигается вместе с движением мыши или прокруткой колеса

Вариантов огромное количество. Хорошо работает креативная анимация, когда элементы при скролле двигаются или соединяются и превращаются в какую-то фигуру.
11. Форма заявки с УДОБНЫМ для клиента способом связи

Сейчас мы уже имеем целое поколение молодых людей, которые привыкли общаться только в мессенджерах. Для них будет некомфортно разговаривать с менеджером по телефону. Поэтому, при создании форм связи, позаботьтесь о том, чтобы у клиента была возможность выбрать способ контакта с вашим менеджером – Telegram, WhatsApp, ВК, E-mail, телефон и т.д.

12. Простой "следующий шаг" для клиента

Сложный следующий шаг негативно повлияет на конверсию в заявку (CV1).

Если у вас интернет-магазин, тогда следующий шаг будет "Купить". Однако, если вы продаете редкий товар, дорогой товар или услугу, то в этом случае, нельзя сразу кричать – "купи купи купи".

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

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

Обязательно вставьте ссылки на свои соцсети. Разместите их на главном экране и в подвале (футере) сайта. Сделайте иконки едиными по размеру и цвету.

Пример из курса "Веб-дизайн 2.0", школа Highlights
15. Не вставляйте самопроигрывающиеся видео и аудио на сайт

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

Всегда должна быть кнопка "Play", чтобы человек мог нажать и просмотреть видео, или пролистать страницу.
16. 404 страница

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

Постарайтесь сделать креативную 404 страницу.
17. Добавить на сайт Title (Заголовок) и Description (Описание)

Заголовок сайта и описание – это то, как будет выглядеть ваш сайт в поисковых системах. Также, добавьте на главную страницу тег H1 (главный заголовок страницы). Он должен быть понятным и привлекающим и содержать основной ключевой запрос. Например: Доставка суши в Новосибирске.
18. Установите сертификат безопасности SSL (протокол HTTPS)

Я не буду подробно объяснять что это значит, иначе мы уйдем в "дебри". Можете загуглить и почитать, что такое HTTPS.

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

Когда сертификат SSL установлен, появится значок замка. Доверие к вашему сайту повысится!
19. Настройте robots.txt и sitemap.xml

robots.txt — файл для поисковых роботов, в котором указано, какие страницы нужно индексировать, а какие нет.

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

В Тильде, robot.txt и sitemap.xml настраиваются автоматически.
20. Добавьте Favicon.

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

Проанализируйте сайты ваших конкурентов и сделайте такой favicon, который будет выделяться среди остальных.
21. Подключите Яндекс.Метрику и Google Analytics

С подключением аналитики начинается основная работа сайта. Отслеживание эффективности, конверсии, "процент отказов", глубина просмотров.
21. Подключите Яндекс.Метрику и Google Analytics

С подключением аналитики начинается основная работа сайта. Отслеживание эффективности, конверсии, "процент отказов", глубина просмотров
21. Подключите Яндекс.Метрику и Google Analytics

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

Самым выгодным решением для предпринимателя будет делегировать создание сайта, запуск трафика и аналитики профессионалам - маркетологам или маркетинговым агентствам.
Нужно стремиться понижать стоимость заявки и увеличивать конверсию сайта. Делается это при помощи А/Б тестов и ежедневной работы.
Если вам нужен сайт - смело обращайтесь к нам, мы поможем вам и ответим на все вопросы.
Если у вас не получается решить проблему, я могу провести Бесплатный Аудит Сайта. За все время работы, я просмотрел несколько сотен сайтов и могу четко сказать – какой сайт будет работать, а какой – нет. Скажу сразу - это абсолютно бесплатно и ни к чему вас не обязывает.

Как проходит аудит?

1. Заполняете простой бриф, ответив на несколько вопросов
2. Я записываю видео с подробным разбором сайта и скидываю вам ссылку
3. Получаете готовую инструкцию, как исправить ошибки (если они имеются)
БРИФ для аудита сайта