Карточка товара от А до Я: разбираем сердце интернет-магазина

Карточка товара от А до Я: разбираем сердце интернет-магазина


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

Психология и маркетинг

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

  • помочь принять решение о покупке;

  • сфокусировать внимание, уменьшить фактор отвлечения;

  • снять возможные вопросы, устранить тревожность и неуверенность.

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

Разбираем детально

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

  • навигация;

  • презентация товара;

  • покупка;

  • доказательства;

  • дополнительная информация.

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

Область навигации

область навигации

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

oz.by навигация

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

Учитывая структуру сайта. Этот вариант применяется чаще всего: каждый шаг навигационной цепочки эквивалентен кнопке «назад» в браузере и возвращает посетителя к странице предыдущей категории вплоть до главной.

крошки амазон

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

крошки к результату поиска

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

крошки 2 вида

Область презентации товара

область презентации

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

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

amazon картинка

На страницах Amazon видео и дополнительные фотографии располагаются слева. На странице интернет-магазина Zappos фотографии также расположены слева от основного окна, а снизу — доступные цвета модели.

zapps фото

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

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

Область покупки

Насыщенная и очень важная часть карточки. Именно здесь расположена конверсионная кнопка, цена, опции, и это то самое место, где пользователь должен совершить действие.

область покупки

Цена

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

wildberries цена

Выделите цену цветом: это сделает ее заметной даже при беглом просмотре карточки.

Пользовательские оценки и рейтинги

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

звездочки

Опции: цвет и размер

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

zappos выбор цвета

C размером вас ждет тот же выбор: выпадающий список с доступными размерами или статичное размещение «плиткой» на странице. И аргументы тут те же: статичный вариант занимает слишком много места, которое будет пустовать, если каких-то размеров не окажется в наличии. Зияющая дыра посреди карточки товара нагоняет уныние и чувство дискомфорта.

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

Доставка

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

zappos доставка

Как видите, на карточке из Zappos информация о доставке вынесена в самый подвал. Это потому что по миру они не доставляют, а в любую точку США обувь и одежда приезжают бесплатно. Условия не меняются в зависимости от объема заказа или модепи — незачем тратить место на первом экране, чтобы лишний раз об этом напомнить.

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

Конверсионная кнопка

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

Характеристики и описание

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

Область доказательств и дополнительной информации

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

Область доказательств и дополнительной информации

Условно — это зона под изображениями и видео. Здесь вы можете разместить все, что послужит дополнительным аргументом в вашу пользу: подробные условия доставки, варианты оплаты и возврата. Покажите отзывы о продукте — не игнорируйте их, для 67% покупателей они очень важны. Прикрутите сюда кнопки социальных сетей, чтобы пользователь смог без проблем поделиться понравившимся товаром — это и ему понравится, и для вас будет полезно.

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

Рекомендации и дополнения

Этот элемент несколько спорный. С одной стороны — он реально помогает поднять прибыль. Например, Amazon получает до 34% заказов именно благодаря «сопутствующим товарам». С другой — клевые штуки, которые вы показываете покупателю на карточке товара, могут сбить с толку, он будет бесконечно ходить по страницам и забудет, с чего начинал.

Есть несколько вариантов:

  • показывать дополнительные аксессуары и сопутствующие товары

  • показывать подборку аналогичных рекомендованных товаров.

Вот как это реализовано на Wildberries:

wildberries рекомендации

А вот блоки на Zappos

zappos рекомендации

Пробуйте разные варианты и отслеживайте реакцию покупателей — это лучший способ определить верное направление движения.

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

+ There are no comments

Add yours