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

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

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

Домашняя страница чаще других становится первой точкой контакта компании с потенциальным клиентом. Она решает следующие задачи:

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

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

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

• На первой странице интернет-магазина разместите каталог товаров, контакты для оформления заказа, адрес. Здесь же расскажите о наиболее востребованных продуктах, акциях, выгодных предложениях.
• Главную страницу сайта услуг оформляйте похожим образом, только наряду с каталогом разместите еще прайс и портфолио. Обязательно опишите конкурентные преимущества компании.
• На стартовую страницу сайта продукта добавьте детальное описание товара, отзывы и видеообзоры. Добавьте информацию о производителе, контакты, форму заказа. 

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

Заголовок

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

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

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

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

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

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

Взгляните еще раз на пример главной страницы сайта: мы сделали акцент на том, что наше главное направление – бизнес, и нам доверяют уже более 25 000 компаний.

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

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

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

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

Призыв должен быть коротким (не более пяти слов) и убедительным. Его задача – мотивировать посетителей на конкретное действие: «оформить  заказ», «связаться с менеджером», «перейти по ссылке». В нашем случае мы призываем людей посмотреть видео и начать пользоваться продуктом:

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

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

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

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

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

Примеры главной страницы сайта с CTA:

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

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

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

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

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

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

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

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

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

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

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

Навигация

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

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

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

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

• путеводитель или руководство;
• электронную книгу;
• видеокурс.

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

Маркетинг

Читайте также:

Контекстная реклама или SEO продвижение: что лучше

Контекстная реклама или SEO продвижение: что лучше

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

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

Ресурсы

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

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

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

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

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

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

https://www.pexels.com/ru-ru/photo/6476584/ 

Контактные данные, формы обратной связи 

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

Желательно, чтобы у разных подразделений компании – руководства, отдела продаж, техподдержки – были разные контактные данные, например, свой номер телефона и email. Разместите их в соответствующих разделах сайта. Основные контакты укажите на главной – это особенно важно. 

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

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

Что нужно убрать

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

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

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

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

Как написать хороший текст для главной страницы

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

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

Важная часть работы над текстами для сайта – оптимизация, подстройка под поисковые системы. Добавьте ключевые фразы в заголовки, мета-описание и сам текст. Например, если у вас фотостудия, то подойдут такие ключи: «фотосессия в студии», «профессиональный фотограф», «студийная съемка», «декораций для фото».

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

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

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

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

Упростите все, что можно

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

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

Примеры главной страницы сайта:

Увеличьте скорость загрузки

Если сайт загружается слишком медленно – конверсия будет низкой. Люди нетерпеливы. Мы привыкли получать контент с молниеносной скоростью. Если сайт не загружается сразу, показатель отказов/bounce rate увеличивается. 

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

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

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

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

Не забудьте про сжатие тяжелых изображений. Для этого у Google есть сервис Squoosh.

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

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

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

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

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

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

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

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

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

A/B-тестирование – это непрерывный процесс. Он должен продолжаться, пока результат вас полностью не устроит.

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

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

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

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

Аналоги сервисов от Яндекс – Google Search Console и Google Analytics.

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

Примеры главных страниц сайта

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

Сайт услуг

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

Пример главной страницы сайта услуг:

Сайт продукта

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

Пример:

Маркетинг

Читайте также:

Продай мне эту ручку! Тест для маркетологов

Продай мне эту ручку! Тест для маркетологов

Сайт магазина

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

Коротко о главном 

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

Предложения от наших партнеров

Рекламное агентство

Бесплатная часовая сессия с ведущим маркетологом

Хостинг-провайдер и аккредитованный регистратор доменных имён

Скидка до 80% на пакет услуг «Быстрый старт» для создания сайта

Агенство по разработке сайтов

Бесплатная помощь в формировании концепции вашего сайта

Сервис по созданию онлайн магазинов

Онлайн магазин без программистов со скидкой 30%

Конструктор сайтов

1 месяц обслуживания в подарок

Creatium

Конструктор сайтов

Бонус при регистрации 300 руб. на 15 дней пользования