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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редакция Heads and Hands