{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}

У Ozon сложный поиск и навигация. Как обнаружить эти проблемы с помощью UX-аудита

Разбираем ошибки юзабилити в приложении Ozon — статья редакции Heads and Hands.

Это блог студии Heads and Hands

Мы разрабатываем цифровые экосистемы и супераппы. Рассказываем про пользовательский опыт и помогаем бизнесу стать лидером рынка.

👉🏻 Вступайте, чтобы быть в курсе

👉🏻 Заглядывайте к нам в Telegram

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

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

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

Для анализа мы выбрали Ozon — популярный маркетплейс, которым пользуется 30 млн человек, но недолюбливают за неудобный интерфейс. Мы изучили юзабилити и показали, как Ozon мог бы увеличить лояльность пользователей с помощью небольших изменений в интерфейсе.

Как проводили опрос и оценивали критичность UX-ошибок

Мы выделили два основных пользовательских сценария:

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

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

Затем опросили 15 наших сотрудников, которые регулярно заказывают товары на Ozon. Они рассказали нам о проблемах, которые мешают во время шопинга. Мы проанализировали ответы и оценили их критичность по трем уровням:

Ниже расскажем, с какими проблемами пользователи столкнулись на пути к покупке. И предложим, как их можно исправить.

Проблема № 1. Визуальный шум на главном экране

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

Критичность. Низкая.

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

Проблема №2. Непонятные иконки в панели навигации

Что это значит. Пользователи не понимают, что лицо младенца — это «Профиль», яблоко — раздел Fresh, а «%» — раздел с акциями и скидками. Также в тапбаре нет кнопки избранного: клиенту придется долго искать, где находятся отложенные товары.

Критичность. Средняя.

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

Второй вариант: добавить к иконкам подписи. Например, у сервиса Ozon Fresh иконки подписаны. Также у Ozon Fresh в тапбаре есть избранное — удобно просматривать отложенные товары и покупать их в одно нажатие.

Проблема № 3. По поиску и иконкам сложно попасть пальцем

Что это значит. Иконки слишком маленькие, поэтому пользователю сложно на них нажимать. А строка поиска находится почти вплотную к шторке: нужно приложить усилие, чтобы попасть пальцем в поле ввода.

Критичность. Средняя.

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

Например, в приложении Спортмастера мы сместили строку поиска ближе к середине — так по ней проще попасть.

В случае с иконками нужно отталкиваться от минимальных размеров, доступных для клика. Apple в Human Interface Guidelines рекомендует создавать иконки размером не менее 44×44 px, а Google в Material Design — 48×48 px.

Подробнее о законе Фиттса рассказали в статье «Как применять закон Фиттса в дизайне интерфейсов».

Проблема №4. Поиск предлагает нерелевантные товары

Что это значит. По данным Baymard Institute, 45% сервисов не перенаправляют пользователей в правильные категории. Например, при запросе «стакан» Ozon отправляет пользователя в общую категорию «Дом и сад», а вместо стаканов показывает свечи. Хотя в приложении есть более узкая категория — «Посуда».

Критичность. Высокая.

Как исправить. Детализировать категории и отображать первыми в выдаче те товары, которые наиболее соответствуют пользовательскому запросу. Например, Яндекс Маркет при запросе «стакан» сразу показывает пользователю релевантные товары из категории «Бокалы и Стаканы».

Проблема №5. Две кнопки корзины

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

Критичность. Высокая.

Как исправить. Оставить только одну кнопку — добавить товар в корзину. А уже в корзине предлагать разные варианты доставки: за 30 минут или в течении дня. Например, М.Видео показывает условия доставки в процессе оформления заказа.

Проблема №6. В профиле сложно найти нужный раздел

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

Критичность. Средняя.

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

Проблема №7. Нельзя исправить адрес

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

Критичность. Низкая.

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

Проблема №8. Не все товары можно добавить в список сравнения

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

Критичность. Высокая.

Как исправить. Разрешить пользователям сравнивать разные категории товаров. Добавить в раздел всплывающие подсказки и объяснить, как пользоваться сервисом.

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

Мы в Heads and Hands помогаем бизнесу найти барьеры, которые возникают у пользователей и предлагаем идеи для развития продукта. Расскажите нам о вашей задаче через форму на сайте, а наши эксперты подскажут, как ее решить.

Спасибо за внимание!

0
3 комментария
Михаил Иванович

Мне кажется, когда Озон копировал Амазон, то зачем-то и все эти проблемы с интерфейсом скопировал. На оригинальном сайте и приложении аналогичные трудности с UI

Ответить
Развернуть ветку
Алексей Кошкин

Может кто знает, почему когда что-то лплатишь на озоне, тут же в поиске появляется тот же товар но по цене ниже. Это так задумано или только в моей временной петле так?

Ответить
Развернуть ветку
Artyom Pismensky

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

Ответить
Развернуть ветку
0 комментариев
Раскрывать всегда