UX-дизайн интернет-магазина: как сделать главную страницу в 2020

Мы провели исследование: взяли 20 крупнейших e-commerce в России и рассмотрели их дизайн под микроскопом.

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

В Ratio мы занимаемся веб-разработкой на заказ: создаём сайты и веб-сервисы, в том числе для e-commerce. В этом году провели исследование, чтобы понимать, в какую сторону развивается UX в сфере онлайн-торговли.

Я директор и участвовал в исследовании как консультант, а сотрудники Ratio собирали и анализировали UX-решения. Данные актуальны на сентябрь 2020 года.

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

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

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

Статьи будут публиковаться на разных площадках, так что подписывайтесь на телеграм-канал @panfilovonline — там я буду выкладывать ссылки по мере их появления.

Какие сайты мы исследовали

Для анализа выбрали 19 онлайн-магазинов, стараясь выцепить крупнейших игроков в основных секторах потребительского рынка: электроника, одежда, стройматериалы, спорт и маркетплейсы «всё-в-одном». Дополнительно взяли Яндекс.Маркет — это агрегатор цен, но по UX-дизайну он похож на полноценный интернет-магазин.

Кстати, скоро он действительно станет магазином. Яндекс.Маркет и Беру объединяются под одним брендом, но когда мы взялись за исследование, об этом ещё не было известно.

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

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

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

Для известных онлайн-магазинов главная страница — это рекламный хаб и множество переходов в каталог через тематические подборки.

Главная страница книжного магазина Book24, разработкой которого мы занимались.

Другие важные элементы главной страницы — шапка и подвал. Шапка отвечает на вопросы об оплате и доставке, а также даёт доступ к элементам управления: каталогу, личному кабинету, спискам избранного.

Подвал как бы заменяет страницу «О компании» — кратко обрисовывает круг её интересов, а также даёт ссылки на корпоративные медиа и соцсети.

Получается, что у главной страницы четыре глобальных задачи:

  1. дать пользователю доступ к элементам управления
  2. предоставить ссылки на FAQ о доставке и оплате
  3. расставить точки перехода в каталог — с помощью рекламы распродаж и тематических подборок товаров
  4. коротко дать понять, в какой сфере работает компания

Далее мы подробно пройдёмся по элементам главной страницы, сверху вниз.

Шапка сайта и меню

Первое, что мы заметили: многие магазины отказались от закреплённой шапки при скролле. Скорее всего, это связано с увеличением мобильного трафика: лишняя плашка мешает на небольшом экране. Шапку до сих пор закрепляют М.Видео, DNS, Спортмастер, ВсеИнструменты.ру, Петрович, Детский мир.

Иногда шапка не просто остаётся на экране, а изменяется: сжимается по вертикали и теряет часть функций (Спортмастер).

Выше шапки часто можно найти узкую плашку со ссылками на основные информационные разделы: про оплату, доставку, возврат и статус заказа. Иногда ссылки объединяются в раздел «Помощь» (Asos, DNS, Декатлон, Спортмастер). Декатлон разместил кнопку раздела в шапке, не вынося её на отдельную плашку.

Порой плашка со вспомогательной информацией находится под шапкой (Беру, ОНЛАЙН ТРЕЙД.РУ).

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

Также наверху есть выбор города, как правило в левой части экрана — на плашке или в шапке. У Яндекс.Маркета, Беру, Петровича и Book24 город нужно указывать справа. При этом есть магазины, которые не дают выбрать город вообще (Asos, Bonprix) — это значит, что география не влияет на цену товара, указанную в карточке.

Также выбор города может отсутствовать, если у магазина мало физических представительств и доставка жёстко привязана к ним. В этом случае в шапке появляется кнопка «Мой магазин» (Декатлон).

Чтобы облегчить выбор товара, магазины добавляют в шапку кнопки «Избранное» и «Сравнить».

При этом кнопка «Сравнить» появляется реже, чем «Избранное». Как правило, её используют только магазины электроники: когда у товара множество технических параметров, возможность сравнить их на одном экране становится важной фичей.

Часто «Избранное» и «Сравнить» работают даже без регистрации (Яндекс.Маркет, OZON, Asos, М.Видео, Связной, DNS, Спортмастер, Декатлон, Bonprix).

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

Рекламные баннеры

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

Основной слайдер занимает всю ширину области просмотра (Беру, М.Видео, DNS, Wildberries, Bonprix, Спортмастер, Декатлон, Детский мир).

На некоторых сайтах слайдеры не такие широкие. Тогда рядом появляется место для парочки статичных баннеров (Lamoda, Book24, ОНЛАЙН ТРЕЙД.РУ, Ситилинк, Петрович).

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

На сайте Asos иногда используется статичный баннер-подложка с активными виджетами разделов — можно сразу выбрать нужный без перехода на основную страницу акции. Статичный баннер также использует Яндекс.Маркет — там виджетов нет, зато изображение меняется после каждого обновления страницы.

Над шапкой размещается дополнительный баннер с рекламой. Это зона повышенного внимания, поэтому сюда попадает информация, которая однозначно несёт пользу клиентам. Здесь сообщают о крупных распродажах (OZON, М.Видео, Book24, М.Видео), важных новостях (Беру) или напоминают про бесплатную доставку до магазинов сети (Декатлон).

На сайте М.Видео есть дополнительный узкий баннер под шапкой.

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

Продающие виджеты

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

Свои виджеты могут быть у крупных распродаж и популярных категорий товаров (OZON).

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

На некоторых сайтах виджеты также появляются рядом с основным слайдером. Частый выбор для этого места: виджет с товаром дня (Юлмарт, ОНЛАЙН ТРЕЙД.РУ, Связной, Эльдорадо).

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

Подвал

В футере интернет-магазины делают хаб с самым важным о компании. Там размещают ссылки на:

  • FAQ
  • информацию для партнёров и сотрудников
  • рейтинги и дочерние проекты
  • соцсети и корпоративные медиа

При этом полной карты сайта в подвале, как правило, нет. Ссылка на каталог иногда остаётся, но подробно по разделам он не расписывается (Bonprix, М.Видео, ОНЛАЙН ТРЕЙД.РУ).

Схема главной страницы

Проанализировав 20 сайтов, мы расписали универсальную схему главной страницы, в которой используются все популярные информационные блоки:

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

Подписывайтесь на Telegram-канал

Чтобы не пропустить другие материалы с результатами исследования, подписывайтесь на мой телеграм-канал @panfilovonline. Не все статьи будут опубликованы на vc.ru, поэтому телеграм-канал — единственный способ собрать все статьи.

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

Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.

0
6 комментариев
Написать комментарий...
Anna Petrova

Да уж. Ждали откровений, а тут текстовое описание сайтов. Нахрена???

Ответить
Развернуть ветку
Максим Панфилов
Автор

Думаю, откровения чаще встречаются в философских трактатах. Эта статья на подобное, конечно, не претендует — с вами не поспоришь)

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

Ответить
Развернуть ветку
Роман

Ничего нового мы не узнали из вашей статьи

Ответить
Развернуть ветку
Alexandr Goryainov

Зачем тратить время на анализ десктопной версии, когда 80% трафика сейчас - мобильные.

Ответить
Развернуть ветку
Максим Панфилов
Автор

Хороший вопрос! Но я бы не стал противопоставлять десктоп и мобильную версию — они дополняют друг друга, а не исключают.

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

Пару месяцев назад я изучал статистику по e-commerce США за первое полугодие. Более 80% интернет-пользователей хотя бы раз покупали что-то с мобильного устройства. При этом только с мобильных устройств заказывают всего 35% онлайн-покупателей — получается, что 65% хотя бы иногда оформляют покупки на десктопе. Цифра внушительная, так что десктопные версии хоронить рано.

Субъективно, но всё же: мне кажется, что главную страницу внимательно изучают именно десктоп-пользователи. Когда мне нужно заказать что-то на бегу, я сразу перехожу в каталог и благополучно пропускаю всё, что мы описали в статье)

Ответить
Развернуть ветку
Макс Фадеев

Материал очень полезный именно сейчас, когда совершен квантовый скачок в онлайн торговле. Вот в статье https://www.mk.ru/economics/2020/09/06/rossiyane-stali-zalozhnikami-torgovli-v-internete.html читал, что за первые полгода в интернете россияне купили в 3 раза больше, чем до этого.... Неудивительно, конечно, но цифры интересные. 

Ответить
Развернуть ветку
3 комментария
Раскрывать всегда