Содержание12
- Зачем нужна главная страница, если на неё заходят не все?
- Что сказать на первом экране
- Какие блоки нужны на главной странице?
- В каком порядке ставить блоки?
- Главная для разных типов сайтов
- Тексты и ссылки на главной
- Карусели, видео и анимация: что с ними делать
- Ошибки главной страницы
- Как проверить главную после запуска
- С чего начать
- Частые вопросы
- Источники
Главная страница сайта должна за первый экран ответить на три вопроса: кто вы, что предлагаете и что посетителю сделать дальше. Ниже идут примеры работ или товаров, доводы в пользу компании и понятный следующий шаг — заявка, звонок или переход в раздел. Всё, что не помогает этим задачам, — приветствия, карусели, автозапуск видео — главную только утяжеляет.
Зачем нужна главная страница, если на неё заходят не все?
Главная страница — точка ориентации для всего сайта. Nielsen Norman Group отмечает, что большинство пользователей попадает на сайт через внутреннюю страницу, минуя главную: из поиска, по рекламе, по ссылке. Но потом многие возвращаются на главную как в безопасную гавань, когда теряются на сайте.
Отсюда две задачи главной. Первая — встретить нового человека и сразу объяснить, туда ли он попал. Вторая — служить картой: показать, какие разделы есть и куда идти дальше. Поэтому главная нужна даже сайту, где основной трафик приходит на страницы услуг.
Дорога на главную должна быть с любой страницы. Логотип сайта должен вести на главную — это давняя привычка пользователей, и её нарушение путает людей. NN/g советует дублировать логотип текстовой ссылкой «Главная»: связь логотипа с главной понимают не все, особенно люди, далёкие от техники.
Главная работает и как приветствие для новичка, и как карта для того, кто заблудился. Обе задачи решаются ясностью, а не оформлением.
Что сказать на первом экране
Первый экран — то, что человек видит без прокрутки. NN/g советует относиться к главной как к короткой презентации для потенциальных клиентов: быстро объяснить, чем занимается компания и что можно сделать на сайте.
На первом экране корпоративного сайта обычно нужны четыре вещи. Название и логотип — в левом верхнем углу, где их ищут в первую очередь. Строка о том, что вы делаете: «Ремонт коммерческих помещений в Краснодаре», а не «Мы создаём пространство вашей мечты». Главное отличие от конкурентов — один конкретный довод. И основное действие: кнопка заявки, телефон или переход в каталог.
Приветствия вроде «Добро пожаловать на наш сайт» NN/g называет бесполезными: они ничего не сообщают о компании. Место на первом экране дорогое, и каждая фраза в нём должна работать.
Почему это так важно: пользователи прокручивают страницу дальше, только если первый экран их заинтересовал. В исследовании NN/g с отслеживанием взгляда пользователи проводили около 57% времени просмотра страницы на первом экране. Люди прокручивают, но верх страницы по-прежнему получает больше внимания, чем всё остальное.
Факт. В исследовании Nielsen Norman Group пользователи проводили около 57% времени просмотра страницы на первом экране.
Какие блоки нужны на главной странице?
Набор блоков зависит от бизнеса, но у большинства корпоративных сайтов и визиток он похож. Ниже — блоки в том порядке, в котором их обычно читают сверху вниз.
| Блок | Задача | Что показать |
|---|---|---|
| Шапка | Ориентация и связь | Логотип, меню, телефон или кнопка заявки |
| Первый экран | Ответ «кто вы и что делаете» | Строка о деятельности, главное отличие, основное действие |
| Услуги или каталог | Точки входа в главные задачи | Карточки услуг или категорий со ссылками на разделы |
| Примеры работ | Доказательство на деле | Несколько реальных проектов, товаров или кейсов |
| Доводы | Почему вы | Конкретные факты: опыт, гарантийные условия, сертификаты, клиенты |
| Как мы работаем | Снять страх неизвестности | Этапы от заявки до результата |
| Отзывы | Чужое мнение | Отзывы с именем, компанией или ссылкой на источник |
| Призыв к действию | Следующий шаг | Форма, телефон, мессенджер, адрес |
| Подвал | Справка и навигация | Контакты, реквизиты, ссылки на разделы и документы |
Не обязательно ставить все блоки. Сайту-визитке мастера хватит первого экрана, услуг, примеров работ и контактов. Корпоративному сайту с несколькими направлениями понадобятся почти все, а блок услуг станет главным маршрутизатором. Подробнее о разделах корпоративного сайта мы писали в статье о том, зачем нужен корпоративный сайт и как его создать.
Главное правило для каждого блока — конкретика. NN/g советует показывать примеры реального содержимого сайта, а не описывать, что лежит глубже: три настоящих проекта убеждают сильнее, чем кнопка «Наши работы».
В каком порядке ставить блоки?
Порядок блоков — это порядок вопросов посетителя. Сначала «туда ли я попал», потом «что именно вы делаете», затем «почему вам можно доверять» и наконец «как с вами связаться». Блок, который отвечает на поздний вопрос, поставленный слишком рано, проскакивают.
Чтобы расставить блоки, начните с задач посетителей. NN/g советует, чтобы главная давала понятные точки входа для 1–4 основных задач, с которыми люди приходят на сайт. Для строительной компании это может быть «рассчитать стоимость», «посмотреть объекты», «узнать сроки», «связаться». Эти задачи поднимают выше и выделяют визуально, остальное уходит ниже или во внутренние разделы.
Условный пример для клиники: первый экран с направлениями и кнопкой записи, затем врачи, затем цены-ссылки на прайс, затем отзывы и адреса филиалов. Для интернет-магазина порядок другой: поиск и категории наверху, затем хиты продаж и акции, а доводы про доставку и возврат — короткой полосой.
Мнение. Если вы спорите, какой блок поставить выше, спросите: на какой вопрос посетителя он отвечает и в какой момент этот вопрос возникает. Блок «О компании» почти никогда не должен идти вторым.
Главная для разных типов сайтов
Одна и та же схема по-разному работает на сайтах разного типа. Ниже — на что делать упор.
| Тип сайта | Главная задача главной | На чём акцент |
|---|---|---|
| Сайт-визитка | Быстро дать контакт | Услуги, примеры работ, телефон и адрес на виду |
| Корпоративный сайт | Развести посетителей по направлениям | Блок услуг как маршрутизатор, доводы, кейсы |
| Интернет-магазин | Довести до каталога | Поиск, категории, популярные товары |
| Сервис с личным кабинетом | Объяснить ценность и дать вход | Что делает сервис, вход и регистрация, тарифы-ссылки |
У визитки главная часто и есть почти весь сайт, поэтому на неё ложится больше нагрузки: и рассказ, и доказательства, и контакты. Примеры таких структур для разных ниш собраны в статье о структуре сайта-визитки.
Тексты и ссылки на главной
Главную не читают, а просматривают глазами в поисках своего. Поэтому каждая подпись должна сама объяснять, что за ней.
Самая частая проблема — общие подписи кнопок: «Подробнее», «Узнать больше», «Нажмите здесь». NN/g пишет, что такие слова не говорят, что человек получит после клика, и делают ссылки неотличимыми друг от друга. «Смотреть цены на ремонт офиса» длиннее, но человек сразу понимает, куда ведёт кнопка.
Второе правило — говорить языком клиента. Если клиенты ищут «ремонт под ключ», а у вас на главной «комплексные решения по реализации интерьеров», вас не узнают. Третье — короткие абзацы и подзаголовки вместо сплошного текста: сплошной блок на главной пролистывают целиком.
Не стоит экспериментировать и с раскладкой. NN/g напоминает, что люди проводят большую часть времени на других сайтах и ждут, что ваш сайт работает так же: меню сверху, логотип слева, контакты в шапке и подвале. Необычная навигация заставляет посетителя сначала разбираться в сайте, а не в вашем предложении.
Карусели, видео и анимация: что с ними делать
Карусель на первом экране — компромисс, который часто появляется, когда каждый отдел хочет свой баннер наверху. NN/g отмечает, что люди часто прокручивают карусели, не задерживаясь, а автоматически переключающиеся слайды мешают прочитать даже то, что человек искал.
С движением та же история. Движущиеся элементы часто принимают за рекламу, и взгляд их обходит. Посетители главной не ждут и не любят громкий движущийся контент сразу при входе, поэтому видео с автозапуском и звуком больше раздражает, чем впечатляет.
Что делать вместо: один статичный первый экран с главным сообщением и действием, а остальные предложения — отдельными блоками ниже. Если без карусели не обойтись, отключите автоматическое переключение и сделайте навигацию по слайдам заметной. Видео ставьте с обложкой и запуском по клику.
Честная граница: для бренда, у которого продукт продаётся эмоцией — курорт, ресторан, интерьерная студия, — крупное фото или короткий ролик на первом экране уместны. Но даже тогда поверх должна стоять строка о том, что вы предлагаете, и кнопка действия.
Ошибки главной страницы
Большинство проблем главной видны без исследований — достаточно открыть её глазами нового клиента.
- 01 Непонятно, чем занимается компания
Первый экран занят слоганом, приветствием или абстрактной картинкой.
- 02 Нет следующего шага
Кнопка заявки и телефон спрятаны в подвал или в отдельный раздел.
- 03 Всё выделено одинаково
Десять ярких блоков спорят за внимание, и ни один не выигрывает.
- 04 Общие слова вместо фактов
«индивидуальный подход» и «команда профессионалов» вместо проектов и цифр с подтверждением.
- 05 Тяжёлый первый экран
Видео и анимация грузятся дольше, чем человек готов ждать.
- 06 Устаревшие новости
Блок с последней новостью давно прошедшего сезона говорит, что сайт заброшен.
Как проверить главную после запуска
Главную стоит проверить на данных, а не на вкусе руководителя. Для этого в Яндекс Метрике есть два инструмента.
Карта скроллинга показывает среднее время и количество просмотров участка страницы. По ней видно, до какого блока доходит большинство и где внимание обрывается: если блок с услугами смотрят меньше, чем отзывы, его стоит поднять.
Карта кликов помогает найти элементы, которые кажутся посетителям ссылкой, но не являются ею, и понять, по каким блокам кликают чаще всего. Нередко выясняется, что люди кликают по карточкам услуг без ссылок или по иконкам, которые никуда не ведут. Как подключить счётчик и цели, разобрано в статье о настройке Яндекс Метрики.
Вторая проверка — живые люди. Покажите главную нескольким клиентам или знакомым, которые не знают компанию, и попросите сказать, чем вы занимаетесь и что они бы сделали дальше. Если ответы расходятся с задуманным, первый экран нужно переписывать.
С чего начать
Выпишите 1–4 главные задачи, с которыми к вам приходят клиенты, и одну строку о том, что делает компания. Проверьте, видно ли это на первом экране без прокрутки. Затем пройдитесь по блокам сверху вниз и для каждого назовите вопрос посетителя, на который он отвечает. Блоки без вопроса — кандидаты на удаление.
Если главную нужно собрать заново или вместе со всем сайтом, это можно поручить нам: на странице разработки корпоративного сайта описано, как мы проектируем структуру, тексты и первый экран под задачи бизнеса.
Источники
- Homepage Design: 5 Fundamental Principles — Nielsen Norman Group
- Top 10 Guidelines for Homepage Usability — Nielsen Norman Group
- Homepage Links Remain a Necessity — Nielsen Norman Group
- Scrolling and Attention — Nielsen Norman Group
- Carousel Usability: Effective UI for Content Overload — Nielsen Norman Group
- Карта скроллинга — Справка Яндекс Метрики
- Карта кликов — Справка Яндекс Метрики
