UX-патруль, выпуск восьмой: Ozon

Разбор интерфейсов маркетплейса Ozon.

В предыдущих выпусках патруля были рассмотрены: YouTube, FL.ru, «ВКонтакте», интернет-магазины одежды, электронные почтовые службы, vc.ru, «Тинькофф Бизнес».

Предисловие, для тех, кто не читал предыдущие выпуски патруля: эти статьи — описание личного пользовательского опыта. Без метрик, исследований, т.к доступа к ним у нас нет. Просто обратная связь и гипотезы по интерфейсам, которыми регулярно пользуемся.

Скролл фото в отзывах

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

Но сейчас Ozon хитро решил эту проблему и теперь в галерее у отзывов при попытке свайпа влево/вправо фото листаются вверх/вниз :)

Выглядит как "костыль", но хотя бы не блокирует привычный паттерн — это уже гуд, но лучше сделать логику галерей одинаковой.

Фото в отзывах на сайте

На десктопной версии фото в отзывах тоже имеют проблему, но уже другую.

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

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

Можно показать миниатюры слева или внизу в формате карусели, как это сделано в основной галерее (и можно их увеличить):

UX-патруль, выпуск восьмой: Ozon

Или сделать как в google-картинках, когда выбранный отзыв справа, а миниатюры слева и при переключении всё остается на месте:

Пример поведения в Google-картинках.

Вход в каталог

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

Точка входа в каталог — вон та иконочка слева.
Точка входа в каталог — вон та иконочка слева.

При этом в tabbar вынесены отдельные точки входа в Ozon Fresh и в раздел с одеждой. Можно сделать единую точку входа в каталог в tabbar, а внутри у него сделать акцент на Fresh и Одежду, если сейчас нужно увеличить внимание пользователей к этим разделам.

Доставка «вместе»

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

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

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

Для того чтобы решить эту проблему, достаточно при выборе «вместе» сделать единый выбор даты вверху:

UX-патруль, выпуск восьмой: Ozon

Небольшие замечания

Тут кратко описали другие проблемные места.

Мыльные баннеры. Многие баннеры на сайте будто загружены не в том разрешении из-за чего картинка мылится и становится некачественной.

UX-патруль, выпуск восьмой: Ozon

Скролл в историях. На главной странице в блоке «Истории» применяется стандартный браузерный скролл, который выглядит в таком блоке неуместно.

UX-патруль, выпуск восьмой: Ozon

Ну и о наличии этих историй узнали только в процессе аудита. Более привычный и понятный паттерн — это расположение вверху страницы.

Например, как в ЛК. Там и скролла нет, работает как карусель и расположение логичное.

UX-патруль, выпуск восьмой: Ozon

Рекомендуем также. Когда находишься в карточке товара и хочешь найти похожие, т.к. например в этом не подошел размер — обращаешься к блоку «Рекомендуем также». Но сейчас в этом блоке всего два прокручивания (12 товаров). А чтобы посмотреть другие похожие товары, необходимо пролистать всё описание, отзывы и другие блоки.

При этом на Wildberries, например, этих прокручиваний 11 (71 товар) и есть точка входа ко всем похожим товарам — это позволяет с большей вероятностью найти нужный продукт в рамках данного блока.

UX-патруль, выпуск восьмой: Ozon

Эта же проблема остро проявляется, когда товар был в избранном и закончился:

Вероятность найти нужный товар при таком количестве значительно меньше. 

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

Странное выравнивание. В этих блоках визуально будто поехала верстка — слово «Отели» не выравнено по центру, а как-то прижато к верхнему краю. Плюс дважды написано «Отели» и «Отель» на каждой карточке.

UX-патруль, выпуск восьмой: Ozon

При этом похожие баннеры в другом блоке имеют выравнивание по центру, но другой шрифт и всё написано заглавными:

UX-патруль, выпуск восьмой: Ozon

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

Хотя аналогичные элементы на других страницах имеют эффект наведения. 

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

UX-патруль, выпуск восьмой: Ozon

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

Нужно не закрывать меню при клике колёсиком. 

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

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

Многие замечания из предыдущих патрулей уже отработаны — это безумно круто, что мы вместе с вами помогаем продуктам стать удобнее <3

Предлагайте другие ресурсы для патруля или просто приходите к нам за интерфейсами :)

Всем удобства)

23
11 комментариев

Ох уж эти юикс разборы без знания метрик и целей продукта.

8
Ответить

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

3
Ответить

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

Ответить

Ребят, вот у озона все заебись в целом, самый удобо-юзабельный маркетплейс, пишу как обычный юзер🤘

2
Ответить

согласен, нравится на много больше чем ВБ

3
Ответить

Разберите магазин Леонардо, пожалуйста.

2
Ответить

Кто-то ищет товары на Озон через каталог?🤣
Озон фреш вынесен, потому, что в основном там привычные категории. Продуктов питания и продукты удобнее искать через каталог

1
Ответить