Рубрика развивается при поддержке

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

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

В закладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По данным таких исследований можно

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

Переименовать раздел

Поместить раздел сразу в две категории

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

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

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

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

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

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

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

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

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

  • Расположение меню
  • Контактная информация
  • Выбор города
  • Баннеры и анонсы
  • Вывод ключевых преимуществ

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

Шапка сайта

  • Что важно в шапке
  • Логотип (на всех страницах кроме главной, он — ссылка на главную)
  • Информационное меню (о компании, оплата и доставка, контакты)
  • Телефон/Email (если стратегия компании не предполагает их максимальное скрытые от пользователя)
  • Заявка (для B2B-магазинов, где предусмотрена обработка заявок без конкретных заказов)
  • Корзина
  • Избранное
  • Личный кабинет (регистрация, авторизация)
  • Языковые версии

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

Каталог

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

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

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

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

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

Анонсы могут быть в разных форматах.

Слайдер

Несколько баннеров

Текстовые анонсы

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

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

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

Выборки товаров на сайте

Подвал

Есть информация, которую можно анонсировать только в подвале сайте.

Обычно это ссылки на соц сети

Альтернативная контактная информация (несколько телефонов)

Разветвленное меню по информационным разделам сайта

Основные разделы каталога

Пример подвала в сайте

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

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

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

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

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

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

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

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

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

  • Список товаров
  • Переключение вида списка товаров (вариант с большими фото, с подробным описанием, компактный вид прайс-листом)
  • Сортировка (по цене, популярности, наличию)
  • Фильтрация (по цене, по свойствам, по наличию, по наличию в магазинах)
  • Описание раздела
  • Список подразделов
  • Теги для фильтрации
  • Поиск
  • Постраничная навигация

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

Фото

  • Цена
  • Скидка
  • Наличие
  • Мини описание
  • Доступные цвета
  • Доступные размеры

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

  • Предпросмотр
  • Добавление в корзину
  • Добавление в Сравнение
  • Добавление в Избранное

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

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

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

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

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

  • Цена
  • Наличие
  • Скидка
  • Функции добавления в корзину
  • Избранное
  • Сравнение
  • Доставка
  • Оплата
  • Возврат и обмен
  • Участие в бонусной программе

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

  • Свойства товара
  • Группы свойств
  • Документация
  • Отзывы
  • Вопросы-ответы

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

Товары-аналоги

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

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

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

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

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

Выводы

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

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

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

P.S. За крутым проектированием магазинов пишите нам в IARGA

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Константин Елистратов", "author_type": "self", "tags": [], "comments": 4, "likes": 0, "favorites": 39, "is_advertisement": false, "subsite_label": "marketing", "id": 82002, "is_wide": false, "is_ugc": true, "date": "Thu, 05 Sep 2019 18:49:46 +0300", "is_special": false }
Какая реклама
приносит деньги?
0
{ "id": 82002, "author_id": 55461, "diff_limit": 1000, "urls": {"diff":"\/comments\/82002\/get","add":"\/comments\/82002\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/82002"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
4 комментария
Популярные
По порядку
0

Логотип (на всех страницах кроме главной, он — ссылка на главную - могли бы объяснить почему лого должно быть не клибельным на главной?
И почему выбор именно за постраничной навигацией, а не более удобной и быстрой для пользователя AJAX- подгрузкой?

Ответить
0

Чтобы страница не ссылалась сама на себя.

Ответить
0

Чем это плохо? Ведь многие пользователи чтобы вернуться наверх при просмотре Главной страницы жмут на лого. Да и на vc.ru, Amazon.com и большинстве сайтов так реализовано.

Ответить
0

Аякс подгрузка сложнее индексируется. При постраничной робот "в один шаг" считает все страницы

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }