16 октября 2019
21 мин на чтение
1120

Как правильно оформить главную страницу сайта

author__photo
Денис Гордовский
Маркетолог-аналитик
Нет времени читать?

Нажимая на кнопку "Отправить", вы даёте своё согласие на обработку персональных данных.


Назначение главной страницы сайта

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

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг
Узнать подробнее

В зависимости от типа сайта главная страница будет построена по уникальной схеме:

  • Новостной сайт;
  • Сайт компании;
  • Сайт продукта;
  • Блог;
  • Интернет-магазин.

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

Что должно быть на главной странице сайта

Что должно быть на главной странице сайта

Заголовок

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

Аудитория сайта может быть неоднородной, и вам будет сложно найти несколько слов, чтобы достучаться всех. KISSmetrics рекомендуют составлять заголовок, охватывающий 20–35% посетителей, которым продукт или предложение ближе всего.

Мы выбрали простую формулировку, максимально общо описывающую продукты компании. Это B2B-предложение, которое сразу даёт понять, чем мы можем быть полезны бизнесу при построении digital-маркетинговой стратегии:

Система сквозной аналитики, коллтрекинга и управления рекламой

caltouch-platform

Коллтрекинг

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

Подзаголовок

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

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

Размер заголовков и подзаголовков должен быть не менее 22 пикселей, а основного текста — не менее 14 пикселей.

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

Нам уже доверились более 20 000 компаний.

Оформление главной страницы сайта, примеры ниже:
главная страница

 

главная страница

Призывы к действию — CTA

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

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

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

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

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

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

Призывы к действию — CTA

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

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

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

Главная страница сайта, примеры, где есть CTA:

CTA главная страница

CTA главная страница

Вспомогательное изображение

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

Чтобы оптимизировать изображения для мобильных пользователей, используйте сжатые изображения. Причём сжаты они должны быть до загрузки на сайт — часто CMS сохраняют тяжеловесные картинки, просто номинально вписывая их в блок указанного размера. Кроме того, добавьте атрибут alt к изображениям на случай, если мобильное устройство пользователя блокирует любые изображения.

Мы выбрали визуализацию своего продукта на компьютере пользователя — это говорит о продукте наглядно и в то же время соответствует стилистике сайта.

Преимущества

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

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

Преимущества

Социальное доказательство

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

Кейсы — лучший формат, подтверждающий экспертизу B2B.

Социальное доказательство

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

Навигация

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

навигация

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

Контентное предложение

Чтобы привлечь ещё больше потенциальных клиентов прямо с домашней страницы, предложите полезный контент:

  • Путеводитель или руководство;
  • Электронная книга;
  • Видеокурс.

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

Отличительные особенности

В дополнение к преимуществам перечислите некоторые свои ключевые функции. Это даёт людям больше понимания, что представляют собой ваши продукты и услуги.

Опять же, соблюдайте лёгкую и ненавязчивую подачу.

Ресурсы

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

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

Возможно, вам понравится идея вставить пару-тройку дополнительных CTA, каждый для своего этапа в цикле покупки:

  • Простая демонстрация для посетителей, близких к покупке;
  • Кейсы и практические примеры для людей, которые заинтересованы, но хотят получить больше информации;
  • Ресурсы — видео, презентации, white paper — для тех, кто находится в начале воронки.

Показатели успешности

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

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

Оптимизация для мобильных устройств

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

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

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

Как сделать домашнюю страницу лучше

Простота — залог успеха

Сайты с простым дизайном имеют более высокие показатели конверсии.

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

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

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

Поэтому дизайн главной страницы должен быть простым.

Главная страница сайта, примеры:

главная страница

главная страница

Повысьте скорость загрузки

Скорость загрузки оказывает огромное влияние на показатели конверсии. Если сайт загружается слишком медленно, это приведет к потере конверсий.

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

Время загрузки страниц напрямую связано с их простотой.

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

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

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

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

Увеличение трафика на сайте и повышение конверсий легко окупят дополнительные расходы, как текущие, так и в долгосрочной перспективе.

Используйте качественные изображения

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

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

страницы с меньшим количеством изображений имеют более высокие конверсии

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

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

Рассмотрим интернет-магазин.

У вас должна быть подборка высококачественных изображений каждого товара, который вы продаёте. Это может быть и шесть, и десять фотографий только одного предмета.

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

Запускайте A/B-тесты

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

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

Один из лучших способов подобрать оптимальный дизайн для главной страницы — это A/B-тестирование, также известное как сплит-тестирование.

A/B-тест подразумевает запуск альтернативных версий одной и той же страницы с целью определить, какая из них имеет более высокий коэффициент конверсии. 50% трафика видит один дизайн, а остальные 50% — другой.

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

Люди, как правило, убеждены, что предложение, такое как скидка в 20%, поможет увеличить продажи и конверсии. Но как только они запускают A/B-тест, обнаруживают, что это в действительности не работает.

После того, как протестируете один элемент, измените что-то ещё и запустите другой тест.

Если сначала вы тестировали текст кнопки, то потом найдите оптимальный цвет. После этого — размер или размещение.

A/B-тестирование — это непрерывный процесс. Он должен продолжаться столько времени, сколько потребуется, пока вы не поймёте, что достигнут существенный результат.

Анализ результатов

Как понять, что страница оптимизирована и удобна для пользователей?

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

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

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

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

caltouch-platform

Сквозная аналитика

 от 990 рублей в месяц
  • Автоматически собирайте данные с рекламных площадок, сервисов и CRM в удобные отчеты
  • Анализируйте воронку продаж от показов до ROI
  • Настройте интеграции c CRM и другими сервисами: более 50 готовых решений
  • Оптимизируйте свой маркетинг с помощью подробных отчетов: дашборды, графики, диаграммы
  • Кастомизируйте таблицы, добавляйте свои метрики. Стройте отчеты моментально за любые периоды

Оцените
Поделитесь с друзьями
Подпишитесь на обновления
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных.
У вас есть интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Рекомендуем прочитать
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
Callday 2020
Выступают: Aviasales, Aliexpress, Банк Точка, Яндекс.Go, Worldclass, Skillbox, Mango Office, Lamoda и Calltouch
Записаться
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике конфиденциальности.