UX/UI

UX-аудит топ-5 приложений в сфере «Красота»: 40 решений для роста конверсии и удержания

Владимир
Аналитик
В этой статье мы провели сравнительный UX-аудит пяти мобильных приложений в сегменте «Красота»: «Золотое Яблоко», «Лэтуаль», «Рив Гош», «ИЛЬ ДЕ БОТЭ» и «Парфюм-Лидер». Вы получите структурированный список из 40 конкретных дизайн- и юзабилити-решений — от онбординга до чекаута.

Исследуемые приложения:

Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

ТОП-40 решений для мобильных приложений в нише «Красота»

1. УТП после первого входа: онбординг через выгоды для покупателя

После регистрации или первого входа приложение показывает короткие слайдеры (2–5 шт.) с ключевыми преимуществами магазина. Вместо абстрактного «добро пожаловать» — конкретные ответы на вопрос «почему выгодно купить именно здесь»: кешбэк, бесплатная доставка, подарки, программа лояльности.
Зачем это нужно
Решение снижает тревожность нового пользователя и сразу формирует ценность. Человек понимает, зачем ему оставаться и пробовать сделать заказ.
Пример реализации в приложении Лэтуаль:
УТП после первого входа: онбординг через выгоды для покупателя - UX мобильных приложений

2. Запрос на включение push-уведомлений сразу после входа

Сразу после первого входа приложение запрашивает разрешение на отправку push-уведомлений. Пользователю объясняют, зачем это нужно: информация об акциях, распродажах, статусе заказов и персональных предложениях.
Зачем это нужно
Ранний запрос на уведомления — стандарт лучших e-commerce практик. Пользователь ещё не успел уйти, находится в состоянии «знакомства» и чаще дает согласие. Включенные push-каналы критически важны для возврата в приложение, информирования о скидках и повышения LTV. Отложенный запрос даёт кратно меньше подписчиков.
Пример реализации в приложении Золотое Яблоко:
Запрос на включение push-уведомлений сразу после входа - UX мобильных приложений

3. Предложение выбрать адрес доставки или местоположение

После первого входа (или сразу на главном экране) приложение показывает ненавязчивое уведомление/тултип с предложением указать адрес доставки или местоположение. Это не блокирующий экран, а мягкий запрос, который можно отложить.
Зачем это нужно
Указание адреса — ключевое действие для e-commerce. Чем раньше пользователь его выполнит, тем быстрее он увидит реальную доступность товаров, сроки и стоимость доставки. Без адреса многие механики (остатки в конкретном магазине, ближайшая доставка, самовывоз) работать не будут. Ранний сбор геоданных также позволяет персонализировать акции и предложения.
Пример реализации в приложении «Золотое Яблоко»:
Предложение выбрать адрес доставки или местоположение - UX мобильных приложений

4. Нижняя навигация (таб-бар) с быстрым доступом к ключевым разделам

В нижней части экрана закреплена панель навигации (таб-бар) с иконками и подписями. Основные разделы приложения всегда под рукой у пользователя: «Главная», «Каталог», «Избранное», «Корзина», «Профиль» (или «Меню»). Активный раздел визуально выделяется.
Зачем это нужно
Таб-бар — это навигационный стандарт в мобильных приложениях, к которому привыкли миллионы пользователей. Он позволяет мгновенно переключаться между важнейшими экранами без лишних действий (назад, открытие меню-бургера). Снижает когнитивную нагрузку и глубину навигации. Особенно критично для корзины и избранного — пользователь должен видеть их статус (количество товаров) в любой момент.
Пример реализации в приложении «Лэтуаль»:
Нижняя навигация (таб-бар) с быстрым доступом к ключевым разделам - UX мобильных приложений

5. Сканер штрих-кода для быстрого поиска товара

В приложении встроен сканер штрих-кода (обычно доступен через строку поиска или отдельную иконку). Пользователь наводит камеру на штрих-код товара — приложение мгновенно находит его в каталоге и показывает карточку с ценой, остатками и возможностью добавить в корзину.
Зачем это нужно
Это быстрый сценарий для офлайн-точек. Пользователь видит товар в магазине, сканирует код и может: сравнить цену с онлайн-версией, проверить наличие в других магазинах, посмотреть состав и отзывы, сразу добавить в корзину с доставкой (если не хочет нести тяжелую упаковку).
Пример реализации в приложении «Золотое Яблоко»:
Сканер штрих-кода для быстрого поиска товара - UX мобильных приложений

6. Авторизация через внешние сервисы и номер телефона

На экране входа пользователю предлагается несколько вариантов авторизации: по номеру телефона (с подтверждением по SMS) или через внешние сервисы (Яндекс ID, VK ID, WB ID и другие).
Зачем это нужно
Любое трение при авторизации — это потеря конверсии. Многие пользователи уходят, если требуют придумывать сложный пароль или заполнять длинную форму. Вход по номеру телефона (самый простой способ, пароль не нужен) и через популярные сервисы (один клик — и вы в системе) сокращают время входа до 5–15 секунд. Кроме того, авторизация через VK ID/Яндекс ID часто подтягивает имя, аватар и контакты — это помогает персонализировать опыт с первого визита.
Пример реализации в приложении «Золотое Яблоко»:
Авторизация через внешние сервисы и номер телефона - UX мобильных приложений

7. Умный ИИ-поиск как дополнение к обычному поиску

Интеллектуальный поиск на базе ИИ, который работает параллельно с классическим текстовым поиском. Пользователь может задавать запросы естественным языком («увлажняющий крем для чувствительной кожи без отдушек»). ИИ понимает намерения, синонимы и нечеткие формулировки, выдавая релевантные результаты там, где обычный поиск вернул бы «ничего не найдено».
Зачем это нужно
В бьюти-сегменте пользователи часто не знают точное название продукта или бренда. Они ищут по свойствам, ощущениям, проблемам («от выпадения волос», «после ботокса», «как духи от Zara, но стойче»). Обычный поиск по ключевым словам с этим не справляется. ИИ-поиск: повышает глубину просмотра каталога, снижает число нулевых результатов и уходов из приложения, создает впечатление «умного» приложения, которое понимает пользователя, может рекомендовать товары, даже когда точного совпадения нет.
Пример реализации в приложении «Лэтуаль»:
Умный ИИ-поиск как дополнение к обычному поиску - UX мобильных приложений

8. Разделение каталога на категории и бренды

В приложении предусмотрено два параллельных способа навигации по каталогу: через категории товаров (уход, макияж, парфюмерия и т.д.) и через алфавитный или тематический список брендов. Пользователь сам выбирает удобный путь в зависимости от сценария: «я знаю, что мне нужно (крем для лица)» или «я хочу посмотреть все товары конкретного бренда (например, L'Oréal или Estée Lauder)».
Зачем это нужно
У покупателей косметики и парфюмерии есть два принципиально разных типа поведения:
  1. Категорийно-ориентированные: ищут средство под задачу (увлажнение, очищение, тональная основа). Им нужен путь через категории.
  2. Бренд-ориентированные: лояльны к конкретным маркам, знают, что «у бренда Х всё беру без сомнений». Им нужен быстрый доступ к разделу бренда.
Разделение этих путей сокращает количество кликов, снижает когнитивную нагрузку и предотвращает раздражение. Никто не хочет листать 500 брендов, чтобы найти «кремы для лица», и никто не хочет фильтровать 20 категорий, чтобы найти «все товары Nuxe».
Пример реализации в приложении «Рив Гош»:
Разделение каталога на категории и бренды - UX мобильных приложений

9. Картинки в меню категорий

В выпадающем или боковом меню (меню-бургере) каждый пункт категории сопровождается не только текстом, но и визуальным элементом — иконкой, миниатюрой или тематическим изображением.
Зачем это нужно
Картинки значительно ускоряют визуальный поиск нужного раздела — мозг обрабатывает изображения в разы быстрее, чем текст. Пользователю не нужно читать каждую строчку: он скользит взглядом по иконкам и мгновенно находит нужную категорию.
Пример реализации в приложении «ИЛЬ ДЕ БОТЭ»:
Картинки в меню категорий - UX мобильных приложений

10. Видео в превью товара (в ленте каталога)

В общем списке товаров (листинге, ленте каталога) вместо статичного фото в карточке товара автоматически воспроизводится короткое видео. Обычно это 3–10 секундный ролик, который запускается при появлении карточки в зоне видимости (автоплей без звука или по наведению/нажатию). Видео демонстрирует товар в действии: текстуру крема, распыление духов, цвет помады на губах, консистенцию сыворотки.
Зачем это нужно
В сфере «Красота» визуальное восприятие товара критически важно — пользователь не может потрогать, понюхать или протестировать средство в приложении. Видео в превью решает эту проблему:
  • дает более полное представление о товаре, чем одно фото;
  • повышает вовлеченность — видео привлекает внимание и задерживает взгляд;
  • помогает пользователю принять решение быстрее (меньше уходит в карточку «просто посмотреть»);
  • увеличивает конверсию в клик и, как следствие, в покупку;
  • создает ощущение «живого» современного приложения.
Пример реализации в приложении «Золотое Яблоко»:
Видео в превью товара (в ленте каталога) - UX мобильных приложений

11. Превью товара со слайдером изображений

В ленте каталога (листинге) карточка товара содержит не одно статичное изображение, а мини-слайдер. Пользователь может листать 2–5 изображений (и/или видео) горизонтальным свайпом прямо в превью, не заходя в карточку товара. Обычно добавляются индикаторы (точки/цифры), показывающие количество доступных медиафайлов.
Зачем это нужно
Одно фото часто не может передать все важные детали товара: упаковку, текстуру, цветовую палитру, объём, внешний вид в запечатанном и открытом состоянии. Слайдер в превью:
  • позволяет пользователю быстро оценить товар без лишних переходов;
  • сокращает количество кликов для принятия решения, особенно полезен для товаров с несколькими оттенками или вариантами исполнения;
  • увеличивает вовлеченность — свайп в ленте держит внимание.
Пример реализации в приложении «Золотое Яблоко»:
Превью товара со слайдером изображений - UX мобильных приложений

12. Поиск внутри фильтра

На экране фильтрации товаров есть отдельное поле поиска, которое позволяет быстро найти нужное свойство фильтра.
Зачем это нужно
В бьюти-каталогах фильтры часто содержат сотни брендов и десятки характеристик. Листать такой список вручную — боль и потеря времени. Поиск внутри фильтра:
  • сокращает время настройки фильтрации с секунд до долей секунды;
  • особенно критичен для людей, которые точно знают, что ищут (например, знают название бренда или ингредиента);
  • повышает точность фильтрации и удовлетворенность пользователя.
Пример реализации в приложении «Лэтуаль»:
Поиск внутри фильтра - UX мобильных приложений

13. Выбранные свойства над списком фильтров

На экране фильтрации (обычно в верхней части, над списком доступных свойств) отображаются визуальные элементы с уже выбранными пользователем параметрами фильтрации (например: «бренд: L'Oréal», «цена: до 1500 ₽», «тип кожи: жирная»). При необходимости пользователь может нажать на крестик, чтобы мгновенно снять этот параметр, или увидеть сводку всех активных фильтров в одном месте.
Зачем это нужно
Фильтрация в бьюти-каталогах часто включает множество параметров (бренд, категория, цена, объём, свойства, состав и т.д.). Пользователь легко может забыть, что именно он уже выбрал, особенно если настраивал фильтры в несколько этапов. Выбранные свойства над списком:
  • дают мгновенную обратную связь — «вот что сейчас активно»;
  • позволяют быстро убрать один или несколько фильтров без сброса всего набора;
  • снижают когнитивную нагрузку (не нужно прокручивать весь список в поиске отмеченных галочек);
  • уменьшают количество ошибок и повторной фильтрации;
  • ускоряют эксперименты с подбором товаров.
Пример реализации в приложении «Лэтуаль»:
Выбранные свойства над списком фильтров - UX мобильных приложений
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

14. Выбор варианта товара прямо из листинга

Когда пользователь находится в ленте каталога (листинге) и нажимает кнопку «В корзину» (или «Купить») на карточке товара, не происходит автоматического добавления базового варианта. Вместо этого прямо поверх листинга всплывает модальное окно (или выезжает снизу) с выбором доступных вариантов товара: цвет, объём, оттенок помады, концентрация духов и т.д. Пользователь выбирает нужный вариант, после чего товар добавляется в корзину.
Зачем это нужно
Многие товары в бьюти-сегменте имеют вариации (туши — чёрная/коричневая, тональные кремы — 15 оттенков, духи — 30/50/100 мл). Автоматическое добавление «первого попавшегося» варианта приводит к ошибкам и возвратам. Механика «один клик — сразу в корзину» работает только для товаров без вариантов. Для товаров с вариациями такое окно выбора:
  • предотвращает добавление неподходящего варианта;
  • дает пользователю контроль и уверенность в правильности выбора;
  • снижает количество отмененных заказов и возвратов;
  • позволяет сразу выбрать нужный объем/оттенок, не переходя в карточку товара;
  • ускоряет сценарий «быстрой покупки» для товаров с вариантами.
Пример реализации в приложении «ИЛЬ ДЕ БОТЭ»:
Выбор варианта товара прямо из листинга - UX мобильных приложений

15. Изменение количества товара прямо в листинге

В ленте каталога (листинге) после добавления товара в корзину кнопка «В корзину» трансформируется в контроль количества (степпер/счётчик) с кнопками «+» и «–» и отображением текущего количества. Пользователь может увеличить или уменьшить количество единиц товара, не заходя в корзину и не открывая карточку товара.
Зачем это нужно
Многие покупатели косметики и парфюмерии берут товары впрок — по 2–3 единицы одного средства (любимая тушь, увлажняющий крем, шампунь). Если для изменения количества нужно каждый раз заходить в корзину или карточку, это:
  • увеличивает количество кликов в 2–3 раза;
  • вынуждает покидать контекст просмотра каталога;
  • может отбить желание брать больше одной единицы.
Степпер прямо в листинге:
  • позволяет мгновенно скорректировать количество без потери контекста;
  • подталкивает к увеличению среднего чека (легко нажать «+», когда уже всё настроено);
  • сокращает путь от решения до действия;
  • особенно удобен при наборе корзины из нескольких товаров сразу.
Пример реализации в приложении «Золотое Яблоко»:
Изменение количества товара прямо в листинге - UX мобильных приложений

16. Закрепленные фильтр и сортировка при прокрутке

При прокрутке длинной ленты каталога (листинга) блок с кнопками «Фильтр» и «Сортировка» остается закрепленным в верхней части экрана (или всплывает при скролле вниз/вверх). Пользователь может в любой момент открыть фильтрацию или изменить сортировку, не возвращаясь в начало страницы.
Зачем это нужно
В бьюти-каталогах тысячи товаров и десятки страниц листинга. Если блок фильтрации исчезает при прокрутке, пользователю приходится скроллить вверх до самого начала. Закрепленный блок позволяет:
  • экономит время и усилия пользователя;
  • не даёт забыть о возможности уточнить поиск;
  • стимулирует активнее пользоваться фильтрацией (она всегда «под рукой»);
  • снижает количество «бесконечного скролла» нерелевантных товаров;
  • улучшает общую навигацию в больших каталогах.
Пример реализации в приложении «Парфюм-Лидер»:
Закрепленные фильтр и сортировка при прокрутке - UX мобильных приложений

17. Основные фильтры над списком товаров

Над списком товаров в листинге выводится горизонтально прокручиваемая строка с основными фильтрами. Например: «Срок доставки», «Скидки», «Цена». При необходимости пользователь может нажать на основной фильтр, чтобы открыть полноценный экран расширенной фильтрации со всеми свойствами.
Зачем это нужно
Полноэкранный фильтр со 100+ параметрами — мощный, но тяжелый инструмент. Для 80% сценариев пользователю нужно быстро применить 1–2 самых популярных фильтра («только со скидкой», «только в наличии», «только новинки»). Подобное решение:
  • ускоряют базовую фильтрацию до одного клика;
  • не требуют открытия отдельного экрана;
  • экономят экранное пространство (строка скроллится горизонтально);
  • снижают порог использования фильтрации для неопытных пользователей.
Пример реализации в приложении «Золотое Яблоко»:
Основные фильтры над списком товаров - UX мобильных приложений

18. Подробная информация о скидке в карточке товара

В карточке товара рядом с итоговой ценой или процентом скидки есть активный элемент. При нажатии открывается всплывающее окно/тултип с детальной расшифровкой: из чего сформировалась итоговая цена. Например: «Скидка по распродаже», «Бонусы». Пользователь видит, что магазин предложил самую выгодную цену с учётом всех персональных купонов, доступных бонусов и акционных скидок.
Зачем это нужно
В бьюти-приложениях скидки часто накладываются друг на друга (акции, персональные промокоды, бонусы, многоуровневые скидки по программе лояльности). Пользователь может не доверять итоговой цене, думая: «Откуда такая скидка? Это ошибка? Мне кажется, должно быть дороже». Или наоборот, подозревает, что его обсчитали. Детальная расшифровка:
  • повышает доверие к приложению и магазину;
  • устраняет когнитивный диссонанс («почему цена так низкая/высокая?»);
  • снижает число обращений в поддержку с вопросами по ценообразованию;
  • обучает пользователя пользоваться бонусами и акциями (мотивирует копить баллы, искать купоны);
  • прозрачность формирует лояльность — пользователь чувствует, что магазин «честен» с ним.
Пример реализации в приложении «Лэтуаль»:
Подробная информация о скидке в карточке товара - UX мобильных приложений

19. Закрепленная кнопка CTA в карточке товара

При прокрутке длинной карточки товара (описание, состав, отзывы, видеообзоры) основная кнопка действия — «В корзину», «Купить» или контроля количества (степпер с +/–) — остается закрепленной в нижней части экрана. Кнопка всегда видна пользователю, независимо от того, насколько глубоко он прокрутил страницу.
Зачем это нужно
Карточка товара в бьюти-сегменте часто очень длинная: фото, видео, подробное описание, состав, способ применения, отзывы, вопросы и ответы, рекомендации похожих товаров. Пользователь может изучать контент несколько минут, пролистывая далеко вниз. Если кнопка добавления в корзину остаётся только в самом верху (у названия товара) или в самом низу, пользователю каждый раз придётся скроллить обратно. Закреплённая CTA-кнопка:
  • сокращает путь к покупке с нескольких кликов/скроллов до одного;
  • снижает риск, что пользователь передумает, пока ищет кнопку;
  • напоминает о цели посещения карточки (совершить действие);
  • увеличивает конверсию в добавление в корзину (кнопка всегда «под пальцем»);
  • особенно важна для сценариев импульсной покупки.
Пример реализации в приложении «Рив Гош»:
Закрепленная кнопка CTA в карточке товара - UX мобильных приложений

20. Кнопка «Поделиться» после скриншота

Приложение отслеживает момент, когда пользователь делает скриншот экрана (например, карточки товара, акции или состава продукта). Сразу после этого появляется всплывающее уведомление или кнопка с предложением поделиться ссылкой на текущую страницу.
Зачем это нужно
В бьюти-сегменте пользователи часто делятся находками с подругами: «Смотри, какие духи нашла!», «Оцени этот тональный крем», «Давай закажем это на двоих?». Скриншот — самый естественный для пользователя способ сохранить или отправить информацию о товаре. Приложение перехватывает этот сценарий и предлагает не просто картинку, а прямую ссылку на товар. Это:
  • превращает вирусное поведение в измеримый трафик;
  • сокращает путь от «нашла товар» до «отправила подруге»;
  • помогает отслеживать органические источники трафика (можно добавить UTM-метки);
  • улучшает пользовательский опыт — подсказывает удобный вариант, о котором пользователь мог не догадаться.
Пример реализации в приложении «Рив Гош»:
Кнопка «Поделиться» после скриншота - UX мобильных приложений

21. Кнопка «Похожие» в карточке товара

В карточке товара, сразу на первом экране (без прокрутки), размещается активный элемент — кнопка или ссылка «Похожие». При нажатии пользователь мгновенно переходит в отдельный листинг с товарами, аналогичными по категории, свойствам, бренду или ценовому сегменту.
Зачем это нужно
Пользователь может зайти в карточку и понять, что товар ему не подходит (дорого, закончился оттенок, не устраивает состав). Вместо того чтобы возвращаться в каталог и настраивать фильтры заново, он нажимает «Похожие» и видит альтернативы. Это:
  • удерживает пользователя в приложении (снижает отказы);
  • сокращает путь к подходящему товару с нескольких действий до одного;
  • помогает магазину предложить альтернативу вместо ухода конкурентам;
  • увеличивает вероятность покупки даже при отказе от исходного товара;
  • особенно полезно для категорий с большим разнообразием (тональные средства, духи, кремы).
Пример реализации в приложении Лэтуаль:
Кнопка «Похожие» в карточке товара - UX мобильных приложений

22. Закрепленный блок с изображениями при прокрутке в карточке товара

При прокрутке длинной карточки товара (описание, состав, отзывы) блок с фотографиями товара остается закрепленным в верхней части экрана. Пользователь всегда видит изображение продукта, даже когда пролистал далеко вниз по текстовому описанию.
Плюсы функции. Покупатель в любой момент может сверить информацию из описания с внешним видом товара: проверить оттенок, объем, текстуру, форму флакона. Не нужно скроллить обратно вверх, чтобы пересмотреть фото. Это полезно для товаров, где внешний вид критичен (цвет помады, дизайн упаковки подарка).
Минусы. Закрепленный блок с изображениями съедает до 30–40% полезного пространства экрана на небольших устройствах.
Пример реализации в приложении«ИЛЬ ДЕ БОТЭ»:
Закрепленный блок с изображениями при прокрутке в карточке товара - UX мобильных приложений

23. Варианты товара в одной карточке

В карточке товара нативно объединены все варианты одного продукта — например, разный объём духов (30/50/100 мл) или разные оттенки помады / тонального крема. Пользователь переключается между вариантами через сегментированные кнопки, выпадающий список или горизонтальный скролл миниатюр — без перезагрузки страницы и без перехода на отдельную карточку для каждого варианта.
Зачем это нужно
Многие интернет-магазины ошибочно создают отдельную карточку товара под каждый объем или цвет. Это приводит к:
  • раздроблению отзывов (полезные комментарии о текстуре крема разнесены по трём разным карточкам);
  • дублированию описаний и характеристик;
  • путанице в поиске (пользователь видит 5 одинаковых карточек с разной ценой);
  • потере кросс-продаж (мог бы купить больший объём, но не заметил его в отдельной карточке).
Объединение вариантов в одной карточке:
  • собирает все отзывы и рейтинги в одном месте (удобно сравнивать);
  • упрощает навигацию — не нужно искать «тот же крем, но 50 мл»;
  • стимулирует апсейл (пользователь видит, что 100 мл выгоднее за мл);
  • снижает количество дублей в каталоге.
Пример реализации в приложении «ИЛЬ ДЕ БОТЭ»:
Варианты товара в одной карточке - UX мобильных приложений

24. Кнопка быстрой покупки «Купить сейчас»

В карточке товара рядом со стандартной кнопкой «В корзину» или «Добавить» размещена отдельная кнопка «Купить сейчас» (или «Быстрая покупка»). При нажатии на неё приложение мгновенно переводит пользователя на этап оформления заказа — с этим товаром, выбранным количеством и вариантом. Пользователь минует промежуточные шаги (просмотр корзины, переход в корзину, нажатие «Перейти к оформлению»).
Зачем это нужно
У пользователей есть два принципиально разных сценария покупки:
  • «Набираю корзину» — добавляю несколько товаров, потом иду оформлять. Этим людям нужна кнопка «В корзину».
  • «Куплю прямо сейчас» — мне нужен только этот товар, и я хочу оформить его максимально быстро. Этим людям нужна кнопка «Купить сейчас».
Второй сценарий особенно актуален для:
  • импульсных покупок (увидел скидку 70% — беру сразу);
  • товаров с ограниченным количеством (боюсь, что разберут, пока буду оформлять);
  • сценариев «я зашел только за этим» (привычный шампунь заканчивается — быстро перезаказал).
Кнопка быстрой покупки:
  • сокращает путь к оформлению заказа с 3–4 кликов до 1;
  • снижает число брошенных корзин (меньше шансов передумать);
  • повышает конверсию в покупку для целевых товаров;
  • дает пользователю контроль над своим сценарием.
Пример реализации в приложении «Лэтуаль»:
Кнопка быстрой покупки «Купить сейчас» - UX мобильных приложений

25. Блок с информацией о доставке и наличии товара в магазинах

В карточке товара мобильного приложения (обычно в верхней части) размещен компактный блок с ключевой логистической информацией: сроки и стоимость доставки и наличие товара в ближайших офлайн-магазинах. Часто блок интерактивен — при нажатии можно увидеть детали (адреса магазинов с остатками, точные сроки доставки в свой регион).
Зачем это нужно
Для покупателей косметики и парфюмерии вопросы «как быстро я получу заказ?» и «могу ли я забрать самовывозом уже сегодня?» часто важнее цены. Блок с доставкой и наличием:
  • снимает главные возражения перед покупкой («когда приедет?», «а если не подойдёт — смогу ли обменять в магазине?», «есть ли сейчас в моем городе?»);
  • повышает доверие и прозрачность;
  • снижает число обращений в поддержку по статусу заказа;
  • помогает принять решение оформить заказ или поехать в ближайший магазин прямо сейчас.
Пример реализации в приложении «Рив Гош»:
Блок с информацией о доставке и наличии товара в магазинах - UX мобильных приложений

26. Оценка продукта (опрос) в карточке товара

В карточке товара размещен интерактивный блок-опросник для тех, кто уже пользовался этим продуктом. Примеры вопросов:
  • «Уже пользовались нашим продуктом?» с вариантами «Да» / «Нет»;
  • «Какой эффект вы ощутили от продукта?» с вариантами: «нет стянутости», «приятный запах» и т.д.
Пользователи, которые купили товар впервые, видят сводную статистику ответов других покупателей — например, 84% подтверждают увлажнение, 92% отмечают приятный запах. На основе этого они могут сделать более осознанный вывод о продукте, даже если развернутых текстовых отзывов мало.
Зачем это нужно
Текстовые отзывы писать долго и лень — их оставляют 1–5% покупателей. А нажать на кнопку в опросе могут 20–40%. Такой опрос:
  • генерирует массовую обратную связь по ключевым характеристикам продукта;
  • помогает новым покупателям быстро оценить продукт по важным для них критериям;
  • не требует чтения длинных текстов — данные подаются в виде наглядных процентов;
  • дает бренду и магазину ценные инсайты для улучшения продуктов.
Пример реализации в приложении «Лэтуаль»:
Оценка продукта (опрос) в карточке товара - UX мобильных приложений

27. Рейтинг товара на основе отзывов и сортировка

В карточке товара выводится блок с отзывами, который включает: общий рейтинг товара (например, 4.7 из 5 звёзд) и количество отзывов; возможность сортировки отзывов по различным критериям.
Зачем это нужно
Просто список отзывов в случайном порядке малоинформативен. Пользователю приходится пролистывать десятки комментариев, чтобы найти полезные. Сортировка:
  • дает контроль над тем, какую информацию видеть в первую очередь;
  • помогает быстро выявить сильные и слабые стороны товара;
  • экономит время изучения отзывов;
  • повышает доверие — пользователь видит, что магазин не прячет негативные отзывы, их можно легко вывести наверх.
Пример реализации в приложении «Золотое Яблоко»:
Рейтинг товара на основе отзывов и сортировка - UX мобильных приложений

28. Фотоотзывы/видео в карточке товара

В блоке отзывов карточки товара пользователи могут не только оставить текстовый комментарий и оценку, но и прикрепить свои фотографии или видео продукта. Фотоотзывы выводятся отдельным блоком (например, горизонтальным скроллом миниатюр) или в общем списке отзывов с визуальным выделением.
Зачем это нужно
В категории «Красота» слова часто бессильны — пользователю важно увидеть:
  • как выглядит помада или тени в реальности (на коже, при разном освещении);
  • какая текстура у крема или сыворотки (густая / жидкая, впитывается или нет);
  • как выглядит упаковка вживую (не отличается ли цвет от фото на сайте);
  • результат использования средства (например, «до и после» для уходовой косметики).
Фотоотзывы:
  • вызывают гораздо больше доверия, чем студийные фотографии магазина или текстовые отзывы;
  • помогают новому покупателю сформировать реалистичные ожидания о продукте;
  • снижают риск разочарования и возврата («на сайте был один оттенок, а в жизни другой»);
  • увеличивают вовлеченность — пользователи дольше изучают такие отзывы;
  • стимулируют других покупателей тоже делиться фото (эффект социального доказательства).
Пример реализации в приложении «Лэтуаль»:
Фотоотзывы/видео в карточке товара - UX мобильных приложений

29. Индикатор количества товаров на иконке корзины

На иконке корзины отображается бейдж с числом — текущее количество уникальных товаров или общее количество единиц товаров в корзине пользователя. Бейдж обновляется в реальном времени при добавлении, удалении или изменении количества товаров.
Зачем это нужно
Индикатор на корзине решает сразу несколько важных задач:
  • постоянная обратная связь — пользователь всегда видит, что корзина не пуста, и помнит о том, что у него есть отложенные товары;
  • напоминание о необходимости оформить заказ — бейдж служит мягким триггером к завершению покупки;
  • предотвращение ошибок — можно быстро заметить, что товар добавился дважды (слишком большое число) или не добавился вовсе;
  • повышение уверенности — пользователь видит, что его действия (нажатие «В корзину») привели к результату.
Без индикатора пользователям приходится каждый раз заходить в корзину, чтобы проверить ее содержимое. Это лишние клики и риск потерять пользователя по пути. Индикатор на иконке — это микро-фишка, которая значительно улучшает UX и увеличивает конверсию в оформление заказа.
Пример реализации в приложении «Рив Гош»:
Индикатор количества товаров на иконке корзины - UX мобильных приложений
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

30. Шаринг корзины (функция «Поделиться своей корзиной»)

В мобильном приложении реализована возможность поделиться содержимым своей корзины с другим пользователем. Функция обычно представлена отдельной иконкой (кнопкой) «Поделиться». При нажатии генерируется специальная ссылка, содержащая список всех товаров в корзине с их количеством и вариантами. Другой пользователь (например, подруга или партнер) может перейти по ссылке и добавить эту корзину к себе или оформить заказ со всем набором товаров.
Зачем это нужно
В сегменте «Красота» очень популярен сценарий совместных покупок: подруги собирают общий заказ, чтобы получить бесплатную доставку, использовать большой промокод или просто заказать косметику на компанию. Традиционно для этого нужно пересылать друг другу скриншоты или названия товаров мессенджерами — это неудобно, долго и чревато ошибками.
Функция шаринга корзины:
  • превращает несколько хаотичных сообщений в один клик по ссылке;
  • идеально подходит для сценариев «давай соберем заказ на двоих / на офис»;
  • снижает риск ошибок (все товары и их варианты передаются точно);
  • упрощает совместные покупки, делая их быстрыми и удобными;
  • стимулирует рост среднего чека (чем больше участников делят корзину, тем крупнее заказ).
Пример реализации в приложении «Золотое Яблоко»:
Шаринг корзины (функция «Поделиться своей корзиной») - UX мобильных приложений

31. В корзине — информация, сколько осталось до бесплатной доставки

На экране корзины (обычно в верхней части или над списком товаров) отображается прогресс-бар или текстовое сообщение с информацией, сколько ещё нужно добавить товаров (на какую сумму), чтобы получить бесплатную доставку. Часто прогресс визуализируется заполняющейся шкалой, а при достижении порога сообщение меняется на «Доставка бесплатно!».
Зачем это нужно
Бесплатная доставка — один из главных триггеров к увеличению суммы чека в e-commerce. Пользователь уже готов оформить заказ, и эта механика мягко подталкивает его добавить ещё один-два товара.
Пример реализации в приложении «Золотое Яблоко»:
В корзине — информация, сколько осталось до бесплатной доставки - UX мобильных приложений

32. Готовые промокоды в корзине — применение в один клик

В корзине (обычно под суммой заказа или рядом с полем для ввода промокода) выводятся готовые активные промокоды, доступные пользователю. Это могут быть персональные купоны (за регистрацию, день рождения), акционные промокоды магазина или накопленные бонусы. Каждый промокод представлен в виде отдельной кнопки — пользователь нажимает на него один раз, и промокод автоматически применяется к заказу. Не нужно вручную вводить длинные комбинации букв и цифр.
Зачем это нужно
Промокоды — мощный инструмент увеличения конверсии и лояльности. Но традиционный сценарий «скопировать длинный промокод → перейти в приложение → вставить его в поле → нажать Применить» полон трения: пользователь может потерять промокод по пути; лень вводить/вставлять, особенно с мобильного телефона; можно ошибиться при вводе (путаница в буквах, регистр).
Готовые промокоды в один клик:
  • убирают всё трение — одно касание, и скидка применена;
  • напоминают пользователю о неиспользованных купонах (многие просто забывают про них);
  • увеличивают конверсию в оформление заказа (скидка стимулирует завершить покупку);
  • повышают лояльность — пользователь ценит, что магазин «сам подсказывает» выгоду;
  • сокращают число обращений в поддержку с вопросами «как применить промокод?».
Пример реализации в приложении «Лэтуаль»:
Готовые промокоды в корзине — применение в один клик - UX мобильных приложений

33. Указано количество остатков товаров в корзине

На экране корзины рядом с товаром выводится информация о том, сколько единиц данного товара осталось на складе. Например: «Осталось 5 штук». Информация обновляется в реальном времени.
Зачем это нужно
Индикатор остатков в корзине:
  • создает эффект срочности (FOMO — страх упустить выгоду), что подталкивает к быстрому оформлению заказа;
  • снижает риск сюрпризов при оформлении («товар недоступен»);
  • повышает прозрачность и доверие к приложению;
  • помогает пользователю принять решение: если осталось мало — оформлять сейчас, если много — можно не спешить;
  • сокращает число брошенных корзин (пользователь видит, что товар может закончиться, и торопится с оплатой).
Пример реализации в приложении «Лэтуаль»:
Указано количество остатков товаров в корзине - UX мобильных приложений

34. Закреплённая CTA-кнопка с итоговой суммой

На экране корзины при прокрутке длинного списка товаров в нижней части экрана остается закрепленной панель, которая содержит: итоговую сумму заказа (с учётом скидок, промокодов и доставки); кнопку «Оформить заказ». Пользователь может листать корзину, редактировать количество товаров, удалять позиции — а панель с суммой и кнопкой оформления всегда остается видимой и доступной.
Зачем это нужно
Корзина в мобильном приложении может быть очень длинной — 10–20 товаров и более. Если кнопка оформления находится только в самом верху или в самом низу списка, пользователю приходится: каждый раз скроллить в начало или в конец, чтобы завершить покупку; искать кнопку глазами, отвлекаясь от содержимого корзины.
Закрепленная панель с суммой и CTA-кнопкой:
  • сокращает путь к оформлению заказа с нескольких скроллов до одного нажатия;
  • постоянно напоминает пользователю об итоговой сумме (мягкий триггер к действию);
  • снижает риск брошенной корзины — кнопка всегда «под пальцем»;
  • создает ощущение контроля — пользователь видит, как сумма меняется при редактировании корзины;
  • увеличивает конверсию в оформление заказа.
Пример реализации в приложении «Золотое Яблоко»:
Закреплённая CTA-кнопка с итоговой суммой - UX мобильных приложений

35. Возможность выбрать отдельные товары для заказа (галочки в корзине)

На экране корзины рядом с каждым товаром расположен чек-бокс (галочка). Пользователь может отметить только те товары, которые хочет заказать прямо сейчас, и снять отметку с тех, которые решил отложить. Оформляется заказ только на выбранные позиции. Неотмеченные товары остаются в корзине «на потом».
Зачем это нужно
У пользователя часто накапливается корзина из 5–10 товаров, добавленных в разное время. Не все из них нужны прямо сейчас. Без галочек пользователю приходится удалять товары из корзины (и терять их). С галочками:
  • пользователь получает полный контроль над своим заказом;
  • можно оформить часть товаров сейчас, а остальное оставить в корзине на потом;
  • не нужно удалять отложенные товары и добавлять их заново;
  • снижается количество брошенных корзин (пользователь не бросает всю корзину целиком, а оформляет хотя бы часть);
  • повышается удовлетворенность и лояльность к приложению.
Пример реализации в приложении «Лэтуаль»:
Возможность выбрать отдельные товары для заказа (галочки в корзине) - UX мобильных приложений

36. Подтверждение удаления товара из корзины (защита от случайных нажатий)

Когда пользователь нажимает кнопку удаления товара (обычно иконка корзины или крестик) в корзине, приложение не удаляет товар мгновенно, а сначала показывает окно с вопросом, например: «Вы точно хотите удалить этот товар?».
Зачем это нужно
Подтверждение удаления:
  • предотвращает потерю товаров из-за случайных нажатий;
  • дает пользователю последний шанс передумать;
  • снижает количество негативных сценариев и обращений в поддержку;
  • особенно важно для дорогих или дефицитных товаров, которые сложно найти снова.
Пример реализации в приложении «Лэтуаль»:
Подтверждение удаления товара из корзины (защита от случайных нажатий) - UX мобильных приложений

37. В корзине — кнопка «Найти похожие» для товара, которого нет в наличии

Если товар, добавленный пользователем в корзину, закончился на складе или стал недоступен для заказа, приложение не просто отмечает это статусом («Нет в наличии» или «Товар недоступен»), а рядом с таким товаром выводит активную кнопку или ссылку «Найти похожие» / «Смотреть аналоги». При нажатии пользователь переходит в листинг с аналогичными товарами (по категории, свойствам, бренду или ценовому сегменту).
Зачем это нужно
Один из самых разочаровывающих сценариев в e-commerce: пользователь собрал корзину, заходит ее оплатить, а один или несколько товаров стали недоступны. Без альтернативы пользователь:
  • может отложить или бросить весь заказ целиком;
  • уйдёт искать этот товар в другое приложение (к конкурентам);
  • испытает негатив к текущему магазину («постоянно у них всё заканчивается»).
Кнопка «Найти похожие»:
  • дает пользователю конструктивный выход из тупиковой ситуации;
  • удерживает его в приложении, предлагая альтернативу вместо ухода;
  • увеличивает шанс, что заказ всё же состоится (пусть с другими товарами);
  • демонстрирует заботу о пользователе («мы понимаем, что это неприятно, и уже подобрали варианты»);
  • снижает негатив от ситуации «товара нет в наличии».
Пример реализации в приложении «Лэтуаль»:
В корзине — кнопка «Найти похожие» для товара, которого нет в наличии - UX мобильных приложений

38. Шаги оформления заказа

В процессе оформления заказа пользователю показывается прогресс с разделением на логические этапы (шаги). Пользователь видит, на каком этапе он находится и сколько шагов осталось до завершения.
Зачем это нужно
Оформление заказа — критически важный этап, на котором пользователь чаще всего бросает корзину. Одна из главных причин — неопределенность: «Сколько ещё шагов?», «Это последний экран или будет ещё?», «Я вообще скоро закончу?».
Индикатор шагов:
  • снижает тревожность и неопределённость — пользователь видит весь путь целиком;
  • мотивирует завершить оформление («осталось всего 2 шага из 3»);
  • помогает пользователю запомнить, где он остановился, если прервал оформление;
  • профессиональный стандарт для любого e-commerce приложения.
Пример реализации в приложении «Золотое Яблоко»:
Шаги оформления заказа - UX мобильных приложений
Отправьте заявку на юзабилити-аудит сайта прямо сейчас и увеличьте конверсию минимум на 20%! Найдём точки роста конверсии и выявим барьеры на пути пользователей сайта.

39. Выбор даты и времени доставки при оформлении заказа

В блоке выбора способа доставки на этапе оформления заказа пользователю предоставляется возможность самостоятельно выбрать удобную дату и временной интервал доставки.
Зачем это нужно
Если приложение не позволяет выбрать дату и время:
  • пользователь боится, что заказ приедет, когда его не будет дома;
  • возникают дополнительные звонки курьеру и в поддержку («подождите, я выбегу»);
  • растёт число недоставленных заказов и переносов;
  • пользователи уходят к конкурентам, у которых такая возможность есть.
Гибкий выбор времени и даты доставки:
  • дает пользователю контроль над получением заказа;
  • снижает тревожность («я точно буду дома»);
  • уменьшает нагрузку на поддержку и курьерскую службу;
  • повышает удовлетворенность сервисом и лояльность.
Пример реализации в приложении «Золотое Яблоко»:
Выбор даты и времени доставки при оформлении заказа - UX мобильных приложений

40. Широкий выбор способов оплаты на этапе оформления

На финальном этапе оформления заказа пользователю предлагается несколько альтернативных способов оплаты на выбор. Все способы представлены в виде наглядных иконок/кнопок, а не просто текстового списка. Пользователь выбирает удобный вариант в один клик.
Зачем это нужно
У разных пользователей — разные предпочтения и возможности по оплате. Кто-то не пользуется картами и платит только через СБП. Кто-то копит бонусы и хочет списать их полностью или частично. Кто-то не хочет платить сразу и выбирает рассрочку. Если приложение предлагает только один-два способа оплаты, оно:
  • теряет часть аудитории (пользователь просто не сможет оплатить);
  • создает барьер для оформления заказа;
  • уступает конкурентам с более гибкими условиями.
Широкий выбор способов оплаты:
  • максимизирует конверсию в оплаченный заказ;
  • убирает последнее возражение перед покупкой («меня не устраивает способ оплаты»);
  • повышает удобство и лояльность (пользователь ценит свободу выбора);
  • особенно важен для дорогих заказов (оплата частями) и для лояльных пользователей (списание бонусов).
Пример реализации в приложении «Лэтуаль»:
Широкий выбор способов оплаты на этапе оформления - UX мобильных приложений
Получайте полезный контент от KISLOROD в любом из мессенджеров
При переходе в одну из указанных социальных сетей вы автоматически даете согласие на обработку персональных данных и согласие на получение рекламной рассылки. Подробнее об обработке данных в Политике конфиденциальности.

Рекомендованные статьи

Показать ещё
Скачайте 17 точек роста и 100 + чекеров для роста конверсии и прибыли интернет-магазина
При переходе в одну из указанных социальных сетей вы автоматически даете согласие на обработку персональных данных и согласие на получение рекламной рассылки. Подробнее об обработке данных в Политике конфиденциальности.
Мы проанализировали ведущие интернет-магазины, результаты исследований, свой опыт и собрали важные моменты в одно руководство. Делаем e-commerce лучше, поэтому не только пользуемся сами, но и делимся с вами.
Выберите удобный мессенджер и получите чек-лист прямо сейчас: