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

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

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

Основи дослідження: від цифр до практичних рішень

Наше дослідження базується на 572 годинах UX-аудитів інтерфейсів вебсайтів та мобільних застосунків у ніші краси. За цей час ми виявили основні проблеми, з якими стикаються користувачі, і зібрали ефективні UX/UI рішення для виправлення розповсюджених помилок ecommerce. У цьому розділі розкажемо про методи дослідження та поділимося основними інсайтами.

Як ми досліджували нішу краси?

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

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

Середньостатистичні KPI сайтів у ніші краси

Середньостатистичні показники сайтів у ніші Beauty

Основні потреби користувачів, які вирішують сайти ніші Beauty

Дослідження показали, що користувачі на сайтах краси вирішують такі завдання:

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

Де починається взаємодія: головні точки входу на сайтах краси

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

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

Запит користувача у пошуковику
Перехід користувача на сторінку товару по запиту у пошуковій системі

2. Списки товарів (для категорійних або брендових запитів)
Запити на кшталт «зволожуючий крем» чи «туш для вій бренду X» зазвичай ведуть користувачів до сторінок категорій або брендів. Тут критично забезпечити зручну навігацію, функціональні фільтри й сортування. Це дозволяє користувачам швидко звузити вибір і знайти те, що їм потрібно, серед безлічі варіантів.

Приклад запиту у пошуковику та видача по цьому запиту
Перехід користувача на сторінку видачі категорії по запиту у пошуковій системі

3. Головна сторінка (для лояльних, постійних чи за рекомендаціями): Постійні клієнти та ті, хто приходить за рекомендаціями, зазвичай починають з головної сторінки — через прямі посилання або пошук за назвою магазину. Головна сторінка повинна показувати актуальні акції, новинки та рекомендації, щоб привернути увагу і заохотити їх до подальших дій на сайті.

Головна сторінка MakeUp

Шляхи користувачів: сценарії взаємодії з сайтом краси або як перетворити юзера на покупця

Ми розглянемо три основні сценарії взаємодії користувачів із сайтами краси. Ми проаналізуємо ключові проблеми інтерфейсів і юзабіліті та з'ясуємо, чому вони залишають сайт, а також розповімо як їх утримати шляхом виправлення помилок UX/UI.

Перший сценарій поведінки: новий користувач

Сторінка товару — Сторінка схожого товару — Список товарів — Додати в кошик — Чекаут

Схема нового користувача, який потрапив на сторінку товару сайту ніші краси за конкретним запитом

Сторінка товару: як не втратити зацікавленого користувача?

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

Якщо необхідна інформація про переваги товару розташована низько на сторінці або представлена у вигляді довгого тексту, користувачі можуть не захотіти витрачати час на прочитання чи пошук. В результаті цього вони можуть відмовитися від покупки. Це призводить до того, що 47% користувачів залишають сторінку, а ті, хто залишаються, часто переглядають 2–4 сторінки, шукаючи необхідні деталі.

Приклади неефективної структури сторінки товару

Як покращити:

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

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

Приклади інформативних сторінок товарів, де деталі про товар легко і швидко зчитуються

Список товарів: що врахувати аби користувач натиснув «Додати до кошика»?

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

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

Сторінки видачі категорії інтернет-магазинів косметики з неінформативними прев’ю товарів

Як покращити:

  • Додайте ключові параметри (розмір, колір, об’єм) прямо в картки товарів у списку.
  • Забезпечте чітке й зрозуміле відображення цієї інформації, щоб користувачі могли порівнювати товари без переходу на окремі сторінки.

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

Списки товарів з ключовою інформацією на картках товару

Кошик без кроссейлу як борщ без сметани: задовольняємо користувача та збільшуємо середній чек 

Коли користувач додає товари до кошика, він часто не повертається до інших категорій чи сторінок сайту. У середньому в одному чеку купують 3,79 товарів, що свідчить про готовність купувати більше, але потреба в додатковому пошуку може цьому перешкоджати. І, на жаль, у половині сайтів, які ми аналізували, відсутні cross-sale блоки, що обмежує потенціал додаткових продажів.

Кошики інтернет-магазинів косметики без крос-сейлу

Як покращити:

  • Додайте блоки cross-sale до кошика, які пропонують товари, що доповнюють основний продукт (наприклад, нічний крем для обличчя до денного крему, або тонік із цієї ж серії).
  • Розмістіть релевантні пропозиції на основі популярності чи персоналізованих даних.

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

Приклади імплементації cross-sale інструментів у кошику

Оформлення замовлення: скорочуємо та спрощуємо, щоб утримати клієнта

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

Приклади не оптимізованих сторінок оформлення замовлення

Як покращити:

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

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

Варіанти імплементації швидких списків та автопідказок під час заповнення форми чекаута

Другий сценарій поведінки: новий користувач

Список товарів — Уточнення запиту — Сторінка товару — Кошик — Оформлення замовлення

Схема шляху нового користувача, який прийшов на сайт ніші користувача з пошуковика

Список товарів: робимо уточнення запиту невимушеним для скорочення шляху користувача

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

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

Сторінки списку товарів без фіксованих фільтрів та сортування

Як покращити:

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

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

Сторінки видачі товарів з інтуїтивною навігацією, закріпленими фільтрами та деталями про товар

Сторінка товару: що слід врахувати, щоб клієнт не пішов?

Сторінка товару — це ключовий етап шляху користувача, де він знайомиться з характеристиками, відгуками та детальним описом, та приймає рішення про покупку. Згідно з даними карт скролу, 45% мобільних і 35% десктопних користувачів доскролюють сторінку до кінця. Але, за даними аналізу, лише 9,55% відвідувачів додають товар до кошика, адже для цього вони змушені повертатися нагору. Це створює зайві труднощі та негативно впливає на конверсію.

Сторінки товару без фіксованої кнопки «Купити»

Як покращити:

  • Додайте фіксовану кнопку «Купити» разом із ціною в нижній частині екрана.

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

Варіанти закріплення кнопки «Купити» на сайті ніші краси

Кошик: чому більш ніж половина користувачів покидає сторінку та як цьому запобігти?

У середньому, користувачі додають до кошика 3,55 товарів. Однак, коли кількість товарів у кошику збільшується, перегляд кошика часто ускладнюється через необхідність прокручувати сторінку донизу, щоб побачити загальну суму чи натиснути «Оформити замовлення». Така незручність створює додаткові перешкоди на шляху до завершення покупки, призводить до втрати ентузіазму й збільшує кількість покинутих кошиків, яка досягає 55,66% у цій ніші.

Відсутність фіксованої кнопки «Оформити замовлення» й інформації про загальну вартість замовлення на сайтах ніші краси

Як покращити:

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

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

Приклад фіксованої кнопки «Оформити замовлення» та загальної ціни при скролі у кошику

Оформлення замовлення: повна прозорість для впевненості клієнтів

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

Сторінка чекауту без ключової інформації, що зменшує довіру користувачів

Як покращити:

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

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

Інформативна сторінка чекауту

Третій сценарій поведінки: постійний покупець, новачок який прийшов за рекомендацією

Головна — Пошук/Каталог — Список товарів/Сторінка товару — Кошик — Оформлення замовлення

Схема шляху користувача для першого сценарію

Головна сторінка як швидкий та зручний старт для приємної подорожі користувача

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

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

Приклади перевантаженого та погано структурованого каталогу

Як покращити:

  • Зробіть каталог зручним: розділіть категорії на підкатегорії.
  • У десктопній версії розміщуйте категорії горизонтально, логічно групуючи їх.
  • Спростіть доступ до ключових розділів, мінімізуючи кількість кліків.

Зручна і продумана структура каталогу не лише покращить користувацький досвід, а й підвищить конверсію перегляду товарів на 20-25%

Приклади добре структурованого та інтуїтивно зрозумілого каталогу

Від Списку товарів до Кошика або як не втратити покупця на цьому проміжку

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

Це ускладнює повернення до вподобаних позицій і може призводити до втрати зацікавлення. Як результат, bounce rate на сторінках категорій інколи сягає 80% — критичний показник, що вказує на необхідність покращення користувацького досвіду.

На сайті відсутній блок раніше переглянутих товарів та суміжних категорій

Як покращити:

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

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

Приклади використання блоку раніше переглянутих та суміжних товарів

Чекаут: нічого зайвого або як довести користувача до завершення купівлі

У 50% сайтів ніші краси на сторінці чекаута присутні повноцінна шапка та футер, що може відволікати користувачів і спонукати їх повернутися до попередніх сторінок, переглянути інші товари або взагалі покинути сайт. За даними аналітики, 51% користувачів не доходять до завершення оформлення замовлення після переходу на чекаут.

Приклади повних шапок на сторінці чекауту: на тепловій карті видно, що користувачі повертаються до меню

Як покращити:

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

Мінімалізм у чекауті може підвищити загальну конверсію на 10-15%, не відволікаючи користувача на інші елементи сайту.

Приклади сторінок оформлення замовлення з мінімалістичною шапкою та футером

Юзабіліті чекліст для сайтів у ніші краси 

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

  1. Головна сторінка
  • Відображаються актуальні акції, новинки та персоналізовані рекомендації.
  • Структура каталогу логічно розділена на категорії та підкатегорії.
  • У десктопній версії категорії відображаються горизонтально для зручності навігації.
  • Є доступ до основних розділів через чітко видимі кнопки чи банери.
  1. Список товарів
  • Картки товарів містять ключову інформацію: розмір, об’єм, кольори та ціни.
  • Кнопки фільтрів і сортування зафіксовані на мобільній і десктопній версіях.
  • Є блок рекомендацій (наприклад, популярні чи супутні товари).
  • Користувач може порівняти товари прямо в списку, не переходячи на сторінки деталей.
  1. Сторінка товару
  • Ключові характеристики товару (основні переваги, ціна, умови доставки) відображаються на першому екрані.
  • Кнопка «Купити» і ціна фіксується у нижній частині екрана під час прокрутки сторінки.
  • Вказані умови доставки, способи оплати та повернення.
  • Додано блоки з рекомендаціями на основі схожих чи супутніх товарів.
  1. Кошик
  • Загальна сума, знижки та вартість доставки відображаються прямо в кошику.
  • Фіксована кнопка «Оформити замовлення» завжди доступна незалежно від кількості товарів у кошику.
  • Присутні cross-sale блоки із пропозиціями додаткових товарів, які доповнюють основний вибір (наприклад, аксесуари чи засоби догляду з тієї ж серії).
  1. Оформлення замовлення
  • У процесі оформлення замовлення вказано вартість доставки та терміни отримання товару.
  • Є автопідказки для швидкого введення адреси чи список популярних міст.
  • Поля форми мінімізовані, зведені лише до необхідних для завершення замовлення.
  • Інтерфейс чекауту мінімалістичний: немає повної шапки та/або футеру, залишено тільки логотип, кнопку зв’язку та поля для введення даних.

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

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

Поділитися постом у:

Денис
Як Head of UX/UI та COO з 9-річним досвідом роботи в UX/UI дизайні, Денис ділиться своїми знаннями та експертними порадами в статтях та вебінарах.

Інші статті

1
/
1

Більше кейсів від Турум-бурум?

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

Дивитися портфоліо

Напишіть нам, і почнемо співпрацю!

Ваше повідомлення було відправлене! Ми зв'яжемося з вами якомога швидше

Відправити ще одну заявку
Doublecheck your form data please