UX-дизайн интернет-магазина: как сделать главную страницу
Зачем нужна главная страница
Когда заходишь в популярный интернет-магазин, возникает вопрос: а зачем ему вообще главная страница? Переходы с таргета и поисковиков ведут на отдельные товары и категории, а зашедших на сайт по прямой ссылке можно сразу отправлять в каталог.
В каком-то роде так и есть: если вы достаточно известный бренд, нет смысла превращать главную страницу в продающий лендинг о компании. Но у неё сохраняется обзорная функция — здесь собраны все основные предложения, которые есть на данный момент.
Для известных онлайн-магазинов главная страница — это рекламный хаб и множество переходов в каталог через тематические подборки.
Другие важные элементы главной страницы — шапка и подвал. Шапка отвечает на вопросы об оплате и доставке, а также даёт доступ к элементам управления: каталогу, личному кабинету, спискам избранного.
Подвал как бы заменяет страницу «О компании» — кратко обрисовывает круг её интересов, а также даёт ссылки на корпоративные медиа и соцсети.
Получается, что у главной страницы четыре глобальных задачи:
- дать пользователю доступ к элементам управления
- предоставить ссылки на FAQ о доставке и оплате
- расставить точки перехода в каталог — с помощью рекламы распродаж и тематических подборок товаров
- коротко дать понять, в какой сфере работает компания
Далее мы подробно пройдёмся по элементам главной страницы, сверху вниз.
Шапка сайта и меню
Первое, что мы заметили: многие магазины отказались от закреплённой шапки при скролле. Скорее всего, это связано с увеличением мобильного трафика: лишняя плашка мешает на небольшом экране. Шапку до сих пор закрепляют М.Видео, DNS, Спортмастер, ВсеИнструменты.ру, Петрович, Детский мир.
Выше шапки часто можно найти узкую плашку со ссылками на основные информационные разделы: про оплату, доставку, возврат и статус заказа. Иногда ссылки объединяются в раздел «Помощь» (Asos, DNS, Декатлон, Спортмастер). Декатлон разместил кнопку раздела в шапке, не вынося её на отдельную плашку.
Где-то рядом с шапкой информацию о доставке и оплате дают все интернет-магазины — это сигнал, что у людей сформировалась привычка искать подобную информацию именно там. Если разместить данные разделы в другом месте, пользователям будет трудно их найти.
Также наверху есть выбор города, как правило в левой части экрана — на плашке или в шапке. У Яндекс.Маркета, Беру, Петровича и Book24 город нужно указывать справа. При этом есть магазины, которые не дают выбрать город вообще (Asos, Bonprix) — это значит, что география не влияет на цену товара, указанную в карточке.
Чтобы облегчить выбор товара, магазины добавляют в шапку кнопки «Избранное» и «Сравнить».
При этом кнопка «Сравнить» появляется реже, чем «Избранное». Как правило, её используют только магазины электроники: когда у товара множество технических параметров, возможность сравнить их на одном экране становится важной фичей.
Таким образом верхняя часть сайта выполняет сразу две функции: даёт доступ к элементам управления, а также отвечает на вопросы про оплату и доставку.
Рекламные баннеры
Сразу после шапки на главной странице появляется огромный слайдер. Его задача — привлечь как можно больше внимания, за него глаз цепляется первым.
На некоторых сайтах слайдеры не такие широкие. Тогда рядом появляется место для парочки статичных баннеров (Lamoda, Book24, ОНЛАЙН ТРЕЙД.РУ, Ситилинк, Петрович).
В слайдере и баннерах даётся информация об акциях. Слайды обычно переключаются автоматически, но пользователь может сделать это вручную — с помощью кнопок вправо/влево или точек по количеству картинок в подборке.
На сайте Asos иногда используется статичный баннер-подложка с активными виджетами разделов — можно сразу выбрать нужный без перехода на основную страницу акции. Статичный баннер также использует Яндекс.Маркет — там виджетов нет, зато изображение меняется после каждого обновления страницы.
Над шапкой размещается дополнительный баннер с рекламой. Это зона повышенного внимания, поэтому сюда попадает информация, которая однозначно несёт пользу клиентам. Здесь сообщают о крупных распродажах (OZON, М.Видео, Book24, М.Видео), важных новостях (Беру) или напоминают про бесплатную доставку до магазинов сети (Декатлон).
Баннер над шапкой можно закрыть, а вот слайдер всегда остаётся на экране. Иногда магазины также используют поп-апы при открытии страницы, но это случается крайне редко и только по важным поводам. Например, так маркетплейс Беру сообщил о слиянии с Яндекс.Маркетом.
Продающие виджеты
Ниже слайдера находятся виджеты каталога, в которых товары сгруппированы по различным параметрам. Есть виджеты по акциям, сезонным и тематическим подборкам.
Обычно виджеты представляют из себя наборы фотографий товаров со ссылками на их страницы, но иногда они интерактивные — можно настроить количество и сразу добавить понравившийся товар в корзину.
На некоторых сайтах виджеты также появляются рядом с основным слайдером. Частый выбор для этого места: виджет с товаром дня (Юлмарт, ОНЛАЙН ТРЕЙД.РУ, Связной, Эльдорадо).
Интересное решение применили DNS. Их виджет находится рядом со слайдером и отображает типы акций — пользователь может перейти в каталог, сразу отфильтровав товары по нужному типу предложений.
Подвал
В футере интернет-магазины делают хаб с самым важным о компании. Там размещают ссылки на:
- FAQ
- информацию для партнёров и сотрудников
- рейтинги и дочерние проекты
- соцсети и корпоративные медиа
При этом полной карты сайта в подвале, как правило, нет. Ссылка на каталог иногда остаётся, но подробно по разделам он не расписывается (Bonprix, М.Видео, ОНЛАЙН ТРЕЙД.РУ).
Схема главной страницы
Проанализировав 20 сайтов, мы расписали универсальную схему главной страницы, в которой используются все популярные информационные блоки:
- узкий рекламный баннер, который можно закрыть;
- плашка со вспомогательной информацией, шапка и каталог;
- слайдер с рекламными баннерами;
- виджеты каталога по акциям, типам товаров и тематическим подборкам;
- реклама собственных сервисов;
- подвал.
Основной контент исследования: Артём Полтавцев — редактор, UX-писатель. Оформление статей: Катя Шведюк — дизайнер.