Дизайн-прожарка: разбираем десктоп AliExpress

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

На прошлой неделе мы выпустили «Прожарку» мобильной версии «Алиэкспресса». К слову, не ожидали такого единодушия в комментариях.

Решили, что культурному шоку нужно подвергать дозированно, поэтому разбор десктопа вышел только сейчас.

С вами по-прежнему Женя Князев, и я всё ещё продуктовый дизайнер, поехали.

Прокомментирую историю про азиатский стиль, которую поднимали в комментариях к прошлой «Прожарке». Я придерживаюсь двух тезисов:

1. Да, в Китае преимущественно другие тренды в дизайне графики и интерфейсов. Там всё более яркое и кричащее.

2. НО! При серьёзном заходе на чужой рынок нужно адаптировать свой продукт под него.

Пишите в комментариях, если не согласны со мной.

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

Рядом с корзиной много пустого пространства — лучше показывать там общую стоимость добавленных товаров.

Во вкладке с доставкой можно выбрать не только город, но и район. Выпадающие списки дополнены поиском — это хорошо.

При этом почему-то половина интерфейса на русском, а другая на английском. Впрочем, все знают, что локализация — слабое место AliExpress, так что больше поднимать эту тему не буду.

Верхняя навигация смещена вправо — есть риск, что пользователь упустит её из виду. Нужны якорные объекты по краям, чтобы взгляд мог зацепиться за что-то.

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

Изображения под купоном мелкие. Без контекста сложно понять, что там изображено. Картинки переключаются, хотя индикаторов карусели нет.

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

Ещё непонятно, что именно баннеры продвигают. Местами рекламное сообщение не считывается.

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

Чтобы добавить что-то в «Избранное» или зайти в «Историю», нужно авторизоваться. В корзине вас тоже об этом обязательно попросят.

Интерфейс нестабильный. В разных местах карточки, баннеры, форматы кнопок и CTA отличаются. И это — самая большая проблема AliExpress.

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

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

Карточки на главной никак не помогают пользователю искать товары. Ты либо понимаешь, что изображено на фото и как этим пользоваться, либо нет.

Самый обычный — по аналогии с Google и «Яндекс». Предлагает похожие запросы и не более того. Под поисковой строкой выводят похожие запросы — хорошая механика.

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

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

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

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

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

Мелкий кегль у текста: в категориях 13 пикселей, в мегаменю — 11.

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

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

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

Хорошие фильтры, но не хватает поиска по ним и тултипов с пояснениями терминов.

Вынесли основные фильтры наверх — хорошая механика. Если бы их можно было настраивать, было бы вообще супер.

Проблемы всё те же, что и в «мобилке».

Из нового: далековато кнопка «Купить» — её не видно на первом экране.

Нельзя добавить товар в корзину, пока не выберешь его параметры.

Какие именно параметры нужны и как их выбрать пользователя не информируют.

В отзывах на странице продукта есть рейтинг полезно/неполезно — помогает понять, какие из них настоящие.

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

Минус: бессмысленная экономия пространства.

Это я авторизировался через Google-аккаунт, всем привет.

В корзине хедер и футер не упрощены. Это может отвлечь пользователя от завершения покупки. Хотя, если он добрался до кор��ины на AliExpress, его уже вряд ли что-то остановит.

Можно удалить товар, но нельзя его восстанавливать. Это досада — найти его повторно в таком маркетплейсе будет сложно.

В конце корзина спрашивает, насколько она хороша. Скину ей ссылку на «Прожарку» сюда после публикации. Особенно привлекательна здесь разрядка букв на кнопке.

В формах есть инлайновая проверка и подсказки — это хорошо.

В способах оплаты попробуйте определить логотипы платёжных систем.

Упростили хедер с футером хотя бы здесь — уже хорошо.

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

Самая большая проблема «Алиэкспресса» — отсутствие внятной дизайн-системы. Чем больше страниц ты открываешь, тем чаще меняется навигация, иконки, форматы карточек, форм-факторы кнопок, CTA и т.д.

В общем, «Али» не хватает Юры Ветрова.

Пишите в комментариях, какой интернет-магазин разобрать в следующий раз.

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

#aliexpress