Книга «Дизайн маркетплейса» . Карточка товара

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

Путь или «хлебные крошки»

Традиционно, путь (или как его ещё называют – хлебные крошки) делался для удобства навигации и понимания где человек находится в моменте. Внешне очень похоже на вложенность папок на вашем персональном компьютере.

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

Фото и галерея

Известно, что товар продаётся в разы лучше, если на его карточке есть много качественных фотографий. В последнее время появилось целое направление дизайнеров, которые занимаются отрисовкой картинок к товарам. Добавляют важные (и не очень) цифры, характеристики и прочую красоту. Они это называют “инфографикой”, хотя к инфографике это, конечно, не имеет никакого отношения.

Текущая картинка

Я пришёл к выводу, что оптимальный вариант – это квадратный формат в треть или даже половину ширины дизайна. Квадрат позволяет вписать любой формат фотографии. А размер – ну это основное, что требуется от фото ))

Большое внимание надо уделить качеству фото. Для оптимизации веса картинок можно использовать скрипты в Фотошопе или специальные онлайн-сервисы.

Не стоит игнорировать варианты 360-градусных панорам и видео. Современные сети (в том числе и мобильные) позволяют спокойно использовать эти технологии.

Увеличение / Зум

В данный момент есть два варианта зума. Некоторые используют эффект лупы – когда увеличивается кусок картинки под курсором. А некоторые делают прямо отдельную фотогалерею с крупными фото и встроенным увеличением. DNS в эту же галерею пристроил фото-отзывы о товаре. Кстати, очень удобно получилось!

Превьюшки товаров

К превьюшкам применимы те же принципы формата, что и для крупной картинки.

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

 

SKU / Артикулы

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

Плитки обычно разбивают на группы. У каждой группы есть заголовок. Плиток и групп может быть довольно много, поэтому следите за размером плиток. Чтобы страница не превратилась в “портянку”.

 

Цена, оптовая цена и доставка

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

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

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

Ниже, кстати, не лишним будет указать минимальную сумму заказа для бесплатной доставки. Не у всех она ещё полностью бесплатная ))

Ну и в конце можно разместить ссылку на все товары бренда.

 

Вкладки описания товара

Описание может быть совершенно любого размера. Может быть в два предложения, а может содержать картинки и видео, перемешанные с маркетинговыми текстами.

Часто продавцы не утруждают себя качественным заполнением описания товара. Но крупные бренды за этим следят достаточно строго.

Из-за такого разнобоя в объёмах текста чаще стали применять отдельные вкладки для Описания, Отзывов и Продавца.

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

Если вы делаете дизайн более-менее стандартного маркетплейса, можно всё сделать и без вкладок: описание, ниже – характеристики, ещё ниже – отзывы. Часто этого вполне хватает.

Стратегии повышения среднего чека

Да да, речь о блоках “Похожие товары”, “С этим товаром покупают” и “Лидеры продаж”. Всё это – способы поднять средний чек. Так называемые, Cross-sell, Up-sell и Down-sell.

Здесь я не буду вдаваться в тонкости маркетинга. Если коротко: Кросс-сейл – это допродажа сопутствующих товаров, Апсейл – предложение более дорогово товара с большим количеством опций, Down-sell – продажа хоть какого-то товара, пусть даже дешёвого.

В разрезе дизайна маркетплейса это выглядит как полоски с товарами.

 

Отзывы о товаре

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

Дизайнеру важно понимать, что интерфейс должен поддерживать разное количество отзывов. Например, на старте можно выводить отзывы каруселью прямо на странице товара. А когда количество отзывов перевалит за серьёзные величины – убирать их на отдельную страницу. Фотографии отзывов, кстати, тоже часто не сразу делают.

 

Что ещё

Интернет-магазинам и маркетплейсам, особенно новым, необходимо набрать трафик. Поэтому не стоит пренебрегать SEO. Я, к примеру, добавляю простой блок с заголовком и коротким текстом. Даже если разработчики не сразу это внедрят, пусть будет задел на будущее.

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

А ещё именно карточке товара можно проводить A/B тесты и прочие эксперименты по повышению конверсии. Дерзайте!