Дизайн-прожарка: проблемы интернет-магазина ASOS

Это всё ещё рубрика, в которой команда Mojo разбирает интерфейсы интернет-магазинов. Мы по-прежнему не просто находим ошибки, но и рекомендуем свои решения.

Прожарка «М.Видео» явно зашла, поэтому мы продолжаем. В эфире снова Женя Князев — продуктовый дизайнер Mojo. Периодически я делаю покупки на ASOS, так что сегодня будет время личных болей. Почему — читайте в новой части.

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

Люди не читают текст, а «сканируют» — пробегаются по заголовкам и легко игнорируют мелкий и неконтрастный контент. Дизайнеры ASOS выбрали специфическую гарнитуру Futura PT. 14 кегль Futura PT фактически, как 10 кегль Roboto.

Названия категорий тоже мелкие. В этот интернет-магазин завезли всё, только не кегель побольше.

Для любителей пояснять за вёрстку ASOS просто рай. Регулярно происходит вот такое.

Не понимаю, зачем вынесли маркетплейс, FAQ и язык в отдельную полосу. «Маркетплейс» повторили дважды — возможно, в основном меню пользователи его не замечали. Выглядит странно и съедает часть экрана, на основании которого пользователь формирует первое впечатление.

Кнопки «Мужской/Женский» находятся в неочевидном месте. Посетитель, который в этих местах впервые, может запутаться, где переключатель с мальчиков на девочек.

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

Мне нравится tone of voice ASOS. «Твои новые любимчики», «По фигуре? Сделано», «Утилитарное настроение» — приятный стиль, близкий ЦА.

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

В футере очень маленькие иконки, у соцсетей они в разном стиле, платёжные системы не видно вообще. Что и зачем экономили — непонятно. Сделайте в 1,5 раза больше, и уже можно будет что-то различить.

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

Минус: всё по-старому — маленький шрифт и проблемы с вёрсткой.

Местами очень слабые визуальные решения. В разделе «Комплекты — Скидка» можно было сделать иконку, а не ставить текст с прописными буквами и дефисом вместо тире. С типографикой, кстати, тоже проблемы по всему сайту.

Страница на главной по клику на логотип зачем-то обновляется — это сбивает с толку пользователей.

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

Недавно мы рассказали о распространённых поисковых запросах в eCom. ASOS их не поддерживает.

Используют горизонтальную фильтрацию — верное решение, я уже писал об этом в цикле про интернет-магазины. Ребята из «Бэймэрд» показали, что горизонтальный фильтр часто лучше сайдбара.

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

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

Мне нравятся их минималистичные баннеры, но по-прежнему беда с текстом и отступами. Выглядит недостойно бренда уровня ASOS. Правило внешнего и внутреннего, видимо, ушло к конкурентам.

В меню нет «Сравнения». Скорее всего, это связано со слабой карточкой товара, в которой проблемы с названиями разделов. Сложно сравнивать подробное текстовое поле «Обо мне» с «Обо мне» или «Информацию о товаре» с «Информацией о товаре».

В магазине лично я часто сравниваю несколько вещей одного типа по внешнему виду. Здесь же поставить пару футболок рядом даже для сопоставления фотографий получится только в «Избранном». И до этого нужно догадаться.

Будет интересно послушать мнение потенциальных покупателей в комментариях.

Я бы сделал карусель для брендов — у ASOS точно больше шести брендов, которые они хотят рекламировать.

Главная не отображает широту ассортимента. Вообще, у ASOS проблемы с позиционированием — большинству они известны только как магазин одежды.

Личный кабинет аутлайн без регистрации, и fill после авторизации — модная штука сейчас в material design. К сожалению, количество товаров смогут увидеть не все, а суммы в корзине вообще не видно без дополнительных действий.

Выпадающие элементы сделали только для корзины и личного кабинета, а «Избранное» обошли стороной.

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

Пишут, сколько критериев помечено в сортировке, но ничего не разглядеть из-за шрифта.

Нельзя очистить все фильтры сразу. Чтобы всё обнулить, нужно открывать и удалять фильтры по отдельности.

В категориях какой-то странный SEO-текст — с таким оформлением его никто не будет читать. Я бы сделал его ближе к футеру.

Внизу категории прикольная механика с просмотрами — геймификационный прогресс-бар.

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

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

Прикольная анимация добавления в «Избранное», но снять лайк уже нельзя. Придётся убирать товары вручную.

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

Скидки на тегах мелкие. С одной стороны, это делает сайт более минималистичным и чистым, с другой, цель тегов — выделяться.

Плюс: зона нажатия немного больше элемента — хорошая практика. Сделайте так везде на своём сайте.

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

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

В карточке «Добавить в корзину» поярче, есть таблица размеров с анимацией и даже отдельная функция, которая рассчитает параметры за тебя. Можно выбрать величины в дюймах, можно в сантиметрах, показывают, как снимать мерки. Я думаю, это болью и кровью выстраданная история, потому что в своё время ASOS достали вопросами и возвратами.

Хорошо, что сразу рассказывают про бесплатную доставку и политику возврата. Всё под звёздочкой — читайте, если хотите, либо разбирайтесь на месте.

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

ASOS снимает видео, чтобы показать товары в движении. Это сильнее вовлекает пользователя в покупку и повышает эмпатию. Товары унисекс показывают и на женщине, и на мужчине.

Это европейский бренд, поэтому моделей набирают разной национальности и комплекции. Мы в Mojo одобряем, советуем российскому ритейлу с молодой аудиторией приглядеться к этому решению. Новая этика не дремлет. Также ASOS делает коллекции для разных фигур.

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

Найти состав товара довольно сложно — он в самом конце раздела «Обо мне».

Алгоритмы неплохо подбирают товары в раздел «Вам также может понравиться». Карусель с индикаторами — уже хорошо.

В «Недавно просмотренных» карусель уже без индикаторов, зато можно очистить список. Никто не узнает, какие трусы вы выбирали вчера ночью.

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

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

Минус: плохо реализована кросс-навигация. Не показывают, что юзеры смотрят вместе с этим товаром, аксессуары и подходящую по стилю одежду.

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

Минималистичность дизайна и мелкий текст только ухудшают картину. Может быть, звучит смешно, но не проходит «критерий бабушки».

Я против неактивных кнопок, в принципе. Вот статья на тему от UX Collective. Найдете интерфейс, в котором серые неактивные кнопки действительно помогают — оплачу вам мобильный интернет на месяц, вы явно сидите здесь не зря.

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

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

Проблемы с отступами повсюду. Как только текст уходит в две строчки, у ASOS заканчиваются шаблоны и он показывает лапки.

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

Через 60 минут из корзины всё перемещается в «Избранное» — понятная механика. Вещи в корзине зарезервированы, бронь длится только час.

Написано всё это мелким кеглем и серым цветом так, что неопытный пользователь точно растеряется, куда делись его вещи. Помните, что иконка «Избранного» не меняется ни при каких обстоятельствах? Всё переплетено.

Минус: в корзине не упростили хедер и футер.

В «Итого» странное пустое поле доставки. Почему бы не написать «Бесплатно»? Скорее всего, ещё один баг.

Если удалить товар — ты его уже не восстановишь. Случайно убрал — ищи его заново.

Внутри корзины не указывают количество позиций и краткий список. Если список длинный — придётся скроллить туда-сюда и проверять.

Чтобы оформить заказ, нужно зарегистрироваться.

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

Ничего особенного — страна и просьба использовать только латинские буквы.

Если будешь растамаживаться по экспресс-доставке, то выяснится, что данные должны быть как в паспорте. Как это сочетается для русскоговорящих — загадка, но на таможне всем пофиг.

Спрятаны промокоды и сертификаты — это хорошо, не отвлекает пользователей. У поля с доставкой какие-то проблемы. В нём только тултип.

В чек-ауте уже указывают количество товаров, пишут про доставку, а не просто предлагают посмотреть на пустое поле.

Многовато строк для введения адреса. Неплохо было бы сделать автозаполнение.

Классно, что можно сохранять карты и адреса, хотя это на самом деле уже гигиенический минимум в 2020.

В оформлении заказа упростили хедер и футер. Гипотеза: в корзине оставили исходный вариант, потому что хотят, чтобы люди докупали товары на определенную сумму для экспресс-доставки. Как по мне, сомнительное решение — надо тестировать.

Хедер и футер в личном кабинете упрощённый, логотип Norton png-шкой — позор. «Просмотр учётной записи» — моя «любимая» страница. Просто огромный баннер на отдельном экране, why not? Хотя бы переименуйте.

В «Моих заказах» прогрессбар с этапами доставки, можно отследить перевозку — всё как надо.

Предлагают добавить профили в социальных сетях, но забыли логотип Apple.

Минутка рекламы. Мы выпускаем цикл статей про дизайн в mCommerce — полезно для маркетологов, владельцев бизнеса и дизайнеров. Третью статью неоправданно обошли вниманием, а это просто шикарный чек-лист по тому, как улучшить UX поиска в разы. Реклама закончилась, вернемся к ASOS.

Mobile First здесь и не пахнет, это просто адаптация десктопа. Наследуются все недостатки — снова проблемы с текстами и отступами, зато поставили тире (ура-ура).

«Да и зачем делать нормально?», — видимо, каждый раз думает верстальщик ASOS.

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

Элементы по-прежнему довольно мелкие. Вместо «уголков», которым NNg посвятили целую статью, используют плюсики. Плюсики чаще ассоциированы с добавлением чего-то, а не раскрытием.

Классно, что в меню всё визуализировали — можно сразу понять, что внутри категории.

Заголовки меню сливаются с карточками и содержат призывы — пользователи будут по ним кликать и не поймут, почему ничего не открывается. Кнопки «Мужское» и «Женское» реализованы так, что пользователи могут их и не найти.

Текст в меню с мобилки почти нереально прочитать, особенно, если у тебя плохое зрение.

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

В адресной книге «Добавить новый адрес» сверху, занимаемся растяжкой. Здесь «крошку» с путём к главной добавили, но вместо текста иконка. Экономить на навигационном тексте я бы точно не стал.

Классическое оформление фильтров. Можно было сделать горизонтальную карусель — она упростила бы доступ к фильтрации.

Указывают, какие критерии я выделил, и можно очистить все фильтры, в отличие от десктопа. Сортировка плохая, стандартные выпадающие списки лучше не применять, нужно делать кастомные.

Футер на мобилке девственно чистый. Мы уже писали, что так делать не стоит, и нужно добавить хотя бы контактную информацию.

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

В карточке товара уже можно смотреть фотки. Вынести видос отдельно — хорошее решение. Лучше было бы демонстрировать его на пространстве фото или продумать иную механику, чем использовать встроенный плеер браузера. Индикаторы переключения фотографий на изображении — не лучшая практика. Есть вероятность, что они сольются с изображением и их не заметят. Для карусели на мобилке заметность индикаторов важна, так как формирует в пользователе понимание «там есть что-то еще».

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

Как и в десктопной версии, не пишут выгоду в карточке товара. Всё в одну строчку — на смартфоне выглядит хуже, чем на десктопе. Кнопка «Добавить в корзину» мелкая, адаптация прямо не user friendly.

Промокоды и сертификаты переносят на отдельную страницу — неопытный пользователь рискует растеряться, можно заменить аккордеоном.Мои «любимые» табы — снова риск, что юзер их пропустит.

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

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

У ASOS есть устоявшийся стиль, визуальные решения выделяют магазин среди конкурентов. Компания близка своей ЦА и выпускает неплохой продукт — это уже полдела. Сайту ASOS уже 20 лет, он занимает 5 место в мире по посещаемости среди модных ритейлеров. Думаю, доработка дизайна с фокусом на клиентском опыте помогла бы ему продвинуться.

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

#asos #интерфейсы