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

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

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

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

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

Главная страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Найди American Express
Найди American Express

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сталкивались с проблемой сравнения товаров в интернет-магазинах?
Да
Нет

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

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

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

Выдача в Google
Выдача в Google
Вы знали, что на ASOS можно купить это?
Вы знали, что на ASOS можно купить это?

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

После авторизации
После авторизации

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

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

Фильтрация

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

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

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

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

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

Каталог и карточка товара

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Регистрация и авторизация

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

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

Оставьте пользователям возможность восстановить товар Один из наших проектов
Оставьте пользователям возможность восстановить товар Один из наших проектов

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

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

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

Loginwall — смертный грех eCommerce, сколько покупок полегло у этой преграды… Уже писал, почему так делать нельзя.

Почему пользователи бросают свои электронные корзины <p>Исследование Baymard Institute</p>
Почему пользователи бросают свои электронные корзины

Исследование Baymard Institute

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

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

Оформление заказа

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

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

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

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

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

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

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

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

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

Личный кабинет

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

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

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

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

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

Мобильная версия

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

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

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

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

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

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

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

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

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

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

Найди заголовки
Найди заголовки

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

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

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

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

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

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

Внутри категорий

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

Фильтры ASOS vs горизонтальные фильтры с каруселью в IKEA
Фильтры ASOS vs горизонтальные фильтры с каруселью в IKEA

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

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

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

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

Один из наших проектов
Один из наших проектов

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

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

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

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

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

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

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

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

Итоги

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

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

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

5555
99 комментариев

Всегда интересно смотреть, как ноунейм агентство критикует #1 мультибрендовый аппарель еком

32
Ответить

Ну по делу же, в чем проблема?

16
Ответить
Автор

Неважно, кто критикует — проблемы с UX всё те же 🤷‍♂️

12
Ответить

Одна девочка (без уточнения пола) одного ноунейм-агентства критикует #1 мультибрендовый аппарель еком.

1
Ответить

Мы заметили, что на вашем сайте мало посетителей.

Ответить

а это классика. ХЗ кто решил пропиариться, хотя при этом нихера не разбираясь в теме работы екомм. Он сделал пару покупок, его смутили мелочи и он решил "прожарить". 99 проц спецов только так и могут: обсирать или плагиатить в лоб (пример санлайт под копирку сайт тиффани взял, цвета изменил). 

+ видно же, что не для российского менталитета все сделано. 
Короче лол

нужно сделать пост прожарка прожарки 

Ответить

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

12
Ответить