Дизайн-антипрожарка: какие функции стоит перенять у 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 позиций. Альтернатив в этом случае тоже нет, только ввод.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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