Дизайн интернет-магазина косметики: 10 ключевых элементов
Каким должен быть дизайн интернет-магазина косметики? Какие существуют особенности дизайна сайтов этой ниши? На что точно стоит обратить внимание? Команда Турум-бурум определила 10 ключевых элементов и особенностей интернет-магазинов косметики в сфере beauty, которые следует учитывать при проектировании сайта.
1. Продумайте структуру главной страницы
При проектировании дизайна интернет-магазина косметики стоит исходить из особенностей целевой аудитории и задач бизнеса — будет ли это интернет-магазин направленный на масс-маркет или это будет создание определенного бренда. От этого будет зависеть расположение таких ключевых элементов как логотип, УТП, а также стилистика баннеров, картинок, и прочее.
Например, общепринятым трендом для премиальных магазинов стало размещение логотипа по центру. Как это реализовано в интернет-магазинах Mon Amie, Sephora, MakeUp. Если хотите подчеркнуть престиж своего проекта — обратите на это внимание.
![](https://cdn.cases.media/image/wide/bd2ca285-6956-44d4-881f-c975e3627273.jpg)
Но не смотря на тенденцию к минимализму, внедрение следующих инструментов в дизайн интернет-магазина косметики положительно повлияет на показатели конверсии:
- Надшапочный баннер — это краткая рекомендация, объяснение, реклама. Он вовлекает посетителя на сайт, побуждает перейти на выдачу, просмотреть актуальные акции, новости, контакты, и т.д.
![](https://cdn.cases.media/image/wide/25cd0ff5-412d-485d-a833-933d78e17689.jpg)
- Минималистичная шапка — содержит только ключевые ссылки и подчеркивает особенности сайта.
![](https://cdn.cases.media/image/wide/8f8a04ad-3c27-482d-9e92-f1011fa128bf.jpg)
- Определение города — инструмент, который подсказывает где можно забрать товар или посмотреть его вживую. Нужен для проектов, у которых есть оффлайн магазины.
![](https://cdn.cases.media/image/wide/117416a0-43a3-404d-b1c6-f5d98392bcf7.jpg)
Не перегружайте дизайн лишними элементами. В данном случае сайт — это витрина, где акцентным является товар, и ничто не должно отвлекать посетителя от него.
Добавьте ховер при наведении на товар с предпросмотром и возможностью купить товар еще на странице выдачи. Косметика — это часто спонтанная покупка, по принципу «пришел, увидел, купил». Поэтому такое решение, как показывает практика, имеет положительный эффект.
![](https://cdn.cases.media/image/original/aa48603d-b5a7-4ac6-a8a8-5dc02011d6a7.gif)
Избегайте однообразия в структуре главной страницы. Используйте и слайдеры, и блоки, и плитки для переключения фокуса пользователя и для большего вовлечения его на сайт, как мы это реализовали в дизайне интернет-магазина косметики Mon Amie. Таким образом вы создаете больше различных точек входа и посетитель не будет уставать от однообразия, прокручивая только слайдеры или просматривая только блоки.
Не бойтесь добавлять украшательства в дизайн интернет-магазина косметики. В сфере beauty это оправдано, так как ниша и инструменты должны пересекаться. Так, работая над проектом Mon Amie, мы добавили в дизайн акценты с помощью шрифтов, чтобы зацепить внимание посетителя и вовлечь его.
![](https://cdn.cases.media/image/wide/c4cdc8c6-86f2-4ec7-a92a-e131ebf24ef6.jpg)
2. Структурируйте каталог
Ассортимент товаров интернет-магазина косметики довольно широкий. Поэтому хорошо структурированный каталог — это не рекомендация, а необходимость. Изучите потребности пользователей и проанализируйте запросы посетителей.
На основе полученных данных сформируйте многоуровневое меню и сделайте разбивку по ключевым категориям для упрощения поиска нужного товара. Для повышения микро-конверсии, стоит сделать акцент на часто запрашиваемых категориях и вынести их в отдельное горизонтальное меню.
![](https://cdn.cases.media/image/original/2eca9e2c-8cee-446a-b166-7091a1ca592c.gif)
![](https://cdn.cases.media/image/original/b83c84b5-3f06-4230-bdc8-db050731fe14.gif)
3. Продумайте поиск по сайту
Строка поиска должна располагаться на видном месте, но при этом не забирать все внимание на себя. При помощи подсказок и автодополнения в строке поиска по сайту подскажите пользователю, что есть в ассортименте интернет-магазина по определенному запросу.
В интернет-магазине косметики также эффективен поиск с расширенными подсказками, где можно вывести не только конкретный товар, но и альтернативные или популярные товары из этой же категории, того же бренда, и прочее.
![](https://cdn.cases.media/image/original/3a076360-95bc-4ffd-9b33-715c5e5d7d36.gif)
4. Реализуйте фильтры на поисковой выдаче
Дайте возможность пользователю сортировать и фильтровать товары на поисковой выдаче по определенным характеристикам и параметрам продукта, которые важны для них. Таким образом посетитель сможет сузить круг поиска, быстрее найти нужный товар и, возможно, быстрее совершит покупку.
![](https://cdn.cases.media/image/wide/1315dead-5186-46e4-9617-a1449980de99.jpg)
5. Продумайте выдачу
Выдача — это та же витрина, где главным является товар и на нем должен быть акцент. В дизайне интернет-магазина косметики на выдаче часто используют крупный баннер, который больше, чем в интернет-магазинах других ниш. Это сделано для того, чтобы максимально приблизить онлайн магазин к оффлайн.
Например, если речь идет о духах, то передать «настроение» аромата или образ, который он дополняет, помогает яркий и стильный баннер. Он создает атмосферу и завлекает пользователя пойти дальше на сайт.
![](https://cdn.cases.media/image/wide/dccc9b25-dbf8-4479-ac7b-5dfc1d049189.jpg)
Добавьте фильтры для более быстрого поиска нужного товара. Часто покупатели ищут товары определенного бренда, поэтому обязательно дайте возможность отсортировать товары по марке.
Так, лидер ниши украинского e-commerce MakeUp, предлагает сортировку по буквам и скролл.
![](https://cdn.cases.media/image/wide/0242061b-16de-4cf9-b53f-77ab6f8c7202.jpg)
Parfums, например, реализовал фильтр по брендам с помощью поиска и скролла, что работает намного эффективнее, чем просто скролл или поиск по буквам.
![](https://cdn.cases.media/image/wide/0310dfbf-65ce-4427-bbde-9d113f7f7968.jpg)
6. Персонализируйте сервис
Зная свою целевую аудиторию, стоит персонализировать сервис с помощью обращений к пользователям. Так, например, магазин Sephora обращается к своим покупательницам «Hi, beautiful!».
![](https://cdn.cases.media/image/wide/07d176b4-aec5-4f35-9f89-21f9de04ed79.jpg)
В случае если пользователь зарегистрирован на сайте, то обращаться к нему стоит по имени. Таким образом, вы проявляете внимание к своим клиентам, что повышает их лояльность.
![](https://cdn.cases.media/image/wide/8c4b5d8f-dd06-4ec3-b964-f26af367edf4.jpg)
7. Проработайте карточку товара
Обязательно используйте большое и качественное фото товара. Добавьте инструмент увеличения, чтобы продемонстрировать структуру, текстуру или особенность товара.
![](https://cdn.cases.media/image/original/978d9216-1039-4683-bbdf-9ad8cf082654.gif)
Если товар предложен в нескольких цветах, то выводите не только кружочки с палитрой цветов, а демонстрируйте весь товар в новом цвете, чтобы пользователь мог понять как продукт выглядит в действительности.
В интернет-магазине косметики Parfums при наведении на палитру, меняется основное фото в карточке товара. Это завлекает пользователя походить по витрине и посмотреть на другой товар без клика и без перезагрузки страницы, что значительно упрощает процесс выбора и экономит время
Также стоит выводить бренд товара на видном месте, чтобы дать возможность быстро перейти на выдачу товаров по определенному производителю. Возможно пользователь захочет посмотреть другие продукты этой же фирмы в дополнение к своему товару.
![](https://cdn.cases.media/image/wide/134f8f23-4b83-47e7-ae2a-48213959b293.jpg)
Цикл сделки для товаров в нише beaty может быть довольно длинным, особенно если это не предмет первой необходимости. Поэтому как в карточке товара, так и на выдаче обязательно предоставьте пользователям возможность добавить товар в «Избранное» или в «Список желаний». Так вы повысите вероятность того, что этот товар по итогу окажется в корзине.
![](https://cdn.cases.media/image/wide/5d86e4ec-a14a-475b-8b33-d3e0015824bc.jpg)
При скролле основное фото товара можно сделать прилипающим, чтобы товар всегда оставался в фокусе пользователя. Как это реализовано в интернет-магазине Mon Amie.
![](https://cdn.cases.media/image/original/6590ac50-b452-4d16-940b-9a2762b7da2e.gif)
Например, на MakeUp в карточке товара сохраняется идея центричности — это хорошее решение оставить товар в центре внимания.
![](https://cdn.cases.media/image/wide/b60a6a9e-53fe-46db-b945-668bf77a0052.jpg)
8. Добавьте социальное доказательство
Добавьте блоки с отзывами пользователей и на главной, и на выдаче, и в карточке товара. Этот инструмент не только может повлиять на принятие решения, но и помочь определиться с выбором или побудить пользователя посмотреть другой товар. Покупателям важно понять и перенять опыт других клиентов.
Также стоит добавить в карточке товара блок Вопрос-Ответ. Таким образом, пользователи смогут узнать о товаре больше, а также получить ответы на важные для них вопросы как от консультантов интернет-магазина, так и от других реальных пользователей.
![](https://cdn.cases.media/image/wide/cf926d18-97cb-4d04-92b0-30da07b929cb.jpg)
9. Продумайте cross-sale и upsell инструменты
Как показывает один из наших кейсов, правильное использование cross-sale и upsell инструментов может увеличить средний чек в 1,7 раз. Например, в карточке товара стоит добавить блок upsell с товарами того же бренда, но выше по классу, или cross-sale — с товарами из той же серии. В Корзине реализовать возможность покупки сертификатов, подарочной упаковки, и других cross-sale товаров.
![](https://cdn.cases.media/image/original/92b8a248-62fd-485d-b1af-25be0dd3962e.gif)
Более подробно о том, как правильно использовать инструменты кросс сейла и апсейла можно почитать тут.
10. Создайте программу лояльности
Бренд и причастность к бренду очень важно для beauty индустрии. Поэтому создавайте различные сообщества и клубы. Это хороший инструмент для удержания клиентов и повышения их лояльности, а также вовлечения новых пользователей.
Продемонстрируйте выгоду и преимущества вступления в клуб или сообщество. Для этого организуйте реферальную программу и систему лояльности с личными скидками, бонусами, промокодами. Это поможет повысить LTV. Ведь по статистике, ARPU лояльных клиентов в 3 раза выше, чем новых пользователей.
![](https://cdn.cases.media/image/wide/26bd06c4-a9b5-4d4b-945a-bb61d05198a5.jpg)
Каким должен быть дизайн интернет-магазина косметики?
Ключевой характеристикой дизайна интернет-магазина косметики должен быть минимализм: все должно строиться вокруг товара и контента. Для сайтов beauty-индустрии дизайн должен играть сервисную функцию, поэтому важно не перегружать интерфейс дополнительными элементами.
Если вам нужна помощь в разработке дизайна интернет-магазина, команда Турум-бурум всегда готова вам помочь,провести экспертный юзабилити-аудит, улучшить текущий интерфейс по ESR подходу или разработать новый сайт для вашего бизнеса.