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

Время чтения: Время чтения: 20 мин.
Нет времени читать?
В предыдущих частях я рассказывал про проектирование интернет-магазинов для SEO и про юзабилити корзины и чекаута. В этой части расскажу про самую масштабную часть интернет-магазина.


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




Проектирование каталога начинается задолго до начала технических работ. Проектирование начинается со структуры каталога.


(по клику откроется в большом размере)

Проектирование структуры


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

Важно понимание того, какие товары с какими используются (а с какими нет), какие категории нужны в той или иной отрасли и чем конкретно их заполнить.

Одна из типичных ошибок - торговать всем подряд.
- У меня есть 100 поставщиков, я возьму от каждого прайс-лист на 10 000 товаров и соберу из него магазин на миллион товаров.

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



Маленький личный кейс.


Я искал кожаную сумку с 2 отделениями на wildberries и пересмотрев 1000 карточек товаров, не смог ее найти.



В небольшом профильном магазине из 100 хорошо подобранных товаров я нашел ее за 5 минут.


От общего к частному


Определившись с ассортиментом, начинаем строить иерархию каталога товаров. От нее уже напрямую зависит внешний вид сайта. До 8 разделов с названиями из 1-2 слов можно разместить в 1 строку в горизонтальное меню. Для большего количества нужно вертикальное меню. Оно не столько удобно и на его основе сложнее построить хороший дизайн.

В целом каталог строится по принципу «от общего к частному» (спасибо, кэп). Что намного менее очевидно: один и тот же товар может находиться в разных категориях. Например, кровать, это и «мебель» и «товары для сна». А матрац - ближе к первому или ко второму?

Небольшое исследование может помочь нам в таких спорных вопросах. Метод исследования называется «карточная сортировка». При этом респонденты раскладывают карточки по соответствию: например «где бы вы искали матрас в первую очередь»?



По данным таких исследований можно
Поместить раздел в нужную категорию
Переименовать раздел
Поместить раздел сразу в две категории

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

Маленький тест - как думаете, где тут батарейки?



Логика поиска


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

Пример портрета ЦА



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


Выявив основные портреты целевой аудитории, переходим к проектированию их путей по сайту.

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

Пример потребностей и болей ЦА



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



Главная страница


Проектирование начинаем с главной страницы сайта. На ней отрабатывается основная концепция структуры.

  • Расположение меню

  • Контактная информация

  • Выбор города

  • Баннеры и анонсы

  • Вывод ключевых преимуществ



Разберем страницу по блокам, чтобы описать, какие функции в них заложены.

Шапка сайта



  • Что важно в шапке

  • Логотип (на всех страницах кроме главной, он - ссылка на главную)

  • Информационное меню (о компании, оплата и доставка, контакты)

  • Телефон/Email (если стратегия компании не предполагает их максимальное скрытые от пользователя)

  • Заявка (для B2B-магазинов, где предусмотрена обработка заявок без конкретных заказов)

  • Корзина

  • Избранное

  • Личный кабинет (регистрация, авторизация)

  • Языковые версии



Вот пример шапки, спроектированной нами



Каталог


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

Вот примеры каталогов на спроектированных нами сайтах

Вертикальный


Горизонтальный


Анонсы и баннеры


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

Анонсы могут быть в разных форматах.
Слайдер
Несколько баннеров
Текстовые анонсы

Пример анонсов в спроектированном сайте


Выборки товаров

Блоки с выбранными товарами. Обычно это хиты, новинки, акционные товары.
Это же могут быть какие-то тематические подборки, например, «готовые образы» в фэшн
Выборки товаров на сайте



Подвал


Есть информация, которую можно анонсировать только в подвале сайте.
Обычно это ссылки на соц сети
Альтернативная контактная информация (несколько телефонов)
Разветвленное меню по информационным разделам сайта
Основные разделы каталога
Пример подвала в сайте


Список разделов


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

Страница со списком разделов достаточно проста в проектировании.
Обычно она бывает в двух вариантах

  • С фото

  • С подразделами



Первый вариант нагляднее


Второй ускоряет поиск нужного раздела и упрощает индексацию сайта.


Если на сайте до 100 разделов, то можно использовать вариант с фото.
Если более 100, то точно лучше использовать вариант с подразделами

Список товаров


Листинг (страница со списком товаров) - одна из самых сложных в магазине. Она должна одновременно отрабатывать все возможные сценарии поиска по сайту.

Основные функции на странице

  • Список товаров

  • Переключение вида списка товаров (вариант с большими фото, с подробным описанием, компактный вид прайс-листом)

  • Сортировка (по цене, популярности, наличию)

  • Фильтрация (по цене, по свойствам, по наличию, по наличию в магазинах)

  • Описание раздела

  • Список подразделов

  • Теги для фильтрации


  • Поиск


  • Постраничная навигация





Какие данные нужны в блоке товара в списке

Фото

  • Цена


  • Скидка

  • Наличие

  • Мини описание

  • Доступные цвета

  • Доступные размеры



Функции в блоке товара в списке



  • Предпросмотр

  • Добавление в корзину

  • Добавление в Сравнение

  • Добавление в Избранное





Карточка товара


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

Соответственно, в карточке можно выделить пять основных функций

Визуальная часть


Фото, видео, панорамный ротатор
Позволяют осмотреть товар с разных сторон, приблизить, изучить в деталях

Функции покупки



  • Цена

  • Наличие

  • Скидка

  • Функции добавления в корзину

  • Избранное

  • Сравнение

  • Доставка

  • Оплата

  • Возврат и обмен

  • Участие в бонусной программе





Детальная информация




  • Свойства товара

  • Группы свойств

  • Документация

  • Отзывы

  • Вопросы-ответы





Кросс-Селл и апселл


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


Сопутствующие товары

Товары, покупаемые с этим товаром. Бра к люстре. Стрелы к арбалету. Краска к плитке. Ну и так далее. Они могут быть ассоциированы как с товаром, так и с разделом (например, 2-3 вида ламп ко всем люстрам)


Преимущества магазина


Блок, напоминающий о преимуществах магазина и о том, почему стоит сделать заказ сейчас.


Выводы


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



  • Уместятся ли в каталог все разделы и товары

  • Сможет ли поисковая система проиндексировать их корректно

  • Будет ли покупателю удобно выбирать товары и искать важную информацию



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

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


P.S. Чтобы быть в курсе новых публикаций, подписывайтесь на меня в Facebook.



Читайте так же

Готовы обсудить проект?

Нажимая кнопку “Отправить” вы даете свое согласие с политикой конфиденциальности

Отправить