Что должно быть у сайта компании: чек-лист и разбор ошибок

Что должно быть у сайта компании?

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

Минимальный набор выглядит так:

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

Набор страниц зависит от задачи. Яндекс Реклама в руководстве по структуре сайта описывает визитку как «Главную», «О компании», «Услуги» и «Контакты», а коммерческому сайту добавляет страницы услуг, кейсов, цен и форму захвата заявок. Первый формат мы разбирали в статье про сайт-визитку, одностраничный вариант описан в материале про лендинг.

Проверить структуру удобно на чужих примерах. Авторы блога Calltouch разбирают ЦИАН: сервис предлагает сразу начать поиск недвижимости и не заваливает посетителя вводными о проекте. У ИКЕА главная не перегружает внимание, а ссылки меню повторяют путь покупателя: до покупки, во время и после неё.

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

Доверие: отзывы, примеры, цены и реквизиты

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

Calltouch в обзоре требований к коммерческому сайту перечисляет то, что обычно закрывает эти вопросы: страница «О нас» с историей, дипломами и сертификатами, примеры работ с фотографиями «до и после», отзывы клиентов и подробные описания товаров или услуг.

Вес отзывов измерили в исследовании Spiegel Research Center при университете Northwestern. Оно показало, что вероятность покупки товара с пятью отзывами на 270% выше, чем у товара без отзывов. Дальше отдача падает: рейтинг работает лучше всего в диапазоне от 4,0 до 4,7, а почти идеальные пять звёзд вызывают у покупателей сомнение. Для дорогих товаров эффект сильнее: конверсия выросла на 380% против 190% у дешёвых.

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

Сведём блоки доверия в одну таблицу, чтобы ничего не потерять.

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

Контакты и реквизиты закрывают последний вопрос. По исследованию Tinkoff eCommerce, которое цитирует adlook, 53% покупателей называют наличие контактной информации одним из трёх ключевых критериев доверия к продавцу. Поэтому ИНН, ОГРН или ОГРНИП и адрес держите под рукой: как собрать для них подвал, мы рассказывали в статье про футер сайта.

Как сделать, чтобы клиент написал или позвонил?

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

Calltouch советует выносить телефон, почту и режим работы в шапку и не прятать их в разделе «Контакты», и оформлять призыв к действию кнопкой или ссылкой. Об устройстве шапки мы писали в статье про хедер, а о самих призывах в материале про call to action.

Показательна история юридического агентства из Екатеринбурга, которую в блоге Т-Банка рассказал автор из компании YourGoods. Форма заявки стояла полтора года, а когда агентство начало покупать рекламу, выяснилось, что отправили её только 4 человека из 42. Поля сократили до трёх: имя, телефон и описание проблемы. Конверсия формы выросла в 3,5 раза.

Но главное открытие было другим. Через форму приходило лишь 10% обращений, остальные клиенты писали в мессенджеры: в WhatsApp (сервис компании Meta, которая признана в России экстремистской организацией и запрещена) и в Telegram, или звонили. Агентство поставило виджет с кнопками мессенджеров и телефоном. Конверсия посетителя в обращение выросла с 1,2% до 2,3%, а 75% обращений пошли через виджет.

Похожий расчёт у разработчика виджетов Envybox. В его кейсе компания «ИванычЪ Group», которая шьёт одежду на заказ, получала около 100 заявок в месяц. Она подключила квиз, онлайн-чат и мультикнопку за 2499 рублей на три месяца, и за это время заявок стало больше на 590. Это отчёт самого вендора, поэтому цифры стоит читать как ориентир. Если хотите попробовать чат, начните со статьи про онлайн-чат для сайта.

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

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

Что нужно по закону и где понадобится юрист?

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

По статье 9 Закона о защите прав потребителей продавец или исполнитель обязан довести до потребителя фирменное наименование, место нахождения (адрес) и режим работы. Индивидуальный предприниматель должен дополнительно дать сведения о государственной регистрации и назвать орган, который его зарегистрировал. Если вы продаёте через агрегатор, та же статья требует разместить достоверные сведения о себе и на собственном сайте, при его наличии. Для сайта, через который вы продаёте товары и услуги людям, разумно показывать эти сведения в подвале и на странице «Контакты»; точный состав для вашей формы деятельности согласуйте с юристом.

Если сайт собирает персональные данные, например через форму заявки, к делу подключается статья 18.1 закона 152-ФЗ. Оператор-организация должен издать документ, определяющий политику обработки персональных данных, а оператор, который собирает данные через интернет, обязан опубликовать этот документ на страницах своего сайта, с помощью которых данные собираются. Вместе с ним публикуют и сведения о реализуемых требованиях к защите данных. Содержание документа закон не диктует построчно, поэтому писать его нужно под ваши формы и сервисы, а текст согласуйте с юристом. Ссылку на политику, по советам adlook, обычно добавляют в подвал и рядом с формами.

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

Технический минимум: скорость, мобильная версия, безопасность

Даже сильный текст не сработает, если страница открывается медленно или разваливается на телефоне.

Деньги за скорость хорошо видны в кейсе оператора связи Vodafone. В A/B-тесте двух версий посадочной страницы оптимизированная версия улучшила показатель LCP на 31%, и продажи выросли на 8%, а переходы из посетителей в лиды на 15%. Для этого команда перенесла отрисовку виджета с клиента на сервер, отдала критический HTML с сервера и сжала изображения.

Простой ориентир даёт Calltouch: картинки не тяжелее 1 МБ, хостинг по весу сайта, а ждать дольше трёх секунд клиент не станет и уйдёт к конкуренту. Как мерить скорость, описано в статье про PageSpeed, а как выбрать площадку в материале про хостинг.

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

Безопасность видна посетителю сразу. Блог VK Рекламы напоминает: если при переходе браузер или антивирус показывает окно с предупреждением, человек, скорее всего, уйдёт. А страницу 404 Calltouch предлагает оформить в стиле компании и в паре фраз объяснить, почему человек сюда попал. Примеры оформления собраны в отдельной статье.

Мелочи, которые ломают продажи

Дорого обходятся проблемы, которые выглядят скромно: лишняя кнопка, лишнее поле, лишний шаг.

Классический пример рассказал Джаред Спул, специалист по юзабилити. Крупный интернет-магазин после кнопки «Оформить заказ» показывал форму входа с кнопками «Войти» и «Зарегистрироваться». В тестах покупатели злились, и один из них объяснил, что пришёл купить, а не вступать в отношения.

Позже разобрали базу магазина. У 45% клиентов было по несколько учётных записей. Запросов на восстановление пароля приходило около 160 тысяч в день. Из этих людей 75% так и не пытались завершить покупку.

Решение оказалось простым: кнопку «Зарегистрироваться» убрали и поставили «Продолжить» с пояснением, что аккаунт не нужен. По данным Спула, число покупающих выросло на 45%, в первый месяц магазин получил 15 миллионов долларов, а за первый год 300 миллионов. Сам Спул подвёл итог коротко:

Мы всего лишь поменяли кнопку

Джаред Спул, специалист по юзабилити

Институт Baymard измеряет такие потери в цифрах. По его данным, типичное оформление заказа в США показывает пользователю 23,48 элемента формы, хотя в удачном сценарии хватает 12. Из-за слишком длинного оформления заказ бросали 17% американских покупателей, а улучшив только checkout, средний магазин, по оценке института, поднимет конверсию на 35%.

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

Проверка своего сайта за час

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

1. Откройте главную и за пять секунд найдите, чем занимается компания и как с ней связаться.
2. Убедитесь, что телефон и режим работы видны в шапке, а реквизиты в подвале.
3. Найдите цену или хотя бы вилку цен для основной услуги.
4. Проверьте, что есть примеры работ и отзывы с именами.
5. Отправьте собственную форму и посчитайте поля и шаги.
6. Нажмите на логотип и убедитесь, что он ведёт на главную.
7. Введите несуществующий адрес и посмотрите, что покажет страница ошибки.
8. Прогоните главную через инструмент проверки скорости.
9. Покажите юристу набор документов и формулировки в формах.

Если проверки нужны регулярно, а не раз в год, поможет Чекер REDHunt: он следит за техническими ошибками и показывает, как правки влияют на трафик.

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

Частые вопросы