Ситуация. Ритейлер запустил приложение и через год заметил, что клиенты стали чаще отменять заказы. Выяснилось, что пользователи забывали добавить какой-то продукт в корзину уже после того, как оформили заказ. Чтобы дозаказать один товар, им нужно было собирать всю корзину заново и тратить время на вторую доставку.
Тогда компания провела аудит, нашла проблему и добавила в приложение функцию объединения заказов по одному адресу. В итоге число отмененных доставок снизилось на 10%, а ритейлер сэкономил 10 млн рублей за месяц.
Это кейс ВкусВилл. А проведенный аудит — один из способов улучшить юзабилити приложения. В этой статье расскажем, как анализировать пользовательский опыт, находить проблемы и исправлять их, чтобы не терять клиентов.
Для анализа мы выбрали Ozon — популярный маркетплейс, которым пользуется 30 млн человек, но недолюбливают за неудобный интерфейс. Мы изучили юзабилити и показали, как Ozon мог бы увеличить лояльность пользователей с помощью небольших изменений в интерфейсе.
Как проводили опрос и оценивали критичность UX-ошибок
Мы выделили два основных пользовательских сценария:
Первый сценарий — пользователь знает, что хочет купить. Он заказывает привычные товары из избранного или ищет конкретный товар, добавляет в корзину и оплачивает.
Второй сценарий — пользователь не знает, что ему нужно: он просматривает каталог, читает отзывы, сравнивает товары у разных поставщиков, выбирает и покупает.
Затем опросили 15 наших сотрудников, которые регулярно заказывают товары на Ozon. Они рассказали нам о проблемах, которые мешают во время шопинга. Мы проанализировали ответы и оценили их критичность по трем уровням:
![Уровень критичности Уровень критичности UX-проблем](https://handh.ru/wp-content/uploads/2023/04/Уровень-критичности-UX-проблем-3-1024x646.png)
Ниже расскажем, с какими проблемами пользователи столкнулись на пути к покупке. И предложим, как их можно исправить.
Проблема № 1. Визуальный шум на главном экране
Что это значит. Карточки товаров и категории перемешаны и находятся слишком близко друг к другу. Иконки категорий слишком мелкие, а товарные карточки — крупные и перегруженные. В итоге пользователю трудно сориентироваться.
![Визуальный шум Визуальный шум на главном экране](https://handh.ru/wp-content/uploads/2023/04/Визуальный-шум-на-главном-экране-1-1024x646.png)
Критичность. Низкая.
Как исправить. Объединить товары в акцентные блоки и увеличить расстояние между ними. Например, в приложении Ситилинк мы разделили товары на главной по категориям. Так пользователь сможет легко сохранять внимание и находить нужный ему раздел в большом ассортименте.
![Ситилинк Ситилинк объединил товары в акцентные блоки](https://handh.ru/wp-content/uploads/2023/04/Ситилинк-объединил-товары-в-акцентные-блоки-1-1024x646.png)
Проблема №2. Непонятные иконки в панели навигации
Что это значит. Пользователи не понимают, что лицо младенца — это «Профиль», яблоко — раздел Fresh, а «%» — раздел с акциями и скидками. Также в тапбаре нет кнопки избранного: клиенту придется долго искать, где находятся отложенные товары.
![Неочевидные иконки Неочевидные иконки в тапбаре](https://handh.ru/wp-content/uploads/2023/04/Непонятные-иконки-в-тапбаре-2-1024x646.png)
Критичность. Средняя.
Как исправить. Первый вариант: оставить в тапбаре ключевые разделы и использовать изображения, которые легко считываются. Например, lamoda добавила в панель навигации каталог, корзину, избранное и профиль.
Второй вариант: добавить к иконкам подписи. Например, у сервиса Ozon Fresh иконки подписаны. Также у Ozon Fresh в тапбаре есть избранное — удобно просматривать отложенные товары и покупать их в одно нажатие.
![](https://handh.ru/wp-content/uploads/2023/04/Панель-навигации-у-Ozon-Fresh-и-lamoda-1-1024x646.png)
Проблема № 3. По поиску и иконкам сложно попасть пальцем
Что это значит. Иконки слишком маленькие, поэтому пользователю сложно на них нажимать. А строка поиска находится почти вплотную к шторке: нужно приложить усилие, чтобы попасть пальцем в поле ввода.
Критичность. Средняя.
![Поиск и иконки По поиску и иконкам сложно попасть пальцем](https://handh.ru/wp-content/uploads/2023/04/Непонятные-иконки-в-тапбаре-1-2-1024x646.png)
Как исправить. Использовать Закон Фиттса и сместить строку поиска чуть ниже, чтобы пользователь мог дотянуться до нее большим пальцем правой руки.
![Взаимодействие с экраном Как пользователь взаимодействует с экраном](https://handh.ru/wp-content/uploads/2023/04/Как-пользователь-взаимодействует-с-экраном-2-1024x646.png)
Например, в приложении Спортмастера мы сместили строку поиска ближе к середине — так по ней проще попасть.
![Спортмастер Поиск и каталог в приложении Спортмастер](https://handh.ru/wp-content/uploads/2023/04/Поиск-и-каталог-в-приложении-Спортмастер-1-1024x646.png)
В случае с иконками нужно отталкиваться от минимальных размеров, доступных для клика. Apple в Human Interface Guidelines рекомендует создавать иконки размером не менее 44×44 px, а Google в Material Design — 48×48 px.
Подробнее о законе Фиттса рассказали в статье «Как применять закон Фиттса в дизайне интерфейсов».
Проблема №4. Поиск предлагает нерелевантные товары
Что это значит. По данным Baymard Institute, 45% сервисов не перенаправляют пользователей в правильные категории. Например, при запросе «стакан» Ozon отправляет пользователя в общую категорию «Дом и сад», а вместо стаканов показывает свечи. Хотя в приложении есть более узкая категория — «Посуда».
![Поисковая выдача Некорректная поисковая выдача](https://handh.ru/wp-content/uploads/2023/04/Некорректная-поисковая-выдача-2-1024x646.png)
Критичность. Высокая.
Как исправить. Детализировать категории и отображать первыми в выдаче те товары, которые наиболее соответствуют пользовательскому запросу. Например, Яндекс Маркет при запросе «стакан» сразу показывает пользователю релевантные товары из категории «Бокалы и Стаканы».
![Яндекс Маркет Яндекс Маркет перенаправляет пользователя в нужную категорию](https://handh.ru/wp-content/uploads/2023/04/Яндекс-Маркет-сразу-перенаправляет-пользователя-в-правильную-категорию-1-1024x646.png)
Проблема №5. Две кнопки корзины
Что это значит. У некоторых товаров в карточке две кнопки корзины — одна предлагает доставку за 30 минут, другая — сегодня. Из-за того, что кнопки расположены слишком близко, пользователю легко их перепутать. При этом он не может поменять способ доставки в корзине, для этого нужно снова вернуться к карточке товара.
![Корзина Две кнопки корзины](https://handh.ru/wp-content/uploads/2023/04/Две-кнопки
-корзины-1-1024x646.png)
Критичность. Высокая.
Как исправить. Оставить только одну кнопку — добавить товар в корзину. А уже в корзине предлагать разные варианты доставки: за 30 минут или в течении дня. Например, М.Видео показывает условия доставки в процессе оформления заказа.
![М.Видео М.Видео рассказывает о вариантах доставки в корзине](https://handh.ru/wp-content/uploads/2023/04/М.Видео-рассказывает
-о-вариантах-доставки-
в-корзине-3-1024x646.png)
Проблема №6. В профиле сложно найти нужный раздел
Что это значит. Пользователь заходит в профиль, чтобы проверить статус заказа, написать в техподдержку или вернуть товар. Но первое, что он видит — это разделы «Билеты, туры и отели» и «Баллы за отзывы». Чтобы найти нужный раздел, ему приходится долго скроллить вниз.
Критичность. Средняя.
![Отслеживание статусов
заказов В профиле неудобно
отслеживать статусы
заказов](https://handh.ru/wp-content/uploads/2023/04/В-профиле-неудобно-
отслеживать-статусы
-заказов-3-1024x646.png)
Как исправить. Вынести самые частотные функции в начало экрана и добавить к ним иконки, чтобы пользователь мог быстро перейти к решению своих задач.
![Яндекс Маркет Яндекс Маркет сделал заметные разделы](https://handh.ru/wp-content/uploads/2023/04/Яндекс-Маркет-сделал
-заметные-разделы-2-1024x646.png)
Проблема №7. Нельзя исправить адрес
Что это значит. Если пользователь оформил доставку курьером и забыл указать номер квартиры, то он уже не может исправить адрес. Клиенту приходится писать в техподдержку, где ему советуют самому связаться с курьером.
Критичность. Низкая.
![Нельзя изменить адрес Нельзя изменить адрес доставки](https://handh.ru/wp-content/uploads/2023/04/Нельзя-изменить
-адрес-доставки-1-1024x646.png)
Как исправить. Если пользователь не указал квартиру, выделять пустое поле и предлагать его заполнить. Например, приложение ВкусВилл на этапе оформления заказа предупреждает пользователя, что он забыл указать номер квартиры.
![ВкусВилл ВкусВилл подсказывает, что нужно уточнить адрес](https://handh.ru/wp-content/uploads/2023/04/ВкусВилл-
подсказывает
что-нужно-
уточнить-адрес-1-1024x646.png)
Проблема №8. Не все товары можно добавить в список сравнения
Что это значит. Пользователь может добавить в список сравнения только ограниченные категории товаров. Например, он может сравнить смартфоны, а кроссовки — нет. Кроме того, кнопка сравнения визуально спрятана — ее сложно найти в карточке товара.
![Сравнение товаров у Ozon Сервис сравнения товаров у Ozon](https://handh.ru/wp-content/uploads/2023/04/Сервис-сравнения-
товаров-у-Ozon-2-1024x646.png)
Критичность. Высокая.
Как исправить. Разрешить пользователям сравнивать разные категории товаров. Добавить в раздел всплывающие подсказки и объяснить, как пользоваться сервисом.
Например, Яндекс Маркет сделал кнопку сравнения крупной и заметной. Сервис предлагает автоматически добавить похожие товары — пользователю не нужно тратить время и искать их.
![Яндекс Маркет Сервис сравнения товаров у Яндекс Маркета](https://handh.ru/wp-content/uploads/2023/04/Сервис-сравнения-товаров
-у-Яндекс-Маркета-1-1024x646.png)
Мы в Heads and Hands помогаем бизнесу найти барьеры, которые возникают у пользователей и предлагаем идеи для развития продукта. Расскажите нам о вашей задаче через форму на сайте, а наши эксперты подскажут, как ее решить.