Дизайн-прожарка: разбираем десктоп AliExpress
«Дизайн-прожарка» — рубрика, в которой команда Mojo анализирует интерфейсы интернет-магазинов. Мы по-прежнему не просто находим ошибки, но и рекомендуем решения.
На прошлой неделе мы выпустили «Прожарку» мобильной версии «Алиэкспресса». К слову, не ожидали такого единодушия в комментариях.
Решили, что культурному шоку нужно подвергать дозированно, поэтому разбор десктопа вышел только сейчас.
С вами по-прежнему Женя Князев, и я всё ещё продуктовый дизайнер, поехали.
Главная страница
Прокомментирую историю про азиатский стиль, которую поднимали в комментариях к прошлой «Прожарке». Я придерживаюсь двух тезисов:
1. Да, в Китае преимущественно другие тренды в дизайне графики и интерфейсов. Там всё более яркое и кричащее.
2. НО! При серьёзном заходе на чужой рынок нужно адаптировать свой продукт под него.
Пишите в комментариях, если не согласны со мной.
Даже если не заводить речь о цветовых решениях, баннеры на главной не дают мне покоя. С макбука их низкое разрешение ещё сильнее бросается в глаза.
Рядом с корзиной много пустого пространства — лучше показывать там общую стоимость добавленных товаров.
Во вкладке с доставкой можно выбрать не только город, но и район. Выпадающие списки дополнены поиском — это хорошо.
При этом почему-то половина интерфейса на русском, а другая на английском. Впрочем, все знают, что локализация — слабое место AliExpress, так что больше поднимать эту тему не буду.
Верхняя навигация смещена вправо — есть риск, что пользователь упустит её из виду. Нужны якорные объекты по краям, чтобы взгляд мог зацепиться за что-то.
Как говорили в комментариях к прошлой «Прожарке» — интерфейс ещё не успел прогрузиться, а тебе уже дают купон.
Изображения под купоном мелкие. Без контекста сложно понять, что там изображено. Картинки переключаются, хотя индикаторов карусели нет.
Первый экран перегружен спецпредложениями, усугубляет ситуацию вездесущая автоанимация. После взаимодействия с баннером на главной он должен перестать переключать слайды. Здесь таких технологий не предусмотрено. Больше одного объекта с автоанимацией на экран помещать не стоит.
Ещё непонятно, что именно баннеры продвигают. Местами рекламное сообщение не считывается.
Тёмная вставка справа так и нарывается на баннерную слепоту. В тёмном режиме она выглядит как часть браузера.
Чтобы добавить что-то в «Избранное» или зайти в «Историю», нужно авторизоваться. В корзине вас тоже об этом обязательно попросят.
Интерфейс нестабильный. В разных местах карточки, баннеры, форматы кнопок и CTA отличаются. И это — самая большая проблема AliExpress.
Создаётся ощущение, что ты на китайском рынке, где куча разных продавцов одновременно хотят продать тебе побольше и изгаляются, как могут. Нет заботы о пользователе — чтобы что-то найти, нужно вдумываться.
В отличие от мобильной версии, в десктопе главная страница не подгружается бесконечно — на мой взгляд, здесь это решение уместнее.
Карточки на главной никак не помогают пользователю искать товары. Ты либо понимаешь, что изображено на фото и как этим пользоваться, либо нет.
Поиск
Самый обычный — по аналогии с Google и «Яндекс». Предлагает похожие запросы и не более того. Под поисковой строкой выводят похожие запросы — хорошая механика.
Плюс: есть поиск по категориям — маркетплейсу с огромным количеством товаров без этой функции никуда.
Правда, некастомизированный дропдуан заставляет плакать.
Поиск статичный и следует за пользователем на главной странице, но при скролле возможность искать по категориям пропадает.
Каталог
При переходе в каталог категории прячутся в бургер-меню. Плохое решение для десктопа — уже писали об этом. Кнопку легко проглядеть, нужна хотя бы подпись «Каталог» у иконки. Сам бургер можно было сделать поярче. Это хороший пример, в котором мы видим, что дело не только в «культурных особенностях».
В мегаменю проблемы с типографикой и контрастностью — текст выглядит единым блоком. Встречаются сокращённые наименования. Касаться вёрстки уже не будем. Непонятно, зачем отдельные категории выделяют внизу.
Мелкий кегль у текста: в категориях 13 пикселей, в мегаменю — 11.
Плюс: категории дополнены иконками — проще считывать информацию хотя бы здесь.
Огромный плюс за саму категоризацию — она есть, и по большей части она понятная. В маркетплейсе вроде AliExpress такой подвиг достоин премии с записью в личное дело.
Правда, товары в категориях совсем необязательно будут действительно подходить под запрос.
Хорошие фильтры, но не хватает поиска по ним и тултипов с пояснениями терминов.
Вынесли основные фильтры наверх — хорошая механика. Если бы их можно было настраивать, было бы вообще супер.
Страница товара
Проблемы всё те же, что и в «мобилке».
Из нового: далековато кнопка «Купить» — её не видно на первом экране.
Нельзя добавить товар в корзину, пока не выберешь его параметры.
Какие именно параметры нужны и как их выбрать пользователя не информируют.
В отзывах на странице продукта есть рейтинг полезно/неполезно — помогает понять, какие из них настоящие.
Плюс: можно загружать фото товара в отзывы, сами изображения можно крутить — полезная функция.
Минус: бессмысленная экономия пространства.
Корзина
Это я авторизировался через Google-аккаунт, всем привет.
В корзине хедер и футер не упрощены. Это может отвлечь пользователя от завершения покупки. Хотя, если он добрался до корзины на AliExpress, его уже вряд ли что-то остановит.
Можно удалить товар, но нельзя его восстанавливать. Это досада — найти его повторно в таком маркетплейсе будет сложно.
В конце корзина спрашивает, насколько она хороша. Скину ей ссылку на «Прожарку» сюда после публикации. Особенно привлекательна здесь разрядка букв на кнопке.
Чекаут
В формах есть инлайновая проверка и подсказки — это хорошо.
В способах оплаты попробуйте определить логотипы платёжных систем.
Упростили хедер с футером хотя бы здесь — уже хорошо.
Выводы
Нельзя не отметить крутые функции и правильные решения маркетплейса. Скорее всего, в чём-то AliExpress даже выступает новатором, и остальные сайты дублируют их механики. Только дизайнят их в хорошем качестве и без вырвиглазных цветов.
Самая большая проблема «Алиэкспресса» — отсутствие внятной дизайн-системы. Чем больше страниц ты открываешь, тем чаще меняется навигация, иконки, форматы карточек, форм-факторы кнопок, CTA и т.д.
В общем, «Али» не хватает Юры Ветрова.
Пишите в комментариях, какой интернет-магазин разобрать в следующий раз.
Не забудьте «+1» и подписывайтесь на Mojo, если нравится рубрика и хотите ещё :)
1. Да, в Китае преимущественно другие тренды в дизайне графики и интерфейсов. Там всё более яркое и кричащее.
2. НО! При серьёзном заходе на чужой рынок нужно адаптировать свой продукт под него.
Россияне потратили 7,3 млрд рублей в ходе ежегодной распродажи на AliExpress, которая проходила с 15 по 21 июня.
Вот бы кто-то научил их серьезно заходить на чужой рынок
Если бы их кто-то заставил платить налоги по полной, как местные, думаю озон и wb порвали бы его на клочья.
Спасибо за статью, ребята, молодцы!
Далее текст, не преследующий цели кого-либо оскорбить или заставить усомниться в чьей-либо компетентности.
Ох, это модное слово «прожарка». Пока читал материал, меня не покидал вопрос: «А для кого это?»
Если для саморекламы, то где демонстрация вашего подхода? Ну хотя бы пара-тройка скринов-примеров, как бы вы решили ту или иную проблему и почему это вообще проблема.
Если для дизайнеров-новичков, то где объективные факты того, что это и правда проблема в интерфейсе? Увы, в статье не увидел экспертного мнения с отсылками на какую-либо аналитику или исследования.
«Создаётся ощущение, что ты на китайском рынке, где куча разных продавцов...» — ну в каком-то смысле так и есть =)
«В отличие от мобильной версии, в десктопе главная страница не подгружается бесконечно — на мой взгляд, здесь это решение уместнее» — а на мой взгляд бесконечная подгрузка контента на главной странице не уместна, и на это есть несколько причин (абсолютное ИМХО):
1. Хотели избежать перевода внимания посетителя. В десктопе из-за большой ширины экрана, умещается 6 карточек, а значит внимания пользователя на изучение каждой строчки карточек требуется больше. При таком визуальном «шуме», резкое появление новых карточек внизу экрана, своей анимацией будет отвлекать внимание пользователя от карточки, которую он изучал. Вернуться к изучению прежней карточки будет проблематично (по крайней мере потребуется какое-то время). В «мобилке» же, в ряд идет всего 2 карточки, соответственно найти прежнюю карточку будет проще и удобнее даже если пользователя отвлечет анимация подгрузки.
2. Оптимизация работы сайта. Из-за большого количества товара при подгрузке (тем же ajax) сайту приходится постоянно обращаться к БД, из-за этого скролл на сайте был бы «рваным», без плавности.
Еще раз повторю, это ИМХО — без сильного погружения в аналитику, просто пара гипотез
«... далековато кнопка «Купить» — её не видно на первом экране.» — как было сказано выше, это рынок. На маркетплейсе очень много разношерстного товара со своими характеристиками и особенностями. Для какого-то товара, важны фото, для какого-то характеристики/отзывы/etc. Пользователь и так понимает, что здесь можно покупать и кнопка в корзину есть на странице (маркетплейс же, камон), поэтому приоритет был отдан именно информации, которая необходима для принятия решения о покупке товара.
«Нельзя добавить товар в корзину, пока не выберешь его параметры» — а в каких случаях можно добавить товар в корзину не выбирая параметры? Только в случае, если у товара нет параметров, верно? Вот о том, что нет конкретики какие именно параметры, соглы, гадать не очень хочется, что именно надо выбрать
«В корзине хедер и футер не упрощены. Это может отвлечь пользователя от завершения покупки.» — опять же это маркеплейс, пользователь в любой момент захочет поискать что-то еще, даже находясь на странице корзины (а чтобы вернуться всегда есть иконка корзины в шапке), к тому же корзина на подобных ресурсах является еще и инструментом «отложенной покупки», посетитель может просто набросать товара, потом провести менеджмент своих покупок и пойти выбирать дальше. А совершить покупку через месяц, например. Поэтому все компоненты в шапке сайта, вполне себе уместны. В остальном, точек выхода нет.
А вот то, что информер на иконке корзины не показывает количество товаров — это косяк (баг или фича, не знаю, не разбирался).
Вообще, очень не хватает именно подкрепленных фактов и тезисов. Из-за всех этих «я, мне, мое мнение и т.д.» вызывает впечатление просто субъективного мнения, а не «прожарки».
Алиэкспресс развивается и адаптируется, но медленно и осторожно, так как глобальные изменения, могут сломать уже сформировавшиеся пользовательские паттерны, что может привести к массовому оттоку сформировавшейся аудитории (которые давно уже привыкли к этому интерфейсу и какие-либо изменения, даже с благой целью, могут вызвать только негатив).
Разберите лучше то, что ближе нам. Православные Wildberries, Lamoda, Joom, например.)
P.S.: Извиняюсь за многобукв.
ох это модное слово «прожарка». «а для кого это?»
После этого не стал даже читать.
Сделай так же, что бы понять, или поймёшь когда сделаешь.
К этим ребятам подходит одна старая поговорка «сапожник без сапог». объективно: на статью потрачено кучу времени(видно качество подхода к написанию) - выхлоп удовлетворяет и подчеркивает профессионализм. Над сайтом не заморачиваются, так как сами понимают - косяки не увидит целевая аудитория.
где демонстрация вашего подходаЕсли вы не поняли, они не предлагают решить проблемы, они просто на них указывают, как ревизор.
ух, спасибо, как я люблю такие комментарии, именно с другой точкой зрения. Понятно что одному человеку в голову пришло, это лишь его мнение, но у монеты всегда две стороны, значит делая это были какие то другие причины, которые не озвучены, значит автор не смог из рассмотреть, разгадать. Спасибо, пишите больше!
Создаётся ощущение, что ты на китайском рынке, где куча разных продавцов одновременно хотят продать тебе побольше и изгаляются, как могут. Как бы сказать, ну.. в основном именно так дело и обстоит!
дизайнеры снова забыли прочитать бриф