«Дизайн-прожарка» — рубрика, в которой команда Mojo анализирует интерфейсы интернет-магазинов. Мы по-прежнему не просто находим ошибки, но и рекомендуем решения.
На прошлой неделе мы выпустили «Прожарку» мобильной версии «Алиэкспресса». К слову, не ожидали такого единодушия в комментариях.
Решили, что культурному шоку нужно подвергать дозированно, поэтому разбор десктопа вышел только сейчас.
С вами по-прежнему Женя Князев, и я всё ещё продуктовый дизайнер, поехали.
Главная страница
Прокомментирую историю про азиатский стиль, которую поднимали в комментариях к прошлой «Прожарке». Я придерживаюсь двух тезисов:
1. Да, в Китае преимущественно другие тренды в дизайне графики и интерфейсов. Там всё более яркое и кричащее.
2. НО! При серьёзном заходе на чужой рынок нужно адаптировать свой продукт под него.
Пишите в комментариях, если не согласны со мной.
Даже если не заводить речь о цветовых решениях, баннеры на главной не дают мне покоя. С макбука их низкое разрешение ещё сильнее бросается в глаза.
Рядом с корзиной много пустого пространства — лучше показывать там общую стоимость добавленных товаров.
Во вкладке с доставкой можно выбрать не только город, но и район. Выпадающие списки дополнены поиском — это хорошо.
При этом почему-то половина интерфейса на русском, а другая на английском. Впрочем, все знают, что локализация — слабое место AliExpress, так что больше поднимать эту тему не буду.
Верхняя навигация смещена вправо — есть риск, что пользователь упустит её из виду. Нужны якорные объекты по краям, чтобы взгляд мог зацепиться за что-то.
Как говорили в комментариях к прошлой «Прожарке» — интерфейс ещё не успел прогрузиться, а тебе уже дают купон.
Изображения под купоном мелкие. Без контекста сложно понять, что там изображено. Картинки переключаются, хотя индикаторов карусели нет.
Первый экран перегружен спецпредложениями, усугубляет ситуацию вездесущая автоанимация. После взаимодействия с баннером на главной он должен перестать переключать слайды. Здесь таких технологий не предусмотрено. Больше одного объекта с автоанимацией на экран помещать не стоит.
Ещё непонятно, что именно баннеры продвигают. Местами рекламное сообщение не считывается.
Тёмная вставка справа так и нарывается на баннерную слепоту. В тёмном режиме она выглядит как часть браузера.
Чтобы добавить что-то в «Избранное» или зайти в «Историю», нужно авторизоваться. В корзине вас тоже об этом обязательно попросят.
Интерфейс нестабильный. В разных местах карточки, баннеры, форматы кнопок и CTA отличаются. И это — самая большая проблема AliExpress.
Создаётся ощущение, что ты на китайском рынке, где куча разных продавцов одновременно хотят продать тебе побольше и изгаляются, как могут. Нет заботы о пользователе — чтобы что-то найти, нужно вдумываться.
В отличие от мобильной версии, в десктопе главная страница не подгружается бесконечно — на мой взгляд, здесь это решение уместнее.
Карточки на главной никак не помогают пользователю искать товары. Ты либо понимаешь, что изображено на фото и как этим пользоваться, либо нет.
Поиск
Самый обычный — по аналогии с Google и «Яндекс». Предлагает похожие запросы и не более того. Под поисковой строкой выводят похожие запросы — хорошая механика.
Плюс: есть поиск по категориям — маркетплейсу с огромным количеством товаров без этой функции никуда.
Правда, некастомизированный дропдуан заставляет плакать.
Поиск статичный и следует за пользователем на главной странице, но при скролле возможность искать по категориям пропадает.
Каталог
При переходе в каталог категории прячутся в бургер-меню. Плохое решение для десктопа — уже писали об этом. Кнопку легко проглядеть, нужна хотя бы подпись «Каталог» у иконки. Сам бургер можно было сделать поярче. Это хороший пример, в котором мы видим, что дело не только в «культурных особенностях».
В мегаменю проблемы с типографикой и контрастностью — текст выглядит единым блоком. Встречаются сокращённые наименования. Касаться вёрстки уже не будем. Непонятно, зачем отдельные категории выделяют внизу.
Мелкий кегль у текста: в категориях 13 пикселей, в мегаменю — 11.
Плюс: категории дополнены иконками — проще считывать информацию хотя бы здесь.
Огромный плюс за саму категоризацию — она есть, и по большей части она понятная. В маркетплейсе вроде AliExpress такой подвиг достоин премии с записью в личное дело.
Правда, товары в категориях совсем необязательно будут действительно подходить под запрос.
Хорошие фильтры, но не хватает поиска по ним и тултипов с пояснениями терминов.
Вынесли основные фильтры наверх — хорошая механика. Если бы их можно было настраивать, было бы вообще супер.
Страница товара
Проблемы всё те же, что и в «мобилке».
Из нового: далековато кнопка «Купить» — её не видно на первом экране.
Нельзя добавить товар в корзину, пока не выберешь его параметры.
Какие именно параметры нужны и как их выбрать пользователя не информируют.
В отзывах на странице продукта есть рейтинг полезно/неполезно — помогает понять, какие из них настоящие.
Плюс: можно загружать фото товара в отзывы, сами изображения можно крутить — полезная функция.
Минус: бессмысленная экономия пространства.
Корзина
Это я авторизировался через Google-аккаунт, всем привет.
В корзине хедер и футер не упрощены. Это может отвлечь пользователя от завершения покупки. Хотя, если он добрался до корзины на AliExpress, его уже вряд ли что-то остановит.
Можно удалить товар, но нельзя его восстанавливать. Это досада — найти его повторно в таком маркетплейсе будет сложно.
В конце корзина спрашивает, насколько она хороша. Скину ей ссылку на «Прожарку» сюда после публикации. Особенно привлекательна здесь разрядка букв на кнопке.
Чекаут
В формах есть инлайновая проверка и подсказки — это хорошо.
В способах оплаты попробуйте определить логотипы платёжных систем.
Упростили хедер с футером хотя бы здесь — уже хорошо.
Выводы
Нельзя не отметить крутые функции и правильные решения маркетплейса. Скорее всего, в чём-то AliExpress даже выступает новатором, и остальные сайты дублируют их механики. Только дизайнят их в хорошем качестве и без вырвиглазных цветов.
Самая большая проблема «Алиэкспресса» — отсутствие внятной дизайн-системы. Чем больше страниц ты открываешь, тем чаще меняется навигация, иконки, форматы карточек, форм-факторы кнопок, CTA и т.д.
В общем, «Али» не хватает Юры Ветрова.
Пишите в комментариях, какой интернет-магазин разобрать в следующий раз.
Не забудьте «+1» и подписывайтесь на Mojo, если нравится рубрика и хотите ещё :)
1. Да, в Китае преимущественно другие тренды в дизайне графики и интерфейсов. Там всё более яркое и кричащее.
Россияне потратили 7,3 млрд рублей в ходе ежегодной распродажи на AliExpress, которая проходила с 15 по 21 июня.2. НО! При серьёзном заходе на чужой рынок нужно адаптировать свой продукт под него.
Вот бы кто-то научил их серьезно заходить на чужой рынок
Если бы их кто-то заставил платить налоги по полной, как местные, думаю озон и wb порвали бы его на клочья.
ну это само собой
а потом рамблер бы порвал гугл, йотафон - эппл, а автоваз порвал бы VAG
У гугла нет каких-то налоговых преимуществ по сравнению с яндексом, а иномарки почти все сейчас в РФ производят, где-то 90%, это доказывает, что у русского человека руки не из жопы растут.
Собирают, а не производят
Тогда производство в мире остановилось везде, все собирают, из запчастей собираемых по всему миру.
Чертежи для производства не наши
Китай должен пойти и повеситься?
Что за совок, что либо от руды и до готового автомобиля, либо нет у нас производства?
Hабочие места есть, технологии есть.
Комментарий недоступен
90% иномарок собирают в росии? ебать, а автомобильная промышленность в курсе?
а если добавить отечественный автопром, то получается что в россии собирают 90.01% всех автомобилей в мире?
доказывает что русским можно платить в два раза меньше чтобы они крутили гайки, это низкоквалифицированный труд, его можно и с руками из жопы освоить. не говоря о том, что сами русские стараются не покупать машины собранные в росии. но это конечно тяжело, когда 9 из 10 майбахов собраны в тольятти.
Спасибо за статью, ребята, молодцы!
Далее текст, не преследующий цели кого-либо оскорбить или заставить усомниться в чьей-либо компетентности.
Ох, это модное слово «прожарка». Пока читал материал, меня не покидал вопрос: «А для кого это?»
Если для саморекламы, то где демонстрация вашего подхода? Ну хотя бы пара-тройка скринов-примеров, как бы вы решили ту или иную проблему и почему это вообще проблема.
Если для дизайнеров-новичков, то где объективные факты того, что это и правда проблема в интерфейсе? Увы, в статье не увидел экспертного мнения с отсылками на какую-либо аналитику или исследования.
«Создаётся ощущение, что ты на китайском рынке, где куча разных продавцов...» — ну в каком-то смысле так и есть =)
«В отличие от мобильной версии, в десктопе главная страница не подгружается бесконечно — на мой взгляд, здесь это решение уместнее» — а на мой взгляд бесконечная подгрузка контента на главной странице не уместна, и на это есть несколько причин (абсолютное ИМХО):
1. Хотели избежать перевода внимания посетителя. В десктопе из-за большой ширины экрана, умещается 6 карточек, а значит внимания пользователя на изучение каждой строчки карточек требуется больше. При таком визуальном «шуме», резкое появление новых карточек внизу экрана, своей анимацией будет отвлекать внимание пользователя от карточки, которую он изучал. Вернуться к изучению прежней карточки будет проблематично (по крайней мере потребуется какое-то время). В «мобилке» же, в ряд идет всего 2 карточки, соответственно найти прежнюю карточку будет проще и удобнее даже если пользователя отвлечет анимация подгрузки.
2. Оптимизация работы сайта. Из-за большого количества товара при подгрузке (тем же ajax) сайту приходится постоянно обращаться к БД, из-за этого скролл на сайте был бы «рваным», без плавности.
Еще раз повторю, это ИМХО — без сильного погружения в аналитику, просто пара гипотез
«... далековато кнопка «Купить» — её не видно на первом экране.» — как было сказано выше, это рынок. На маркетплейсе очень много разношерстного товара со своими характеристиками и особенностями. Для какого-то товара, важны фото, для какого-то характеристики/отзывы/etc. Пользователь и так понимает, что здесь можно покупать и кнопка в корзину есть на странице (маркетплейс же, камон), поэтому приоритет был отдан именно информации, которая необходима для принятия решения о покупке товара.
«Нельзя добавить товар в корзину, пока не выберешь его параметры» — а в каких случаях можно добавить товар в корзину не выбирая параметры? Только в случае, если у товара нет параметров, верно? Вот о том, что нет конкретики какие именно параметры, соглы, гадать не очень хочется, что именно надо выбрать
«В корзине хедер и футер не упрощены. Это может отвлечь пользователя от завершения покупки.» — опять же это маркеплейс, пользователь в любой момент захочет поискать что-то еще, даже находясь на странице корзины (а чтобы вернуться всегда есть иконка корзины в шапке), к тому же корзина на подобных ресурсах является еще и инструментом «отложенной покупки», посетитель может просто набросать товара, потом провести менеджмент своих покупок и пойти выбирать дальше. А совершить покупку через месяц, например. Поэтому все компоненты в шапке сайта, вполне себе уместны. В остальном, точек выхода нет.
А вот то, что информер на иконке корзины не показывает количество товаров — это косяк (баг или фича, не знаю, не разбирался).
Вообще, очень не хватает именно подкрепленных фактов и тезисов. Из-за всех этих «я, мне, мое мнение и т.д.» вызывает впечатление просто субъективного мнения, а не «прожарки».
Алиэкспресс развивается и адаптируется, но медленно и осторожно, так как глобальные изменения, могут сломать уже сформировавшиеся пользовательские паттерны, что может привести к массовому оттоку сформировавшейся аудитории (которые давно уже привыкли к этому интерфейсу и какие-либо изменения, даже с благой целью, могут вызвать только негатив).
Разберите лучше то, что ближе нам. Православные Wildberries, Lamoda, Joom, например.)
P.S.: Извиняюсь за многобукв.
«а для кого это?»
После этого не стал даже читать.
где демонстрация вашего подходаСделай так же, что бы понять, или поймёшь когда сделаешь.
К этим ребятам подходит одна старая поговорка «сапожник без сапог». объективно: на статью потрачено кучу времени(видно качество подхода к написанию) - выхлоп удовлетворяет и подчеркивает профессионализм. Над сайтом не заморачиваются, так как сами понимают - косяки не увидит целевая аудитория.
Если вы не поняли, они не предлагают решить проблемы, они просто на них указывают, как ревизор.
ух, спасибо, как я люблю такие комментарии, именно с другой точкой зрения. Понятно что одному человеку в голову пришло, это лишь его мнение, но у монеты всегда две стороны, значит делая это были какие то другие причины, которые не озвучены, значит автор не смог из рассмотреть, разгадать. Спасибо, пишите больше!
Как бы сказать, ну.. в основном именно так дело и обстоит!
дизайнеры снова забыли прочитать бриф
Про метрики и а/б тесты прожарщики, похоже, не слышали)
Куда уж нам :) Мы еще и про исследования не слышали
Парни, вы молодцы, правильный курс взяли. Тема очень интересная для многих - «копать чужие ошибки, что бы не допустить своих».
Вы прилипли к «динозавру» в хорошем понимании, все же это первопроходец в России который один из первых привёз к нам в страну слово «Маркетплейс».
Адаптироваться Али пытается, но почему так медленно, не нам с вами гадать.
А если уж и гадаете, то интересно было бы послушать в завершении Вашей статьи - почему «все так запущенно», объективно с вашей точки зрения.
Я уверен что ни какой Юра и ни какой ветер не надует 💨 в короткие сроки юзабельности, а уж тем более - качественного перевода Али для Российского рынка.
Возьмите молодых конкурентов Али для «Прожарки»: BERU(yandex), Wildberries, goods, lamoda, Сдек, Joom - для Вас это будет более показательней.
И как говорится - «в своём глазу и бревна не заметишь»
Сайт вашей студии ооочень долго грузится(вспомнил времена модемов) + бургер в шапке не помешал бы.
Я думаю, «все так запущено», потому что нет причин что-то менять. Скорее всего, совет директоров доволен всеми интересующими их метриками.
Спасибо!
Прожаривали и Wildberries, ссылка ниже :)
К сожалению, вместо нормального сайта у нас временная заглушка. Мы под прожарками уже собрали фокус-группу, чтобы тестировать новый в ближайшее время. Хотите присоединиться?
Сори, не удосужился пролистать ваши посты. Присоединиться скорей не получится, загружен.
Ваша команда может во что то интереснее чем просто комментировать чужие интерфейсы со стороны пользователя?
О моя любимая рубрика "Ноунейм чуваки с тремя говнокейсами разбирают работу больших дядей которые делают на этом миллиарды"
зубные нити же
Ну вообще, как им подписывать. Вы видели как товары называются в переводе на русский? нить, здоровье, зубы, мужчина, женщина, каждый день, гигиена, руки
Вы так хотели бы увидеть подпись под картинкой? :)
далековато кнопка «Купить» — её не видно на первом экране.1. Возможно просто много опций у товара и кнопка купить уехала вниз
2. Возможно у Вас разрешение экрана не фуллхд
1. Ну, мы (и, наверное, не только мы) хотели бы увидеть короткое название с нормальной локализацией :)
Раз уж на то пошло, можно выводить хотя бы две строки названия, чтобы хоть как-то погрузить пользователя в контекст и не утопить его в нём.
2. Кнопка низко даже у товаров с умеренным количеством опций. На FullHD та же история :с
Ну, в принципе, понятно, что платье это платье
на фуллхд кнопка купить в первом экране
https://aliexpress.ru/item/33038273144.html
например
А тут во второй уехала
https://aliexpress.ru/item/4000452193724.html
Но наверно для опытного юзера это уже не проблема
Основная проблема Али - это куча товаров, вставленных в один. В результате ты видишь цену от 400 до 2000, за 200- товар, который почтм никакого отношения к товару за 2000 не имеет. Но уже осмысленно отсортировать товары по цене и количеству покупок невозможно.
- вечные проблемы с логином, вылетание, разлогин, повторное требование логина на ново открытых страницах
- проблемы с размером шрифтов, неадекватные
- излишне навязчивые лишние окна, вместо комментариев
- неудобные фильтры и опции коменатриев
Носки милота
Пипец сайт неудобный. Помимо дизайна, еще и авторизоваться - целое приключение
Али, а также амазон, фейсбук и еще много чего доказывают, что пофигу на ваши интерфейсы, они не главное, главное маркетинг и еще что-то другое, но не ваши типа крутые и типа современные интерфейсы.
Прожарка десктоп персии VC.RU - если чтобы свернуть комментарии справа еще можно догадаться нажать стрелочку (хотя есть риск, что это символ перехода на страницу комментов, если вы впервые тут и не знаете как устроено), то понять, что левое меню исчезает при клике по бургеру можно только тыком.
Вредит этому то, что бургер внешне не меняется, когда левое меню разложено и сложено.
От алиэкспресса у меня такое чувство, будто они хотят выжать максимум конверсии с каждого пикселя на экране. Хорошо это или нет хз, но ощущения неприятные оставляет...
сайт не может даже запомнить выбранный язык (английский). Так и норовит перебросить на RU домен. Причём у меня браузер на английском (accept-language: en,...). Не помогает.