Плохой UX крадёт у бизнеса миллионы рублей каждый месяц, и 88% пользователей не возвращаются из-за него в магазины. В этой статье наши UX-дизайнеры оценили дизайн известных приложений и показали, как магазины стреляют себе в ногу и портят пользовательский опыт. Взяли сферу моды, потому что россияне чаще всего покупают в интернете одежду и обувь.
В материале рассказали:
Как через огонь и воду добраться до покупки штанов в ЦУМе.
Как провалилась идея лучшей программы лояльности в Shein.
Почему бренд ТВОЕ мешает покупать свою же одежду.
За что американскому магазину Farfetch влепили двойку в отзывах.
Как выбрали приложения для обзора
У UX-дизайнеров есть свои заморочки: нас хлебом не корми, дай «пощупать» приложение, разобрать его по косточкам и подумать, как улучшить. Это помогает нам развивать продукты, над которыми мы сами работаем.
Вот и для этой статьи так получилось: мы скачали 10 популярных приложений, которыми и сами пользуемся. Прошли в них каждый этап: от онбординга до заказа. И выбрали четыре самых неудобных — два российских ЦУМ и ТВОЕ, и два зарубежных — Shein и Farfrecth.
Мы не стали выдумывать сложную шкалу оценки и считать миллисекунды между тапом по кнопке и полной загрузкой. Нас интересовал UX/UI опыт в целом. Поэтому мы разобрали целевую аудиторию каждого продукта и оценили их с точки зрения обычных пользователей в формате user story. Создали шкалу-светофор:
🟢 Зелёный означает, что фича в порядке.
🟡 Жёлтый — есть зоны роста.
🔴 Красный — фичи нет или она сломана.
ЦУМ: как сломали магазин для богатых
Пользователь и задача. Целевая аудитория ЦУМа — богатые люди, готовые тратиться на люкс-товары. При этом ЦУМ активно привлекает молодежь до 25 лет. Они ценят сервис, уникальность и ручную работу, выбирают актуальные, но сдержанные образы — пальто Prada, сумка Hermès и обувь Jimmy Choo.
Назовём девушку с изображения Карина (все персонажи вымышлены и любое сходство с реальностью случайно). Представим, что она хочет заказать брендовый джинсовый костюм онлайн и заходит в приложение ЦУМ.
Что не так
Выдача товаров по запросу не появляется
Карина сразу сузила поиск — выбрала категорию «Женское». С помощью автоматических подсказок ввела запрос «джинсы бегги», но не увидела ни одного варианта. Попробовала поискать на английском и получила всего два товара, хотя в каталоге их больше. В итоге Карине пришлось отказаться от точного запроса и вручную пролистать весь каталог, чтобы найти нужные брюки. Заняло это не пару минут, а полчаса.
Корзина спрятана
Карина добавила джинсы в корзину и попала в ловушку: иконки корзины нигде не было. Её пришлось искать ещё несколько минут — а ведь она уже могла сделать заказ.
Нет интерактивной карты
Карина не смогла найти привычную карту адресов при заказе и вбила адрес вручную. Здесь её ждали мелкие, плохо адаптированные под мобильные устройства кнопки. Она разобралась с ними и завершила покупку.
Слишком много push-уведомлений
Покупка удалась, но на этом всё не закончилось. Сразу после установки приложения Карина начала получать маркетинговые пуши трижды в день. Даже преданная фанатка ЦУМа не смогла бы осилить столько сообщений, поэтому девушка их отключила и забыла про приложение.
Что советуем
Улучшить релевантность результатов поиска и добавить умные рекомендации в корзине. Это можно реализовать через ML-алгоритм, обученный на датасете из фотографий одежды и описаний.
Пересмотреть маркетинговую стратегию. ЦУМ нарушает норму push-уведомлений, их количество нужно сократить.
Внедрить карту или хотя бы поиск адреса пользователя по геолокации.
Крутые фишки ЦУМа
Но у приложения ЦУМа есть и классные решения. Например, в ЦУМе нам особенно понравились:
Визуальный поиск товара по картинке.
Поиск по брендам.
Возможность поделиться корзиной или избранными товарами.
Возможность выбрать пол покупателя и любимые бренды.
Это хорошие практики — персонализация дает покупателям возможность собрать эксклюзивный лук по фото знаменитости и отправить тому, кто его оплатит.
В Телеграме мы собираем и другие крутые фишки, которые ритейлеры могут забрать себе. Недавно мы как раз писали о персональном каталоге в Самокате.
ТВОЕ: баги, которые мешают покупкам
Пользователь и задача. Аудитория магазина — молодёжь 15–27 лет, часто это школьники, студенты и их родители. Поэтому в приложение бренда может зайти мама восьмиклассницы Оксана. Она не хочет тратить много на растущего ребёнка, но хочет выбрать практичные и небанальные вещи. Оксана ищет джинсы baggy — хит сезона.
Что не так
Невозможно быстро найти нужный товар
Оксана ввела запрос на английском, но сайт ТВОЕ не распознал язык и не предложил фильтры — ни по полу, ни по возрасту. На экране она увидела таблицу с мелкими изображениями и серым текстом. Вместо подсказок — список с категориями и числом товаров по запросу. Оксана открыла несколько вкладок, чтобы понять, какие товары там находятся. Несмотря на перегруженный интерфейс, она всё же нашла раздел с нужными брюками.
Карточки товаров нечитабельны
Оксана стала подбирать кофту к джинсам и увидела джемпер с медвежонком. Она начала изучать его характеристики и запуталась в товарной карточке: экран пестрил красными кнопками, шрифтами разного размера и иконками. Мама школьницы купила джемпер ради медвежонка, но опыт ей не понравился.
Пустая корзина не напоминает купить просмотренные вещи
Когда в корзине видишь только выбранные товары, это удобно. Но система рекомендаций в UX придумана не просто так. А здесь её не было. Оксана забыла докупить приглянувшиеся джинсы. Так бренд ТВОЕ оставил себя без выручки, а дочку Оксаны — буквально без штанов.
Приходится настраивать карту вручную
При выборе адреса для доставки карта по умолчанию открылась в глобальном масштабе. Оксана начала её настраивать вручную: приближать и всматриваться в мелкие названия. Ни автоматического определения города, ни подсказок. Другие сервисы давно подстраиваются под регион пользователя или находят его по геолокации, а тут приходится самому чинить карту.
Что советуем
Улучшить алгоритм поиска, чтобы он не выдавал нерелевантные товары. Его стоит научить понимать англоязычные запросы, потому что многие фасоны и стили ещё не получили устойчивые названия на русском. Без автоматизированного поиска конверсия в покупку падает на 10,7%.
Очистить карточки и этап заказа от визуального шума. Время поиска информации и заполнения полей снижает выручку. Чем больше лишних элементов, тем ниже шансы, что покупатель дойдёт до целевого действия.
Обновить корзину и добавить блоки допродаж, чтобы поднять средний чек.
Починить интерактивную карту.
Фишки ТВОЕ
В ТВОЕ тоже есть уникальные фичи. Нас зацепили:
Видео на главной.
Хорошо подобранные тематические коллекции, например, коллекция в коллаборации с «Мосфильм».
Качественные изображения и удобные кнопки в карточках.
Shein: самый пёстрый магазин одежды
Пользователь и задача. Онлайн-магазин ориентируется на зумеров. Поэтому в приложение заходит студентка, которая хочет тратить мало, выглядеть стильно и заказывать всё из Китая. Пусть студентку зовут Ася.
Что не так
Главная и каталог мешают разобраться в ассортименте
Хоть студентка на «ты» с онлайн-шоппингом, Shein заставил её попотеть уже на первом экране.
Ася хотела изучить тренды сезона, но вместо быстрого обзора утонула в рекламных карточках на Главной. Пошла искать тренды в разделе «Новинки», но во многих категориях ничего не увидела. Затем зашла в каталог за брюками и надолго застряла: ей мешали непривычное боковое меню с круглыми разделами и плохой автоперевод интерфейса.
Кросс-сейлы сливаются с выбранными вещами
Ася заглянула в корзину. Нужная вещь была, но сразу под ней — ворох странных подборок: мужские поло, сумки, что-то с наклейками. Она не поняла, зачем алгоритм вывалил всё подряд. С пустой корзиной ситуация была не лучше: тогда экран заполняли неактуальные товары, никак не связанные с её поиском.
Программа лояльности — катастрофа для пользователя
Студентка даже не пыталась разобраться в сути промо-акций Shein: тысяча кнопок, иконок, цветных баннеров, всплывашек и долгих анимаций заставила Асю нажать на крестик везде, где он был.
Делать заказ в приложении сложно и долго
Окончательно передумать использовать Shein Асю заставил чекаут. Она не смогла выбрать город или указать адрес доставки на карте, заполнила поля вручную. Затем она несколько минут разглядывала детали заказа на перегруженном экране. И в конце не выдержала и бросила корзину.
Что советуем
Нормально перевести интерфейс на русский. Плохой перевод в e-commerce-приложениях портит оформление страниц, мешает навигации и приводит к отказам от покупки. Теперь докажите это AliExpress.
Создать интуитивный и привычный каталог, сохранив при этомуникальный подход магазина к его оформлению. Цель — сделать так, чтобы время просмотра каталога не снижало конверсию в покупку.
Настроить поиск и изменить формат рекомендаций в корзине. Баннеры не должны раздражать и мешать шоппингу, поэтому советуем сделать их минималистичными и меньшего размера.
Обновить программу лояльности и упростить личный кабинет. Сейчас он перегружен, а анимации и всплывающие уведомления отталкивают. Дать возможность экономить и взаимодействовать с геймифицированным контентом — хорошая идея, но её нужно реализовать без ущерба нервной системе клиента.
Фишки Shein
Азиатский маркетплейс предлагает:
Очень простой и быстрый онбординг в два клика.
Непривычный, но интересный по задумке каталог с кружочками.
Отзывы в карточках, которые помогают людям лучше узнать о товаре.
Подробную информацию о способах оплаты, которая упрощает чекаут и повышает вероятность успешного завершения заказа.
Farfetch: «портал в ад» в сторах за плохой опыт
Пользователь и задача. Целевая аудитория Farfetch — преимущественно миллениалы. Допустим, что в приложение зашла на шоппинг бизнесвумен Натали. Она хочет безупречно выглядеть перед важной встречей.
Что не так
Сложно зайти в приложение и зарегистрироваться
Натали хотела купить одежду быстро. Она промотала онбординг из четырёх экранов с мелким текстом. После него она наткнулась на предложение подписаться на рассылку. Затем получила уведомление, что приложение нужно перезагрузить при смене настроек. Шопинг ещё не начался, а силы уже закончились.
Поисковый алгоритм не помогает искать товары
Натали вбила в поиск запрос «джинсы». Автодополнение сломано, предложило «горшки для сада». Но когда она самостоятельно ввела название, поиск заработал и всё нашёл.
Карточки товаров забиты текстом
Натали специально выбрала русскоязычную версию интерфейса — она недавно переехала в США и не говорит на английском как носитель. Но это не помогло: карточки не локализованы, просто автоматически переведены. Но это то ладно.
Чтобы прочесть характеристики, она пробиралась через тексты о продавце, тарифах, доставке и возврате. И хотя данных много, Натали узнала главное об ограничениях по заказу только после добавления товара в корзину.
Сложный чекаут и скрытые платежи отталкивают от покупки
На странице «Добавьте Доставка адрес» (именно так) Натали указала имя, адрес, телефон и почтовый индекс. Минуту она гадала, зачем там три поля «Адресная строка», но решила их проигнорировать. В поле «Страна» она выбрала штат США из выпадающего списка, ввести самой было нельзя. Ещё она не смогла заранее посмотреть способ доставки и доступные методы оплаты.
Натали ввела данные и адрес, и приложение пересчитало стоимость. К джинсам за 715$ внезапно добавился налог в 63,46$, хотя на Главной приложение обещало, что все тарифы уже включены. Девушку оттолкнуло, что сумма выросла только после ввода адреса. Пришлось уточнять правила игры у техподдержки.
Курьер привёз посылку только через 10 дней и протянул счёт ещё на $30. Бесплатная доставка оказалась не такой уж и бесплатной. Собрать образ к встрече девушка не успела. Поэтому многие люди не любят Farfetch. Отталкивают проблемы с интерфейсом, каталогом, доставкой и возвратом. Отзывы в сторах говорят сами за себя: твердая двойка.
Что советуем
Сократить онбординг и снизить количество приветственных уведомлений. Если человек скачивает приложение, скорее всего, он знает этот магазин. Подсказки же можно разместить в соответствующих разделах. А пока долгая авторизация снижает конверсию в переход к товарам.
Локализовывать приложение стоит целиком, раз уж официально разработчики за это взялись.
Оптимизировать флоу покупки. Например, добавить в чекауте автозаполнение полей и сделать ценообразование и ограничения прозрачнее.
Улучшить систему рекомендаций и поиск.
Уменьшить число мелкого текста в карточках.
Фишки Farfetch
В приложении Farfetch хорошо, что:
Чистая и приятная лента без лишних элементов работает.
Качественные изображения и концепт рекомендаций на Главной и в карточке приносят пользу и прибыль.
Есть каталог с брендами и разбивкой по полу и возрасту для персонализации.
The Oscar goes to... Оценка неудобных fashion-приложений
Итак, что получается — смотрите в таблице ниже.
🔴 — нет фичи или плохой опыт.
🟡 — есть зоны роста.
🟢 — хорошо реализовано.
Если любите разборы IT-продуктов, заходите к нам в Телеграм. Там мы регулярно устраиваем прожарки, пишем об отраслевых новостях, фишках и проблемах продуктов топовых компаний. Делимся лайфхаками и приглашаем отраслевых экспертов. Приходите и узнавайте, что стоит отнести в свой бэклог на будущий год.
