Все продающие сайты в интернете условно можно разделить на три вида: лендинги, интернет-магазины, сайты услуг.
И если для лендингов написано много материалов по их созданию, а для интернет-магазинов свои чек-листы с пунктами про карточки товара и многое другое, то про сайты услуг информации мало.
И мы хотим восполнить этот пробел!
Ниже приведен список из базовых 77 пунктов, которые помогут устранить основные ошибки сайтов услуг.
Стандарты для всего сайта:
Эти пункты нужно проверить на всем сайте и на каждой странице.
Логотип компании должен быть хорошо заметен и размещен в верхней части каждой страницы. Он кликабелен и ведет на главную сайта.
На сайте указан номер телефона.
Номер телефона расположен на одном и том же месте на всех страницах.
Номер телефона видно на любой странице в течение первых 3-х секунд просмотра.
Номер телефона указан с кодом города.
Телефон снабжается призывом к действию (например, «Позвоните мне»).
Все ссылки в тексте подчеркнуты. Почта компании тоже является ссылкой и запускает почтовый клиент. Ссылки на соц сети тоже кликабельны.
Все ссылки визуально отличаются от остального текста (синие и подчеркнутые — это стандарт).
Посещенные ссылки выделяются другим цветом (фиолетовые и подчеркнутые — это стандарт).
Все ссылки на форму обратной связи снабжаются призывом к действию (например, «Задать вопрос» или «Написать мне»).
Псевдоссылки (ссылки, которые не уводят посетителя, а запускают новый процесс, например pop-up форму) подчеркнуты пунктиром.
Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор. Причем вся кнопка является ссылкой, а не только текст внутри.
Кнопка с целевым действием только одна на странице или она очень явно выделена по сравнению с другими.
Текст на кнопке — призыв к действию (заказать, позвонить, получить).
По наведению на кнопку меняется ее отображение, это призывает пользователя сделать клик.
Недоступные кнопки и ссылки не исчезают с экрана, а становятся заблокированными (серыми, зачеркнутыми).
На любой странице не более 8-ми логических блоков (экранов).
На любой странице не более 3-х колонок (не забываем об адаптивной версии для мобильных устройств).
На всем сайте используется единый стиль выравнивания (чаще это выравнивание по левому краю, реже по ширине. Этот пункт не касается заголовков и подзаголовков — они находятся по центру всегда).
Все значимые изображения снабжаются тэгом Alt.
Цвета шрифтов и фона — контрастны.
Не используются скрипты, видоизменяющие курсор мыши.
Страница 404 ошибки выполнена в дизайне сайта и содержит ссылки на основные навигационные страницы магазина.
При минимальном разрешении экрана (1024*768) полоса прокрутки отсутствует при просмотре в основных браузерах: IE, Firefox, Opera.
Сайт одинаково отображается в браузерах IE, Firefox, Opera.
Любая страница сайта имеет не более 3-х «ярких пятен» (блоков, картинок).
Базовая навигация:
Навигация на сайте очень важна — посетитель не будет разбираться, где ему искать контакты или услуги. Он просто уйдет к вашим конкурентам.
Глобальное меню содержит не более 8 пунктов.
Меню основной навигации расположено горизонтально.
Меню основной навигации продублировано в нижней части сайта (футере).
Текущий пункт меню всегда выделен.
Ссылка в меню на текущий пункт не активна.
Используются «хлебные крошки» для всех страниц сайта.
Все навигационные элементы занимают не более 20% площади экрана.
Нет «тупиковых» страниц (без ссылок на другие услуги или страницы).
Главная страница:
Цель главной страницы: рассказать, о чем это сайт, какую проблему решает эта услуга и как клиент может ее получить.
Уникальное торговое предложение (УТП) видно сразу в течение первых 3-х секунд просмотра (баннер, текст, слоган). Не стоит называть баннер на сайте banner.jpg, так как есть вариант, что сервисы по блокировке рекламы могут скрыть его.
Главная страница содержит краткий текст «о компании», построенный на выгодах и (или) УТП.
С главной страницы нет работающей ссылки на главную же страницу (кроме логотипа в меню).
Главная страница не содержит никаких звуков, запускаемых без действий пользователя (всплывающий помощник, чат или что-то подобное).
По главной странице сразу понятно, чему посвящен сайт.
Заметная ссылка на предложение помощи (“напишите нам” или чат-бот поддержки внизу справа).
На главной странице должны находиться основные услуги компании.
Описаны этапы процесса заказа услуги (по необходимости).
На главной странице должны присутствовать вопросы клиентов и ответы специалистов (не все, а самые основные, так как вопрос-ответ необходимо делать отдельной странице с возможностью задать свой вопрос).
Необходимо разместить on-line калькулятор расчета стоимости (при необходимости).
Разместить отзывы клиентов и новости компании (опять же, не все отзывы и новости).
Необходимо разместить призыв к действию с номером телефона и формой заявки.
Страница услуги:
Содержит заголовок названия услуги.
Подробно описывает услугу.
Присутствует хотя бы приблизительная цена за данную услугу (нельзя писать “цена по запросу”, это отпугивает потенциальных клиентов).
На странице присутствует форма заказа или кнопка “Заказать услугу” (желательно до полосы прокрутки).
На странице присутствует on-line калькулятор расчета стоимости (по необходимости).
На странице отсутствуют отвлекающие блоки (новости, реклама);
Присутствуют ссылки на другие услуги.
Внизу страницы размещается призыв к действию (заказать, позвонить, оставить заявку).
Тексты:
Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное.
Текст структурирован: заголовки, подзаголовки, абзацы, цитаты, списки (тогда текст легко сканируется, важные моменты можно выделять отдельно).
Шрифты единообразны на всех страницах, читабельны и контрастны к фону.
Цвет ссылок никогда не используется для текста.
Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (например, 1 234 567).
На сайте используется не более 3-х шрифтов.
Нет абзацев длиннее 5-6 строчек.
Каждый текст имеет заголовок.
Все тексты должны легко читаться при масштабировании.
Формы:
Формы максимально лаконичны.
В целевых формах (таких как регистрация, заказ услуги) есть только обязательные поля.
Если полей много, они группируются по смыслу, у групп есть подзаголовки;
При открытии страницы с формой, курсор перемещается в первое поле автоматически.
Поле, в котором находится фокус, визуально выделено (чаще всего цветом).
Если заполнение формы разделено на несколько шагов, нужно показывать, на каком шаге клиент находится сейчас и сколько осталось шагов.
Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (на случай, если пользователь случайно ушел со страницы).
Обработка формы запускается не только по нажатию на результирующую кнопку, но и по нажатию клавиши [Enter].
Клавиша [Tab] перемещает курсор по полям в правильной последовательности (сверху вниз, слева направо).
Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, даты, номера телефонов и пр.).
Обязательные поля явно отличаются от необязательных.
Подписи полей соответствуют смыслу полей.
Наиболее вероятные значения некоторых полей формы по умолчанию заполнены (например, номер телефона с 8 или +7).
Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия).
У пользователя есть возможность вернуться на шаг назад, чтобы отредактировать введенные данные.
Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных (автоматически).
Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”).
Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка (поле выделено цветом, курсор автоматически переносится в это поле).
Если на вашем сайте услуг низкая конверсия, изучите этот список внимательно и после попробуйте сами заказать что-то у себя. Так вы сможете понять, с какими проблемами сталкивается обычный пользователь при заказе вашей услуги.
Еще один чек-лист, но по коммерческим факторам смотрите в нашем блоге.