Как стать автором
Обновить
160.08
Surf
Создаём веб- и мобильные приложения

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

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров1.3K

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

В материале рассказали:

  • Как через огонь и воду добраться до покупки штанов в ЦУМе.

  • Как провалилась идея лучшей программы лояльности в Shein.

  • Почему бренд ТВОЕ мешает покупать свою же одежду.

  • За что американскому магазину Farfetch влепили двойку в отзывах.

Как выбрали приложения для обзора

У UX-дизайнеров есть свои заморочки: нас хлебом не корми, дай «пощупать» приложение, разобрать его по косточкам и подумать, как улучшить. Это помогает нам развивать продукты, над которыми мы сами работаем.

Вот и для этой статьи так получилось: мы скачали 10 популярных приложений, которыми и сами пользуемся. Прошли в них каждый этап: от онбординга до заказа. И выбрали четыре самых неудобных — два российских ЦУМ и ТВОЕ, и два зарубежных — Shein и Farfrecth.

Мы не стали выдумывать сложную шкалу оценки и считать миллисекунды между тапом по кнопке и полной загрузкой. Нас интересовал UX/UI опыт в целом. Поэтому мы разобрали целевую аудиторию каждого продукта и оценили их с точки зрения обычных пользователей в формате user story. Создали шкалу-светофор:

  • 🟢 Зелёный означает, что фича в порядке.

  • 🟡 Жёлтый — есть зоны роста.

  • 🔴 Красный — фичи нет или она сломана.

ЦУМ: как сломали магазин для богатых

Пользователь и задача. Целевая аудитория ЦУМа — богатые люди, готовые тратиться на люкс-товары. При этом ЦУМ активно привлекает молодежь до 25 лет. Они ценят сервис, уникальность и ручную работу, выбирают актуальные, но сдержанные образы — пальто Prada, сумка Hermès и обувь Jimmy Choo.

Так GPT нарисовал представительницу ЦА ЦУМа
Так GPT нарисовал представительницу ЦА ЦУМа

Назовём девушку с изображения Карина (все персонажи вымышлены и любое сходство с реальностью случайно). Представим, что она хочет заказать брендовый джинсовый костюм онлайн и заходит в приложение ЦУМ.

Что не так

Выдача товаров по запросу не появляется

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

Поиск в ЦУМе не помогает найти вещи
Поиск в ЦУМе не помогает найти вещи

Корзина спрятана

Карина добавила джинсы в корзину и попала в ловушку: иконки корзины нигде не было. Её пришлось искать ещё несколько минут — а ведь она уже могла сделать заказ.

Корзина ЦУМа появляется только в одном разделе в неудобном месте
Корзина ЦУМа появляется только в одном разделе в неудобном месте

Нет интерактивной карты

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

Непривычный экран заказа крадёт ценные секунды. За это время пользователь может передумать покупать вещи
Непривычный экран заказа крадёт ценные секунды. За это время пользователь может передумать покупать вещи

Слишком много push-уведомлений

Покупка удалась, но на этом всё не закончилось. Сразу после установки приложения Карина начала получать маркетинговые пуши трижды в день. Даже преданная фанатка ЦУМа не смогла бы осилить столько сообщений, поэтому девушка их отключила и забыла про приложение.

Три пуша в день — далеко за пределами нормы в e-commerce
Три пуша в день — далеко за пределами нормы в e-commerce

Что советуем

  1. Улучшить релевантность результатов поиска и добавить умные рекомендации в корзине. Это можно реализовать через ML-алгоритм, обученный на датасете из фотографий одежды и описаний.

  2. Пересмотреть маркетинговую стратегию. ЦУМ нарушает норму push-уведомлений, их количество нужно сократить. 

  3. Внедрить карту или хотя бы поиск адреса пользователя по геолокации.

Крутые фишки ЦУМа

Но у приложения ЦУМа есть и классные решения. Например, в ЦУМе нам особенно понравились:

  • Визуальный поиск товара по картинке.

  • Поиск по брендам.

  • Возможность поделиться корзиной или избранными товарами.

  • Возможность выбрать пол покупателя и любимые бренды.

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

В Телеграме мы собираем и другие крутые фишки, которые ритейлеры могут забрать себе. Недавно мы как раз писали о персональном каталоге в Самокате.

ТОП-3 фишки — визуальный поиск, поиск по брендам, возможность поделиться избранным
ТОП-3 фишки — визуальный поиск, поиск по брендам, возможность поделиться избранным

ТВОЕ: баги, которые мешают покупкам

Пользователь и задача. Аудитория магазина — молодёжь 15–27 лет, часто это школьники, студенты и их родители. Поэтому в приложение бренда может зайти мама восьмиклассницы Оксана. Она не хочет тратить много на растущего ребёнка, но хочет выбрать практичные и небанальные вещи. Оксана ищет джинсы baggy — хит сезона.

Так ИИ представляет себе ЦА ТВОЕ
Так ИИ представляет себе ЦА ТВОЕ

Что не так

Невозможно быстро найти нужный товар

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

Поиск ТВОЕ не понимает запросы на английском языке
Поиск ТВОЕ не понимает запросы на английском языке

Карточки товаров нечитабельны

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

Карточки перегружены текстом, кнопками, линиями и цветовыми акцентами
Карточки перегружены текстом, кнопками, линиями и цветовыми акцентами

Пустая корзина не напоминает купить просмотренные вещи

Когда в корзине видишь только выбранные товары, это удобно. Но система рекомендаций в UX придумана не просто так. А здесь её не было. Оксана забыла докупить приглянувшиеся джинсы. Так бренд ТВОЕ оставил себя без выручки, а дочку Оксаны — буквально без штанов.

Приходится настраивать карту вручную

При выборе адреса для доставки карта по умолчанию открылась в глобальном масштабе. Оксана начала её настраивать вручную: приближать и всматриваться в мелкие названия. Ни автоматического определения города, ни подсказок. Другие сервисы давно подстраиваются под регион пользователя или находят его по геолокации, а тут приходится самому чинить карту.

Корзина не содержит добавленной ценности, этап заказа — не оптимизирован
Корзина не содержит добавленной ценности, этап заказа — не оптимизирован

Что советуем

  1. Улучшить алгоритм поиска, чтобы он не выдавал нерелевантные товары. Его стоит научить понимать англоязычные запросы, потому что многие фасоны и стили ещё не получили устойчивые названия на русском. Без автоматизированного поиска конверсия в покупку падает на 10,7%.

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

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

  4. Починить интерактивную карту.

Фишки ТВОЕ

В ТВОЕ тоже есть уникальные фичи. Нас зацепили:

  • Видео на главной.

  • Хорошо подобранные тематические коллекции, например, коллекция в коллаборации с «Мосфильм».

  • Качественные изображения и удобные кнопки в карточках.

Крутые решения ТВОЕ — цепляющие видеообложки и тематические подборки
Крутые решения ТВОЕ — цепляющие видеообложки и тематические подборки

Shein: самый пёстрый магазин одежды

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

Так нейросеть изобразила ЦА Shein
Так нейросеть изобразила ЦА Shein

Что не так

Главная и каталог мешают разобраться в ассортименте

Хоть студентка на «ты» с онлайн-шоппингом, Shein заставил её попотеть уже на первом экране.

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

На Главной легко потеряться из-за особенностей интерфейса
На Главной легко потеряться из-за особенностей интерфейса

Кросс-сейлы сливаются с выбранными вещами

Ася заглянула в корзину. Нужная вещь была, но сразу под ней — ворох странных подборок: мужские поло, сумки, что-то с наклейками. Она не поняла, зачем алгоритм вывалил всё подряд. С пустой корзиной ситуация была не лучше: тогда экран заполняли неактуальные товары, никак не связанные с её поиском.

Рекомендации в корзине не подстраиваются под пользователя и его запросы
Рекомендации в корзине не подстраиваются под пользователя и его запросы

Программа лояльности — катастрофа для пользователя

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

Личный кабинет пользователя забит информацией. Промо-акции мешают проходить путь до покупки
Личный кабинет пользователя забит информацией. Промо-акции мешают проходить путь до покупки

Делать заказ в приложении сложно и долго

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

Экраны оформления и подтверждения заказа замедляют процесс покупки
Экраны оформления и подтверждения заказа замедляют процесс покупки

Что советуем

  1. Нормально перевести интерфейс на русский. Плохой перевод в e-commerce-приложениях портит оформление страниц, мешает навигации и приводит к отказам от покупки. Теперь докажите это AliExpress.

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

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

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

Фишки Shein

Азиатский маркетплейс предлагает:

  • Очень простой и быстрый онбординг в два клика. 

  • Непривычный, но интересный по задумке каталог с кружочками. 

  • Отзывы в карточках, которые помогают людям лучше узнать о товаре.

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

ТОП-3 фишки Shein — простой вход, круглый каталог и информативный чекаут
ТОП-3 фишки Shein — простой вход, круглый каталог и информативный чекаут

Farfetch: «портал в ад» в сторах за плохой опыт

Пользователь и задача. Целевая аудитория Farfetch — преимущественно миллениалы. Допустим, что в приложение зашла на шоппинг бизнесвумен Натали. Она хочет безупречно выглядеть перед важной встречей.

Натали — представительница ЦА Farfetch по версии нейросети
Натали — представительница ЦА Farfetch по версии нейросети

Что не так

Сложно зайти в приложение и зарегистрироваться

Натали хотела купить одежду быстро. Она промотала онбординг из четырёх экранов с мелким текстом. После него она наткнулась на предложение подписаться на рассылку. Затем получила уведомление, что приложение нужно перезагрузить при смене настроек. Шопинг ещё не начался, а силы уже закончились.

Приложение слишком много хочет от пользователя уже на этапе входа
Приложение слишком много хочет от пользователя уже на этапе входа

Поисковый алгоритм не помогает искать товары

Натали вбила в поиск запрос «джинсы». Автодополнение сломано, предложило «горшки для сада». Но когда она самостоятельно ввела название, поиск заработал и всё нашёл.

Поиск не показывает, что понимает пользователя. Это может раздражать
Поиск не показывает, что понимает пользователя. Это может раздражать

Карточки товаров забиты текстом

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

Чтобы прочесть характеристики, она пробиралась через тексты о продавце, тарифах, доставке и возврате. И хотя данных много, Натали узнала главное об ограничениях по заказу только после добавления товара в корзину.

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

Сложный чекаут и скрытые платежи отталкивают от покупки

На странице «Добавьте Доставка адрес» (именно так) Натали указала имя, адрес, телефон и почтовый индекс. Минуту она гадала, зачем там три поля «Адресная строка», но решила их проигнорировать. В поле «Страна» она выбрала штат США из выпадающего списка, ввести самой было нельзя. Ещё она не смогла заранее посмотреть способ доставки и доступные методы оплаты.

Натали ввела данные и адрес, и приложение пересчитало стоимость. К джинсам за 715$ внезапно добавился налог в 63,46$, хотя на Главной приложение обещало, что все тарифы уже включены. Девушку оттолкнуло, что сумма выросла только после ввода адреса. Пришлось уточнять правила игры у техподдержки.

Курьер привёз посылку только через 10 дней и протянул счёт ещё на $30. Бесплатная доставка оказалась не такой уж и бесплатной. Собрать образ к встрече девушка не успела. Поэтому многие люди не любят Farfetch. Отталкивают проблемы с интерфейсом, каталогом, доставкой и возвратом. Отзывы в сторах говорят сами за себя: твердая двойка.

Отзывы о приложении Farfetch из Google Play Store
Отзывы о приложении Farfetch из Google Play Store

Что советуем

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

  2. Локализовывать приложение стоит целиком, раз уж официально разработчики за это взялись.

  3. Оптимизировать флоу покупки. Например, добавить в чекауте автозаполнение полей и сделать ценообразование и ограничения прозрачнее.

  4. Улучшить систему рекомендаций и поиск.

  5. Уменьшить число мелкого текста в карточках.

Фишки Farfetch

В приложении Farfetch хорошо, что:

  • Чистая и приятная лента без лишних элементов работает.

  • Качественные изображения и концепт рекомендаций на Главной и в карточке приносят пользу и прибыль. 

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

ТОП-3 фишки — аккуратная лента, рекомендации и продвинутые фильтры
ТОП-3 фишки — аккуратная лента, рекомендации и продвинутые фильтры

The Oscar goes to... Оценка неудобных fashion-приложений

Итак, что получается — смотрите в таблице ниже.

  • 🔴 — нет фичи или плохой опыт.

  • 🟡 — есть зоны роста.

  • 🟢 — хорошо реализовано.

Рейтинг самых неудобных fashion-приложений из обзора
Рейтинг самых неудобных fashion-приложений из обзора

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

Теги:
Хабы:
+7
Комментарии9

Публикации

Информация

Сайт
surf.ru
Дата регистрации
Дата основания
Численность
201–500 человек
Местоположение
Россия