Дизайн-антипрожарка: какие функции стоит перенять у 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», если было полезно.
Добрый день. Я из Ozon. Спасибо большое за такой подробный анализ нашего сайта и проложения. Давайте по порядку:
- В разделе с меню мы обязательно задействуем возможность с онховерами, если будет такая потребность.
- Часть предложений в разделе "Корзина" мы уже проверили в бою, другие нет, но обязательно их задействуем!
- Так как на нашем сайте несколько миллионов позиций - разделов тоже не мало. Мы продолжаем по сей день работать над оптимизацией в фильтрации этой огромной базы данных на сайте. Будем честны, - это задача не из лёгких, но мы ищем лучший путь для решения этой задачи.
- Насчёт кнопки с выбором постамат - согласны с вами. Она действительно не самая удобная. Мы поправим её обязательно!
- На нашем сайте вы можете сделать заказ любому человеку в любую доступную нам точку земли. Но эта задумка, как вы заметили, не развита достаточно. Над её реализацией будем думать ;)
- О снижении цены раньше можно было узнать нажав специальную кнопку. Сейчас же мы сообщаем о таких изменениях, если товар добавлен в Избранное. Уведомления об этом сейчас в работе.
- А фильтрация по категориям в избранном и списках есть в том же самом привычном месте. Поиск же надеемся реализовать в ближайшем будущем, он будет полезен для наших пользователей.
- Насчёт списков товаров всё просто: как бы не было грустно, но, по нашим наблюдениям, неавторизированные пользователи теряют их достаточно легко. Именно поэтому мы стимулируем к созданию личного кабинета в приложении или на сайте.
- А вот тултип у нас сам не скрывается, только пользователь может его закрыть.
“Наверху фиксируется блок с информацией, какой товар ты изучаешь. Захочешь добавить в корзину — не придется скролить. Жаль, что без цены.” - тут отдельное спасибо. Взяли на заметку 👍
Спасибо, что прислушались :D Не ожидали.
Комментарий недоступен
Спасибо : D Нам настолько нечем заняться, что мы наняли специального человека, который собирает инфу и пишет статьи.
Егор, ну зачем так. Под твоими статьями ведь можно так же написать, но мы этого не делаем
Комментарий недоступен
Привет! Спасибо за статью, очень круто и интересно!
Вопрос - в одной из статей цикла про интернет-магазин вы писали про табы в карточке товара.
Скажите, какая альтернатива на ваш взгляд лучше? Просто как верно заметили в комментариях к той статье - не всегда удобно разворачивать полотно. В том же озоне как раз таки полотно, и это крайне неудобно когда чтобы найти характеристики или описание, нужно скролить 4 экрана.
Привет, Игорь!
Спасибо, что читаете и цените 🖤
Нам нравится полотно, где бóльшая часть контента свернута. Так сохраняется более типичный для пользователя паттерн сканирования и меньше вероятность того, что раздел не заметят.
Следующее решение в топе — показывать разделы на первом экране коротко, а полную инфу уводить в табы. Это решение сейчас популярно среди магазинов техники вроде Связного и М.Видео. Им нужно было малой кровью решать проблему табов.
Лайфхак — дублировать табы сверху и снизу. Такая избыточность позволит снизить вероятность их пропустить для пользователя.
С мобилкой тоже есть специфика. Если интересно — подробный рассказ в статье 👇
Правильно я понял что под полотном подразумевается вот это?
Это полотно текста + табы с описанием, характеристикой, упаковкой и т.д.
Под полотном в своем сообщении подразумевалось последовательное представление блоков, как у Ozon. У Wildberries тоже блоки идут один за одним.
Как разбираться с полотнами текста и делать их читабельными я тоже писал в первой статье по интернет-магазинам. Еще об этом регулярно пишет Ильяхов.
Немного промахнулись с веткой). Я просто как раз прочитал ваши циклы статей и не могу понять с табами - не могу найти у вас в статье идеального примера. То что я скинул это я так понял аккордеон, как рекомендует Baymard.
Комментарий недоступен
Нравятся ваши статьи, вот только у вас сайт студии какой-то не очень удобный(хоть и симпатичный). Юзабилити как по мне страдает чуток. Но это с ПК, на мобиле на много приятнее выглядит. :)
Юзабилити на нашем сайте страдает совсем не чуток. Ошибки молодости 😂Мы в процессе редизайна :)
Жалко что на такое же подробное описание мобильной версии у вас уже не хватило сил.
Не то, что сил не хватило — просто старались сделать покороче. Длинные статьи не дочитывают :с
И «мобилку» Ozon хвалить сложнее.
Там по сути одна проблема - интерфейс визуально перегружен лишней информацией. При этом весь ребрендинг прошёл зря - стилистика вообще не выдерживается. Такое ощущение, что одни его сделали для галочки, а другие вообще не поняли, что к чему произошло. Всё очень неаккуратно(
"Минус: некоторые элементы выглядят кликабельными, но не являются таковыми. Например, цветовые свотчи и размеры." - вроде в какой-то версии они были кликабельными или все зависит от списка товаров в категории, зачастую вижу разный вывод
Протестили разные категории товаров — сейчас везде некликабельные. Возможно, это временно 🤷♂️