Как сделать эффективную главную страницу для коммерческого сайта?

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

1. Главная страница коммерческого сайта — почему она важна?
2. Какие элементы включает процесс создания главной страницы?
   • Структура
   • Дизайн
   • Текстовый контент
3. Текст для главной страницы
   • Требования к тексту
   • Варианты контента
4. Как повысить эффективность главной страницы?
5. Чего следует избегать при проектировании главной страницы?

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

1. Структура — сочетание блоков с визуальной и текстовой информацией, элементы навигации: меню и ссылки, кнопки целевых действий. Правильная структура позволяет посетителям легче находить необходимую информацию, перейти на необходимую ему страницу веб-сайта, обратиться к менеджеру сайта или оформить заказ.
2. Дизайн — совокупность цветовых, графических, шрифтовых решений, улучшающих восприятие и удобство работы с сайтом.
3. Графические и текстовые материалы или Контент — грамотно подобранные иллюстрации и тексты, содержащие нужную целевой аудитории информацию о компании, интернет-магазине, производимых или реализуемых товарах и услугах, составленные с учетом требований внутренней поисковой оптимизации. Хороший контент мотивирует пользователя совершить заказ или связаться со специалистом интернет-магазина для консультации или покупки.

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

Важно!

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

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

1. Структура титульной страницы

Обратите внимание на то, что несмотря на разнообразие бизнесов и рыночных сегментов, структура (набор и порядок основных составляющих блоков) ключевых страниц у подавляющего числа ведущих современных сайтов и интернет-магазинов достаточно схожа. Это необходимо для того, чтоб пользователь не «потерялся» на сайте и не ушел с него. Лучше выбрать простую, привычную и интуитивно понятную структуру не заставляющую посетителя сайта «думать».

Исторически сложилась следующая структура главной страницы:

1.1. Шапка или хедер — размещается в самом верху страницы

Шапка может включать в себя:

• Логотип или товарный знак компании или сайта.
• Контактные телефон(ы).
• Адрес электронной почты.
• Физический адрес офиса, магазина или склада.
• Время и график работы.
• Ссылку на корзину.
• Ссылку на форму обратной связи с консультантом.

1.2. Главное меню — размещается сразу под шапкой и служит для пользователя навигатором, который помогает ориентироваться в структуре сайта

Оно включает в себя кнопки со ссылками на структуру товарного каталога и основные страницы интернет-магазина, размещенные под шапкой, такие как:

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

Существуют следующие виды меню:

• Горизонтальное меню. Располагается под шапкой веб-сайта и растягивается на всю длину главной страницы. Ссылки, встроенные в кнопки, вкладки или закладки, располагаются слева направо. Иногда горизонтальное меню может включать вложенные разворачиваемые списки.
• Вертикальное меню. Находится в правой или левой части главной страницы. Ссылки выстраиваются сверху вниз.

1.3. Рекламный или промо-блок — блок с визуальной и текстовой информацией о проходящих акциях, скидках, конкурсах, специальных предложениях, популярных товарах или разделах

Является наиболее ярким и привлекающим внимание элементом главной страницы сайта. Крайне важно уделить дизайну блока максимум внимания — именно от верной подачи и оформления зависят 80% успеха данной рекламы.

Материал может быть оформлен, как:

• Витрина. На главной странице размещаются графически оформленные анонсы товаров или разделы из каталога со ссылками на более полное описание. Витрина может включать в себя 3—10 позиций, способных вызвать наибольший интерес у потенциальных заказчиков. Тут важно использовать действительно популярные товары.
• Рекламные баннеры. В этом случае стоит сделать упор на проходящие акции, актуальные скидки и наиболее выгодные предложения либо конкурсы с ценными призами. Если таких мероприятий несколько, можно оформить блок в виде слайдера. Помните, что элементы слайдера не должны показываться слишком долго или переключаться чересчур быстро. Идеальное время показа каждой картинки — 5 секунд. За это время пользователь успеет ознакомиться с интересующей его информацией и узнает о других предложениях.

1.4. Блок формирования лояльности

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

В него могут входить:

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

1.5. Дополнительная информация

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

• Системы оплаты, доступных пользователям на сайте.
• Ссылки на последние новости интернет-сайта и компании.
• Анонсы будущих мероприятий.
• Анонсы полезных вашей целевой аудитории тематических статей.
• Карта или схема проезда в офис или магазин.

1.6. Подвал или футер

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

• Ссылки на основные либо все разделы каталога.
• Иконки для перехода в соцсети.
• Полные контактные данные, название и реквизиты юридического лица.
• Копирайт — годы работы и название сайта или бизнеса.
• Ссылка на HTML-карту сайта.

2. Дизайн

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

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

1. Используемый дизайн должен сочетаться с вашим фирменным стилем, ассортиментом реализуемых товаров или услуг, особенностей вашей целевой аудитории (возраста, социального статуса, уровня доходов, семейного положения, образования и интересов).
2. Юзабилити или степень удобства использования. Визуальные и интерактивные элементы должны помогать воспринимать информацию, выделять важный для клиента контент, сокращать время на поиск информации и достижение целевых действий.
3. Иллюстрации. Все фото, диаграммы или картинки должны быть полезными для посетителей сайта. Не размещайте на главной странице картинки не имеющими отношение к тематике сайта и не позволяющие совершить пользователю дальнейшее прогнозируемое действие.
4. Качество иллюстраций. Все картинки, включая изображения товаров, баннеры, иконки и кнопки, должны быть высокого качества, четкими и не размытыми.
5. Адаптивность страницы и ее отдельных элементов. Важный для пользователя контент главной страницы должен автоматически подстраиваться под размер и разрешение экрана и корректно отображаться на основных типах устройств, которые используют посетители вашего сайта, например, смартфон, планшет, стационарный компьютер, ноутбук телевизор.
   
6. Сочетание цветов. При выборе цветовой гаммы следует использовать не более пяти различных цветов, иначе внешний вид главной страницы будет раздражать пользователя. Цвета должны сочетаться друг с другом.

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

Важно!

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

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

Как правило, готовые шаблону уже содержат основные продающие блоки, но, их нужно использовать и адаптировать (заменить цвета, заголовки, текста, иллюстрации, иконки) под специфику вашего бизнеса, вашей рыночной ниши, особенностей целевой аудитории.

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

Не забывайте про Скорость загрузки страницы. Убедитесь в том, что титульная страница не имеет слишком большой «вес» и загружается не более 10 секунд, как на стационарном компьютере или ноутбуке, так и на мобильных устройствах. Долгое время загрузки может привести к потере потенциальных клиентов, которые не готовы ждать лишние несколько секунд.

Шаг 3. Текстовый контент

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

Цели текста на главной странице

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

1. Знакомство и представление вашего бизнеса или сайта

Текстовый контент должен помочь посетителю понять:

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

2. Мотивация к совершению заказа или контакту

Текст на титульной странице должен убедить потенциального клиента в том, что:

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

3. Поисковое продвижение главной страницы

Чтобы поисковые системы Google и Яндекс после индексации вашего сайта выдавали в результатах поиска главную страницу сайта по необходимым поисковым запросам при формировании SEO-метатегов и текстов необходимо учитывать актуальные требования по текстовой оптимизации.

Требования к тексту для главной страницы

• Структурирование. Как и у самой титульной страницы, у публикуемого на ней текста должна быть четко выраженная структура: заголовки, абзацы, нумерованные и маркированные списки, иллюстрации, иконки, визуальные акценты по которым пользователь сможет легко ориентироваться и находить информацию. Не стоит размещать большой сплошной текст, его, скорее всего, никто не будет читать! Разбейте его на смысловые блоки подзаголовками, иконками и иллюстрациями. Это улучшит и упростит восприятие материала.
• Отсутствие орфографических и синтаксических ошибок. Статья для главной страницы должна быть написана на 100% грамотно, без логических, речевых или смысловых ошибок, неточностей и опечаток. Красиво и грамотно составленный текст оказывает на клиента такой же эффект, как и правильная речь консультанта: повышает лояльность и доверие к фирме, побуждает к дальнейшему изучению страниц интернет-магазина, подталкивает к заказу.
• Актуальность и достоверность информации. Пользователям не нужна устаревшая информация! Публикуйте исключительно актуальную информацию и вовремя обновляйте или удаляйте устаревшие сведения. Особенно это касается контактных данных, наличия товаров, их описания, стоимости, условий доставки и оплаты.
• Правильная подача. Текст должен быть понятен вашей целевой аудитории. Не надо использовать техническую или узкоспециализированную терминологию (если только вашими клиентами не являются профессионалы в определенной сфере).
  Также не стоит слишком очевидно навязывать товары или услуги, определенное мнение.
• Отсутствие «воды». Любая информация, будь то описание вашего бизнеса, преимущество, товаров, характеристик и тому подобное, должна быть максимально точной и лаконичной.

Важно!

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

Варианты контента для главной страницы

• Краткое описание сайта. Лаконичный рассказ о том, что это за сайт или интернет-магазин, что предлагает своим пользователям. Чтобы не распылять внимание пользователя, опустите подробности, но обязательно оставьте ссылку на каталог вашей продукции — клиент сможет самостоятельно изучить товары и их подробное описание. Метод подходит как для нового, так и для уже давно существующего бизнеса в интернете.
• Рассказ о компании. Краткая история создания бизнеса, которая выгодно выделит вас на фоне конкурентов, либо фотографии сотрудников и руководителя с контактными данными. Такой способ повысит лояльность целевой аудитории при условии, если вы не будете использовать штампы, вроде «динамично развивающаяся компания», «профессиональная команда» и аналогичные избитые выражения. Данный вариант контента подходит компаниям, которые уже давно работают на рынке и имеют действительно нетривиальную историю.
• Цели и ценности компании. Если у вашего магазина есть уникальная миссия (допустим, процент с продаж вы отдаете на благотворительность или ваши товары помогают в борьбе за экологию планеты), вынесите эту информацию на главную страницу. Если же такой миссии нет, вы можете перечислить ваши ценности: сервис высокого уровня, гарантия возврата товара и прочее.
• Преимущества компании. При наличии уникального торгового предложения (УТП) вы можете разместить его на главной странице вместе с подробной информацией о ваших плюсах в сравнении с конкурентами. При этом важно, чтоб преимущества были реальными: бонусы для постоянных клиентов, бесплатная доставка, контроль качества и тому подобное.
• Горящие предложения. Наиболее выгодные для клиента бонусы, действующие ограниченное количество времени (товары со скидками, распродажи, акции), которые можно разместить сразу под меню в виде баннеров со ссылками на каталог или страницу оформления заказа.
• Новые товары и услуги. Аналогичные баннеры, как в предыдущем пункте, однако на этот раз с информацией о наиболее актуальных коллекциях товаров. Больше всего они заинтересуют ваших постоянных клиентов, которые ждут обновлений в онлайн-каталоге магазина.
• Рекламный баннер. Крупный баннер со ссылкой на страницу оформления заказа или продвигаемый товар в каталоге. Размещается сразу под меню. Дизайн обязательно должен быть броским, привлекающим внимание и мотивирующим, содержащим размеры скидок, указанные крупным шрифтом.
• Оригинальное обращение. Креативный и нетривиальный текст, цель которого — привлечь и удержать внимание посетителя сайта. Это может быть небольшой рассказ, цитата, стихи или любой другой текст, который выделит вашу главную страницу на фоне конкурирующих интернет-магазинов.

• Копирование текстов с сайтов конкурентов. Текст на главной странице должен быть уникальным с технической точки зрения. Вы можете использовать подход и идеи успешных конкурентов, но контент должен быть оригинальным. Возможно, вам необходимо будет привлечь мракетолога и копирайтера для его подготовки.
• Множество навязчивых всплывающих окон. Постоянно или слишком рано выскакивающие предложения связаться с консультантом, подписаться на новостную рассылку или получить скидку, мешают клиенту изучать уже имеющуюся на экране информацию и побудят его, скорее, уйти с ресурса, чем совершить целевое действие.
• Лишние звуки и музыка. Резкие или непонятные сигналы, навязчивая, неожиданно начинающаяся мелодия или раздражающие звуковые призывы приобрести товар вызовут у пользователя естественное желание — выключить аудио или даже закрыть сайт и больше на него не заходить.
• Нечитаемый шрифт. Многие владельцы веб-сайтов любят «поиграть со шрифтами», однако в большинстве случаев это приводит к тому, что текст становится нечитаемым: слишком вычурный шрифт буквы затрудняют чтение, а мелкий или цветной шрифт бывает попросту не читаемым.
• Обилие рекламы. Большое количество баннеров, мигающих и появляющихся в самых неожиданных местах картинок, виджетов, бегущих строк и прочих элементов — все это действует раздражающе, рассеивает внимание и затрудняет восприятие основной информации.
• Большой «вес» визуальных элементов. Главная страница, чересчур «нагруженная» картинками, фотографиями, видео и прочими графическими составляющими, может грузиться слишком долго, так что многие пользователи могут не дождаться действительно полезной информации и закроют вкладку.
• Принудительная регистрация. Не стоит сразу же предлагать зарегистрироваться человеку, только что зашедшему на ваш онлайн-сайт. С вероятностью в 99% он не захочет тратить свое время либо даже покинет сайт, если только речь не идет об очень большой скидке или другом аналогичном бонусе за регистрацию.
• Сторонняя информация и сервисы. Зачастую, владельцы интернет-магазинов добавляют на сайты контент, который не имеют к тематике сайта никакого отношения (например, курсы валют или прогнозы погоды).
• Горизонтальная прокрутка. Для экранов разрешением 800х600 пикселей вполне можно обойтись без горизонтальной полосы прокрутки, а для наиболее распространенного сегодня разрешения 1024х768 точек вся наиболее важная информация должна находиться в первом экране, то есть до момента прокрутки.
• Отсутствие адаптивной верстки. Согласно мировой статистике, 7 из 10 человек сегодня осуществляют поиск информации и совершают покупки с мобильных гаджетов. Если главная страница вашего сайта не адаптирована под просмотр с этих устройств, вы автоматически потеряете огромное число заказчиков, использующих для онлайн-покупок смартфоны и планшеты.

Что бы измерить и улучшить эффективность страниц коммерческого сайта, необходимо использовать инструменты WEB-аналитики, сервисы: Google Analytics, Яндекс Метрика, Яндекс Вебвизор.

А мерой эффективности будут является коммерческие и поведенческие метрики:

• Процент отказов;
• Среднее время проведенное посетителем на главной странице;
• Процент переходов в разделы каталога и по элементам рекламного блока: баннерам, анонсам товаров.
• Количество:
  • выполненных целевых действий;
  • онлайн-заказов и обращений;
  • звонков.

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