или заполните форму
UX/UI
Как оформить главную страницу сайта: 9 нюансов реализации главной, на которой пользователи задержатся
Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Сегодня расскажем, как создать главную страницу, которая зацепит посетителя и заставит познакомиться с ассортиментом магазина.
Значение главной страницы интернет-магазина
Главная страница сайта должна давать новому посетителю представление о том, куда он попал — какова тематика интернет-магазина, что в нем продается, почему стоит покупать именно здесь. И, конечно, подталкивать к первой покупке. Согласно исследованиям Baymard Institute, 25% испытуемых после перехода на сайт прокручивали главную страницу вниз, чтобы быстро составить представление об ассортименте и решить, стоит ли изучать магазин.
Часть пользователей, которые начинают навигацию по интернет-магазину с главной страницы — это уже состоявшиеся лояльные покупатели. Они заходят на сайт, введя адрес вручную или отыскав его в поисковике по названию. В этом случае задача главной страницы — стимулировать дополнительные заказы.
Очевидно, что от реализации главной страницы интернет-магазина зависят продажи. Стоит учесть ряд нюансов по юзабилити, которые мы рассмотрим ниже.
Как оформить главную страницу интернет-магазина
1. Спроектируйте структуру, опираясь на карту пути клиента
На главной странице должны присутствовать элементы, рассчитанные и на новых, и на постоянных клиентов. Изучите свою целевую аудиторию, ее потребности и ожидания от интернет-магазина, а также сайты успешных конкурентов, чтобы перенять интересные решения.
Элементы главной страницы должны заинтересовывать пользователей и направлять их дальше в соответствии с картой пути клиента (CJM). Подберите такие инструменты, которые будут улучшать пользовательский опыт, делать покупку удобной. Наличие большого количества функциональных элементов также положительно сказывается на позиции интернет-магазина в поисковой выдаче.
Конечно, необходимость тех или иных элементов зависит от ниши интернет-магазина. Но часть из них универсальны и должны быть представлены на любом сайте. Базовая структура главной страницы интернет-магазина:
- шапка,
- меню,
- категории товаров,
- товарные предложения,
- слайдер,
- блок для повышения доверия,
- информационный блок,
- футер.
2. Разместите важную информацию в шапке
Шапка — первое, что бросается в глаза посетителю и помогает сориентироваться на сайте. Информацию в хедере пользователь видит на любой странице интернет-магазина. Старайтесь не перегружать шапку, размещая здесь только действительно важную информацию и функционал:
- название и логотип со ссылкой на главную страницу,
- УТП интернет-магазина или краткую информацию о его деятельности,
- номера телефонов и заказ обратного звонка,
- график работы,
- функционал поиска по сайту,
- функционал авторизации и регистрации,
- ссылку на корзину.
Шапка в магазине ozon.ru
Эта функция улучшает пользовательский опыт на большинстве устройств.
3. Облегчите навигацию с помощью меню
Меню должно органично дополнять шапку и облегчать навигацию по сайту. В нем представляют ссылки на каталог и сервисные страницы — «О компании», «Доставка и оплата», «Политика возврата», «Вопрос-ответ», «Гарантии», «Контакты».
В интернет-магазине может быть два меню. Горизонтальное обычно располагается под хедером, а вертикальное — в левом сайдбаре. В первом представляют сервисные страницы и иногда важные категории, а во втором — подробную структуру каталога с категориями и подкатегориями.
Преимущество горизонтального меню — привычный порядок ссылок (слева направо). Недостаток — меню исчезает из вида при перелистывании страницы. Чтобы исправить недостаток, реализуйте плавающую кнопку «Наверх» или сделайте так, чтобы меню было фиксированным и оставалось в верхней части окна браузера при скролле.
Преимущество вертикального меню в том, что оно всегда перед глазами, есть доступ ко всем разделам каталога. Недостаток — его не всегда досматривают до конца. Больше внимания уделяется категориям, расположенным вверху, поэтому размещайте товары, которые хотите продать в первую очередь, выше.
Для гипермаркетов с большим каталогом идеальным решением является мега-меню. Оно сразу показывает пользователю весь ассортимент. Важно реализовать появление меню по принципу модального окна, так обычное окно исчезнет при случайном скролле страницы.
Мега-меню на ozon.ru
4. Продемонстрируйте разнообразие ассортимента, используя категории
Исследования Baymard Institute свидетельствуют о том, что если пользователь впервые попадает в интернет-магазин и не имеет представления о бренде, он оценивает ассортимент товаров по меню и содержимому главной страницы. Многие респонденты просматривали категории, чтобы оценить ассортимент интернет-магазина.
Отображение категорий на главной странице сitilink.ru
По мнению Baymard Institute, Если на главной представлено мало категорий, то посетители подумают, что ассортимент этим и ограничивается. А значит, уйдут искать нужные товары в другие интернет-магазины.
Baymard Institute рекомендует не прятать категории в одном пункте меню, а отображать их прямо на главной странице. Так новые посетители сразу оценят ассортимент сайта, а повторные смогут быстро перейти к интересующим категориям. Пример ниже не вполне соответствует рекомендациям Baymard Institute — категории спрятаны в каталог:
Отсутствие категорий на sportmaster.ru
Пример хорошего юзабилити сайта и отображения категорий на главной:
Категории на главной странице eldorado.ru
При этом по мнению Baymard Institute важно представить 30−40% категорий (картинками или текстом) и продемонстрировать их разнообразие. При такой реализации испытуемым удавалось правильно оценить ассортимент сайта. Помните о балансе: выводите товары, которые приносят наибольший доход или привлекательны для клиентов, но не ограничивайтесь акциями.
В зависимости от объёма каталога и возможностей проекта, можно настраивать вывод категорий на главной вручную или внедрить специальный функционал. Вы можете применить эти рекомендации, а потом проверить кликабельность по категориям с помощью веб-аналитики.
5. Предлагайте не только категории, но и конкретные товары
Отображение превью отдельных позиций и бандлов на главной странице также помогает получить представление об ассортименте продуктов, согласно исследованиям Baymard Institute. В этом случае ссылка ведет на конкретный товар. Важно, чтобы в карточке товара была возможность перейти в категорию.
Этот подход эффективен, когда товары подбираются в соответствии с интересами пользователей. Также можно размещать самые популярные, уникальные или выгодные по сравнению с предложениями конкурентов товары, новинки. Не показывайте слишком много позиций — выводите не больше десяти.
Товарный блок на eldorado.ru
Если пользователи не ищут конкретный продукт, а на главной странице не отображены категории, они будут использовать функционал поиска или основное меню. Некоторые испытуемые целиком просматривали страницу, а затем возвращались наверх и применяли поиск. А значит, нужно позаботиться о грамотной реализации функционала поиска для сайта интернет-магазина, меню и навигации в принципе.
6. Правильно используйте слайдер
Акции и спецпредложения часто размещают в слайдере, который включает несколько баннеров. Иногда слайды нужно перелистывать вручную, но чаще реализуют автоматическое перелистывание. Это оптимальный вариант для десктопных сайтов: пользователь понимает, что это слайдер, а не статичный баннер, и получает доступ ко всей информации.
Исследователи из Baymard Istitute выяснили, что пользователям в принципе нравятся слайдеры. Испытуемые получали хорошее впечатление об интернет-магазине, когда видели большие и привлекательные изображения. В результате увеличивалось время, проведенное на сайте, и уменьшался показатель отказов, так как пользователи активно взаимодействовали с баннерами и проваливались глубже, знакомясь с акционными предложениями или новыми коллекциями.
При этом важно избежать серьёзных ошибок в юзабилити, иначе наличие слайдера принесет больше вреда, чем пользы. Любая анимированная графика отвлекает от статического контента, поэтому важно, что контент слайдера был качественным, а управление слайдером — удобным. Вы можете заказать аудит юзабилити в KISLOROD, его ценность существенно выше, чем цена юзабилити-аудита.
Использовать статические баннеры в виде отдельных блоков на главной странице проще — с точки зрения информирования покупателей о новом ассортименте или акции. Поэтому подумайте, действительно ли вам нужно реализовывать слайдер в первом экране сайта, ведь так вы не получите стопроцентного охвата. Число ротации того или иного баннера в слайдере на одного пользователя будет ниже, чем при статике.
К тому же, будет не лишнем дублировать рекламные баннеры в наиболее актуальных разделах сайт.
Если все-таки решили использовать слайдер, учтите требования к UX:
1) Размещайте самую важную информацию на первом слайде
Большинство пользователей не увидит все слайды, даже если они будут меняться автоматически — посетители не задерживаются в верху страницы надолго. Первый слайд в любом случае будет самым просматриваемым, поэтому размещайте на нем самый важный контент.
2) Баннеры в слайдере не должны быть единственным путем к уникальному функционалу или контенту
Пользователи могут не увидеть даже первый слайд — например, из-за баннерной слепоты или из-за того, что им привычнее использовать поиск или основную навигацию. Поэтому на важный функционал или пользовательский контент должны быть ссылки в элементах навигации или других блоках на главной или на других страницах сайта.
3) Реализуйте понятное и удобное взаимодействие со слайдером
Пользователю должно быть очевидно, что кроме текущего баннера есть и другие. В этом помогают элементы управления. Можно обозначить слайды рядом точек или черточек. Индикаторные точки должны быть заметными — крупными и контрастными.
Если контент слайдера часто меняется, возможно, лучше отображать элементы не на слайде, а под слайдером. Вместе с индикаторными точками нужно использовать стрелки по бокам изображения — для многих пользователей стрелки понятнее точек. Но и они должны быть крупными и контрастными.
Реализация слайдера на mvideo.ru
Требования к автоматическому перелистыванию слайдера на десктопе:
1) Слайды не должны вращаться слишком быстро или слишком медленно
Если слайдер вращается быстро, пользователь не успеет изучить интересующий слайд. Если слайды сменяются слишком медленно — это раздражает. Продолжительность показа слайда зависит от количества текста на нем. Если это одна фраза, то оптимальное время отображения слайда — 5-7 секунд. Если текста много — 10 секунд. Оптимально назначать индивидуальное время показа для каждого слайда.
2) При наведении курсора автоматическое перелистывание должно останавливаться
Дайте пользователю возможность изучать слайд столько, сколько нужно. Приостановка также помогает избежать ситуации, когда при щелчке мыши посетитель попадает на страницу, связанную со следующим слайдом, потому что слайды внезапно поменялись. Когда пользователь убрал курсор, можно снова запустить автоматическое перелистывание.
Важный момент: на каждом баннере должен быть призыв к действию и СТА — чтобы пользователи понимали, что могут кликнуть на баннер и перейти к странице с конкретными предложениями. Это увеличит кликабельность баннера и вероятность того, что пользователь заинтересуется товарами.
7. Помогите найти товары желаемого бренда
На главной странице можно представить логотипы известных брендов, товары которых продаются в магазине. Если посетителя интересует продукция конкретного производителя, он сможет в один клик перейти к списку товаров, которые будут отсортированы по бренду. Так вы поможете посетителю быстрее найти нужное и повысите вероятность покупки.
Блок с популярными брендами на citilink.ru
8. Не перегружайте страницу текстами
Нужен ли текст на продающей главной странице? Скорее нет, чем да. Особенно если текст пишется не для людей, а исключительно для seo-продвижения. Если хотите информировать человека, добавьте раздел с новостями или блог.
Блоки с полезными обзорами и новостями на citilink.ru
Если все-таки нужно разместить текст, напишите о том, что интересно посетителю — чем полезен интернет-магазин. Пишите лаконично, понятным для целевой аудитории языком. Структурируйте текст, разбивая на абзацы, гармонично вставляйте ключевые слова. О текстах еще подробно поговорим в разделе о seo-продвижении главной страницы.
9. Создайте информативный футер
Футер или подвал — обязательный элемент любого сайта. Но в интернет-магазинах он имеет особое значение — выполняет роль своеобразной карты сайты, в которой перечисляются все важные для пользователя раздела в рамках единого блока.
В футере чаще всего размещают:
- блок с формой подписки на новости и акции;
- ссылки на сервисные страницы сайта;
- контакты — здесь поместится больше информации, чем в шапке;
- иконки со ссылками на социальные сети;
- год запуска интернет-магазина и текущий год;
- ссылки на политику безопасности;
- логотипы платёжных систем и служб доставки, доступных на сайте.
Футер на tamaris.ru
Значение главной страницы для SEO-оптимизации
Главная страница интернет-магазина — центр навигации и для пользователей, и для поисковых систем. На главную приходится высокий процент внешних ссылок. Для главной страницы сайта подбирают высокочастотные поисковые запросы, связанные с деятельностью компании, чтобы обеспечить высокие позиции в выдаче поисковых систем.
Грамотная оптимизация главной страницы имеет огромное значение. И хоть в целом она происходит по тем же правилам, что и для других страниц, есть некоторые отличия и особенности.
Как оптимизировать главную страницу
1. Правильно распределяйте ключи
Контент главной страницы нужно оптимизировать под узкий кластер приоритетных запросов. Ключи должны хорошо совмещаться между собой. Использовать все ключи из семантического ядра ошибочно — так главная страница сайта не сможет подняться на первые позиции.
2. Продвигайте эффективные ключи
Многие размещают здесь набор высокочастотных ключей, релевантных тематике ресурса. Но лучше ориентироваться не только на частотность, но и на ситуацию в выдаче, узнать запросы конкурентов. С помощью специальных сервисов можно выяснить, сколько страниц продвигаются по определенному запросу. И оценить, подойдет ли ключ для главной страницы.
3. Актуализируйте семантику
Периодически (раз в два месяца или спустя месяц после пика пользовательской активности) проверяйте актуальность семантического ядра. Возможно, понадобится убрать или добавить какие-то ключи. Ведь интересы пользователей, а соответственно и выдача, постоянно меняются. Для анализа можно использовать Яндекс.Вордстат или другие инструменты.
4. Оптимизируйте контент
Принимая решение о добавлении текста на главную страницу, изучите сайты конкурентов. Обратите внимание, есть ли у них текст на главной, какого объема, где расположен текст, как структурирован, под какие ключи оптимизирован, есть ли ключи в заголовках, как организована внутренняя перелинковка страниц сайта. После этого можно приступать к созданию текста. Помните, что он должен быть полезным для человека, иметь структуру. Ключи нужно равномерно распределить по тексту.
5. Заполните метатеги
Метатеги предоставляют поисковикам дополнительные сведения о странице. Грамотность заполнения Title, H1, Description напрямую влияет на количество переходов на сайт из поисковой выдачи.
Title — главный SEO-элемент страницы. Вхождение ключевых фраз обязательно. Выберите самый высокочастотный запрос и разместите его в начале заголовка. Не дублируйте этот ключ в тегах других страниц. Обязательно пропишите название магазина, специализацию и регион (если это имеет значение). Оптимальная длина тайтла — до 70 знаков с пробелами.
H1 — заголовок страницы, сообщает о ее тематике. В заголовке H1 нужно отобразить деятельность компании и использовать один раз ВЧ-запрос в удобочитаемой форме, без коммерческих слов. Располагать ключ лучше максимально близко к началу фразы.
Description — описание страницы, которое выводится в сниппет. Чем оно привлекательнее, тем больше вероятность, что пользователи зайдут на ваш сайт. Но description должен быть заполнен корректно. Иначе поисковики могут отобразить другой контент. Description не должен повторять Title. Его размер — до 160 символов. Используйте те же ключи, которые используются в Title и H1, избегайте переспама.
Формулируя мета теги, не поленитесь посмотреть, как они оформлены у конкурентов из топа выдачи. Так вы поймете логику ранжирования и сможете применить эффективные приемы у себя.
6. Оптимизируйте графику
Чтобы привлекать трафик и по картинкам, нужно заняться SEO-оптимизацией изображений. Для этого заполните атрибуты alt и title, и сделайте краткие описания фото с релевантными ключами. Важно проверить, что изображения индексируются, а не блокируются в robots.txt. И помните, что изображения должны быть качественными и уникальными, иначе можно потерять трафик.
7. Уберите «Висячие узлы»
При оптимизации важно обнаруживать так называемые висячие узлы — ссылки, из-за которых вес сайта уходит в никуда. Например, иконки со ссылками, файлы и так далее. Такие висячие узлы нужно закрывать скриптом — так вы передадите больше веса приоритетным страницам.
8. Исключите скрытый текст
Иногда seo-специалисты используют прием черного SEO: с помощью разных хитростей скрывают длинные тексты с многочисленными ключами от посетителей, но при этом текст ранжируется поисковыми роботами. Мы призываем этого не делать — иначе сайту грозит бан. Определить, есть ли на странице скрытый текст, можно с помощью специальных онлайн-сервисов, которые показывают, как видят страницу поисковые роботы и посетители сайта.
9. Скорость загрузки главной страницы
Скорость загрузки сайта и главной страницы в частности имеет огромное значение: если она низкая, посетитель закроет страницу, не дождавшись ее открытия. И все ваши усилия по оптимизации не принесут результата. Скорость загрузки можно проверить с помощью Google PageSpeed Insights.
Скорость загрузки главной страницы lamoda.ru
Там же можно узнать показатели конкурентов и получить персональные рекомендации. Если результат неудовлетворительный, поработайте над уменьшением веса контента — сожмите изображения, откажитесь от ненужного, разместите видео на внешних хостингах. Мы подробно рассказали как оптимизировать интернет-магазин на Битрикс по рекомендациям Google PageSpeed Insights в этой статье. А за надежной технической поддержкой сайта на Битрикс можно обратиться к нам.
Заключение
Грамотная и целенаправленная работа над привлекательностью и удобством главной страницы всегда окупается. Надеемся, наши рекомендации помогут вам выбрать правильное направление.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)
Рекомендованные статьи
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас:
