Что находится под поверхностью: взгляд на UX в индустрии красоты

Опубликовано: 2022-07-22

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

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

Рост технологий красоты

В 2018 году L'Oreal, крупнейшая в мире косметическая компания, объявила о своем намерении преобразовать себя в косметическую компанию, чтобы создавать продукты и услуги, которые будут более персонализированными, инклюзивными, ответственными и прозрачными. Сегодня технологии продолжают оставаться одной из главных тем в мире красоты, и компании внедряют искусственный интеллект (ИИ) и стратегии работы с большими данными для инноваций во всем, от умного макияжа до кожи, напечатанной на 3D-принтере.

Традиционно покупка косметических товаров означала примерку губной помады, теней для век или тонального крема в обычном магазине. Поскольку небольшие различия в цвете или текстуре могут иметь большое значение для кожи человека, потребители продолжают полагаться на физическое местоположение при покупке косметических товаров, даже когда они перешли к покупке других товаров в Интернете. Проникновение электронной коммерции в категории красоты колеблется ниже 5%; в начале 2021 года онлайн-продажи составляли всего 15% розничной выручки категории красоты.

Но не надолго. Розничные продавцы косметики осознают необходимость предоставления цифровых услуг наравне с магазинами, а дизайнеры создают сложные виртуальные торговые пространства, чтобы помочь покупателям представить, как продукты будут выглядеть и ощущаться на их теле. Прогнозируется, что к 2026 году с появлением новых технологий электронная коммерция будет составлять 30% продаж косметики.

Виртуальная примерка размывает опыт онлайн/в магазине

Среди самых быстрорастущих тенденций в индустрии красоты — виртуальная примерка (VTO) — опыт дополненной реальности, который позволяет пользователям пробовать косметику. Как правило, VTO работает, когда пользователи предоставляют приложению или веб-сайту доступ к своим камерам; Затем приложение использует основанное на алгоритме сопоставление лица, чтобы, например, нанести виртуальную помаду на губы пользователя. Несколько крупных косметических компаний добились успеха, инвестируя в ИИ или напрямую покупая компании VTO. Например, компания Perfect, лидер в области косметических технологий на основе искусственного интеллекта и дополненной реальности, сообщает, что ее инструмент VTO помог устаревшему косметическому бренду Clinique более чем удвоить коэффициент конверсии. Пандемия только ускорила внедрение этой технологии, особенно в связи с тем, что обычные магазины изменили протоколы гигиены и сократили использование коммунальных образцов.

«Клиенты привыкли заходить в Sephora, натирать кожу кучей средств и определять, какой оттенок им нужен, или, что еще лучше, кто-то другой определяет его за них», — говорит дизайнер продукта Грета Харрисон. Харрисон работала в бренде чистой косметики Beautycounter в начале пандемии, когда компания готовилась к выпуску расширенной линейки тональных средств Skin Twin. «Как вы собирались найти близнеца своей кожи, когда все наши магазины закрыты, и вы не можете его примерить?»

Четыре экрана телефона. В крайнем левом углу показаны шаги по использованию Shade Matcher. На каждом из следующих трех — рука, а под ней — шесть кругов разного оттенка кожи. Под ним находится кнопка «Добавить в корзину». Левая рука показывает две полоски светлых оттенков на ладони, показывая, как пользователи увидят оттенок на фоне своего тона кожи. Каждая из средних и правых рук имеет по четыре полоски «коричневых» оттенков на ладони.
Высокоточные прототипы Shade Matcher от Beautycounter. Инструмент позволяет пользователям пробовать оттенки, накладывая полупрозрачный цвет на ладони и запястья. Это считается одним из самых точных способов виртуально примерить оттенок.

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

Харрисон быстро перешел от низкоточных рисунков в Sketch к высокоточным прототипам; из них команда тесно сотрудничала с разработчиками продукта, чтобы точно настроить оттенки. «Команда разработчиков продукта провела большую калибровку, когда дело дошло до выбора того, как оттенки будут смотреться на запястье и будет ли это точное описание, потому что физические оттенки не обязательно идеально переводятся в шестнадцатеричные коды», — говорит она.

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

Красота UI/UX требует аутентичности и реализма

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

Дизайнер Toptal Джесс Соуза, которая работала в O Boticario, второй по величине косметической компании Бразилии, говорит, что видит тенденцию к использованию фотографий обычных людей для демонстрации косметических продуктов, а не к вдохновляющим изображениям моделей — метод, который находит отклик у миллениалов и поколений. З. «Люди устали видеть невероятных моделей и говорить: «На ней все будет хорошо смотреться. Как это будет смотреться на мне?», — говорит она. «Вам нужно показать прыщи, морщины и шрамы, потому что у реальных людей будут эти проблемы, и вам нужно увидеть, как продукт подействует на них».

При работе с фотографиями людей Топалов говорит: «Я не применяю к ним никаких дополнительных эффектов размытия и не фотошоплю. На самом деле, я стараюсь использовать оригинальные фотофайлы».

Используйте дизайн для передачи текстуры и запаха

Потребительский спрос на подлинность распространяется и на продукты, говорит Топалов, поскольку клиенты хотят просмотреть крупным планом изображения сыворотки или румян, которые они рассматривают. «Раньше они показывали больше 3D-изображений продукта, но теперь мы переходим к более естественному виду и показываем точную фотографию продукта», — говорит она.

Загорелый фон с изображением женщины, которой, вероятно, около 60 лет. Она улыбается и указательным пальцем наносит крем на щеку. В другой руке баночка со сливками. Слева от нее слово «Образы», ​​а под ним написано «Стиль и атмосфера использованных фотографий». Это страница из руководства по стилю бренда Memine.
В своем дизайне для стартапа бьюти-приложения Memine Дуня Топалов использовала минимально отретушированные изображения кожи моделей и самих продуктов. Все чаще клиенты хотят, чтобы бренды предлагали аутентичные взгляды как на продукты, так и на людей, которые их используют.

Демонстрация текстуры имеет решающее значение для побуждения людей покупать косметические товары в Интернете, говорит Соуза. «Когда [O Boticario] запустила новую линию губных помад, мы создали страницу, чтобы вы могли увеличить масштаб, выбрать цвет и увидеть текстуру. Вы можете сказать: «Это блестящее, или это немного блестит». До этого, говорит она, покупатели обычно предпочитали покупать в магазине, потому что это была единственная возможность проверить эти детали.

Изображение красного экрана на черном фоне. Белым шрифтом вверху написано «интенсивный». В середине светло-розовая помада. Слева выходят из левой границы кончики семи губных помад. Справа круги, показывающие цвет и текстуру восьми цветов помады.
Отображение текстур продукта — важный элемент бьюти-UI/UX.

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

Включите реальный опыт клиентов

Поскольку все больше клиентов совершают покупки в Интернете, пользовательский контент, такой как отзывы и фотографии клиентов, становится критически важным. Одно исследование показало, что продажи могут взлететь на 65%, когда обзор добавляется на страницу, на которой раньше его не было. То же исследование показало, что во время пандемии взаимодействие с обзорами в категории красоты подскочило на 313%.

«Когда речь идет о красоте, отзывы важнее, чем любой другой продукт», — говорит Харрисон. «Такие компании, как Sephora, действительно преуспели в этом, потому что вы можете не только сортировать товары по рейтингу, но и фильтровать их по покупателям со светлой кожей, смуглой кожей, светлыми глазами, темными глазами и так далее».

Соуза выступает за создание места для отзывов на страницах продуктов. «Люди могут написать: «Я использовал это неделю. Вот так выглядит моя кожа». Поскольку люди все равно будут делать это на Reddit или TikTok, почему бы не создать собственное место, где люди могли бы делиться, общаться и обмениваться информацией о том, как они обращались с вашими продуктами?» Она добавляет: «Даже если люди оставляют плохие отзывы, хорошо оставить для этого место. И бренд должен общаться с ними и решать проблему».

Кристиан Бински, бывший ведущий UI/UX-дизайнер бренда средств по уходу за кожей Dermalogica, рекомендует уделять первоочередное внимание социальным сетям, чтобы показывать клиентам, использующим продукты компании. «Мне всегда нравится включать очень заметный раздел на главной странице, где представлена ​​страница бренда в Instagram», — говорит он. «Обычно в нем также есть сетка изображений из социальных сетей, на которых показаны реальные пользователи, использующие продукты. Это один из лучших способов вдохновить потенциального клиента и мотивировать его на покупку продукта».

Дизайн приложения для красоты требует прозрачности

Клиенты хотят точно знать, что содержится в продуктах, которые они используют, и компании отвечают на этот призыв к прозрачности, раскрывая ингредиенты и то, как они воздействуют на кожу. Исследование Deloitte показало, что 6 из 10 компаний, производящих потребительские товары, планируют сделать инвестиции от умеренных до значительных, чтобы повысить прозрачность в 2022 году, и что отсутствие прозрачности является основной причиной, по которой клиенты отказываются от брендов.

Убедитесь, что текст передает прозрачность

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

Соуза рекомендует разместить раскрывающееся меню на каждой странице продукта, чтобы перечислить ингредиенты. «Вам нужно сообщить, что вы не скрываете ингредиенты, содержащиеся в продукте», — говорит она. «Если компании стыдно за то, что в ней есть, они должны изменить формулу». Она добавляет, что если в продукте есть ингредиент, которого нет ни у одного другого бренда, он должен находиться на высоком уровне в иерархии страниц.

Дизайн для чистой красоты

Стремление к прозрачности также согласуется с растущим интересом к чистой красоте, которая относится к продуктам, которые сделаны в основном из натуральных ингредиентов или содержат безопасные и экологически чистые синтетические материалы. Спрос на эти продукты растет, и ожидается, что индустрия чистой красоты вырастет более чем на 12% в период с 2020 по 2027 год.

В своей работе для Ellis Day Skin Science, посвященной использованию фагов или здоровых бактерий, Юсуф говорит, что ей дали четкие указания. «Основной идеологией, которую Эллис Дэй хотела донести до своих клиентов, была прозрачность, — говорит она. «Они хотели иметь возможность быть очень откровенными со своими клиентами в отношении того, что они добавляли в сыворотки».

Тем не менее, для обеспечения прозрачности требуется больше, чем просто список ингредиентов. Потребителям нужны визуальные подсказки, которые вызывают ощущение того, что олицетворяют прозрачные бренды — чистые, устойчивые, натуральные продукты. Флагманским продуктом Ellis Day была прозрачная сыворотка, и A/B-тестирование в Unbounce показало, что клиенты лучше всего реагировали на изображения океана. Юсуф включила воду в свои проекты, отчасти для того, чтобы передать идею чистоты и прозрачности. Видео на главной странице показывает людей у ​​раковины в спа-халатах, брызгающих на лица водой.

Снимок экрана с веб-сайта Ellis Day Skin Science, на котором мужчина и женщина вытирают лица белыми полотенцами. Они одеты в белые одежды.
Веб-сайт Ellis Day Skin Science использует изображения воды, чтобы сообщить о чистоте. Вода также отражает текстуру фирменной сыворотки компании, которая является прозрачной.

Используйте простоту, чтобы усилить ценности бренда

Минимализм не новинка в сфере упаковки косметики. Соуза говорит, что эта тенденция возникла из-за желания сделать косметику более связанной с медициной. Но в настоящее время дизайнеры рассматривают минималистскую эстетику, подчеркнутую смелыми элементами дизайна, как способ передать прозрачность. Например, Юсуф выступает за смелые цвета упаковки, чтобы передать прямоту; отсутствие беспорядка говорит о том, что компании нечего скрывать и что сам продукт не загроможден какими-либо дополнительными ингредиентами. Топалов использовала аналогичную стратегию в своем дизайне для Memine, выбрав минималистскую палитру нейтральных цветов, встречающихся в природе, и ярких бликов, привлекающих внимание.

Инклюзивная красота означает инклюзивный дизайн

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

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

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

Инновации и честность меняют UX в сфере красоты

За последние годы произошли огромные сдвиги во всех аспектах жизни людей, включая то, к чему они тяготеют, почему и как они покупают косметические товары. Потребители хотят знать, что они наносят на кожу; они хотят отражения разнообразия; и они хотят видеть себя полностью представленными, со всеми недостатками. Таким образом, роль технологий в том, чтобы помочь потребителям покупать косметические товары, будет только расти, и бьюти-дизайнерам UI/UX придется продолжать идти в ногу с растущими ожиданиями потребителей.