Как сделать главную страницу сайта: сначала смысл, потом макет

Кто попадает на главную и зачем

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

У такого посетителя три вопроса:

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

Если на главную приходят по названию компании, заголовок страницы для поиска (title) стоит собрать из названия компании и короткого описания того, чем она занимается, — тогда в выдаче сразу видно, что это вы. Остальные запросы лучше отдавать страницам услуг.

Первый экран: что на нём сказать

Первый экран — то, что человек видит, не прокручивая. На нём стоит ответить на первый вопрос посетителя и дать ему действие.

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

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

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

Голоса посетителей и заказчиков

• Участник обсуждения статьи на vc.ru о первых экранах сайтов пишет, что на большинстве из них непонятно, чем занимается компания: «Меня это всегда бесило».
• В том же обсуждении представитель компании-заказчика рассказывает о сайте своей компании: за годы работы сайт несколько раз полностью переделывали и меняли позиционирование, а в итоге «попались в ту же ловушку - на главной не понятно, чем мы занимаемся и какую ценность несем нашим клиентам».
• Участница другого обсуждения говорит с позиции посетителя: ей важно быстро сориентироваться, и «очень раздражает, когда на сайте куча текстовой информации».
• Участник ещё одного обсуждения спрашивает о сайте с напитками: «не сильно ли перегружен анимацией? Возникло ощущение, что мультик смотришь».

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

Порядок работы: сначала содержание, потом макет

Руководитель студии или агентства в давнем опросе CMS Magazine предупреждал: фраза «давайте сначала нарисуем макет, а уже потом решим, что из контента будет на главной» «должна говорить вам о том, что итераций будет много, логики мало».

Порядок, при котором правок меньше:

• Задача страницы. Кто приходит на главную и какое действие вы от него ждёте.
• Вопросы посетителя — по реальной переписке, звонкам, вопросам на встречах.
• Список блоков в порядке этих вопросов.
• Черновые тексты каждого блока: заголовок, пара фраз, кнопка.
• Прототип — схема страницы без цвета и картинок, где видно порядок и объём, отдельно для компьютера и телефона.
• Дизайн — только после того, как прототип и тексты согласованы.

Так спор о цвете кнопки не начинается раньше, чем решено, что на этой кнопке написано.

Какие блоки поставить ниже первого экрана

Набор блоков зависит от бизнеса, но ориентир один: каждый блок отвечает на вопрос посетителя и ведёт дальше по сайту.

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

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

Как не утонуть в правках

О переделках, которые не кончаются, рассказывают заказчики сайтов.

• Владелец бизнеса, зарубежный автор статьи в русском переводе на Хабре, пишет, что с самого начала говорил агентству: «меня волнуют только три страницы: главная, страница продукта и корзина». И дальше: «Вместо этого Веб-Агентство продолжало переделывать дизайн сайта».
• Предприниматель, который трижды заказывал сайты, в давней статье на Spark описывает, как после оплаты виноватым оказывался заказчик: «Вы оплачиваете услугу, вроде бы все проговорили, а потом оказывается, что вы еще и виноваты». Виноват, как он объясняет дальше, в том, что «не так приняли ТЗ, не так поняли замысел дизайнера».

Практический вывод из этих историй: до дизайна стоит записать, что считать готовой работой:

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

Когда справиться самому, а когда звать подрядчика

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

Помощь нужна, когда:

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

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

И граница с другой стороны: если на сайте нет отдельных страниц под услуги, а заявки теряются на обработке, одна новая главная этого не исправит. Начинать тогда стоит со структуры сайта и с того, что происходит после заявки.

Самопроверка готовой главной

Перед запуском пройдите по списку:

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

Как собрать каркас главной

Выпишите вопросы, которые клиенты задают до покупки, в том порядке, в каком их задают, — это и есть каркас главной. Если главная — часть нового сайта, начните с документа, который описывает задачу, структуру и содержание: что в него входит, мы разобрали в статье про техническое задание на сайт. А как писать сами блоки, чтобы они вели к обращению, — в разборе, как написать текст для сайта.

Если нужен сайт целиком — с главной, страницами услуг и формами, которые доходят до вас, — посмотрите, как устроено «Создание сайтов под ключ».

Главная работает, когда по первому экрану понятно, чем вы занимаетесь и что делать дальше. Сначала решите, что сказать, потом — как это оформить, и принимайте работу по задаче, а не по вкусу.