Дизайн-прожарка: что не так с мобильной версией AliExpress

«Дизайн-прожарка» — рубрика, в которой команда Mojo разбирает интерфейсы интернет-магазинов. Мы не только находим ошибки, но и рекомендуем, как их исправить.

В прошлых выпусках мы уже успели:

Замахнемся на гиганта eCommerce — AliExpress. В 2020 году компания удвоила средний чек и стала лидером по отправке посылок в России. Веский повод разобраться в UX/UI сайта.

С вами Женя Князев — продуктовый дизайнер Mojo. Говорить о проблемах AliExpress можно долго, для удобства разделю материал на две части.

В первой остановимся на мобильной версии маркетплейса, потому что трафик в mCommerce растёт, и пользователи чаще выбирают товары с «мобилки».

Сразу бросается в глаза цветастость интерфейса. Весь мир идёт к минимализму, но Китай с упорством игнорирует тренды и верстает яркие блоки. Из-за буйства красок поиск в шапке теряется.

«Слишком мелко» — описание, которое подходит почти к каждой странице сайта. Нечитаемые надписи и пустые пространства встретятся нам ещё не раз. Категории сложно опознать по иконкам. Названия мелкие, слова обрезаны. Игривые многоточия, скрывающие конец фразы… оставляют простор для фантазии пользователей.

Иконки пытаются в один стиль, но гармонию портит Tmail с анимированным логотипом. Такой акцент мог бы сработать, будь общий дизайн минималистичным, но пока что смотрится вырвиглазно. Кнопка «‎Смотреть всё»‎ тоже выделяется на фоне остальных и дублирует функцию таб бара.

Можно ли рекламные карточки сделать ещё меньше? Думаю, да, но результат не поменяется. Подарочные товары теряются на цветном фоне без подписей. Зато AliExpress выделяет дату окончания распродажи, искусственно поддерживая ажиотаж.

На скидках и купонах построена большая часть логики AliExpress. Видно, что они их продвигают, и в этом нет ничего плохого.

Однако низкое качество картинок и мелкие зоны нажатия портят впечатление. Дефисы вместо минусов на скидочных ярлыках частые гости на наших «Прожарках». Эта проблема встречается в каждом втором интернет-магазине, в некоторых гарнитурах знака «−» вовсе нет.

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

Большинство пользователей AliExpress обращается к сайту, чтобы сэкономить или купить по цене «из Китая». Они ищут конкретные товары или категории, которые проще вбить в поисковую строку. Главная страница при таком сценарии отходит на второй план, что не умаляет её проблем.

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

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

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

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

Минус: дизайнеры сэкономили место и отдали названию одну строку. Из-за сокращений сложно опознать товар вне контекста. Хорошо, что продавцы подстроились под сайт и вынесли информацию на фото товара, выведя буйство красок на новый уровень.

Поиск предлагает автозаполнение, но варианты угадывает не всегда правильно. Учитывая огромное количество товаров, едва ли возможен лучший вариант. Свободное место в поиске AliExpress мог бы продавать рекламодателям.

Плюс: товары в поисковой выдаче можно отфильтровать по разным критериям. Сами фильтры спрятаны в шторку и динамически меняются в зависимости от категории товара.

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

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

Баги в вёрстке давно перестали казаться чем-то необычным, но динамические фильтры смогли удивить своей излишней динамичностью.

Отдельно хотелось бы выделить AliExpress Plus. После нажатия на логотип меня сначала переместило на пустую страницу, а затем на сторонний сервис с другим дизайном. AliExpress умеет удивлять.

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

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

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

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

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

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

При попытке проверить информацию о продавце, AliExpress услужливо перевёл меня в отдельную вкладку без возможности вернуться.

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

Радует, что сайт автоматически подстраивается под ОС телефона и предлагает удобный вариант входа в личный кабинет.

Однако от обязательной регистрации лучше отказаться вовсе. Мы уже разбирали, почему это плохое решение для eСommerce. Исследование Baymard говорит, что 28% отказов происходит из-за неё.

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

Круглые чекбоксы в корзине — зло, которое позволяет себе только Apple в заметках.

Плюс: удобно сделано саммари в виде шторки.

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

В 2020 году AliExpress отпраздновал юбилей на российском рынке, но за десять лет они так и не решили проблему с автопереводом. И если странные названия или описания объясняются неграмотностью продавцов, то отсутствие локализации в пунктах меню вызывает лишь недоумение.

Видимо, не очень-то им это и нужно.

В следующей части будем говорить о десктопной версии. Не забудьте «+1» и подписывайтесь на Mojo, если нравится рубрика и хотите ещё :)