Что должно быть на главной странице сайта? Требования для правильного оформления

Оглавление:

1. Зачем нужна главная страница
2. Логотип
3. Навигация
4. Подвал на сайте
5. Каким должен быть оффер
6. Приоритет на целевом действии
7. Применение изображений
8. Главная страница интернет-магазина
9. Главная страница с услугами
10. Главная страница «продуктового» сайта
11. Главная страница сайта компании
12. Что не должна содержать главная страница сайта

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

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

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

1. Информативность
2. 
   Отвечать запросу целевой аудитории
3. 
   Функциональность и удобная навигация
4. 
   Содержать призывы к действию
5. 
   Быть визуально привлекательной

Логотип

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

Навигация

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

Подвал на сайте

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

Каким должен быть оффер

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

Приоритет на целевом действии

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

Применение изображений

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

Мы разобрали основные элементы, из которых состоит главная страница. Они универсальны и встречаются на сайтах различных тематик. Теперь разберем «основной состав» главной страницы: интернет-магазина, сайта с услугами, сайта-презентации продукта и корпоративного сайта.

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

Сама по себе структура интернет-магазина достаточно сложная, проект имеет много страниц и ссылок между ними. На «главной», как правило:

• товарный каталог с фильтрацией по ценам, популярности и брендам
• 
  «плитки» нескольких товаров из различных категорий (например, бестселлеры или товары со скидками)
• 
  информация об акциях
• 
  ссылки на личный кабинет и корзину
• 
  адрес и контактная информация

Будет не лишним добавить на главную форму связи со специалистом или онлайн-чат. Это облегчит коммуникацию пользователя с вашим бизнесом.

Главная страница с услугами

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

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

Главная страница «продуктового» сайта

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

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

Главная страница сайта компании

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

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

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

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

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

Что такое структура сайта и для чего это нужно

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

Что такое структура сайта

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

Почему важно уделять внимание структуре сайта

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

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

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

Виды структур

Рассмотрим 2 классификации:

Структура с точки зрения логики:

Линейная структура сайта. Самая простая и понятная структура. Страницы связаны цепочкой. Одна страница ведёт к другой. Например, главная страница → услуги → цены → заказ. Такая структура подходит для лендингов, сайтов визиток, веб-ресурсов небольших мероприятий.

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

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

• Иерархическая, или древовидная структура сайта. Самая популярная и удобная структура. Даже, можно сказать, что это универсальная структура сайта. Она отлично подходит для интернет-магазинов. Есть одна главная страница, которая ведёт на общие разделы, а они, в свою очередь, делятся на ряд более конкретных подразделов.

Теперь перейдём ко второй классификации. Структура по типу информации бывает:

• Хронологическая. Страницы структурируются по дате. Такое можно встретить в блогах и новостных сайтах.
• Алфавитная. Страницы располагаются в алфавитном порядке. Это редкий случай, но всё же он встречается. Такое можно увидеть в онлайн-справочниках или словарях.
• Географическая. Страницы сортируются по месторасположению продукта. Например, если компания продаёт один товар, но в разных регионах или странах. Потребитель будет выбирать ту страницу, где есть информация про доставку в его регион.
• Опирается на целевую аудиторию. Разделы ориентированы на разную аудиторию. Например, можно встретить сайты, где есть отдельные страницы для B2B и B2C и B2G клиентов. В зависимости от того, к какому виду покупателя вы относитесь, ту страницу вы и выбираете.
• Тематическая. Разделы и страницы разбивают на тематики. Этот вариант самый распространённый для интернет-магазинов. Например, на сайте есть раздел электроники, книг, еды, канцтоваров. Также этот вид можно встретить на информационных порталах, где сайт разделён на разделы: бизнес и финансы, развлечения, светская хроника.
• Комбинированная. Нетрудно догадаться, что в этом виде сайт использует несколько видов структур.

Требования от поисковых систем к структуре

Официальную инструкцию от поисковой системы Яндекс можно найти на странице. Опишем коротко все моменты:

• У сайта должна быть чёткая ссылочная структура. На каждую страницу должна вести хотя бы одна ссылка с другой страницы. Время, за которое Яндекс проиндексирует страницу, зависит от того, какой уровень вложенности страниц. Чем страница глубже, тем больше времени нужно для её индексирования.
• При входе на главную страницу посетителям должно быть понятно, как устроен сайт. Здесь затрагивается тема понятности для пользователя. Яндексу важно, чтобы людям было удобно пользоваться веб-ресурсами.
• Используйте карту сайта (Sitemap). Для интернет-магазинов это особенно важно, так как они имеют большое количество страниц и поисковому роботу будет трудно ориентироваться на сайте без неё.
• Исключайте из индексирования служебную информацию. К служебной информации относятся: страницы с get-параметрами (фильтрация, сортировка, поиск, сравнение товаров), пользовательские страницы (личный кабинет, регистрация, авторизация, оформление заказа), страницы с результатами поиска по сайту. Запретить индексирование таких страниц можно через robots.txt.
• У каждой страницы должен быть уникальный и понятный для человека URL. В адресе с помощью транслитерации можно писать названия страниц, статей, услуг. Для примера, в нашем блоге мы пишем названия статей с помощью транслитерации: https://2domains. ru/blog/budushee-za-edo-chto-eto-takoe-i-kak-rabotaet.
• Проверяйте корректность symlink. В пути страницы не должно быть много повторений одного и того же токена, например, 2domains.ru/domen/domen/domen. Такие страницы могут не индексироваться.

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

• Сайт должен быть удобным для пользователей.
• Используйте карту сайта (Sitemap).
• Если у вас несколько URL с одинаковым контентом, например, вы используете AMP-страницы, HTML-страницы и мобильное приложение, Google рекомендует указать, как они взаимосвязаны. Это нужно для того, чтобы поисковая система понимала, какой странице отдавать предпочтение в поисковой выдаче. Вам нужно выбрать каноническую страницу и с помощью ссылок связать с ней другие страницы.
• Используйте файл robots.txt, чтобы запретить сканирование страниц с технической информацией.
• Используйте понятные человеку URL (ЧПУ). Для Google важно удобство для пользователя.
• Не используйте сложные многоуровневые URL, например: 2domains.ru/domen1/domen2/domen3.html.

Советы для создания правильной структуры интернет-магазина.

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

1. Размещайте на странице «хлебные крошки». Они будут помогать пользователю перемещаться по сайту.
2. Старайтесь не делать длинную цепочку вложенностей. Хорошо, если клиент с карточки товара может попасть на главную страницу не больше чем за 4 шага.
3. С каждой страницы раздела у пользователя должна быть возможность перейти на главную страницу. Чаще всего на главную страницу ведёт меню в хедере, футере и сайдбарах, а также ссылку на неё делают на лого.
4. Внимательно относитесь к названиям категорий. Они должны соответствовать запросам пользователей. Например, не приветствуются такие названия категорий как «Разное» и «Другое».
5. В категории должно быть не меньше 5-7 товаров. Если пользователь видит в категории 1-2 продукта, у него может сложиться впечатление пустого прилавка. Также такая страница будет плохо ранжироваться: всё из-за того же небольшого выбора для пользователя.
6. Тегируйте товары. Наверняка вы видели в некоторых интернет-магазинах теги. Например, в категории компьютеров есть теги «мощные», «игровые», «компактные». Теги помогают найти пользователям то что нужно, а поисковые роботы используют их как ключевые слова для рекомендации в выдаче.
7. Используйте фильтры для товаров. Определить параметры для фильтрации можно с помощью сервиса Wordstat. Фильтры так же, как и теги, помогут органично внедрить ключевые слова на сайт и помогут ориентироваться пользователям в товарах.

Структура сайта: как сделать её и не запутаться

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

Octopus.do

У Octopus.do простой и удобный интерфейс. Кстати, попробовать эту программу вы можете без регистрации. Авторизация потребуется только при скачивании проекта. Есть функция командной работы. Вы можете делится ссылкой с проектом, и внешние пользователи смогут вносить туда изменения. С платной подпиской можно экспортировать проекты в PNG и PDF. С бесплатной подпиской можно делиться прямой ссылкой на проект. Есть возможность добавлять изображения для большей визуализации, а также текстовые блоки, в которых можно оставлять себе и коллегам дополнительную информацию. В общем, программа good и подойдёт как для небольших проектов, так и для крупных интернет-магазинов.

Flowmapp

Наглядный и удобный сервис для создания карт сайта. Есть шаблоны, поэтому вам не придётся начинать с чистого листа. В шаблонах сразу есть три вида веб-ресурсов: e-сommerce, корпоративный проект и новостной портал. Хочется отметить возможность импортировать структуру из XML-файла. Это полезно при масштабных изменениях сайта или для веб-мастеров, которые используют похожую структуру в разных проектах. К каждому из блоков можно добавлять расширенные описания и прикреплять отдельные файлы. Такая фича будет полезна при наполнении сайта контентом.

Gloomaps

Главное преимущество сервиса — вообще не нужно регистрироваться. Переходите на сайт и сразу оказываетесь в рабочей среде. Дизайн минималистичный и не такой весёлый, как у Octopus.do и Flowmapp, но есть всё, что необходимо для работы. Интерфейс также понятен. Можно сразу выбрать шаблон для ветвистой или линейной структуры сайта или начать делать древовидную. Для многоуровневых проектов есть удобная функция сворачивания целых групп страниц. Gloomaps — бесплатный сервис, но из-за этого есть ограничения. Ссылка на проект хранится 14 дней. Каждое новое посещение проекта продлевает доступность ссылки на следующие 14 дней. Будьте внимательны, чтобы не потерять проект.

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

12 важных элементов, которые должны быть на главной странице каждого веб-сайта [Инфографика]

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

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

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

12 важных элементов, которые должны быть на главной странице каждого веб-сайта

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

1.

Заголовок

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

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

Заголовок должен быть четким и простым. Заголовок Dropbox — отличный пример: «Все, что вам нужно для работы, все в одном месте». Это просто, но эффективно — не нужно расшифровывать жаргон, чтобы понять, что на самом деле делает Dropbox.

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

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

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

Чтобы оптимизировать заголовки для мобильных устройств, используйте более крупные шрифты, чтобы посетители лучше воспринимали их. Маленькие шрифты могут заставить мобильных посетителей сжимать и масштабировать, чтобы читать и взаимодействовать с контентом на вашем сайте. Наш совет? Используйте параметры заголовка в редакторе страницы. Заголовки h2 идеально подходят для заголовков страниц — на странице должен быть только один h2. Подзаголовки должны следовать иерархическому порядку: h3, h4…H6 и так далее. У вас может быть несколько таких заголовков, просто убедитесь, что они расположены по порядку. Например, вы не захотите прыгать с h2 на h4 — вместо этого выберите h3.

3. Основные призывы к действию

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

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

На веб-сайте Afterschool HQ есть два CTA в верхней части страницы, оба предназначены для руководителей программ, которые заинтересованы в продвижении своих внешкольных программ среди семей на сайте. Примечание под более длинным CTA «Создайте свой бесплатный профиль» дает посетителям толчок, необходимый им для создания учетной записи — первый шаг к тому, чтобы стать поставщиком штаб-квартиры Afterschool.

4.

Поддерживающее изображение

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

Чтобы оптимизировать изображения для мобильных пользователей, используйте изображения высокого качества с уменьшенным размером файла. (Пользователям HubSpot не нужно беспокоиться об этом, так как изображения, загружаемые в программное обеспечение HubSpot, автоматически сжимаются. В противном случае сработают такие инструменты, как TinyPNG.) Кроме того, всегда добавляйте замещающий текст к своим изображениям, чтобы сделать их более доступными для посетителей, которые используйте программы чтения с экрана и поднимите свои усилия по SEO на ступеньку выше.

Домашняя страница 4 Rivers Smokehouse — отличный пример эмоциональных изображений: на ней есть серия коротких аппетитных видеороликов в высоком разрешении, которые воспроизводятся по циклу после простого заголовка, подзаголовка и основного призыва к действию:

5.

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

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

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

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

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

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

7. Навигация

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

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

Вот пример четкого, хорошо структурированного дизайна навигации с домашней страницы Slim & Husky’s Pizza Beeria:

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

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

9. Вторичные призывы к действию

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

В то время как ваши основные CTA должны быть в верхней части страницы, поместите дополнительные кнопки CTA в нижнюю часть страницы, чтобы посетители могли нажимать на них при прокрутке вниз. Например, под сгибом главной страницы Spanx вы найдете три четко обозначенных призыва к действию, которые дают людям, которые прокрутили до этого места, еще несколько вариантов для нажатия. Эти вторичные призывы к действию предназначены для двух разных типов конверсий: один крайний слева для скидки 20 долларов, а другой — «купить сейчас», чтобы изучить онлайн-каталог.

10. Функции

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

11. Ресурсы

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

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

12. Показатели успеха

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

Например, на домашней странице Calendly вы найдете названия известных организаций, которые их признали, например Gartner и Dropbox.

Домашняя страница, которую стоит посетить

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

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

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

Как структурировать контент для лучшей домашней страницы

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

Вспомните, как вы выбираете новую книгу. Сначала вы посмотрите на обложку. Это бросается в глаза? Затем вы посмотрите на слоган. Книга звучит интригующе? Если слоган вас зацепил, вы читаете краткое содержание в конце книги. Наконец, вы открываете книгу и погружаетесь в историю. Вы также можете структурировать свой веб-сайт, чтобы имитировать этот процесс, используя то, что называется Принцип конуса.

Эти 2 графика помогут вам составить представление о структуре вашего сайта.

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

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

Почему принцип конуса работает?

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

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

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

Как структурировать свой веб-сайт как профессионал

Веб-сайт компании по производству очков Warby Parker представляет собой отличный пример «конуса» в действии. Я разобью его здесь, чтобы показать, как они это сделали.

1. Начните с яркого изображения, названия и логотипа

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

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

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

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

2. Выделите основной продукт, услугу или достопримечательность вашего сайта

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

3. Следующий уровень вашей домашней страницы побуждает посетителя к действию

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

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

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

4. Предоставьте краткое изложение любой другой важной информации на вашем сайте

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

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

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

Подходит ли принцип конуса для вашего веб-сайта?

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

This entry was posted in Популярное