Интернет-магазины косметики и парфюмерии: лучшие практики и интересные фичи

Привет, это Antro. Рассказываем, что стоит внедрить в своём интернет-магазине или приложении тем, кто продаёт косметику. Как обычно, с большим количеством примеров и опорой на нашу экспертизу и исследования.

Интернет-магазины косметики и парфюмерии: лучшие практики и интересные фичи

Мы много рассказываем о проектировании интернет-магазинов вообще. В последнее время мы много работали со сферой бьюти, а недавно выпустили большой отчёт о трендах в бьюти-ритейле. Настало время практических рекомендаций, которые следуют из этих трендов.

Мы будем показывать примеры на десктопной версии, так как они легче воспринимаются. Однако, учитывая рост использования мобильных устройств в eCommerce всегда учитывайте мобильную версию для сайтов. Во многих случаях лучше проектировать в формате mobile first.

Демонстрация разных оттенков и цветов

В декоративной косметике продукты выходят большими линейками, чтобы покрыть разные оттенки и типы кожи. Это следствие долгосрочного тренда на инклюзивность.

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

  1. Демонстрируте все варианты. Люди воспринимают только то, что видят.

  2. Не текстом, а визуально. По данным Baymard Institute пользователи обычно игнорируют цветовые индикаторы, отображаемые в тексте.

  3. Достаточно крупно, чтобы они были заметными.
  4. Если индикаторы интерактивные, то нужно демонстрировать это, изменяя фото товара. Если фото товара не будет изменяться, люди не узнают, что они интерактивны. Это отсылает нас к первой эвристике от NN/g.
  5. В мобильной версии пользователям нужно попасть по интерактивным индикаторам пальцем. Мы рекомендуем делать кликабельную зону на мобильных устройствах хотя бы 30-40px. Никто не будет сидеть с линейкой, но Baymard говорит о квадрате примерно в 7 мм.
ИЛЬ ДЕ БОТЭ, к сожалению, всё делает не так, как нужно
ИЛЬ ДЕ БОТЭ, к сожалению, всё делает не так, как нужно
А вот Sleek Makeup не жалеет места для карточки товара в каталоге и повазывает доступные цвета крупно и интерактивно
А вот Sleek Makeup не жалеет места для карточки товара в каталоге и повазывает доступные цвета крупно и интерактивно
Более сжатый вариант демонстрации от Glossier
Более сжатый вариант демонстрации от Glossier
bluemercury использует сразу две интересных механики — подсказки с названиями цветов на десктопе + вынос оттенков для некоторых продуктов прямо на изображение товара. К сожалению, они используют потенциал десктопа не до конца — у них нет слайдера картинок
bluemercury использует сразу две интересных механики — подсказки с названиями цветов на десктопе + вынос оттенков для некоторых продуктов прямо на изображение товара. К сожалению, они используют потенциал десктопа не до конца — у них нет слайдера картинок

Как быть, ведь место на карточке ограничено?

Такая проблема часто возникает именно в десктопе. Например, на главной, где товары из разных категорий должны выглядеть одинаково. Одним из вариантов может быть онховерное состояние карточки

Другим вариантом является «Быстрый просмотр» — пользователи адаптировались к нему. Правда Baymard отдельно уточняет, что «Быстрый просмотр» актуален именно для продуктов с визуальной составляющей.

Быстрый просмотр у Sephora демонстрирует все варианты, не пряча их в выпадающий список
Быстрый просмотр у Sephora демонстрирует все варианты, не пряча их в выпадающий список

Страница товара

На странице товара важно тоже показывать весь объём оттенков или, как минимум, визуально подчёркивать элемент выбора.

Если у вас всего один оттенок, то не стоит уделять этому столько внимания — будет выглядеть странно.

РИВ ГОШ, товар с одним оттенком. Если в сетке странным выглядит только призыв его выбрать, то выпадающий список с одним элементом — это уже точно чересчур
РИВ ГОШ, товар с одним оттенком. Если в сетке странным выглядит только призыв его выбрать, то выпадающий список с одним элементом — это уже точно чересчур

Соблюдайте баланс и единообразие, но тестируйте решения

Золотое яблоко в угоду минимализму рискует тем, что часть аудитории пропустит выпадающий список. Хотя эта вероятность и не очень высока, она может стоить вам снижения конверсии — надо тестировать
Золотое яблоко в угоду минимализму рискует тем, что часть аудитории пропустит выпадающий список. Хотя эта вероятность и не очень высока, она может стоить вам снижения конверсии — надо тестировать

Свотчи на странице товара

Свотчи — фотографии, на которых показано, как косметическое средство выглядит при использовании: его цвет и текстуру. Иногда так называют и видео. Свотчи позволяют посетителям увидеть, как выглядит товар в реальности и помогают принять решение о покупке.

Офтоп

Пугает выражение лица, с которым сфотографировали модель Лэтуаль. К самому лицу никаких претензий.

Совсем не кажется, что она хочет мне помочь :с Скорее кажется, что она чем-то напугана или даже злится, Лэтуаль
Совсем не кажется, что она хочет мне помочь :с Скорее кажется, что она чем-то напугана или даже злится, Лэтуаль
Вы как считаете?
Меня теперь тоже пугает
Да нормально всё, чего вы привязались
Мда

Фото продукта на разных моделях

Косметика не просто так выпускается в десятках разных оттенков. Цвет кожи у людей отличается, например, просто по уровню загара. К каждому тону кожи свой продукт, поэтому и демонстрировать нужно их на разных оттенках кожи.

ИЛЬ ДЕ БОТЭ демонстрирует свотчи на коже разных оттенков
ИЛЬ ДЕ БОТЭ демонстрирует свотчи на коже разных оттенков
Россиийский бренд СЕРГЕЙ НАУМОВ показывает румяна на разных тонах кожи
Россиийский бренд СЕРГЕЙ НАУМОВ показывает румяна на разных тонах кожи

Фото и видео in-use

Это изображение товара непосредственно на модели.

Такие фото и видео показывают, как товар выглядит в использовании. Это помогает потенциальному покупателю понять, насколько товар подходит для него. Важно обеспечить высокое качество и достаточное количество примеров.

Sephora убивает сразу двух зайцев — показывает не только на модели, но и до/после использования средства, чтобы усилить демонстрацию эффективности
Sephora убивает сразу двух зайцев — показывает не только на модели, но и до/после использования средства, чтобы усилить демонстрацию эффективности
bluemercury интегрирует видео прямо со своего YouTube-канала 
bluemercury интегрирует видео прямо со своего YouTube-канала 

Естественные фото

Опрос, проведенный Havas Group в 2021 году, показал, что цинизм находится на рекордно высоком уровне: потребители считают менее половины брендов заслуживающими доверия.

Если фото сильно обработано, то это может вызвать подозрения у покупателей. Плюс, привести к возврату товара из-за разницы между ожиданиями покупателя и реальностью.

Фото при естественном освещении без обработки передают настоящие (насколько это воможно для фото) цвета и их градацию. Это особенно важно для косметики, где цвет и текстура влияют на выбор покупателя.

Не стоит замазывать и родинки или другие характерные черты у моделей. Покупатели неидеальны и им проще ассоциировать себя с неидеальной моделью — это долгосрочный тренд всей индустрии красоты и моды, Glossier
Не стоит замазывать и родинки или другие характерные черты у моделей. Покупатели неидеальны и им проще ассоциировать себя с неидеальной моделью — это долгосрочный тренд всей индустрии красоты и моды, Glossier
Ещё один пример от Glossier
Ещё один пример от Glossier
На изображениях для консилера в ИЛЬ ДЕ БОТЭ отдельно помечают, что не ретушировали кожу
На изображениях для консилера в ИЛЬ ДЕ БОТЭ отдельно помечают, что не ретушировали кожу

Пользовательский контент

Чаще его называют UGC — user-generated content. В eCommerce это в первую очередь фото, видео и текст, которые пользователи самостоятельно загружают на сайт или в приложение. UGC помогает косметическим брендам представить продукт таким, какой он есть. Продемонстрировать реальную эффективность продукта.

Лэтуаль интегрирует видео из TicTok, а также фото и видео из запретнограма. Это также мотивирует пользователей делать контент в соцсетях, чтобы попасть на страницу магазина и получить больше подписчиков. Так магазин получает дополнительную рекламу
Лэтуаль интегрирует видео из TicTok, а также фото и видео из запретнограма. Это также мотивирует пользователей делать контент в соцсетях, чтобы попасть на страницу магазина и получить больше подписчиков. Так магазин получает дополнительную рекламу

Пользовательский контент показывает реальных и разных людей за экраном. Он помогает бренду поддерживать аутентичность, которая нужна покупателям. Цель — повысить уровень доверия между потребителем и брендом.

Lamoda даёт возможность добавить фото к отзыву
Lamoda даёт возможность добавить фото к отзыву

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

Sephora не только использует фото своих покупателей в Instagram, но и сразу демонстрирует, какие товары были использованы. Плюс, рекламирует с помощью маленьких деталей свою программу лояльности. Браво!
Sephora не только использует фото своих покупателей в Instagram, но и сразу демонстрирует, какие товары были использованы. Плюс, рекламирует с помощью маленьких деталей свою программу лояльности. Браво!
Подобная механика от Kylie Cosmetics
Подобная механика от Kylie Cosmetics

Чтобы помочь людям делать более качественный контент интернет-магазины создают гайды

Пример такого сайта можно найти, например, на сайте Лэтуаль
Пример такого сайта можно найти, например, на сайте Лэтуаль

Другой способ социального доказательства — данные опросов

Kylie Cosmetics публикует данные опроса об эффективности своего продукта.

Да, выборка маленькая и научного подхода тут нет, но идея интересная. Да и будем честны,  скорее всего, большинство даже не читает этот мелкий текст :с
Да, выборка маленькая и научного подхода тут нет, но идея интересная. Да и будем честны,  скорее всего, большинство даже не читает этот мелкий текст :с

Подобную же историю можно встретить и у Glossier, а позже мы покажем пример от ULTA

Glossier
Glossier

Расширенные отзывы

Люди ищут не просто косметику, а продукты, которые помогут именно им. Значительно проще ассоциировать себя с человеком, например, похожего возраста и с таким же типом кожи. Отзывы это делает и более «настоящими».

FOAM показывает пол, возраст и тип кожи
FOAM показывает пол, возраст и тип кожи

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

У некоторых из тех, кто оставляет отзывы, есть даже фото, хотя на скриншот они не попали
У некоторых из тех, кто оставляет отзывы, есть даже фото, хотя на скриншот они не попали
Похожая история и у Glossier, хотя данные о внешности магазин не раскрывает
Похожая история и у Glossier, хотя данные о внешности магазин не раскрывает

Специализированные под отрасль фильтры

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

Для магазинов, в которых продаётся парфюмерия полезны фильтры по запаху (вот это ничего себе), времени и цели использования.

На сайте ScentBird можно отфильтровать парфюмы не только по запаху, но и по области применения, мероприятию и настроению
На сайте ScentBird можно отфильтровать парфюмы не только по запаху, но и по области применения, мероприятию и настроению

А для уходовой косметики фильтры по возрасту, типу кожи, составу, формату. Естественно, фильтр по проблеме не менее важен.

Фильтры Лэтуаль. Сами фильтры, конечно, лучше держать открытыми по умолчанию, чтобы люди точно их заметили
Фильтры Лэтуаль. Сами фильтры, конечно, лучше держать открытыми по умолчанию, чтобы люди точно их заметили
У Sephora фильтров не меньше
У Sephora фильтров не меньше

Если вы сотрудничаете с инфлюенсерами или экспертами, то можно создавать подборки от них и тоже внедрять их в фильтр. Плюс, подобные подборки можно создавать самостоятельно. В этой отрасли люди любят всё новое, поэтому фильтр «Новинки» тоже пригодится.

Виртуальная примерка

Дополненная реальность позволяет человеку увидеть, как продукт будет выглядеть на нём без посещения магазина. Причём не только единственный продукт, но и весь макияж.

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

Chanel, YSL, Charlotte Tilbury и Maybelline предлагают услуги виртуальной примерки на своих веб-сайтах и в мобильных приложениях. В приложении Sephora для США разработана система виртуальной примерки: готовые образы и отдельные средства, просмотр свотчей на руке

Виртуальная примерка от Dior
Виртуальная примерка от Dior

Это деньги, но стоит того. Данные Perfect Corp показали

  • Estée Lauder добилась в 2,5 раза более высокого коэффициента конверсии с помощью Lip Virtual Try-on
  • iMatch Virtual Shade Expert повысил лояльность клиентов к бренду
  • elf Cosmetics получила на 200% более высокий коэффициент конверсии от онлайн-покупателей, используя свою технологию виртуальной примерки
Экслюзивный контент! Специально для этой статьи уговорили нашего CEO попробовать виртуально примерить консилер от KIKO MILANO — тёмных кругов совсем не видно
Экслюзивный контент! Специально для этой статьи уговорили нашего CEO попробовать виртуально примерить консилер от KIKO MILANO — тёмных кругов совсем не видно

Квизы и викторины

Бренды предлагают опросы на своих веб-сайтах или в приложениях. Там пользователи отвечают на подробные вопросы о своём типе кожи, образе жизни, диете и предпочтениях.

58%
предпочли бы купить их в компании, предлагающей викторину. Данные за 2021 год, но тренд на персонализацию только усиливается.
Квиз на сайте MHAVE, который мы делали три года назад
Квиз на сайте MHAVE, который мы делали три года назад
Квиз на сайте MIXIT, правда из него никак не выйти в конце — либо отправляй данные, либо закрывай страницу
Квиз на сайте MIXIT, правда из него никак не выйти в конце — либо отправляй данные, либо закрывай страницу
У Natura Siberica тоже есть квиз, но чтобы его пройти обязательно нужно регистрироваться. Помните, что так делать не стоит. Чем нативнее вы встроите сбор данных, тем лучше. Только давайте без тёмных паттернов!
У Natura Siberica тоже есть квиз, но чтобы его пройти обязательно нужно регистрироваться. Помните, что так делать не стоит. Чем нативнее вы встроите сбор данных, тем лучше. Только давайте без тёмных паттернов!

В Малайзии бренд по уходу за кожей Nutox в партнерстве с Ministry XR пошёл ещё дальше и создал «инструмент для анализа кожи» Nutox Skin Journal, основанный на глубоком обучении и компьютерном зрении, чтобы предоставить покупателям гиперперсонализированный опыт при покупке товаров по уходу за кожей.

Nutox Skin Journal
Nutox Skin Journal

Более интересный формат подбора можно увидеть на сайте UOMA BEAUTY

Ребята из UOMA захватывают внимание пользователя необычной механикой выбора оттенков, а если она не помогает, то предлагают квиз
Ребята из UOMA захватывают внимание пользователя необычной механикой выбора оттенков, а если она не помогает, то предлагают квиз

Интеграция обзоров от экспертов и инфлюенсеров на сайт

Интеграция с социальными сетями, сотрудничество с экспертами и инфлюенсерами может помочь интернет-магазину косметики расширить свою аудиторию, повысить узнаваемость бренда и увеличить продажи.

Аудитория инфлюенсеров доверяет их мнению. Рекомендации от блогера стимулируют покупателей попробовать. Особенно в бьюти, где новинки — один из самых популярных запросов.

Уже знакомый нам способ интеграции от bluemercury, но уже не in-use видео, а обзор и рекомендации эксперта
Уже знакомый нам способ интеграции от bluemercury, но уже не in-use видео, а обзор и рекомендации эксперта

Покупатели салонов красоты говорят, что YouTube является их основным источником контента, связанного с красотой. Количество просмотров видео о макияже увеличивается более чем вдвое с каждым годом.

Подборки от бьюти-блогеров в Золтом Яблоке
Подборки от бьюти-блогеров в Золтом Яблоке

Подборки и боксы

Способ и сэкономить время пользователей на выбор, и поднять средний чек. Это может быть набор для создания конкретного образа, для ухода за определенным типом кожи, за авторством от бьюти-блогера или даже самого бренда, если он подразумевает курированный выбор.

Наборы от MIXIT могут также служить как и подарочные
Наборы от MIXIT могут также служить как и подарочные
FOAM интегрирует подборки товаров прямо в интервью с популярными у аудитории людьми, которые выпускает у себя на сайте
FOAM интегрирует подборки товаров прямо в интервью с популярными у аудитории людьми, которые выпускает у себя на сайте
А это кусочек концепта страницы товара от нас для FOAM, где мы подчеркнули их взаимодействие с блогерами, используя привычный визуал запретнограма
А это кусочек концепта страницы товара от нас для FOAM, где мы подчеркнули их взаимодействие с блогерами, используя привычный визуал запретнограма
UOMA BEAUTY собирает комплекты со скидкой и предлагает их сразу на странице товара. Думаем, что лучше было бы ещё объяснять, насколько эффективнее такой набор. Здесь же фокус только на цене и подарках
UOMA BEAUTY собирает комплекты со скидкой и предлагает их сразу на странице товара. Думаем, что лучше было бы ещё объяснять, насколько эффективнее такой набор. Здесь же фокус только на цене и подарках

В Европе и США подписка на бьюти-боксы — растущий тренд, так как люди хотят дёшево пробовать новинки. Возможно, российским интернет-магазинам стоит к нему присмотреться, хотя известные нам примеры не были удачными. Пробники любят все, но предпочитают за них не платить ¯\_(ツ)_/¯.

Новый формат инструкции по применению

Люди заинтересованы не в самом товаре, а в эффекте от него. Поэтому продавцы хотят, чтобы люди правильно использовали их продукты.

Видео-инструкции у себя на странице товара внедрила Kylie Cosmetics
Видео-инструкции у себя на странице товара внедрила Kylie Cosmetics

Формат старый, но нам показалось милым и запоминающимся добавление небольших лайфхаков к описанию — это простой способ отличаться от сухих текстов в других интернет-магазинах

UOMA BEAUTY
UOMA BEAUTY

Хайлайты преимуществ и ценностей

Текст с иконками размещается на видном месте — обычно под фото товара или рядом с ним на первых экранах.

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

Glossier
Glossier

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

Sephora
Sephora

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

Золотое Яблоко
Золотое Яблоко

Можно делать хайлайты и в нетипичном виде, но мы считаем, что они должны выглядеть привычно для пользователя. Да и иконки привлекают внимание пользователя как визуальный акцент.

Текстовые хайлайты от Kylie Cosmetics
Текстовые хайлайты от Kylie Cosmetics

Изображения — больше, чем просто товары

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

Инструкции, преимущества и ассортимент на фото, где его пропустят с меньшей вероятностью, Лэтуаль
Инструкции, преимущества и ассортимент на фото, где его пропустят с меньшей вероятностью, Лэтуаль
На видео сразу демонстрируется и для чего может быть использован продукт, и результат
На видео сразу демонстрируется и для чего может быть использован продукт, и результат
Даже комплекты можно демонстрировать с помощью изображений. Особенно, если ниже пользователь найдёт сами продукты, Sephora 
Даже комплекты можно демонстрировать с помощью изображений. Особенно, если ниже пользователь найдёт сами продукты, Sephora 

Использование изображений — альтернативный способ демонстрировать эффективность.

ULTA выносит на фото данные опроса
ULTA выносит на фото данные опроса

И рассказывать об ингредиентах.

ULTA выносит на изображения ингредиенты, которые заинтересуют пользователей
ULTA выносит на изображения ингредиенты, которые заинтересуют пользователей

Главное, учитывайте, что людям нужно ещё прочитать текст на изображениях

UOMA BEAUTY
UOMA BEAUTY

Сравнение похожих товаров, а не просто рекомендация

Последняя на сегодня фича от Sephora — сравнение товаров на странице продукта. Так можно сэкономить человеку время на поиск. Идея проста — продемонстрировать альтернативы, которые он будет искать в блоке рекомендаций в сжатом и информативном виде, облегчив задачу подбора.

Интернет-магазины косметики и парфюмерии: лучшие практики и интересные фичи

При этом такое сравнение не исключает рекомендации товаров, которые также могут понравиться пользователю.

Заключение

Цель всех рассмотренных механик — повышение качества пользовательского (UX) и клиентского опыта (CX). Основной запрос покупателей можно сформулировать так: хочу, как офлайн и даже лучше.

Для этого дизайнерам и маркетологам необходимо постоянно придумывать «заменители» того, что человек получает при взаимодействии с «каменным» магазином. Современные технологии помогают местами (как с виртуальной примеркой) даже сделать его более персонализированным и запоминающимся.

Чтобы самим генерировать интересные и необычные решения, нужно знать свою аудиторию. Мы изучили тонну отчётов и статистики, чтобы скомпилировать общий отчёт о бьюти в eCommerce и не только

Если вам нравится быть в курсе, что происходит в eCommerce, то подписывайтесь на наш тг-канал:

Будем рады обсудить в комментах, что нового вы узнали или, может, мы забыли что-то важное?

71
42 комментария

Вот бы такую статью, да про интернет-магазины саженцев...

4
Ответить

Ага, сам веду сайт продажи комнатных и уличных растений, а все не могу попасть на статью даже о смежной сфере. О чем уж тут говорить, если даже о флористических сайтах на VC практически ничего нет

1
Ответить

Зашёл специально на сайт Летуаля, а там реально у этой Али такая аватарка, смеюсь с маркетологов.

3
Ответить

Да, сейчас онлайн магазины так развиваются, что не всегда нужны офлайн магазины, иногда проще заказать, но при этом полностью уходить в онлайн тоже не стоит

1
Ответить

Офлайн-магазины всё равно важны. У нас в отчёте есть интересное исследование о том, как влияет открытие и закрытие «каменных» магазинов на трафик :)

Ответить

Оффлайн все еще больше онлайна и вряд ли переборет его онлайн в ближайшие 5 лет.

Ответить

pupa 02>>>все остальные пупы

Ответить