Картка товару - це частина воронки продажів, яка має бути зроблена правильно, якщо ми хочемо довести відвідувача до оформлення покупки. При створенні інтернет-магазину потрібно враховувати всі особливості дизайну і функціоналу цього елемента. Ми розповімо коротко як саме.
Слабке наповнення картки товару може призвести до втрати клієнта. Сьогодні ми вже розпещені всіма перевагами електронної комерції та знаємо, що онлайн купити можна все. Питання лише в тому, щоб товар був зрозумілий, опис доступний, параметри відповідними. І навіть ціна тут відіграє не головну роль. Потрібно відразу показати продукт так, щоб він приваблював, а параметри картки не залишали сумнівів у простоті та безпеці оформлення.
Загальні поради
Створюй єдиний шаблон - картка повинна мати чітку структуру, всі товари потрібно підганяти під неї. По-перше, так простіше для дизайну. Але загалом цей пункт набагато важливіший. Споживач має виправдовувати свої очікування від магазину. Якщо тут він розгорнув pop-under і почитав опис, то і в іншому товарі він захоче зробити аналогічну дію. Особливо це необхідно для простоти порівняння.
Тут іноді виникають складнощі із замовником - у нього немає однотипних описів для всіх товарів. Шукати самостійно зазвичай затратно. Варто донести клієнту важливість повної інформації на кожній сторінці. Або відмовитися від якихось елементів, якщо вони несуттєві.
Розташування - у дизайні для країн Європи та Америки потрібно враховувати патерни читання. Зліва направо. Рух очей нагадує букву F. І ключову інформацію потрібно розташовувати саме за цією траєкторією. Для Азії та арабського світу навпаки - справа наліво.
Тестуй - за можливості варто пробувати різні варіанти контенту, розташування, кольорів, форм і написів. Порівнювати результати, постійно аналізувати та покращувати картку товару. Іноді лише зміна заклику до дії або кольору кнопки приносить суттєві результати.
Неси користь - ми завжди голосуємо за стислість і лаконічність, але тут інше питання. Якщо інформація дійсно корисна, то на етапі покупки відвідувач готовий прочитати/переглянути більше, ніж зазвичай. Тому не бійся дати багато контенту, але в тому випадку, коли він важливий і допоможе користувачеві прийняти рішення.
Обов'язкові елементи
Навіть найпростіша картка товару повинна мати мінімальний набір основних елементів.
Назва
Очевидно, що має бути простий зрозумілий заголовок. Нічого зайвого, але і присутність ключових характеристик обов'язкова. Назва має будуватися за шаблоном, так буде і для модерації простіше, і відвідувачеві зрозуміліше.
Наприклад: Категорія, бренд, модель, опціональні параметри.
Одразу має бути зрозуміло, що саме бачить перед собою покупець і за який конкретно товар вказана ціна. Інакше бувають ситуації, коли на фото навушники і ціна супер, а виявляється, що продається тільки чохол від них. Це прямий шлях до втрати клієнта і репутації загалом.
Ось картка магазину Nike - лаконічно, але багато інформації
Фото/відео
Візуальний контент найважливіший. Саме він продає. І потрібна не тільки естетика (хоча вона теж, звісно), а й зрозумілість. Допоможи покупцеві з'ясувати, який вигляд товар має в реальності. Бажано розміщувати кілька фото - з різних ракурсів та ще й з можливістю збільшення. Дай уявлення про розмір продукту та його вигляд у реальних умовах застосування - це дає вирішальне значення при оформленні.
Відео товару чи огляд - дуже крута річ. За можливості варто додавати короткі ролики. Ми говорили детально про важливість, переваги та функції відео в попередній статті, тому не будемо зараз довго розписувати.
Якщо коротко, то намагайся додати ролик, якщо є така можливість і для продукту це доцільно. Далеко не все потрібно дивитися в дії.
Інше питання полягає в складності та ціні такого контенту. Якщо товарів багато, то відзняти гідні відео під кожен вийде дорого.
Amazon - всесвітній лідер е-комерсу. Картка не дуже-то лаконічна, зате тут є вся потрібна інформація
Ціна
Без цього ніяк. Крупно, поряд із заголовком. На ціну дивляться насамперед. Тому дай відразу актуальну суму і покажи за що саме.
Якщо є знижка/акція - одразу ж показуй поруч з основною ціною. Якщо це спецумова, то вкажи її.
Якщо є варіації, різні обсяги, кількість, колір або інші деталі - краще відразу зробити можливість вибору з відображенням ціни у вигляді боксу або списку. Це набагато зручніше для користувача і для налаштування магазину.
Магазин 6pm показує оддразу розмір знижки і які конкретно це суми
Характеристики та опис
Обов'язково вказувати загальні та додаткові характеристики. Відповідай на всі запитання, які можуть виникнути у покупця. Оформлюй це просто і зрозуміло. Чим менше виникає сумнівів, тим краще. Розміри, вага, технічні характеристики, матеріали. Відразу вказуй комплектацію.
Такі дані краще оформляти списком - наочно, легко порівнювати, легко читати.
Крім того, варто додати текстовий опис. Це не тільки добре для SEO, а й позитивно впливає на конверсію. Короткий текстовий блок зі зрозумілим описом. Варто розповісти загальнодоступною мовою про особливості товару. Тим паче якщо є не всім зрозумілі характеристики. Наприклад, акумулятор 5 mAh на смартфоні - це характеристика, яку ти вкажеш одразу. А в описі варто пояснити, на скільки вистачить такого заряду і чи багато це, чи мало, у порівнянні з іншими смартфонами тієї ж лінійки.
Кнопка СТА
Банально, але все ж варто сказати, що без кнопки "Купити" картка не буде повноцінною. Це велика кнопка, яка зручно розташована і виділяється. Напис - тут давай без креативу. Замовити, купити, додати в кошик. Максимально чітка зрозуміла дія. Додай іконку візка з супермаркету - так посил буде зрозумілий за мілісекунду навіть іноземцям.
Що робити, якщо замовити безпосередньо не можна? Став варіанти розрахунку вартості, оформлення заявки або інші відповідні дії. У будь-якому разі має бути кнопка.
У картці eBay є просто ВСЕ
Другорядне, але важливе
Тепер від обов'язкових елементів перейдемо до тих, які вже зроблять картку не мінімально прийнятною, а хорошою.
Доставка та оплата
Звичайно, у тебе є окрема сторінка з Доставкою та Оплатою. Але навіщо даремно зганяти відвідувача зі сторінки покупки заради пошуку інформації? Покажи йому відразу умови: доставку в його регіон, терміни, ціни. Тут ще можна застосувати чудовий хід із безоплатною доставкою від певної суми - нехай дозамовляє ще трохи, щоб отримати пересилку безкоштовно.
У тому ж блоці розкажи про гарантії на товар і можливість повернення. Стане в пригоді.
Aliexpress змусив весь світ купувати товар наосліп з іншої країни. Можна брати приклад.
Хлібні крихти
Користувач повинен бачити шлях, який привів його до цього товару. Це дуже зручно. Завжди можна повернутися в потрібний розділ. І взагалі, подивитися, на якій ти сторінці. А ще хлібні крихти потрібні для SEO, вони покращують позицію у видачі завдяки вбудованій перелінковці.
Кнопки
Не тільки СТА. Але й інші дії. Наприклад, додати до вибраного або до списку порівняння. На деяких сайтах можна формувати Wishlist і потім відсилати його друзям. До речі, про це - обов'язково дай можливість поділитися карткою товару в різних соцмережах і месенджерах. Коли хочеш скинути щось друзям подивитися, то зручніше зробити це одним натисканням, а не копіювати посилання вручну. А репости та поширення - це і реклама, і підвищення трафіку, і підвищення ймовірності покупки.
Відгуки
Наявність відгуків у будь-якій формі підвищує конверсію. А якщо це ще й фото від покупців, то взагалі круто. Працює принцип соціального доказу - адже якщо інші люди беруть цей продукт, то і мені треба!
При цьому краще працюють не тільки відмінні оцінки, а й наявність негативного зворотного зв'язку - так правдоподібніше і викликає більше довіри.
Варто подбати про те, щоб відгуки могли залишати тільки ті користувачі, які реально купили товар. Щоб уникнути спаму і підступів конкурентів.
Наявність
За можливості варто завжди відображати в принципі тільки товари в наявності. Але навіть у цьому випадку зроби плашку "В наявності", щоб уникнути зайвих запитань.
Або вказуй відсутність товару на складі, але із застереженням - коли буде, скільки чекати. І з кнопкою "Повідомити про надходження", наприклад. Або дай можливість зробити попереднє замовлення.
Бувають також інші ситуації. Наприклад, товар уже ніколи не з'явиться. Але він був бестселером і за цим посиланням все ще заходять люди. Не втрачай їх. Запропонуй аналоги з того ж ряду або перенаправ на розділ.
На Rozetka не тільки все потрібне вмістили, але ще й банер з акцією змогли вставити
Додаткові плюшки
Що називається "дрібниця, а приємно" - деталі, які допоможуть підвищити довіру і полегшити закриття угоди.
Переваги та УТП
Твій покупець не дурний, він сам може провести порівняння і зробити висновки. Але якщо ти безпосередньо їх покажеш - буде набагато краще. В описі варто згадати про переваги товару, а окремим блоком нижче про переваги саме цього інтернет-магазину і його сервісу.
Тільки ніяких загальних фраз і води - конкретика, реальна вигода, чіткі тези.
Зворотний зв'язок
Якщо товар потребує консультації або підбору, то кнопка зі зворотним зв'язком обов'язкова. Але і без цього у потенційного покупця можуть бути питання. Якщо під карткою буде посилання на блок FAQ, то це не зайве. Але й форма теж не завадить. Вона може бути у футері, як окремий елемент або як спливаюче віконце чат-бота. Це можна легко зробити наприклад за допомогою сервісу онлайн-чата в SendPulse.
По-перше, це дасть змогу не втратити клієнта. По-друге - такий елемент показує турботу компанії про покупця і підвищує довіру.
Документація
Вивчай ретельно свою ЦА і продукт. Наскільки часто користувачі запитують документи та сертифікати? Це важливо? Це впливає на вибір? Якщо це доцільно і є що показати - то розмісти необхідні дані. Це спосіб показати, що товар сертифікований, що він оригінальний, відповідає галузевим вимогам або екологічним стандартам. Іноді це питання принципове.
Kyivstar одразу дає основні переваги, а потім детальніші характеристики
Супутні та схожі товари
Це називається крос-продаж - коли до пилососа ти пропонуєш фільтри, а до телефона чохол і скло. Важливо налаштувати видачу правильно, щоб пропозиції висвічувалися релевантні та цікаві.
Ще можна додати слайдер з уже переглянутими товарами або подібними. Це допомагає визначитися тим, хто любить довго обирати та порівнювати.
Таблиця розмірів/калькулятор ets
Бувають товари, які потребують деяких додаткових даних для вибору. Не змушуй користувача гуглити! Скажи відразу, як розрахувати потрібну кількість продукту, покажи таблицю розмірів одягу і взуття, дай інструкції. Користувач не знає, скільки банок лаку йому потрібно для покриття підлоги. Але він знає її площу і легко порахує на сайті.
Важливо зробити це максимально просто - одразу написати або зробити онлайн-калькулятор. Форми для скачування або квіз для надсилання інформації на розрахунок допустимі там, де інших варіантів немає.
"Цитрус" розповідає все, що потрібно знати. І виглядає це акуратно
Оформлення
Крім правильного підбору елементів і функцій, важливо знати, як грамотно їх розташувати, зробити зручно і стильно, як розмістити все компактно й акуратно, які використовувати кольори та ефекти. У цьому і полягає робота UX/UI-дизайнера. Це не найпростіше завдання, але ми навчаємо в легкій і цікавій формі. Хочеш робити круті інтернет-магазини зі зрозумілим інтерфейсом і високою конверсією? Приходь на онлайн-курс "UX/UI легенда". Запис на новий потік уже відкрито!