Главная помогает понять предложение и выбрать маршрут

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

Разберём сайт компании с несколькими услугами. Она получает обращения через форму или телефон, а онлайн-оплаты и большого товарного каталога в этой конфигурации нет.

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

Блок «О компании» сам по себе этого не решает. Если он начинается с истории основания и общих слов о качестве, посетитель всё ещё не знает, берётся ли команда за нужную ему задачу, кому позвонить и какие сведения подготовить для разговора.

Как объяснить предложение на первом экране

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

Фраза «Решаем сложные задачи» ничего не сообщает о предмете работы, поэтому вместо неё полезнее назвать услугу, её получателя и ту границу, без которой посетитель ошибётся при выборе исполнителя. Иногда достаточно указать регион или тип объектов. Иногда — назвать этап, за который берётся команда. Маркетолог отбирает существенные условия вместе со специалистом по услуге: подробности будущего договора остаются на странице направления или обсуждаются с менеджером.

В руководстве Nielsen Norman Group о главных страницах названы ясное описание компании и заметные переходы к приоритетным задачам. Я советую один понятный тезис и выбор направления вместо сменяющихся лозунгов: посетитель сразу видит, что ему доступно, и не ждёт нужного слайда.

Изображение и кнопка продолжают обещание

Картинка тоже отвечает на вопрос. Собственный объект, результат работы или команда могут пояснять предложение, если подпись показывает их связь с услугой, а изображение позволяет рассмотреть то, о чём говорит текст. Декоративная фотография переговоров решает задачу оформления. Для подтверждения опыта нужны другие материалы. Я бы подписал снимок кратко — что на нём и какую работу выполнила компания, — чтобы посетителю не приходилось угадывать смысл по интерьеру или оборудованию.

Особого разговора заслуживает кнопка. «Обсудить задачу» уместно, когда после нажатия начинается обращение к специалисту; «Узнать стоимость» обещает сведения о цене, поэтому открывающаяся форма объясняет, какие данные нужны для расчёта и что произойдёт после отправки. При приёмке переходят по кнопке и сопоставляют её обещание с открывшимся содержанием.

Услуги и переходы к подробностям

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

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

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

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

Названия переходов

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

Наглядный разбор

Маршрут с главной до обращения

  1. Понять предложение

    Чем занимается компания и подходит ли она для моей задачи.

  2. Выбрать направление

    Чем услуги отличаются и куда перейти за условиями.

  3. Оценить исполнителя

    Какие работы и сведения подтверждают способность выполнить задачу.

  4. Обратиться

    Что сообщить и какого ответа ждать после отправки.

Схема относится к сайту услуг. Подробности раскрываются по мере выбора посетителя.

Какие доказательства оставить на главной

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

Если человек сомневается в опыте с похожим объектом, фотография офиса отвечает на другой вопрос, поэтому я бы выбрал несколько работ, связанных с основными направлениями компании, вместо ленты всех проектов подряд. Посетитель узнаёт свою задачу. Ссылка ведёт к подробному описанию работы, а краткий блок объясняет, почему её стоит открыть. Для каждой работы достаточно кратко назвать исходную задачу, участие компании и то, на что стоит обратить внимание в результате. Такая подпись позволяет отличить разработку с нуля от отдельной доработки и помогает понять, за какой частью показанного результата стоит команда.

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

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

Контакты и отзывы

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

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

Что передать дизайнеру и как читать первый макет

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

Я советую передавать вместе с текстами адреса переходов и имя сотрудника, который подтвердил сведения. Это полезнее списка «Преимущества — услуги — отзывы»: дизайнер понимает назначение каждого блока, а маркетолог знает, с кем обсуждать спорную формулировку.

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

Движение, форма и телефон

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

У формы нужны понятные подписи. Руководство W3C по меткам полей поясняет, что подпись обозначает назначение элемента и связывается с ним, в том числе для вспомогательных технологий. На макете заказчик смотрит, остаётся ли после заполнения понятно, где имя, а где контакт. Техническую связь демонстрирует разработчик. Для этой формы я бы оставил видимые подписи рядом с полями: посетитель сможет сверить введённое, не очищая поле и не вспоминая исходную подсказку.

Телефон и форма ведут к одной задаче — разговору с компанией. Рядом с номером стоит указать, по каким вопросам туда звонить, а в сообщении после отправки формы объяснить, что будет с заявкой.

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

Принять главную можно по трём вопросам

После просмотра главной посетитель может объяснить, чем занимается компания, найти своё направление и понять, как начать разговор. Это три самостоятельных результата.

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

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

Дальнейшие требования к разделам удобно связать с задачами корпоративного сайта. Когда содержание готово, в ШТАБ ИТ поможем выбрать блоки, с которыми вашей аудитории будет проще сделать следующий шаг.

Источники и полезные ссылки

  1. Nielsen Norman Group: ясность главной страницы ↗
  2. W3C: структура страницы ↗
  3. W3C: назначение ссылки в контексте ↗
  4. W3C: доступные карусели ↗
  5. W3C: подписи полей формы ↗

Интерфейсы и возможности сервисов могут меняться. Перед настройкой сверяйтесь с актуальной документацией.

Игорь Крещенко

Руководитель ШТАБ ИТ. Занимается управлением проектами, веб-разработкой, рекламой и PR. Подробнее об авторе →