НАПИСАТИ НАМ
04
.
10
.
2019

Як поліпшити дизайн картки товару в інтернет-магазині

UX/UI
CRO
ЗМІСТ

Щоб правильно оформити сторінку товару, потрібно розуміти особливості продукту та аудиторії, яка буде його купувати. Головний веб-дизайнер платформи Хорошоп Артур Шрамко описав найважливіші елементи картки товару і розповів, як вони допоможуть в маркетингових активностях.

Як оформляти основні поля картки товару

Коли користувач відкриває сторінку, він повинен відразу звернути увагу на фотографію, ціну, умови оплати і доставки і кнопку «Купити». Саме тому дизайнери роблять ці опорні об'єкти яскравими і розміщують їх по траєкторії погляду користувача. Головний якір і найяскравіше пляма - фотографія, з неї користувач починає розглядати сторінку.

osnovnie_polya_kartochki_tovara

Фотографії та відео

Клієнти не можуть побачити товар вживу або доторкнутися до нього, тому фотографії повинні бути якісними і різноманітними. Потрібно продемонструвати товар з різних сторін, а також показати його текстуру і деталі.

На картці товару можна використовувати функцію лупи, щоб дати клієнтові можливість розглянути товар детальніше. З її допомогою користувачі зможуть наблизити будь-яку частину картинки.

фотография на карточке товара

Якщо товар можна показати в процесі використання - зробіть це. Наприклад, коли користувачі побачать плаття на дівчині-моделі, вони зможуть краще оцінити його посадку та загальний вигляд.

Не всі товари вимагають деталізації на фотографіях. Якщо ви продаєте комп'ютерні ігри, краще зробити акцент на детальному описі, навчальному відео і т.д. На фотографії іноді досить показати оригінальну упаковку.

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

Ціна товару

Вона повинна бути одним із центральних елементів картки товару. Багато користувачів вибирають товари, відштовхуючись саме від вартості. Щоб додатково мотивувати клієнта купити товар і наочно показати економію, використовуйте перекреслену стару ціну.

cena_tovara

Дуже часто на ціну дивляться в першу чергу, тому її варто розміщувати у верхній частині сторінки біля яскравої кнопки «Купити». Якщо ціна не надто вигідна, від неї можна відвернути увагу, розмістивши поблизу яскраві модифікації або умови програми лояльності.

yarkie_modifikacii

Погляд рухається не відразу до ціни, а через різні модифікації і пропозиція зареєструватися і отримати знижку.

Кнопка «Купити»

Кнопку «Купити» або «Додати в корзину» потрібно виділяти. Простір навколо неї повинен бути вільним, щоб нічого не відволікало користувача від його головного завдання - купити товар.

Кілька порад для кнопки «Купити»:

  • її колір повинен відрізнятися від колірної гами інтернет-магазину для більшого контрасту;
  • кнопка повинна бути великою і привертати увагу відвідувачів;
  • вона повинна чітко вказувати, що користувачі повинні зробити.
knopka_kupit

Кнопка «Замовити в один клік» або «Швидке замовлення»

Ця кнопка потрібна користувачам, які не хочуть заповнювати інформацію про себе і вважають за краще обговорити подробиці замовлення з менеджером в телефонному режимі. Її варто розміщувати поруч з кнопкою «Купити», але робити менш помітною. Інтернет-магазину вигідніше, щоб клієнти заповнювали інформацію про себе, це допомагає в зборі бази для email-маркетингу і створення персоналізованих розсилок.

кнопка быстрый заказ на карточке товара

Опис товару і характеристики

Деякі користувачі розбираються в товарах, які ви продаєте, деякі - ні. Інформація про товар має бути корисною і зрозумілою для всіх.

  • Передбачте питання, які можуть виникнути у ваших клієнтів, і дайте відповідь на них в описі.
  • Головну інформацію розміщуйте на початку тексту. Можна виділити її жирним.
  • Якщо текст опису довгий, використовуйте підзаголовки і абзаци, щоб полегшити сприйняття.
  • Якщо можна скоротити текст без втрати інформативності - зробіть це.
описание товара на карточке товара

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

При необхідності поясніть, як ви сформували ціну. Багато клієнтів вважають за краще не купувати дорогі товари в інтернет-магазинах. Якщо ж ви вирішили працювати з преміум-сегментом, в картці товару варто пояснити, чому ціна настільки висока: розкажіть про витрати на якісні матеріали, про особливості виробництва і т.д.

Відгуки

Наявність відгуків додає сторінці товару надійності і підвищує конверсію. Текстові відгуки, фотографії Instagram, Відеоотзиви - це відмінні способи завоювати довіру споживачів. Щоб мотивувати покупців залишати відгуки, можна запропонувати їм задавати питання прямо на картці товару.

отзывы на карточке товара
Текстові відгуки
отзывы в инстаграм

Не варто видаляти негативні відгуки. Вони підвищують довіру до вашого інтернет-магазину. Відповідайте на них коректно

негативные отзывы на карточке товара
Відгуки з Instagram

Вибір модифікацій

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

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

vibor_modifikaciy

Модифікації варто розміщувати в логічному порядку: зверху ціна, далі вибір кольору, вибір обсягу пам'яті і кнопка «Купити». Це дає користувачам чіткий алгоритм дій і мотивує зробити покупку

vibor_modifikaciy_2

Якщо варіантів не надто багато, і у них не дуже довгі назви - краще показувати все модифікації в ряд, без використання списку. Натискання на список - зайва дія, без якої найчастіше можна обійтися.

Модифікації, яких немає в наявності, краще зробити сірими. Зайві переходи на товари, яких немає в наявності, дратують користувачів.

модификаций нет в наличии_карточка товара

Також на картці товару треба зазначати розмірні сітки при необхідності. У різних виробників можуть бути різні розміри. Розмірні сітки з'їдають досить багато простору, тому краще розмістити на картці товару тільки клікабельну кнопку «Таблиця розмірів». Після натискання на неї відкриється або нова сторінка, або з'явиться вспливаюче вікно з детальною інформацією. До таблиці можна додати інструкції, наприклад, як правильно виміряти стопу.

vipadaushiy_spisok
таблица размеров на карточке товара_2

Хлібні крихти

Ця частина картки товару дозволяє зорієнтуватися в інтернет-магазині і повернутися на потрібну сторінку в кілька кліків. Такий елемент особливо важливий для користувачів, які зайшли на картку товару відразу з пошуковика. Клієнт зможе побачити назви розділів і підрозділів інтернет-магазину і, можливо, подивитися інші товари.

hlebnie_kroshki

Умови доставки, гарантії і повернення

Якщо аналітика показує, що користувачі заходять до вас на сайт, переходять на картку товару, але потім йдуть - подумайте, що могло їх зупинити. Можливо, варто розмістити блок з умовами доставки та гарантіями повернення біля кнопки «Купити». Отримавши максимально повну інформацію, користувачі зможуть позбутися від сумнівів і зробити покупку.

Для оформлення цих блоків використовуйте вкладки і вспливаючі вікна. Це допоможе користувачам отримати всю необхідну інформацію, а сама сторінка не буде виглядати перевантаженою.

oplata_dostavka

На картці товару варто вказувати і передбачувану дату доставки, щоб клієнти розуміли, чи підходить вона їм. Багато хто купує товар до конкретної дати, наприклад, до дня народження. Не отримавши посилку із замовленням вчасно, користувач може залишити негативний відгук.

сроки доставки на карточке товара

Як оформляти маркетингові поля картки товару

Комплект або «Купуйте разом»

Це поле внизу картки товару, в якому показані товари, які можна купити в комплекті. Це можуть бути товари з одного набору або товари, які все одно потрібно буде докуповувати. Наприклад, чохол або захисне скло для певної моделі смартфона. Щоб посилити мотивацію до покупки, можна запропонувати знижку на комплект.

комплект на карточке товара

Персоналізовані рекомендації

Поля «Рекомендовані товари», «Схожі товари» і «Дивіться також» допомагають підвищити середній чек, пропонуючи користувачеві вибрати ще одну або кілька позицій. Наприклад, якщо клієнт поклав у кошик шампунь для сухого волосся, йому можна запропонувати бальзам або маску з цієї серії. Користувачеві не доведеться самостійно шукати ці товари, а ви отримаєте додаткові продажі.

персонализированные рекомендации на карточке товара

Переглянуті товари

Це поле дозволяє в один клік повернутися до переглянутих раніше товарів. Блок варто розміщувати під основною інформацією. Він буде корисний, якщо у вас багато клієнтів, що сумніваються , які довго переглядають товари, але не роблять замовлення.

просмотренные товары_на карточке товара

Кнопка «Повідомити про наявність»

Якщо користувачеві сподобався товар, але його немає в потрібному кольорі або розмірі, він може скористатися кнопкою «Повідомити про наявність». Коли товар з'явиться, користувач отримає лист з повідомленням.

Кнопку «Повідомити про наявність» краще розмістити на місці кнопки «Купити». Це перше, що користувач шукає очима на сторінці, тому він відразу дізнається, що у нього є можливість отримати бажаний товар, але трохи пізніше.

soobshit_kogda_poyvitsya

Іконка «Додати в обране» або «В список бажань»

Подібна ікона дає можливість користувачеві додавати вподобані товари в свій список бажань. Її краще розмістити недалеко від кнопки «Купити».

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

dobavit_v_zelaniya
Іконка «В бажання»
триггер для товаров из списка желаний
Email-розсилка з товарами зі списку бажань

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

Ця функція дуже корисна для товарів з великою кількістю технічних характеристик: гаджетів, побутової техніки, дитячих колясок і т.д. Вона наочно показує, чим відрізняються два товари. Її варто розміщувати у верхній частині сторінки, недалеко від кнопки «Купити».

dobavit_v_spisok_sravneniya
Email-розсилка з товарами зі списку бажань
unnamed_(2)
Порівняння двох обраних товарів на сайті

Зворотний відлік акцій

Такий віджет наочно візуалізує обмежений термін дії акції, і мотивує користувачів якомога швидше здійснити замовлення.

Інтернет-магазини по-різному розміщують цей блок. Він добре працює і над ціною, і під нею. Головне, використовувати функцію зворотнього відліку дозовано, не на кожний товар.

obratniy_otschet

Накопичувальна знижка

Це поле в картці товару показує, яку знижку користувач отримує завдяки постійним покупкам. Наприклад, інтернет-магазин може запропонувати знижку 10% на всі товари, якщо загальна сума покупок клієнта буде більше, ніж на дві тисячі грн.

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

nakopitelnaya_skidka

Висновки

Для створення «ідеальної» картки товару потрібно добре знати свій продукт, аудиторію і специфіку ніші, в якій ви працюєте. Обов'язково тестуйте всі зміни і впроваджуйте найбільш вдалі рішення - єдиного правильного рецепту не існує. Якщо віжуал, ціна і опис товару сподобаються вашому покупцеві, ймовірність того, що він зробить покупку, виросте в рази.

Підпишіться
на розсилку
Дякуємо за підписку!
Упс! Щось пішло не так. Спробуйте ще раз
В закладки

Ми з радістю проведемо CRO-аналіз вашого сайту та запропонуємо рішення. як покращити конверсію.

Захочете отримати юзабіліті-аудит і персональні рекомендації для свого інтернет-магазину — напишіть нам.

Обговоримо ваш проєкт?
Надіслати заявку
Ваше повідомлення відправлено
Наш менеджер зв‘яжеться з вами найближчим часом.
Назад
Упс! Щось пішло не так. Спробуйте ще раз
ДОЛУЧАЙСЯ ДО КОМАНДИ PROMODO ❤️
Надіслати заявку
Ваша заявка відправлена
Наші рекрутери звʼяжуться з вами найближчим часом!
Назад
Упс! Щось пішло не так. Спробуйте ще раз