Дизайн
Mojo

Дизайн-антипрожарка: какие функции стоит перенять у Ozon

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

Меня зовут Женя Князев, и я — продуктовый дизайнер. С моим участием вышли «Прожарки» «М.Видео», ASOS и Wildberries.

Мы в Mojo вместе отвечаем на комментарии и часто ставим в пример Ozon, почему — читайте ниже.

Ozon — старейший российский интернет-магазин, основан аж в 1998 году. Банковскими картами тогда и не пахло, поэтому пользователи бронировали товар на сайте и ехали в магазин выкупать его.

Немного древности в вашу ленту

К слову, так маркетплейс выглядел в 2017 году. Хорошо, что после 20 лет подражания Amazon ребята всё-таки одумались.

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

Разбор полётов по традиции начинаем с десктопа.

Ozon подписывает иконки. Всё по канонам доступного дизайна, чтобы даже неопытный пользователь понимал, что к чему.

Содержимое «Личного кабинета» и «Заказов» показывают при наведении — тоже хорошо, но онховеров нет у «Избранного» и «Корзины».

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

Авторизация по номеру телефона без регистрации с кучей полей.

Главная справляется со своими задачами: информирует посетителя о широте ассортимента, рекламирует спонсорские продукты и услуги самого маркетплейса.

При этом за счёт комбинирования разных форматов изображений, домашняя страница выглядит не слишком заваленной.

Каталог

Категоризировать товары — это самое трудное в маркетплейсах. У Ozon это неплохо получается. В каталоге нет каких-то абстрактных разделов вроде «бакалеи» или «здорового выбора». Всё написано человеческим языком.

Иконки упрощают сканирование, но здесь цель — выделить дополнительные продукты Ozon.

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

Хорошая фильтрация:

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

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

Слайдер дополнен полями ввода и не реагирует на случайные клики в середину. Отфильтровать цену можно только бегунками — всё по лучшим практикам.

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

Поиск

Моя любимая часть в этом интернет-магазине.

Во-первых, есть поиск по категориям. Ещё бы добавить его в «мобилку» — и было бы слишком хорошо.

Во-вторых, Ozon умеет распознавать проблемные запросы. Вводим «Много мух», и он показывает средства для борьбы с насекомыми.

Ошибки в запросах тоже распознаёт и исправляет, словом, кайф.

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

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

Если поиск автоматически определил категорию товара — в фильтрах показывают её характерные особенности.

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

Карточка товара

В карточке товара можно переключать фотографии.

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

При этом Ozon прямо в карточке умудряется довольно неплохо рекламировать себя. Говорят, у нас и склады есть, и доставка, ребята, давайте дружить.

Маркетплейс хорошо подаёт рекламу. Её много, но она не давит. Спонсорские товары оформлены так, что человек, скорее всего, решит, что это самые популярные продукты в категории.

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

Можно добавить несколько позиций прямо из карточки, не переходя в корзину. Для товаров типа чипсов это must have функция, которой пренебрегают.

Пользовательский контент в карточке прямо под описанием товара. Социальное доказательство подтолкнёт клиентов к покупке. Плюс люди сфотографируют продукт во всех вариациях лучше профессионала по техзаданию.

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

Идеи для внедрения — товар можно подарить, можно узнать о снижении цены.

Характеристики в описании товара категоризированы и хорошо оформлены.

Наверху фиксируется блок с информацией, какой товар ты изучаешь. Захочешь добавить в корзину — не придется скролить. Жаль, что без цены.

Есть статистика по отзывам, но она некликабельная — нельзя отфильтровать именно ту оценку, которая меня интересует. Зато есть сортировка отзывов.

Там, где отзывов больше тысячи, Ozon сам систематизирует данные.

Для премиум-товаров доступны консультации по аудио и видео. Правда консультанты работают по расписанию, которое нигде не опубликовано.

В карточке пример «полезного» FOMO (fear of missing out — страх упустить). Не говорят: «Купи, потому что этот товар просматривают ещё 10 тысяч человек», а информируют об остатках.

Таблица размеров рядом с выбором, чтобы максимально упростить подбор

В сравнении можно выбрать ключевые характеристики — они выводятся наверх. Можно даже сравнивать товары в кросс-категории. Сравнение только по отличающимся характеристикам уже гигиенический минимум.

Минус: при добавлении в сравнение появляется тултип. Если не успеть кликнуть, то страницу почти невозможно найти.

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

В корзине у количества товара выпадающие списки. Если вариантов много, придётся долго скроллить. Решение с «+» и «−» был бы удобнее.

Нужное количество можно ввести, но только если доступно больше 10 позиций. Альтернатив в этом случае тоже нет, только ввод.

Классно, что пишут, сколько товара осталось.

Выпадающий список меняется на поле ввода, если выбрать в выпадающем списке «10+»

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

Упрощены хедер и футер — тоже хорошо, но лучше упрощать ещё на этапе корзины.

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

Начну всё же с позитивных моментов, которые не пересекаются с десктопом:

Избранное в виде дашборда — отличное решение для смартфона. Наконец-то можно легко попасть в сравнение. С ноутбука мне это удалось с трудом.

Можно фильтровать пункты выдачи по типу, услугам и способу доставки.

Плохо: fab-кнопка крестика не даёт эффективно пользоваться навигацией на этой страницу. Я хочу закрыть окно, и возникает конфликт.

Данные из SMS автоматически подтягиваются. Можно вбить код для авторизации одним кликом.

Классный онбординг. Хотя бы в «мобилке» становится ясно, куда спрятали сравнение.

Теперь к минусам.

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

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

При этом с Safari навигация не дружит вообще — кнопку «Посмотреть» не видно. Таб бар тоже конфликтует с iOS.

В мобильной корзине уже нет выпадающих списков, но не хватает «+» и «−». Это решение удобнее, чем дропдаун или ручной ввод при количестве до 6-7 товаров.

Выпадающие списки в сортировках не кастомизированные.

Крутите барабан, если хотите добраться до нужного пункта. Но сначала догадайтесь, что он там вообще есть

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

Вывод

Выглядит так, будто я вымученно старался хвалить Ozon, но получилось не очень. Нужно честно признаться: когда начинаешь детально что-то рассматривать, минусы всё равно бросаются в глаза.

В общем и целом идеальных интернет-магазинов не бывает. Ozon явно беспокоится об обеспечении качественного пользовательского опыта и это похвально.

Пишите в комментариях, UX каких сайтов нравится лично вам. Возможно, мы вместе сможем пополнить рубрику позитивными примерами :)

Подписывайтесь на Mojo и не забывайте про «+1», если было полезно.

{ "author_name": "Mojo", "author_type": "self", "tags": [], "comments": 19, "likes": 59, "favorites": 181, "is_advertisement": false, "subsite_label": "design", "id": 201839, "is_wide": true, "is_ugc": true, "date": "Fri, 29 Jan 2021 13:00:26 +0300", "is_special": false }
0
19 комментариев
Популярные
По порядку
Написать комментарий...
5

Добрый день. Я из Ozon. Спасибо большое за такой подробный анализ нашего сайта и проложения. Давайте по порядку:

- В разделе с меню мы обязательно задействуем возможность с онховерами, если будет такая потребность.
- Часть предложений в разделе "Корзина" мы уже проверили в бою, другие нет, но обязательно их задействуем!
- Так как на нашем сайте несколько миллионов позиций - разделов тоже не мало. Мы продолжаем по сей день работать над оптимизацией в фильтрации этой огромной базы данных на сайте. Будем честны, - это задача не из лёгких, но мы ищем лучший путь для решения этой задачи.
- Насчёт кнопки с выбором постамат - согласны с вами. Она действительно не самая удобная. Мы поправим её обязательно!
- На нашем сайте вы можете сделать заказ любому человеку в любую доступную нам точку земли. Но эта задумка, как вы заметили, не развита достаточно. Над её реализацией будем думать ;)
- О снижении цены раньше можно было узнать нажав специальную кнопку. Сейчас же мы сообщаем о таких изменениях, если товар добавлен в Избранное. Уведомления об этом сейчас в работе.
- А фильтрация по категориям в избранном и списках есть в том же самом привычном месте. Поиск же надеемся реализовать в ближайшем будущем, он будет полезен для наших пользователей.
- Насчёт списков товаров всё просто: как бы не было грустно, но, по нашим наблюдениям, неавторизированные пользователи теряют их достаточно легко. Именно поэтому мы стимулируем к созданию личного кабинета в приложении или на сайте.
- А вот тултип у нас сам не скрывается, только пользователь может его закрыть.

“Наверху фиксируется блок с информацией, какой товар ты изучаешь. Захочешь добавить в корзину — не придется скролить. Жаль, что без цены.” - тут отдельное спасибо. Взяли на заметку 👍

Ответить
4

Спасибо, что прислушались :D Не ожидали.

Ответить
1

Привет! Спасибо за статью, очень круто и интересно!
Вопрос - в одной из статей цикла про интернет-магазин вы писали про табы в карточке товара.
Скажите, какая альтернатива на ваш взгляд лучше? Просто как верно заметили в комментариях к той статье - не всегда удобно разворачивать полотно. В том же озоне как раз таки полотно, и это крайне неудобно когда чтобы найти характеристики или описание, нужно скролить 4 экрана.

Ответить
3

Привет, Игорь!

Спасибо, что читаете и цените 🖤

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

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

Лайфхак — дублировать табы сверху и снизу. Такая избыточность позволит снизить вероятность их пропустить для пользователя.

С мобилкой тоже есть специфика. Если интересно — подробный рассказ в статье 👇

Ответить
0

Правильно я понял что под полотном подразумевается вот это?

Ответить
–7

Все круто, но пиздец, вам там заняться нечем. Тасков подкинуть? 😁

Ответить
6

Спасибо : D Нам настолько нечем заняться, что мы наняли специального человека, который собирает инфу и пишет статьи.

Ответить
0

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

Ответить
0

Я же сказал статья крутая ) Мега крутая.  Но реально, чтобы написать подобное, это надо очень много свободного времени.  Поэтому шутка об этом )

Ответить
1

Это полотно текста + табы с описанием, характеристикой, упаковкой и т.д.

Под полотном в своем сообщении подразумевалось последовательное представление блоков, как у Ozon. У Wildberries тоже блоки идут один за одним.

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

Ответить
0

Немного промахнулись с веткой). Я просто как раз прочитал ваши циклы статей и не могу понять с табами - не могу найти у вас в статье идеального примера. То что я скинул это я так понял аккордеон, как рекомендует Baymard.
 

Ответить
0

Если без шуток, то на будущее подобный материал, на мой взгляд лучше дублировать или создавать в видеоформате.  Будет воообще огонь 🔥

Ответить
0

Нравятся ваши статьи, вот только у вас сайт студии какой-то не очень удобный(хоть и симпатичный). Юзабилити как по мне страдает чуток. Но это с ПК, на мобиле на много приятнее выглядит. :)

Ответить
2

Юзабилити на нашем сайте страдает совсем не чуток. Ошибки молодости 😂Мы в процессе редизайна :)

Ответить
0

Жалко что на такое же подробное описание мобильной версии у вас уже не хватило сил.

Ответить
0

Не то, что сил не хватило — просто старались сделать покороче. Длинные статьи не дочитывают :с

И «мобилку» Ozon хвалить сложнее.

Ответить
0

Там по сути одна проблема - интерфейс визуально перегружен лишней информацией. При этом весь ребрендинг прошёл зря - стилистика вообще не выдерживается. Такое ощущение, что одни его сделали для галочки, а другие вообще не поняли, что к чему произошло. Всё очень неаккуратно(

Ответить
–1

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

Ответить
0

Протестили разные категории товаров — сейчас везде некликабельные. Возможно,  это временно 🤷‍♂️

Ответить

Комментарии

null