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

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

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

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

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

Давайте представим, что будет, если у интернет-магазина не будет стартовой страницы:

1. Мы потеряемся.

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

2. Неверно интерпретируем сайт.

Книгу выбирают по обложке, а интернет-магазин — по главной странице. Трудно оценить ассортимент или составить правильное представление о компании, если мы не увидим того, чего ожидаем. А если наши ожидания не совпадают с реальностью, мы закроем сайт и отправимся искать дальше. Здесь важно понимать, что на главной должно быть представлено разнообразие товаров в интернет-магазине. Это вовсе не значит, что нужно выставить товары из всех разделов. Достаточно 30-40 % от верхнего уровня меню. При чем оптимально, чтобы в это число входили максимально контрастные товары, которые бы отражали ассортимент магазина.

3. Не получим скидку.

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

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

Назначение

Существует множество вариантов оформления главной страницы.

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

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

Проведенное исследование компанией Baymard Institute подтверждает то, что когда посетители заходят на сайт, они оценивают предложенный ассортимент по главной странице. И 42 % мобильных домашних страниц не дают четкого посыла даже о типе сайта, на который перешел пользователь.

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

Отличный пример – успешный в Украине маркетплейс Rozetka. Для тех, кто не знаком с проектом название будто намекает, что здесь представлена электроника и техника. Интернет-магазин действительно изначально создавался для продажи товаров такого типа. И первые пять лет проект предлагал бытовую и электротехнику, но с ростом популярности превратился в аналог Aliexpress. Сейчас на сайте есть все: одежда, продукты питания, детские товары, мебель и прочее.

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

Структура

Шапка (хедер)

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

Маст-хэв элементы хедера:

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

Это далеко не исчерпывающий список элементов. Так, в шапке интернет-магазина мебели Blest, который разрабатывала веб-студия «Красный хамелеон», мы видим трехуровневый хедер.

Здесь размещены:

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

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

80 % времени, проведенного на сайте, пользователи отдают именно левой половине.

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

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

А большая часть меню вынесена под «гамбургер». 

Первый экран

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

При разработке баннеров следует учитывать:

• УТП;
• красочное визуальное оформление.

Но стоит быть аккуратным с использованием слайдера под шапкой. Есть исследования о том, что такие элементы снижают юзабилити и не достигают целей. Так, согласно анализу Университета Нотр-Дам, лишь 1 % пользователей пролистает слайдер до конца, а 84 % не пойдут дальше первого изображения карусели.

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

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

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

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

Товарные блоки

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

Так эти элементы реализованы на проектах, с которыми мы работаем:

• Blest

• Aurum

• Glossary

Текстовый контент

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

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

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

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

Оригинально реализована текстовая составляющая интернет-магазина Blest.

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

Кроме этого, выведен блок со слоганом и непосредственно с текстом, где описаны преимущества и особенности покупки товаров в интернет-магазине.

Блок лояльности

К нему можно отнести:

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

Этот блок направлен на работу с возражениями и призван мотивировать посетителя к покупке именно у вас.

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

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

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

Блог

Недавно проведенное исследование B2C Content Marketing 2019 показывает, что в 2019 году произошло увеличение текстового контента на 64%. Мировые маркетологи делают основную ставку на этот канал для повышения продаж и лояльности клиентов.

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

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

Отличный пример – интернет-магазина Glossary. Здесь выведен слайдер с последними записями блога.

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

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

Подвал

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

Примеры футеров с проектов, надо которыми мы работаем (Теплодар, Паркплюс, Dukat):

Если пользователь дошел до этого блока – поздравляем, информация на главной странице заинтересовала его! 

Футер интернет-магазина Aurum состоит из двух уровней.

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

В заключении

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

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

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

Ну а техническую часть вопроса мы готовы взять на себя!