Ситуация. Ритейлер запустил приложение и через год заметил, что клиенты стали чаще отменять заказы. Выяснилось, что пользователи забывали добавить какой-то продукт в корзину уже после того, как оформили заказ. Чтобы дозаказать один товар, им нужно было собирать всю корзину заново и тратить время на вторую доставку.
Тогда компания провела аудит, нашла проблему и добавила в приложение функцию объединения заказов по одному адресу. В итоге число отмененных доставок снизилось на 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 помогаем бизнесу найти барьеры, которые возникают у пользователей и предлагаем идеи для развития продукта. Расскажите нам о вашей задаче через форму на сайте, а наши эксперты подскажут, как ее решить.
