Как оформить главную страницу интернет-магазина: 5 практических советов руководителя отдела UI/UX

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

Вы получите 5 практических советов руководителя отдела UX/UI студии Турум-бурум Дениса Студенникова и узнаете о правильной структуре главной страницы, ее особенностях для mobile и актуальных ecommerce трендах. В сентябре 2024 года мы актуализировали статью и добавили еще один совет. Так что теперь их стало 6 и все они актуальны на сегодняшний день.

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

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

1. Определите цель главной страницы

Основная цель главной страницы интернет-магазина — развести трафик по разделам и предложить как можно больше точек входа. Таким образом пользователь скорее углубится в изучение товаров. Запомните: чем меньше времени посетитель проводит на главной странице интернет-магазина, тем лучше. По словам руководителя UX/UI отдела, в среднем только 2% посетителей скролят страницу до самого конца.  

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

В зависимости от маркетинговых целей интернет-магазина, можно выделить 2 основные задачи, которые должна решить главная страница:

      1. Максимальная концентрация точек входа

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

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

       2. Имиджевая составляющая

Согласно исследованию Sales Benchmark Index, 78% потребителей охотнее покупают продукцию компаний, которых они знают и доверяют. И продуманный дизайн главной страницы позволяет увеличить узнаваемость вашего бренда.

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

Например, главная страница интернет-магазина Intertop — одна из наиболее посещаемых страниц сайта. Это известный бренд, и люди приходят в магазин по брендовому запросу.

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

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

2. Используйте основные элементы главной страницы

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

• Шапка с логотипом. Это обязательная часть дизайна сайта, в которой должна размещаться важная информация о магазине (название, контакты, меню)

Для большей вовлеченности пользователей перед шапкой можно разместить top banner для анонса акций и новостей, как это реализовано в интернет-магазине Zlato.ua.

• Главный баннер — это первое, что видят клиенты, заходя на сайт, поэтому он выполняет несколько функций:

• Вовлекает в тематику интернет-магазина;
• Служит точкой входа на отдельные категории товаров;
• Обращает на себя внимание потенциальных покупателей;
• Рассказывает об актуальных предложениях и акциях магазина.

• Плитка блоков или слайдов с товарами, которая является точкой входа и обеспечивает быстрый доступ к топовым предложениям, новинкам или акционным товарам.

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

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

К примеру, работая над кейсом Samsung Experience Store нам важно было указать пользователям на объективные причины выбрать именно официальную платформу, ведь продукцию Samsung можно купить в большинстве магазинов электроники.

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

• Маркетинговые блоки. Чтобы этот блок был эффективным, нужно создать дополнительную ценность для пользователя: скидку на первый заказ, индивидуальное предложение или доступ к закрытым распродажам. Также действенным инструментом является блок оформления подписки на рассылку бренда.

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

3. Сегментируйте аудиторию на главной странице

Создание нескольких главных страниц — новый тренд в e-commerce, который работает в сфере fashion, например, Intertop, Answer, Zara. В этом случае при первом посещении главной страницы пользователю можно предложить сделать выбор по ключевым параметрам: женский, мужской каталог или детские категории.

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

Читайте статью: Изменение интерфейса интернет-магазина ИНТЕРТОП по ESR подходу или как увеличить ARPU на 71% за год

4. Учитывайте особенности взаимодействия mobile пользователей

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

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

5. Предлагайте персональный контент для регулярных клиентов

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

• Блок с просмотренными товарами под главным баннером. Он позволяет пользователям быстро вернуться к интересующим их позициям сравнить товары и принять окончательное решение об совершении покупки;

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

• Упоминание о товаре в корзине. Это мотивирует пользователя пересмотреть выбранные товары и обычно заканчивается покупкой хотя бы одного из них. В среднем такой блок-напоминание позволяет увеличить конверсию бизнеса на 16%.

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

6. Избегайте распространенных проблем

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

Вот распространенные ошибки, которые стоит учесть при разработке главной страницы интернет-магазина:

• Нет описания компании, названия и/или нечеткий логотип;

• Нерелевантный главный баннер, который не дает понимания, что продает магазин или даже сбивает с толку;

• Слишком много слайдов, которые вызывают “принцип туннельности” у посетителя, однообразие и перегруз информацией;

• Нарушена структура сайта. Например, сразу после главного блока идет блок Instagram, который уводит клиента с официального сайта;

А вот хороший пример, когда пользователь видит поп-ап и с фотографией из соц.сети, и с фото этого же товара на сайте.

• Отзывы о продуктах или самом магазине.

Обычно этот блок лишний на стартовой странице, может раздражать и даже снизить лояльность клиентов. Чего совсем не скажешь об отзывах на странице товара, где они must have. Например, блок с отзывами компании Shiny&Diski – пример удачной реализации развернутой оценки товара. Также в комментариях к товарам видно, как долго человек работает в отрасли, что дополнительно демонстрирует экспертность сотрудников и увеличивает лояльность пользователей.

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

Главное, что можно сказать о главной странице

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

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

‍

‍