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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучше изменить только один элемент, например, текст кнопки CTA, цвет или расположение.

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

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

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

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

Примеры главных страниц под разные цели

Текстовая информационная страница

Главная страница-лендинг

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

Статья в тему: Продающая страница лендинга

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

Голос бренда и эмоциональный настрой

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

Яркий пример – Бургер Кинг

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

Все вместе задаёт нужное настроение.

Дополнительные рекомендации

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

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

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

Используйте фотографии хорошего качества

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

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

Вполне хватит 3-5 изображений на одну небольшую страницу.

Найти бесплатные картинки вы можете в следующих сервисах:

  • Unsplash,
  • Pixabay,
  • Pexels.

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

Проводите A/B-тесты

Бывает, что измененная страница увеличивает конверсию сайта, но часто сложно понять, из-за чего это произошло. То ли дизайн стал привлекательным, то ли интерфейс –простым. В таких случаях используют A/B-тестирование (сплит-тестирование).

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

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

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

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

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

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

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

Google Search Console – аналог Вебмастера от Google, а Google Analytics – аналог Яндекс.Метрики.

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

Лицом сайта является главная страница

Главная страница — это обязательная страница для любого сайта, форума, блога или портала, которая генерируется вручную или с помощью «движков» сайта. Обычно такие движки обозначаются аббревиатурой – CMS (Content Manage System). Программист или верстальщик создаёт сайт, целиком, включая главную страницу, учитывая её предназначение.

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

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

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

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

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

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

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

Посмотреть рекомендации по улучшению мобильной версии вы можете в специальном сервисе от Гугла – Google PageSpeed. Он позволяет выявить не только «косяки» адаптивной версии, но и десктопной. Также в нем вы можете проверить скорость загрузки сайта, что играет важную роль как для посетителей, так и самих поисковых систем.

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

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

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

2. Меню. Оно может быть горизонтальным, вертикальным, комбинированным, но главная цель – дать посетителю понять, как перейти в другие разделы сайта. Сейчас модно прятать меню под значок-гамбургер или в боковую панель. Главное правило, о котором нельзя забывать — красота не должна вредить функциональности вашего сайта. Если пользователям не будет понятно, как пользоваться вашим новомодным меню – лучше сделать выбор в пользу простой классики.

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

Основная функция слайдера – привлечь внимание пользователя

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

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

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

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

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

Это интересно: Создание сайта на WordPress — пошаговая инструкция

Почему главная страница так важна

Тони Хайль (Tony Haile) из Chartbeat утверждает, что у сайта есть всего 15 секунд, чтобы заинтересовать посетителя, иначе он неимоверно пойдет искать дальше то, что не смог найти на вашем ресурсе. Это совсем не значит, что у вас нет удовлетворяющей пользователя информации, может быть, она есть, но находится, например, в конце страницы либо в другом разделе. Но пользователь до туда не дошел, так как сайт не произвел особого впечатления.

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

  • Информационная. Рассказывает посетителю куда именно он зашел, какие услуги предоставляет компания и чем она вообще занимается.
  • Направляющая. Быстрое перемещение между всеми разделами – одна из ключевых функций. Не должно быть такого, что какой-то важный раздел был «зарыт в дебрях». Навигация может быть организована с помощью меню либо активных кнопок.
  • Продающая. Доверие компании повышается с помощью демонстрации преимуществ, выгод для пользователя, а также хорошим маркетинговым ходом.
  • Коммуникативная. Без коммуникации сейчас никуда. Если на главной странице не будет никаких способов взаимодействия с вами, то о высокой конверсии можно забыть.

Что должно быть на главной странице сайта с точки зрения маркетинга

Помните, что каждый элемент страницы должен доносить основную идею сайта. Только так вы сможете вступить с пользователем в полноценный диалог. Для этого главная страница должна содержать (с точки зрения маркетинга) следующие элементы:

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

Вот здесь кратко и просто указали в одном предложении все выгоды от использования сервиса (бесплатно и просто).

2. Текст или другой контент, который понятно разъясняет:

Если пользователю все это будет не понятно, он просто закроет ваш сайт.

Здесь преимущества описаны сразу на первом экране. Подробная демонстрация возможностей на видео. Этот контент усиливает заголовок и подробно объясняет, как использовать сервис. Пошаговая инструкция, стрелочки ведут в кнопке СТА.

3. Призыв к действию (CTA). Это может быть лид-форма, кнопка CTA, отправляющая на страницу с более подробной информацией, и т.п. Самая главная цель этой страницы – удержать посетителя и провести его до следующего этапа воронки продаж. На главной странице лучше всего размещать не один, а два призыва к действию – первичный и вторичный. Например, для уже зарегистрированных пользователей – кнопка «Войти», которая не так ясно выделяется; для тех, кто зашел впервые – кнопка «Регистрация».

У Дропбокс на главной странице два призыва к действию – войти или попробовать решение для бизнеса.

4. Выгоды клиента

Обратите внимание – именно выгоды, а не ваши преимущества. Укажите, почему клиенту будет хорошо с вами, какие его проблемы вы можете решить

Это можно оформить по-разному: слайдером; отдельными блоками; списком. Главное – чтобы это было легко заметить и просто прочесть.

Хороший пример – страница Evernote. Тут очень хороший заголовок, но и перечисление выгод очень хорошо оформлено. Завершает это все четкий призыв к действию.

5. Демонстрация продукта или лучшие работы. Это могут быть фото, или видео, или фотогалерея. Покажите, что вы делаете, убедите не словом, а делом. Картинка (а тем более видео) стоит тысячи слов.

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

6. Социальные доказательства. Это могут быть отзывы клиентов или перечень компаний, с которыми вы сотрудничали (если компании известны, их имена сработают сами по себе). Не делайте частую ошибку – не берите стоковые фото и не пишите отзывы сами. Лучше постепенно соберите обратную связь от своих клиентов.

Очень хорошо работает размещение сканов благодарственных писем, на которых эти отзывы были размещены изначально. Это доказывает, что отзыв – подлинный, настоящий. Чтобы читать было удобнее, его можно  набрать простым текстом (тем более, он будет индексироваться). Как здесь:

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

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

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

Вот пример вывода такой статистики:

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

Сделайте это обязательно: Техническое задание на сайт

Примеры удачного оформления главной страницы сайта

1. Пример удачного оформления отзывов

Слагаемые успеха:

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

2. Эко Хлеб

  • Фотографии продуктов и отрисовка элементов выполнены с высоким качеством.
  • Цветовая гамма, логотип и детали оформления соответствуют ретро-стилю.

3. CloudPassage: видео на главной странице

Секреты удачной главной страницы:

  • Лаконичный дизайн без ненужных элементов. Текст, в котором заключена суть деятельности CloudPassage. Интересная дизайнерская находка для размещения видеоролика.
  • Единственный призыв к действию и работа на опережение: потенциальные сомнения пользователей развеиваются фразами «Без кредитных карт», «Без обязательств».

4. Персона

Слагаемые успеха:

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

5. Carbonmade

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

6. Крошка Картошка

Известный бренд фастфуда на своем промо-сайте использовал сразу несколько интересных находок:

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

7. Evernote.com: пример страниц описания сайта

Слагаемые успеха:

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

CTA «Попробуй Evernote бесплатно» расположена удачно – на стыке полей разного цвета, поэтому привлекает внимание деликатно, но настойчиво

8. Бургер Кинг: шрифт как главный герой

  • Удачное сочетание массивных букв, качественных фотографий и стилизованных элементов UI.
  • Динамическая подгрузка твитов выводит социальные доказательства во flip-блоки.

9. Unlocking

Мы считаем эту главной страницу достойной подражания, потому что:

  • У пользователя не вызывает сомнений назначение этого сайта. Блокировка телефона – проблема, знакомая многим, и на странице есть краткая инструкция по ее решению.
  • Удачное цветовое решение, основанное на контрасте. Социальные доказательства убеждают в эффективности ресурса: «Доверие миллионов: разблокировано более 4 млн. телефонов».
  • Вместо элемента CTA пользователю сразу предлагается заполнить краткую лид-форму: не надо переходить на следующую страницу и ждать ее загрузки.


Подробнее

10. Apidura – бренд велотоваров из Великобритании

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

11. eWedding

К главной странице этого сайта стоит присмотреться, потому что:

  • На ней нет ничего лишнего, все по делу, кратко и информативно.
  • Призыв к действию подтверждается размещенной рядом фразой «Создайте свой бесплатный свадебный сайт за 5 минут».

12. Moosend. Пример успешного редизайна главной страницы

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

13. Tribute Media — маркетинговое агентство из США

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

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: