Інтернет-магазин косметики: як зробити сайт, який не виглядає як черговий каталог

У косметичному магазині є одна дивна проблема.

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

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

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

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

Спочатку ми дивимося не на дизайн

Це, мабуть, найбільш неочевидна частина роботи.

Коли до нас приходять із проханням зробити інтернет-магазин косметики, перше бажання — відкрити Figma і почати малювати головну сторінку. Гарний банер, великі фотографії, акуратні кнопки. Все правильно. Але ми так намагаємося не робити.

Спочатку розбираємо сам товар.

Що продається? Які бренди? Скільки позицій? Чи є варіанти одного товару? Як люди шукають продукцію? Чи важлива країна виробництва? Чи є залежність від сезону? Що відбувається із залишками?

Навіть назва категорії може мати значення. Людина може шукати «тональний крем», а в магазині ця група називається «тональні основи». Для менеджера різниці немає. Для пошуку і покупця — вже є.

Тому структура магазину народжується не з шаблону. Вона виростає з асортименту.

Коли каталог стає схожим на шафу з косметикою

Уявімо звичайну ситуацію. Покупець відкриває категорію і бачить 800 товарів.

Що він робить?

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

Потрібен нормальний пошук і фільтрація. Але не фільтр заради фільтра.

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

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

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

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

А що робити з пошуковим попитом?

Тут починається вже інша історія.

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

Запит «интернет магазин косметики» ще ширший. За ним можуть стояти абсолютно різні наміри.

І от тут не варто намагатися запхати весь попит на одну сторінку. Ми краще розкладаємо його по реальній структурі магазину: категоріях, брендах, підкатегоріях, посадкових сторінках і товарах.

Для SEO це теж має значення. Для людини — ще більше.

Корейська косметика — окремий випадок

З корейською косметикою ми б взагалі не радили будувати структуру за принципом «ось усі товари, вибирайте».

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

Тому розділ «корейская косметика» повинен мати зрозумілу внутрішню логіку. Бренди, категорії засобів, потреби, можливо — окремі тематичні добірки.

Але тут є тонка межа.

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

Один реальний випадок із нашої роботи

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

Ми відкрили аналітику.

Потім кілька разів самі пройшли шлях покупця — з телефону, не з комп’ютера.

Проблема виявилася не там, де її шукали.

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

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

Просто прибрали одну перешкоду.

І саме такі речі нам подобаються найбільше. Бо вони показують, що створити сайт — не намалювати картинку.

Картка товару має відповідати на незручні питання

Покупець косметики сумнівається.

Це нормальна поведінка.

Чи підійде відтінок? Який об’єм? Для якої шкіри? Чи оригінальний товар? Який термін придатності? Чим цей засіб відрізняється від сусіднього? Скільки коштує доставка?

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

Особливо це помітно в категоріях make up. Тут фотографія може створити неправильне очікування щодо кольору, текстури або фінішу. Тому якісні фото, інформація про відтінок і зрозумілий вибір варіанту — не декоративні доповнення.

Це частина продажу.

І ще один нюанс — назва магазину в пошуку

Коли ми бачимо запити на кшталт «интернет магазин make up» або «интернет магазин makeup», для нас це сигнал не просто вставити ці слова в текст.

Треба зрозуміти, що саме людина очікує побачити після переходу.

Якщо сторінка оптимізована під запит, але на ній незрозумілий асортимент, слабкий пошук і немає нормальної навігації, SEO свою роботу виконало — привело людину. Далі сайт уже сам має не зіпсувати результат.

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

Парфумерія живе за своїми правилами

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

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

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

Звичайний каталог цього не вирішує.

Потрібна навігація за логікою покупця, а не тільки за логікою бази даних.

Чи потрібен дорогий дизайн?

Не завжди.

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

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

Анімація сама по собі крем не продає.

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

Що ми перевіряємо перед запуском

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

Чи зрозуміло, куди натискати? Чи можна знайти товар без знання точної назви? Чи видно наявність? Що станеться, якщо потрібного відтінку немає? Чи не губиться ціна? Чи зручно оформити замовлення з телефону?

Іноді після такої перевірки доводиться повертатися до речей, які ще вчора здавалися «готовими».

Це нормально.

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

А де тут власне інтернет-магазин?

Ось у цьому й штука.

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

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

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

Тому під час розробки ми спочатку дивимося на шлях покупця. Що він вводить у пошук? Куди переходить? Де може зупинитися? Якої інформації йому не вистачає перед покупкою?

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

Спочатку намагаємося зрозуміти, як покупець реально шукає косметику.

А далі вже будуємо магазин під цю поведінку.