Каким должен быть дизайн интернет-магазина косметики? Какие существуют особенности дизайна сайтов этой ниши? На что точно стоит обратить внимание? Команда Турум-бурум определила 10 ключевых элементов и особенностей интернет-магазинов косметики в сфере beauty, которые следует учитывать при проектировании сайта.

1. Продумайте структуру главной страницы

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

Например, общепринятым трендом для премиальных магазинов стало размещение логотипа по центру. Как это реализовано в интернет-магазинах Mon Amie, Sephora, MakeUp. Если хотите подчеркнуть престиж своего проекта — обратите на это внимание.

Пример расположения логотипа в интернет-магазине Mon Amie

Но не смотря на тенденцию к минимализму, внедрение следующих инструментов в дизайн интернет-магазина косметики положительно повлияет на показатели конверсии:

  • Надшапочный баннер — это краткая рекомендация, объяснение, реклама. Он вовлекает посетителя на сайт, побуждает перейти на выдачу, просмотреть актуальные акции, новости, контакты, и т.д.
В интернет-магазине Sephora в надшапочнике посетителя сразу информируют, какую дополнительную выгоду он получит, если оформит заказ.
  • Минималистичная шапка — содержит только ключевые ссылки и подчеркивает особенности сайта.
Шапка в интернет-магазине MakeUp содержит такие ключевые элементы как: контакты, строка поиска, корзина, ссылка на список «Избранное»; при этом акцент остается на логотипе, что подчеркивает премиальность интернет-магазина
  • Определение города — инструмент, который подсказывает где можно забрать товар или посмотреть его вживую. Нужен для проектов, у которых есть оффлайн магазины.
Реализация определения города в интернет-магазине Mon Amie

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

Добавьте ховер при наведении на товар с предпросмотром и возможностью купить товар еще на странице выдачи. Косметика — это часто спонтанная покупка, по принципу «пришел, увидел, купил». Поэтому такое решение, как показывает практика, имеет положительный эффект.

Применение ховера при наведении на товар в интернет-магазине MakeUp

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

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

Для того, чтобы акцентировать внимание на определенных элементах в интернет-магазине Mon Amie, мы добавили подписи, как бы выполненные губной помадой. Это добавило легкости и игривости интерфейсу.

2. Структурируйте каталог

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

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

Пример хорошо структурированного каталога в интернет-магазине Mon Amie
Пример альтернативного варианта каталога на сайте Parfums

3. Продумайте поиск по сайту

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

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

Пример реализации расширенного поиска по сайту в интернет-магазине Mon Amie

4. Реализуйте фильтры на поисковой выдаче

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

Различные фильтры для сортировки товаров в интернет-магазине косметики Mon Amie

5. Продумайте выдачу

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

Например, если речь идет о духах, то передать «настроение» аромата или образ, который он дополняет, помогает яркий и стильный баннер. Он создает атмосферу и завлекает пользователя пойти дальше на сайт.

Баннер на выдаче категории женской парфюмерии в интернет-магазине Mon Amie

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

Так, лидер ниши украинского e-commerce MakeUp, предлагает сортировку по буквам и скролл.

Фильтр поиска по бренду в магазине MakeUp

Parfums, например, реализовал фильтр по брендам с помощью поиска и скролла, что работает намного эффективнее, чем просто скролл или поиск по буквам.

Фильтр поиска по бренду в интернет-магазине Parfums

6. Персонализируйте сервис

Зная свою целевую аудиторию, стоит персонализировать сервис с помощью обращений к пользователям. Так, например, магазин Sephora обращается к своим покупательницам «Hi, beautiful!».

Пример персонализации сервиса в интернет-магазине косметики Sephora

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

Пример обращения к клиентам в интернет-магазине Parfums

7. Проработайте карточку товара

Обязательно используйте большое и качественное фото товара. Добавьте инструмент увеличения, чтобы продемонстрировать структуру, текстуру или особенность товара.

Инструмент увеличения в интернет-магазине косметики Parfums

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

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

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

Карточка товара в интернет-магазине Mon Amie

Цикл сделки для товаров в нише beaty может быть довольно длинным, особенно если это не предмет первой необходимости. Поэтому как в карточке товара, так и на выдаче обязательно предоставьте пользователям возможность добавить товар в «Избранное» или в «Список желаний». Так вы повысите вероятность того, что этот товар по итогу окажется в корзине.

В интернет-магазине косметики Parfums пользователь уже с выдачи может отложить товар в «Избранное»

При скролле основное фото товара можно сделать прилипающим, чтобы товар всегда оставался в фокусе пользователя. Как это реализовано в интернет-магазине Mon Amie.

Реализация прилипающего фото товара в карточке товара интернет-магазина Mon Amie

Например, на MakeUp в карточке товара сохраняется идея центричности — это хорошее решение оставить товар в центре внимания.

Дизайн карточки товара на MakeUp

8. Добавьте социальное доказательство

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

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

Отзывы и Вопросы в интернет-магазине MakeUp

9. Продумайте cross-sale и upsell инструменты

Как показывает один из наших кейсов, правильное использование cross-sale и upsell инструментов может увеличить средний чек в 1,7 раз. Например, в карточке товара стоит добавить блок upsell с товарами того же бренда, но выше по классу, или cross-sale — с товарами из той же серии. В Корзине реализовать возможность покупки сертификатов, подарочной упаковки, и других cross-sale товаров.

Пример cross-sale в интернет-магазине косметики MakeUp: к маске для волос пользователю предлагают шампуни, сыворотки и бальзамы из той же серии

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

10. Создайте программу лояльности

Бренд и причастность к бренду очень важно для beauty индустрии. Поэтому создавайте различные сообщества и клубы. Это хороший инструмент для удержания клиентов и повышения их лояльности, а также вовлечения новых пользователей.

Продемонстрируйте выгоду и преимущества вступления в клуб или сообщество. Для этого организуйте реферальную программу и систему лояльности с личными скидками, бонусами, промокодами. Это поможет повысить LTV. Ведь по статистике, ARPU лояльных клиентов в 3 раза выше, чем новых пользователей.

Демонстрация преимуществ, которые доступны зарегистрированным пользователям в интернет-магазине Sephora

Каким должен быть дизайн интернет-магазина косметики?

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

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