Якою має бути головна сторінка інтернет-магазину

Якою має бути головна сторінка інтернет-магазину

Часто первое, что видит пользователь, когда переходит в интернет-магазин – это главная страница. Чтобы принять решение остаться или уйти, человеку требуется всего 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. Тут виведений слайдер з останніми записами блогу.

Підвал

Завершальним елементом сторінки стає футер сайту. У ньому зібрані основні розділи, контактна інформація, елементи CTA, соціальні мережі компанії, доступні платіжні системи, важливі документи (угода користувача, політика конфіденційності, оферта та т. ін.).

Приклади футерів із проєктів, над якими ми працюємо (Теплодар, Паркплюс, Dukat):

Якщо користувач дійшов до цього блоку — вітаємо, інформація на головній сторінці зацікавила його его! 

Футер інтернет-магазину Aurum складається з двох рівнів.

Цей блок містить основні розділи магазину, контакти, корисну інформацію для клієнтів. Нижній — email-підписку на новини проєкту та кнопки для переходу на соціальні сторінки інтернет-магазину. Заклик до дії привертає увагу, але одночасно дає змогу сконцентруватися й на решті інформації в підвалі.

Висновок

Успіх онлайн-магазину багато в чому залежить від головної сторінки, здатної викликати не аби яку цікавість. Саме вона конвертує відвідувачів у покупців.

Ми спробували зібрати основні елементи, що покликані в кожному випадку зацікавити клієнтів прогорнути сторінку цілком, зануритися вглиб сайту та виконати цільову дію. 

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

Ну а технічну частину питання ми готові взяти на себе!