Картка товару і обов’язковий набір блоків

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

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

Картка починається з моделі даних

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

• Кожне значення має тип. Довжина це число з одиницею, матеріал посилається на словник, колір має назву й код, сумісність пов’язує інші товари.
• Текстове поле для всього це пастка. Його легко заповнити й неможливо потім відфільтрувати, перекласти або передати в канал продажу.
• У кожного поля є джерело. Назву й опис веде контентна команда, залишок і базову ціну передає облік, фото живуть у медіасховищі, відгуки створюють покупці.
• У кожного джерела є власник. Людина, яка відповідає за якість поля і правила його оновлення.

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

Перший екран

Картка має одразу відповісти людині на головне питання, чи це те, що вона шукала. Усе інше має значення тільки після того, як відповідь отримана.

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

• Назва, яка збігається з тим, що шукали. Разом із моделлю чи артикулом, якщо люди шукають за ним.
• Ціна й статус наявності поруч. Напис «уточнюйте» закриває вкладку швидше за високу ціну.
• Головне фото з можливістю збільшити. І кілька ракурсів, а не один каталожний кадр.
• Вибір варіації. Розмір, колір, комплектація. З чесним показом того, чого немає.
• Кнопка дії. Одна головна, видима без прокручування на телефоні.
• Доставка й оплата коротко. Строк і спосіб, деталі нижче.

Блоки для рішення про покупку

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

• Характеристики таблицею. Ті самі поля, що й у фільтрі, у тому самому формулюванні.
• Опис, що пояснює, а не переказує. Для кого товар, у яких умовах працює, чим відрізняється від сусіднього в каталозі.
• Розміри й сумісність. Те, через що найчастіше повертають: не підійшло, не стало на місце, не сумістилося.
• Документи. Інструкція, сертифікат, гарантійний талон, якщо вони є.
• Умови повернення. Коротко й на самій картці, а не посиланням унизу сторінки.

Блоки довіри

Другий бар’єр після «Чи це те?» це «Чи можна вам вірити?». Він особливо високий у покупця, який прийшов з пошуку й бачить ваш інтернет-магазин уперше в житті.

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

• Реальні відгуки з датою. Порожній блок відгуків краще не показувати взагалі, ніж показувати з нулем.
• Фото від покупців. Працюють сильніше за студійні, бо показують товар у житті.
• Питання покупців. Публічні, з відповіддю магазину, а не тільки зірочки.
• Хто продає. Гарантія, строк роботи, спосіб зв’язатися до покупки.

Складний товар

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

На варіаціях картка або працює, або перетворюється на хаос.

• Окремий залишок у кожної варіації. Інакше ви продасте те, чого немає, і повернетеся до ручних вибачень.
• Ціна прив’язана до варіації, а не до товару. Розмір XL часто коштує інакше, і це має бути в даних, а не в примітці.
• Недоступні комбінації видно одразу. Не після додавання в кошик і не після натискання «купити».
• Фото змінюється разом із вибором. Людина обрала синій, а бачить червоний: далі вона вже не довіряє картці.
• Комплектація описана окремо. Що входить, що докуповується, що несумісне.

Дані для інтеграцій

Картка живе не тільки на сайті. Вона їде в облік, у маркетплейс, у рекламний фід, іноді в кабінет постачальника.

• Внутрішній ідентифікатор не змінюється разом із назвою. Це основа всіх зв’язків, і його перейменування ламає їх мовчки.
• Артикул має правила унікальності. Навіть якщо він видимий покупцеві.
• Таблиця відповідності зберігає чужі коди. Із джерелом і часом оновлення, бо в кожної системи свої ідентифікатори.
• Шар перетворення окремо від моделі. Одна система чекає колір зі словника, друга текст, третя код. Підганяти основну модель під випадковий формат не варто.
• Вивантаження повідомляє про відхилені позиції. З причиною: немає фото, немає категорії, немає ідентифікатора.

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

Додаткові вкладки й довгий опис

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

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

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

Товар без наявності

Відсутність не завжди означає видалення картки, і рішення тут залежить від того, чи повернеться позиція.

• Повернеться. Сторінку залишають, показують чесний статус і пропонують повідомлення про появу.
• Знята остаточно. Корисну інформацію зберігають і дають близьку заміну за ключовими параметрами.
• Замість неї нічого немає. Тоді сервер повертає код 404 або 410, а сама сторінка пояснює, що товар знято з продажу, і веде в категорію. Якщо на товар вели зовнішні посилання, адресу можна перенаправити кодом 301 на найближчу категорію.

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

Альтернатива має відповідати ключовим параметрам. Краща маржа не є достатньою причиною показувати несумісну модель: людина один раз натрапить на таке й перестане вірити рекомендаціям узагалі.

Мобільна структура

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

На телефоні картка читається інакше, і ламається вона на простих речах.

• Кнопка не виходить за межі екрана. Довга назва не повинна виштовхувати її вниз.
• Галерея гортається пальцем. А не стрілками, розрахованими на мишу.
• Характеристики не в горизонтальній таблиці. Інакше їх доведеться прокручувати вбік.
• Кнопки вибору варіації великі. Розміри, у які важко влучити, це втрачені замовлення.

Швидкість картки

Картка товару це найчастіше відкривана сторінка інтернет-магазину, і вона ж зазвичай найважча через галерею.

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

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

Мікророзмітка

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

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

• Товар. Назва, артикул, бренд, зображення, опис.
• Пропозиція. Ціна, валюта, наявність, умови повернення.
• Оцінки. Тільки якщо відгуки справжні. Вигадані рейтинги ловляться і караються.
• Навігаційний ланцюжок. Він веде покупця назад у категорію, а у видачі на комп’ютері показує шлях до товару.

Рекомендації та супутні товари

Блок рекомендацій виправданий тоді, коли справді допомагає вибрати, а не заповнює порожнє місце внизу.

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

Як передавати шаблон у роботу

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

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

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

Чек-лист приймання

• Фільтр будується з тих самих полів. Вони ж показані в характеристиках.
• Варіація змінює ціну, фото й залишок. Перевірено на товарі з трьома варіантами.
• Недоступну комбінацію видно до кошика. А не після.
• Вивантаження дає звіт про відхилені. З причиною по кожній позиції.
• Картка без відгуків виглядає цілою. Блок ховається, а не залишає порожнечу.
• Товар без наявності не втрачає інформацію. І пропонує заміну або підписку.
• Розмітка проходить перевірку. Без синтаксичних помилок.
• Перший екран на телефоні містить кнопку. Без прокручування.

Доопрацювання картки в інтернет-магазині, який уже працює, входить у кастомну розробку. Точкова правка коштує від $300 до $1 000, а окремий модуль чи інтеграція, наприклад вивантаження на маркетплейс зі звітом про відхилені позиції, від $500 до $2 000. Новий інтернет-магазин на готовому шаблоні коштує від $1 500 до $3 000.

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

Висновки

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

Другою за важливістю є поведінка картки в складних випадках. Товару немає, варіація недоступна, фото не завантажилося, канал відхилив позицію. Красиво зроблена картка, яка не описує ці випадки, ламається на першому ж реальному каталозі.

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