Москва +7 (495) 772 97 91

Как оформить главную страницу: элементы, правила и нюансы для разных типов сайтов

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

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

Какой должна быть главная страница сайта

  • Информативной. «У вас есть 8 секунд. как презентовать и продать идею» — это не просто название популярной книги Пола Хеллмана. Это действительно так и работает. Дайте пользователю всю главную информацию сразу: кто вы, чем вы занимаетесь, чем отличаетесь от других и как с вами связаться.
  • Удобной и понятной. Пользователь не должен думать: ой, а как тут заказать, а что нажать, а где об этом прочитать. Подайте ему информацию на блюдечке, объясните, подскажите, проведите за ручку до желаемого целевого действия.
  • Красивой. Да-да! Устаревший или непривлекательный дизайн может отпугнуть от вас притязательного пользователя. Конечно, вкусы у всех разные, но если вы не уверены, что ваш дизайн понравится клиентам, делайте как можно проще и лаконичнее — это беспроигрышный вариант.
  • Соответствующей стандартам. В разработке сайтов есть свои тренды. Сейчас, например, все мировые и отечественные бренды стремятся к единообразию. Это характерно и для десктопных, и для мобильных версий сайтов. Главное — не оригинальность, а удобство для пользователя.

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

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

Интернет-магазины

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

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

2. Сделайте узнаваемую иконку корзины, поместите ее в привычное место — в правый верхний угол шапки.

3. Вынесите на главную разделы «Хиты продаж», «Акции» и «Распродажи», кликабельные баннеры с товарами по скидкам. Все современные маркетплейсы и магазины придерживаются этого принципа.

Главная сайта Wildberries: первый экран занимают баннеры

Главная сайта Wildberries: первый экран занимают баннеры

4. Сделайте раздел «Новинки». Эта фишка больше для постоянных клиентов, которые знают ваш постоянный ассортимент и заходят в ваш магазин с целью заказать что-то новенькое.

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

Да-да, я все это смотрела! Не вернуться ли в эти карточки еще раз…

Да-да, я все это смотрела! Не вернуться ли в эти карточки еще раз…

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

Сайты с услугами

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

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

Навигация по услугам на сайте bdbd.ru

Навигация по услугам на сайте bdbd.ru

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

Все прозрачно и понятно

Все прозрачно и понятно

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

  • Опубликуйте имеющиеся сертификаты:Сертификаты агентства «Кокос»

    Сертификаты агентства «Кокос»

  • Не забудьте про награды и места в рейтингах:

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

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

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

Главное в кейсе — показать процесс работы и результат. Лучше визуально

Главное в кейсе — показать процесс работы и результат. Лучше визуально

4. Дайте ответы на популярные вопросы клиентов:

Это снимет часть возражений и сэкономит время сотрудников, которые общаются с клиентами

Это снимет часть возражений и сэкономит время сотрудников, которые общаются с клиентами

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

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

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

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

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

  • Теперь подробно расскажите о преимуществах для клиента и свойствах товара.

    Впечатляет!

    Впечатляет!

  • Если товар сложный в применении, расскажите пошагово, как им пользоваться. Прикрепите фото и видеообзор.

Идеально, если инструкция дается в картинках: это проще воспринимается и снимает часть возражений клиента

Идеально, если инструкция дается в картинках: это проще воспринимается и снимает часть возражений клиента

  • Расскажите о компании-производителе и почему ей нужно доверять. Прикрепите сертификаты, дипломы, награды.
  • Приведите отзывы и кейсы довольных клиентов.

Главное, чтобы отзывы были реальными: фейковые считываются на раз-два

Главное, чтобы отзывы были реальными: фейковые считываются на раз-два

  • Ответьте на популярные вопросы, которые могут возникнуть.

И снова снимаем возражения

И снова снимаем возражения

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

Простой, но рабочий прием — таймер, который отсчитывает время до конца акции

Простой, но рабочий прием — таймер, который отсчитывает время до конца акции

Информационные сайты

К ним относятся новостные сайты, сайты СМИ и медиа, развлекательные и тематические порталы, городские сайты и форумы. Словом, все, у кого продажа товаров или услуг — не главная цель (но вполне себе источник дохода).

1. Часто владельцы таких сайтов забывают об УТП: дескать, раз мы ничего не продаем, о каком торговом предложении может идти речь. Это в корне неверно: УТП нужно, чтобы пользователь понимал, куда он попал и что тут происходит.

УТП Википедии — свобода редактирования

УТП Википедии — свобода редактирования

Возьмем другой пример:

УТП журнала Starhit — самые горячие новости шоу-бизнеса. Там была Бузова и мы не стали скринить дальше, не благодарите

УТП журнала Starhit — самые горячие новости шоу-бизнеса. Там была Бузова и мы не стали скринить дальше, не благодарите

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

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

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

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

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

Ошибки владельцев сайтов на главной странице

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

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

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

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

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

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

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

А какие примеры главных страниц вам нравятся? Напишите, пожалуйста, в комментариях, обсудим вместе сильные и слабые стороны!

Оценить статью
2 ответов

Комментарии 2

Svetlana Lukashevich
Написать комментарий
Мне кажется тут ещё главное не перегружать главную страницу информацией и сделать нормальные шрифты, хорошо читаемые. И, конечно, есть смысл просить знакомых заходит на сайт и предлагать критиковать, это помогает понять, что надо переделать.
Ответить
ssilkavtaganrog
Написать комментарий
Недавно начал изучать html и css, стал разбираться во всех прелестях, но теперь появились вопросы с точки зрения дизайна, как оформить главную и любую другую страницу, благо в данной статье это хорошо расписано и вопросов больше не осталось
Ответить
Написать комментарий
Популярные статьи автора
Кокос.com в рейтингах
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
+7 (495) 772 97 91
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
У меня есть сайт
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
или по email
.
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течение дня, спасибо!