Главная помогает понять предложение и выбрать маршрут
Что должно быть на главной странице сайта, если у компании несколько услуг и ни одну не хочется прятать? Нужны понятное описание предложения, переходы в основные направления, основания доверять компании и следующий шаг для посетителя; порядок этих частей зависит от задачи покупателя.
Разберём сайт компании с несколькими услугами. Она получает обращения через форму или телефон, а онлайн-оплаты и большого товарного каталога в этой конфигурации нет.
Посетитель может прийти на главную впервые либо вернуться сюда со страницы отдельной услуги, чтобы понять, кто будет выполнять работу, какие ещё задачи решает компания и к кому обращаться за уточнениями. Главная даёт общий ответ. За подробностями посетитель переходит на страницу выбранной услуги. У маркетолога появляется критерий отбора материалов: каждый блок объясняет предложение, помогает выбрать направление или отвечает на сомнение перед обращением. Историю компании, фотографии офиса и новости добавляют тогда, когда они помогают решить одну из этих задач, а не ради заполнения привычного места в макете.
Блок «О компании» сам по себе этого не решает. Если он начинается с истории основания и общих слов о качестве, посетитель всё ещё не знает, берётся ли команда за нужную ему задачу, кому позвонить и какие сведения подготовить для разговора.
Как объяснить предложение на первом экране
Первый экран — часть страницы, которую видно до прокрутки. Для рассматриваемого сайта он называет работу компании и показывает, где выбрать направление; остальные задачи раскрываются дальше по странице.
Фраза «Решаем сложные задачи» ничего не сообщает о предмете работы, поэтому вместо неё полезнее назвать услугу, её получателя и ту границу, без которой посетитель ошибётся при выборе исполнителя. Иногда достаточно указать регион или тип объектов. Иногда — назвать этап, за который берётся команда. Маркетолог отбирает существенные условия вместе со специалистом по услуге: подробности будущего договора остаются на странице направления или обсуждаются с менеджером.
В руководстве Nielsen Norman Group о главных страницах названы ясное описание компании и заметные переходы к приоритетным задачам. Я советую один понятный тезис и выбор направления вместо сменяющихся лозунгов: посетитель сразу видит, что ему доступно, и не ждёт нужного слайда.
Изображение и кнопка продолжают обещание
Картинка тоже отвечает на вопрос. Собственный объект, результат работы или команда могут пояснять предложение, если подпись показывает их связь с услугой, а изображение позволяет рассмотреть то, о чём говорит текст. Декоративная фотография переговоров решает задачу оформления. Для подтверждения опыта нужны другие материалы. Я бы подписал снимок кратко — что на нём и какую работу выполнила компания, — чтобы посетителю не приходилось угадывать смысл по интерьеру или оборудованию.
Особого разговора заслуживает кнопка. «Обсудить задачу» уместно, когда после нажатия начинается обращение к специалисту; «Узнать стоимость» обещает сведения о цене, поэтому открывающаяся форма объясняет, какие данные нужны для расчёта и что произойдёт после отправки. При приёмке переходят по кнопке и сопоставляют её обещание с открывшимся содержанием.
Услуги и переходы к подробностям
Название внутреннего подразделения не всегда помогает выбрать услугу. Посетитель ищет решение своей задачи.
Сначала маркетолог собирает перечень направлений и описывает различия между ними словами, которые встречаются в обращениях клиентов, чтобы человек мог выбрать подходящую услугу без знакомства с устройством компании и названиями её отделов. Карточка ведёт к подробностям услуги. Поэтому её название и пояснение можно уточнить по содержанию той страницы, которую она открывает. Если две услуги обещают одно и то же, полезно уточнить предмет работы, результат или исходное состояние, при котором нужен каждый вариант. Это прояснит и структуру: потребуются ли отдельные карточки или посетителю проще открыть одно направление с вариантами внутри.
Я рекомендую на первом уровне сохранить крупные понятные направления, а узкие работы раскрывать после перехода. Длинная сетка мелких услуг удобнее человеку, который уже знает точное название операции; при первом знакомстве она заставляет сравнивать много похожих вариантов без достаточных пояснений.
Для первого обсуждения можно дать коллеге описание задачи и попросить найти подходящее направление. Коллега не заменяет будущих покупателей. Но его вопросы покажут, какие названия понятны только авторам сайта и где требуется пояснение. Приглашать для такого просмотра лучше человека, который не участвовал в подготовке структуры.
Названия переходов
Подписи ссылок — часть этой работы. Критерий W3C о назначении ссылки допускает понимание её цели по самому тексту либо по тексту вместе с программно связанным окружением. Для маркетолога это правило содержания: название направления сообщает больше, чем одинаковые «Подробнее», смысл которых теряется вне карточки. Разработчик показывает, что назначение перехода остаётся понятным и человеку с программой чтения с экрана.
Маршрут с главной до обращения
Понять предложение
Чем занимается компания и подходит ли она для моей задачи.
Выбрать направление
Чем услуги отличаются и куда перейти за условиями.
Оценить исполнителя
Какие работы и сведения подтверждают способность выполнить задачу.
Обратиться
Что сообщить и какого ответа ждать после отправки.
Какие доказательства оставить на главной
Обещание качества полезно подкрепить материалом, который можно рассмотреть: выполненной работой с описанием задачи, составом команды, действующим документом или объяснением процесса. Выбор зависит от вопроса посетителя.
Если человек сомневается в опыте с похожим объектом, фотография офиса отвечает на другой вопрос, поэтому я бы выбрал несколько работ, связанных с основными направлениями компании, вместо ленты всех проектов подряд. Посетитель узнаёт свою задачу. Ссылка ведёт к подробному описанию работы, а краткий блок объясняет, почему её стоит открыть. Для каждой работы достаточно кратко назвать исходную задачу, участие компании и то, на что стоит обратить внимание в результате. Такая подпись позволяет отличить разработку с нуля от отдельной доработки и помогает понять, за какой частью показанного результата стоит команда.
Цифры публикуют вместе с основанием. Если компания приводит результат проекта, ей нужны исходные данные и понятный период, чтобы краткая подпись на главной не приписывала работе эффект, который никто не измерял.
Когда проекты пока нельзя раскрывать, на главной можно объяснить порядок работы и представить специалистов. Материалы берут из реальных документов компании. Перед публикацией ответственный сотрудник уточняет, какие сведения допустимо раскрыть и достаточно ли их, чтобы читатель понял роль команды. Подробное описание процесса в такой ситуации отвечает на конкретный вопрос: кто берётся за задачу и как организует её выполнение.
Контакты и отзывы
Доверие поддерживают и простые контакты. Наименование компании, способы связи и объяснение, кто отвечает на заявку, связывают страницу с предстоящим общением. В этой конфигурации посетителю полезно знать, с кем начнётся разговор — с продавцом, техническим специалистом или координатором. Эту информацию подтверждает отдел, который принимает обращения. Если у разных направлений разные получатели, подпись у формы или номера телефона поможет выбрать нужного.
В отзыве важны предмет работы и понятный источник. Перед публикацией компания получает необходимые разрешения и выбирает отклики, связанные с основными услугами, чтобы читатель мог сопоставить оценку другого клиента со своей задачей.
Что передать дизайнеру и как читать первый макет
Структура главной страницы начинается с содержания. Маркетолог собирает названия направлений, тезис о компании, материалы для подтверждения опыта, контакты и условия следующего шага, а затем для каждого блока пишет вопрос посетителя и короткий ответ. Так дизайнер понимает задачу каждого блока. Перед ним лежат готовые материалы, с которыми предстоит работать. Если для блока пока нет ни фактов, ни изображения, это становится отдельной задачей подготовки, а не пустым прямоугольником, который предстоит заполнить после утверждения всей композиции.
Я советую передавать вместе с текстами адреса переходов и имя сотрудника, который подтвердил сведения. Это полезнее списка «Преимущества — услуги — отзывы»: дизайнер понимает назначение каждого блока, а маркетолог знает, с кем обсуждать спорную формулировку.
Заголовки помогают читать страницу выборочно. В руководстве W3C по структуре страницы рекомендованы логическая иерархия заголовков и обозначение её областей: это поддерживает ориентирование с клавиатурой и вспомогательными технологиями. На макете полезно прочитать только заголовки. Они показывают, виден ли предмет услуги без основного текста и можно ли найти нужную часть страницы.
Движение, форма и телефон
Карусель требует отдельного внимания. W3C описывает для неё остановку движения, управление с клавиатуры и сообщение о смене содержимого пользователям вспомогательных технологий. Для нашего сайта услуг я предпочёл бы статичный основной тезис, а дополнительные предложения разместил ниже: основные сведения доступны сразу, и приёмка не зависит от порядка автоматической смены слайдов.
У формы нужны понятные подписи. Руководство W3C по меткам полей поясняет, что подпись обозначает назначение элемента и связывается с ним, в том числе для вспомогательных технологий. На макете заказчик смотрит, остаётся ли после заполнения понятно, где имя, а где контакт. Техническую связь демонстрирует разработчик. Для этой формы я бы оставил видимые подписи рядом с полями: посетитель сможет сверить введённое, не очищая поле и не вспоминая исходную подсказку.
Телефон и форма ведут к одной задаче — разговору с компанией. Рядом с номером стоит указать, по каким вопросам туда звонить, а в сообщении после отправки формы объяснить, что будет с заявкой.
На телефоне порядок блоков читают заново, потому что две колонки превращаются в длинную последовательность и направление услуги может оказаться после всех изображений, которые на большом экране стояли рядом с ним. Для приёмки нужен настоящий текст. Пустые прямоугольники скрывают переносы строк. Я предлагаю пройти страницу с реальными названиями, описаниями и фотографиями, а затем открыть форму и нужное направление. Замечания относятся к определённому месту и действию: что пришлось искать, где потерялся заголовок, какой переход оказался незаметен.
Принять главную можно по трём вопросам
После просмотра главной посетитель может объяснить, чем занимается компания, найти своё направление и понять, как начать разговор. Это три самостоятельных результата.
Для обсуждения с подрядчиком полезно описывать замечания через задачу посетителя: что он не смог понять или найти, в какой части страницы ожидал увидеть ответ и что ему нужно для продолжения выбора. Такой комментарий можно разобрать. Он указывает место проблемы. Просьба «сделайте главную продающей» оставляет исполнителю угадывать причину недовольства, а конкретное замечание помогает решить, нужен другой текст, порядок блоков или более заметный переход. После изменения проходят тот же путь ещё раз и смотрят, удалось ли получить нужный ответ.
Руководитель подтверждает обещания компании: географию, состав услуг, порядок ответа и сведения о выполненных работах. На основе этих материалов маркетолог может принять содержание главной и передать дизайнеру ясные условия дальнейшей работы.
Дальнейшие требования к разделам удобно связать с задачами корпоративного сайта. Когда содержание готово, в ШТАБ ИТ поможем выбрать блоки, с которыми вашей аудитории будет проще сделать следующий шаг.
Источники и полезные ссылки
- Nielsen Norman Group: ясность главной страницы ↗
- W3C: структура страницы ↗
- W3C: назначение ссылки в контексте ↗
- W3C: доступные карусели ↗
- W3C: подписи полей формы ↗
Интерфейсы и возможности сервисов могут меняться. Перед настройкой сверяйтесь с актуальной документацией.


