×
Россия +7 (495) 139-20-33

Как создать идеальную карточку товара для интернет-магазина

Россия +7 (495) 139-20-33
Шрифт:
1 17005

Каждый SEO-специалист и маркетолог интернет-магазина знает, как важна подача информации о товаре и как это влияет на продажи.

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

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

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

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

Какой контент должна содержать карточка товара?

Один из важных моментов в создании успешной страницы – понимание того, какой визуальный стимул помогает привлечь целевых клиентов, заставить их реагировать так, как вы хотите. Пользователю достаточно всего 5–7 секунд, чтобы принять решение «Да, я здесь останусь» или «Нет, я уйду».

Поэтому не нужно забывать о таких важных моментах, как:

  • Принцип прототипичности – соответствие паттерному восприятию.
  • Интуитивность – понимание процесса принятия решения пользователем.
  • Убедительность – дизайн и контент страницы (в том числе стоит учитывать «психологию цвета»).

Удачная карточка товара включает в себя подробную и достоверную информацию о продукте. На странице обычно присутствуют:

  • полное наименование модели товара;
  • исчерпывающее описание и характеристики;
  • изображения и видео;
  • сведения об оплате, доставке;
  • информация о наличии на складе;
  • цена и кнопка «Купить»;
  • рейтинг и отзывы покупателей.

Но, как вы понимаете, простое наличие этих элементов на товарной странице не означает ее высокой степени конверсии. Для 100% успеха потребуется соблюсти ряд правил и рекомендаций.

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

Изображение товара – уделяйте внимание визуализации

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

Почему оформление товаров важно не только в офлайне, но и в онлайне

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

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

Как демонстрация товаров в офлайне влияет на их восприятие покупателями

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

По данным исследования Forrester Consulting, около 55% людей никогда не покупают онлайн, так как предпочитают ознакомиться с продукцией лично. Эта цифра очень показательна: очевидно, что большинство людей хотят «увидеть» товар до приобретения. А так как посетители не могут его потрогать или примерить, то есть не взаимодействуют с продуктом лично, картинки на вашем сайте должны полностью компенсировать это. Качественные и яркие изображения помогут клиенту сделать выбор в вашу пользу и напрямую повлияют на вашу способность генерировать лиды.

№ 1: Высокое качество изображений товара

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

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

Почему качество изображений товара важно

№ 2: 360°, или Взгляд на продукт со всех сторон

Недостающая информация и неопределенность – главные причины, по которым люди не решаются покупать продукт через интернет.

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

Вариант оформления карточки товара в интернет-магазине

Пример показа всех преимуществ товара в интернет-магазине

№ 3: Изображение всех вариантов продукта

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

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

Как показать все вариации товара в интернет-магазине

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

Намного полезнее, если пользователь сможет увидеть продукт в других расцветках:

Удачный пример демонстрации всех цветовых решений на сайте интернет-магазина

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

Удачным примером является интернет-магазин фирмы Nike: на страницах товаров каждый цвет обуви показан в миниатюре. Когда вы нажимаете на другой цвет, вы переходите на полноценную карточку с изображениями продукта в этом цвете.

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

Как Nike показывает модели в разных цветах на сайте интернет-магазина

Интернет-магазин Nike: как показать модели в разных цветах

№ 4: Возможность масштабирования

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

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

Как возможность масштабировать товары помогает покупателям

Зачем нужна возможность масштабировать товары на сайте интернет-магазина

№ 5: Товары в реальной жизни

Стандартная ситуация при выборе одежды или предмета интерьера – пользователи задумываются над тем, а не будет ли сумка слишком большой, не слишком ли короткие джинсы и подойдет ли столик по ширине.

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

Пример № 1: Вы продаете купальники, и у вас могут быть фотографии моделей разного роста и с различным типом фигуры в одном и том же изделии. В этом случае укажите размеры и рост моделей, чтобы ваши покупатели могли лучше понять, как на них может выглядеть купальник.

Демонстрация товара в реальной жизни на примере модели купальника

Пример № 2: Вы продаете сумки. Размер на изображении может быть обманчив, поэтому делайте снимки с предметами повседневного обихода или в руках модели – такие фото дают лучшее представление о габаритах товара. Вы также можете показать, какие предметы поместятся внутрь.

Как показать товар в реальной обстановке на примере аксессуаров

Качественные изображения товаров – лучший инструмент, позволяющий клиентам «потрогать» и «попробовать» ваши продукты онлайн.

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

Видеодемонстрация продукта

Изображения товара – хорошо, но видео – еще лучше!

Хорошее демонстрационное видео о продукте не только дает клиентам дополнительные сведения о товаре, но и служит отличным инструментом для привлечения трафика, особенно если вы размещаете обзор на сайтах вроде YouTube.

Видео позволит «продать» своим клиентам то, что просто невозможно сделать с помощью текстового описания. Многим людям проще оценить продукт, наблюдая за тем, как кто-то взаимодействует с ним, объясняет его плюсы и минусы.

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

Посмотрите, как Decatlon отлично справляется с этой задачей. Например, для палаток у них есть короткие видео, в которых показано, как их собирать, сколько человек вмещается, насколько конструкция большая или маленькая.

Пример видеодемонстрации продукта на сайте Decatlon

Описание продукта

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

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

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

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

Хороший пример демонстрации и описания продукта – сайт divan.ru. В карточках товаров даны не просто технические характеристики, но и подробное описание, которое дополнено фотографиями и видео.

Как оформить описание продукта на сайте интернет-магазина

Цена и кнопка «Купить»

Цены на товары обязательно должны присутствовать на сайте, и они должны быть заметны в первые секунды. Используйте крупный шрифт и контрастный цвет, который не будет теряться на общем фоне страницы.

Цену можно поместить рядом с кнопками «Купить» или «В корзину»: обычно они привлекают большое внимание, поэтому расположение стоимости рядом с ними будет наиболее выигрышным.

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

Сравните отображение цен на двух разных сайтах:

Как отобразить цену товара на сайте интернет-магазина

В первом варианте цена выглядит более выигрышно.

Главная цель карточки товара – заставить посетителя сайта нажать на кнопку «Добавить в корзину», поэтому этот элемент должен быть доминирующим на странице.

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

Как должна выглядеть эта кнопка? Используйте для нее контрастный цвет. Основное правило при выборе оттенка – это использование цвета, который контрастирует с текстом и фоном страницы.

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

Проверьте правильность оформления карточки – если кнопку «В корзину» нельзя обнаружить в течение 3 секунд, значит, она недостаточно большая или контрастная.

Отзывы и рейтинг

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

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

Как оформить блок с отзывами и рейтингом на сайте интернет-магазина

Как оформить отзывы и рейтинг на сайте интернет-магазина

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

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

(Голосов: 26, Рейтинг: 3.81)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Гость
    1
    комментарий
    0
    читателей
    Гость
    больше года назад
    Можно подобные статьи про цвет, типографику, современные бренды и дизайн в 2019?)
    -
    7
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Григорий Романченко
1
комментарий
0
читателей
Полный профиль
Григорий Романченко - Неудивительно, что все хвалят PostMarket, это действительно достойный сервис, недавно стали через них продвигать свой продукт, результаты есть, продажи выросли на 40% и это только начало.
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!