Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua UaRu
Заказать обратный звонок
О нас
  • Отзывы
  • Партнеры
  • Наши клиенты
  • Вакансии
Портфолио
Создание сайтов
  • Создание интернет-магазина
  • Разработка интернет-магазина на PrestaShop
  • Разработка сайтов на Laravel
  • Создание сайта на Wordpress
  • Разработка сайтов на YII2
  • Разработка сайтов на Symfony
Поддержка сайта
  • Доработка сайта
Контакты
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua UaRu
    • О нас
      • Назад
      • Отзывы
        • Партнеры
          • Наши клиенты
            • Вакансии
            • Портфолио
            • Создание сайтов
              • Назад
              • Создание интернет-магазина
                • Разработка интернет-магазина на PrestaShop
                  • Разработка сайтов на Laravel
                    • Создание сайта на Wordpress
                      • Разработка сайтов на YII2
                        • Разработка сайтов на Symfony
                        • Поддержка сайта
                          • Назад
                          • Доработка сайта
                          • Контакты
                          • Блог
                          • Веб-студия
                          • Блог
                          • Какой должна быть главная страница интернет-магазина

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

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

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

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

                          Содержание:

                          Зачем интернет-магазину главная страница
                          Назначение
                          Структура
                          • Шапка (хедер)
                          • Главный экран
                          • Товарные блоки
                          • Текстовый контент
                          • Блок лояльности
                          • Блог
                          • Подвал
                          Заключение

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

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

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

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

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

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

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

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

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

                          Разрабатывайте эффективные интернет-магазины с Красным хамелеоном

                          Заказывайте создание и поддержку eCommerce-проекта компетентным партнерам.

                          Давайте обсудим

                          Назначение

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

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

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

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

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

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

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

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

                          Структура

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

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

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

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

                          • логотип;

                          • телефон;

                          • меню;

                          • корзина, избранное, отложенные товары;

                          • вход в персональную область, регистрация.

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

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

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

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

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

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

                          Приоритет областей просмотра экрана

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

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

                          Кейс. Разработка интернет-магазина мебели. Меню на мобайле

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

                          Первый экран

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

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

                          • УТП;

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

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

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

                          Какой должна быть домашняя страница интернет-магазина – Аурум баннер УТП

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

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

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

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

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

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

                          • Blest

                          Главная страница интернет-магазина. Примеры. Блок Новинки-Акции

                          • Aurum

                          Главная страница интернет-магазина. Пример. Блок новинки, акции.

                          • Glossary

                          Главная страница интернет-магазина. Пример. Блок новинки, акции.

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

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

                          • преимущества покупки в вашем магазине;

                          • качество и польза представленной продукции;

                          • текст для поисковой оптимизации.

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

                          Главная страница интернет-магазина. Оформление, блоки, структура. Пример Ламода.

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

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

                          Главная страница интернет-магазина. Текстовый блок. SEO-текст

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

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

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

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

                          • акции и скидки, которые можно получить за регистрацию, подписку на рассылку или социальные сети;

                          • отзывы покупателей;

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

                          • сертификаты, лицензии и прочие официальные документы.

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

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

                          Блок Сертификаты. Главная интернет-магазина

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

                          Блок с отзывами на главной странице интернет-магазина

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

                          Блог

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

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

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

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

                          Как оформить главную страницу интернет-магазина. Блок со статьями блога

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

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

                          Подвал

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

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

                          Оформление футера на главной странице интернет-магазина

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

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

                          Главная интернет-магазина. Многоуровневый футер

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

                          В заключении

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

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

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

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

                          Поддержка сайта
                          Доработка сайта

                          Давайте сотрудничать!

                          Для разработки и доработки вашего интернет-магазина обращайтесь по телефону или закажите обратную связь.

                          Позвоните мне

                          Это интересно
                          • 15 причин выбрать Laravel для разработки сайта
                            15 причин выбрать Laravel для разработки сайта
                          • Хостинг для 1С Битрикс
                            Как подобрать оптимальный хостинг для сайта на Битрикс
                          • Как выбрать CMS для интернет-магазина
                            Как выбрать CMS для интернет-магазина
                          • Украинская версия сайта – вопросы и ответы
                            Украинская версия сайта – вопросы и ответы
                          • 25 грубых промахов в оформлении корзины – что бесит ваших покупателей
                            25 грубых промахов в оформлении корзины – что бесит ваших покупателей
                          • Вирусы на сайте
                            Вирусы на сайте – как их обнаружить, обезвредить и ликвидировать причиненный ущерб
                          • SEO в 1С-Битрикс: возможности, модули, настройки, инструменты для продвижения
                            SEO в 1С-Битрикс: возможности, модули, настройки, инструменты для продвижения
                          • Что такое корпоративный сайт
                            Что такое корпоративный сайт
                          • Что такое маркетплейс
                            Что такое маркетплейс
                          • Что такое «сайт под ключ»
                            Что такое «сайт под ключ»
                          • Топ-4 актуальных уязвимости 1С-Битрикс
                            Топ-4 актуальных уязвимости 1С-Битрикс
                          • Как установить Wordpress
                            Как установить Wordpress
                          • Как сделать сайт-визитку
                            Как сделать сайт-визитку
                          • Как создать интернет-магазин на Wordpress
                            Как создать интернет-магазин на Wordpress
                          • Что такое дропшиппинг
                            Что такое дропшиппинг
                          О веб-студии
                          Портфолио
                          Вакансии
                          Контакты
                          Блог
                          Создание сайтов
                          Разработка сайтов на Laravel
                          Разработка сайтов на Symfony
                          Разработка сайтов на YII2
                          Создание сайта на WordPress
                          Разработка интернет-магазинов
                          Создание интернет-магазина на Prestashop
                          Разработка b2b-сайтов и порталов
                          Разработка личного кабинета
                          Поддержка сайтов
                          Доработка сайтов
                          Перенос сайтов с Битрикс на другую платформу
                          Синхронизация с ERP-системами

                          Карта сайта
                          Оплата и расчеты
                          Гарантии
                          Наши контакты


                          +38 (095) 520-30-05
                          hello@redchameleon.com.ua
                          Украина, г. Киев, ул. Беломорская, д. 1А
                          • Facebook
                          • Telegram
                          • Viber
                          • WhatsApp
                          WEB-агентство Красный Хамелеон
                          WEB-агентство Красный Хамелеон. Разработка, поддержка, продвижение сайтов и интернет-магазинов
                          в Украине (Киев, Харьков, Одесса, Днепр, Львов) и других странах.
                          © 2013-2022, Красный хамелеон.