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

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

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

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

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

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

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

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

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

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

Ціна товару

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Відгуки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Висновки

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